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项目打包成exe可执行文件的实现过程(无瑕疵,完美版)
突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
解决ElementUI组件中el-upload上传图片不显示问题
这篇文章主要介绍了解决ElementUI组件中el-upload上传图片不显示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
Vue中div contenteditable 的光标定位方法
今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08


最新评论