Django+Vue.js實現(xiàn)搜索功能

更新時間：2024年06月19日 08:29:16 作者：雨宮Code

本文主要介紹了Django+Vue.js實現(xiàn)搜索功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一.前言

類似這樣的搜索功能

二.前端代碼

<div class="form-container">
        <div class="form-group">
            <label for="departure-city">出發(fā)城市</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">出發(fā)時間</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)



后續(xù)代碼省略

然后我們通過這樣的方式傳遞到后端即可

然后在后端對數(shù)據(jù)庫進行檢索

三.后端代碼

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

        # 根據(jù)查詢條件查詢數(shù)據(jù)庫
        flights = Flight.objects.filter(query)

通過這樣的方式檢索到數(shù)據(jù)然后返回給前端即可

query &= Q(departureCity=departureCity) 表示如果 departureCity 存在，則將 departureCity 的條件添加到查詢中。

到此這篇關于Django+Vue.js實現(xiàn)搜索功能的文章就介紹到這了,更多相關Django Vue.js搜索內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: