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 项目代理设置的优化

    Vue 项目代理设置的优化

    这篇文章主要介绍了Vue 项目代理设置的优化功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

    Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

    突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue使用.sync 实现父子组件的双向绑定数据问题

    Vue使用.sync 实现父子组件的双向绑定数据问题

    这篇文章主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下
    2019-04-04
  • Vue 打包上线后的缓存问题解决

    Vue 打包上线后的缓存问题解决

    在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题,许多开发者会直接在index.html中加入类似以下代码来解决缓存问题,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • Vue3源码解读computed和watch

    Vue3源码解读computed和watch

    这篇文章主要为大家介绍了Vue3中的computed和watch源码解读分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 5个可以加速开发的VueUse函数库(小结)

    5个可以加速开发的VueUse函数库(小结)

    VueUse为Vue开发人员提供了大量适用于Vue2和Vue3的基本Composition API 实用程序函数。具有一定的参考价值,感兴趣的可以了解一下
    2021-11-11
  • 解决ElementUI组件中el-upload上传图片不显示问题

    解决ElementUI组件中el-upload上传图片不显示问题

    这篇文章主要介绍了解决ElementUI组件中el-upload上传图片不显示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue中div contenteditable 的光标定位方法

    Vue中div contenteditable 的光标定位方法

    今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 前端实现pdf预览功能的全过程(基于vue)

    前端实现pdf预览功能的全过程(基于vue)

    这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    本篇文章主要介绍了vue.js组件化开发实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12

最新评论