我要评论一.前言
类似这样的搜索功能
二.前端代码
<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搜索内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论