Django+Vue.js实现搜索功能

 更新时间:2024年06月19日 08:29:16   作者:雨宫Code  
本文主要介绍了Django+Vue.js实现搜索功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一.前言

类似这样的搜索功能

二.前端代码

<div class="form-container">
        <div class="form-group">
            <label for="departure-city">出发城市</label>
            <select v-model="departureCity" id="departure-city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <!-- 可以添加更多选项 -->
            </select>
        </div>
        <div class="form-group">
            <label for="destination-city">目的城市</label>
            <select v-model="destinationCity" id="destination-city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <!-- 可以添加更多选项 -->
            </select>
        </div>
        <div class="form-group">
            <label for="departure-date">出发时间</label>
            <input type="text" id="departure-date" v-model="departureDate" placeholder="选择日期">
        </div>
        <div class="form-group">
            <button @click="search" type="button">搜索</button>
        </div>
    </div>

做法非常简单,需要填写或者选择字段的地方,用v-model进行绑定,然后在搜索的地方绑定一个方法。

search() {
                var formData = new FormData();
                formData.append('departureCity', this.departureCity);
                formData.append('destinationCity', this.destinationCity);
                formData.append('departureDate', this.departureDate);
                axios.post('http://127.0.0.1:8000/plane/search/', formData)



后续代码省略

然后我们通过这样的方式传递到后端即可

然后在后端对数据库进行检索

三.后端代码

query = Q()
        if departureCity:
            query &= Q(departureCity=departureCity)
        if destinationCity:
            query &= Q(destinationCity=destinationCity)
        if departureDate:
            query &= Q(departureDate=departureDate)

        # 根据查询条件查询数据库
        flights = Flight.objects.filter(query)

通过这样的方式检索到数据然后返回给前端即可

query &= Q(departureCity=departureCity) 表示如果 departureCity 存在,则将 departureCity 的条件添加到查询中。

到此这篇关于Django+Vue.js实现搜索功能的文章就介绍到这了,更多相关Django Vue.js搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    这篇文章主要介绍了vue安装和使用教程,用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,感兴趣的朋友一起看看吧
    2018-10-10
  • Vue使用jsmind实现生成脑图的示例代码

    Vue使用jsmind实现生成脑图的示例代码

    这篇文章主要为大家详细介绍了Vue如何使用jsmind实现生成脑图,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2024-03-03
  • Vue Form表单的使用方法(rules格式校验网络校验键盘按键监听)

    Vue Form表单的使用方法(rules格式校验网络校验键盘按键监听)

    本文介绍了在Vue.js中使用表单校验规则(rules)进行网络请求校验的方法,以及如何通过formRef引用表单对象并进行键盘按键监听,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • vue-cli-service的参数配置过程

    vue-cli-service的参数配置过程

    这篇文章主要介绍了vue-cli-service的参数配置过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 前端Vue通过Minio返回的URL下载文件实现方法

    前端Vue通过Minio返回的URL下载文件实现方法

    Minio是一个灵活、高性能、开源的对象存储解决方案,适用于各种存储需求,并可以与云计算、容器化、大数据和应用程序集成,这篇文章主要给大家介绍了关于前端Vue通过Minio返回的URL下载文件实现的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue长按事件touch示例详解

    vue长按事件touch示例详解

    这篇文章主要介绍了vue长按事件touch,文末给大家补充介绍了Vue长按触摸事件的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • vue如何自定义组件v-model

    vue如何自定义组件v-model

    这篇文章主要介绍了vue如何自定义组件v-model问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 解决vue-cli webpack打包开启Gzip 报错问题

    解决vue-cli webpack打包开启Gzip 报错问题

    这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue学习笔记五:在vue项目里面使用引入公共方法详解

    vue学习笔记五:在vue项目里面使用引入公共方法详解

    这篇文章主要介绍了在vue项目里面使用引入公共方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue3 可拖动的左右面板分割组件实现

    vue3 可拖动的左右面板分割组件实现

    最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,本文就整理一下,分享给大家,有兴趣的可以学习
    2021-06-06

最新评论