15.搜索功能的實現與頁面倒計時跳轉

DobbyKim 發布于2019-07-30 15:29 / 1141人閱讀

摘要：我們的導航條有搜索輸入框和按鈕，現在我們來完善這部分功能。然后設計一個，其樣式如下不僅在倒計時結束后跳轉回首頁，還增加了一個立即跳轉的按鈕通過實現，其代碼如下提示提示信息未找到相關結果，秒后將自動跳轉回首頁。

我們的導航條有搜索輸入框和按鈕，現在我們來完善這部分功能。首先搜索的邏輯，我們簡單地設定為問題的title或者content包含搜索的關鍵字即可。假設搜索的關鍵字存在變量keyword里，那么獲取所有符合搜索邏輯的question的代碼如下：

result = Questions.query.filter(or_(Questions.title.contains(keyword),
                                    Questions.content.contains(keyword))).order_by(
                                    Questions.create_time.desc()).all()

雖然看著眼花繚亂，但是很容易理解，使用Model.Column.Contains(keyword)與filter結合來篩選指定的Column字段包含keyword的內容，由于我們的邏輯是或的關系，所以使用了一個從sqlalchemy中導出的or_函數。當然我們也完全可以自己寫一個函數去實現同樣的搜索功能，畢竟這部分邏輯很簡單。

搜索功能一般都是用GET方法來傳遞參數的，對應成url為"/search?keyword=XXX"，我們需要處理的是"/search"，編寫一個與之對應的視圖函數，檢索結果我們可以完全使用首頁模板home.html去展示，只是內容不一樣而已：

@app.route("/search")
def search():
    # 獲取GET數據，注意和獲取POST數據的區別
    keyword = request.args.get("keyword")
    result = Questions.query.filter(or_(Questions.title.contains(keyword),
                                    Questions.content.contains(keyword))).order_by(
                                    Questions.create_time.desc()).all()
    if result:
        return render_template("home.html", questions=result)
    else:
        return "Not Found"

base.html中，我們為搜索框添加name="keyword"屬性，對應form表單添加action="{{ url_for("search") }}和method="GET"，如下：

此時搜索功能已經基本實現，如搜索GDP，url變為"http://127.0.0.1:5000/search?keyword=GDP"，結果只有一條如下：

我們再優化一下未找到結果的情況，如之前所說，無搜索結果時頁面顯示提示并通過倒計時返回首頁。頁面的倒計時跳轉，我們可以用js來實現，代碼如下：

function timetojump(second,jumpurl){
    var timer= document.getElementById("timer");
    timer.innerHTML=second;
    if(--second>0){
        setTimeout("timetojump("+second+",""+jumpurl+"")",1000);
        }
    else{
        location.href=jumpurl;
        }
    }

函數timetojump獲取一個id為timer的html元素，將second秒數寫入其內容，秒數如果減1后大于0，則用setTimeout繼續執行timetojump，此時的second已經減1了，這樣就實現了html倒計時的效果，當second等于0時，就執行location.href跳轉到jumpurl，我們將js代碼存在static/javascript/timer.js中。然后設計一個warn.html，其樣式如下：

不僅在倒計時結束后跳轉回首頁，還增加了一個立即跳轉的按鈕(通過onclick="location=url"實現)，其html代碼如下：

{% extends "base.html" %}

{% block static_files %}


{% endblock %}

{% block page_name %}提示{% endblock %}

{% block body_part %}

    提示信息
    
        未找到相關結果，
        5秒后將自動跳轉回首頁。
    
    
        
    


{% endblock %}

search視圖函數結尾的else部分修改為

else:
    return render_template("warn.html")

css代碼如下：

.body-container{
    overflow: hidden;
}

.informs{
    width: 560px;
    margin: 20px;
    padding: 5px;
    border: 1px solid cornflowerblue;
    border-radius: 5px;
    overflow: hidden;
}

span.key-message{
    color: #225599;
}

云服務器 GPU云服務器搜索結果頁面跳轉搜索功能java實現 js實現頁面跳轉 ajax實現頁面跳轉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/41279.html

用Vue搭建一個應用盒子（三）：音樂播放器

摘要：組件結構接著我們就該搭建這個播放器的組件了。總的原理是首先獲取音頻的持續時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標簽，綁定了事件，即播放完成后執行。這個播放器的開發歷時2個多月，并不是說它有多復雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習公司項目太緊。8月底結束實習前寫完了樣式，之后在家空閑...

appetizerio 2019-08-26 11:33 評論0 收藏0
滴滴一下，小程序專車來了

摘要：功能三滴滴費用計算古人云細節決定成敗，一個良好的微信小程序往往就是一些細節打動人心，居然是模仿，雖做不到百分百，至少還是很希望一模一樣。最近時常感嘆道：時間總是那么的快，轉瞬即逝。對于像我這種剛入門的小生來講，技術每天都在更新，框架也層出不窮，有時候還沒弄懂這個知識大牛們又推出了更好的技術。當然學習好的技術也是十分重要的。但是在學習之后怎樣才能夠得到自己想要的呢，一個好的建議便是靜...

SwordFly 2019-08-26 12:00 評論0 收藏0
9.注冊和登錄功能實現（2）—— 注冊與登錄的錯誤提示

摘要：在注冊和登錄功能實現中，我們已經獲取到了頁面過來的登錄或者注冊數據，接下來我們需要與數據庫中的數據做驗證，驗證通過才能登錄或者注冊。在注冊和登錄功能實現（1）中，我們已經獲取到了頁面POST過來的登錄或者注冊數據，接下來我們需要與數據庫中的數據做驗證，驗證通過才能登錄或者注冊。我們平時在登錄網站時，如果輸入的用戶名或者密碼錯誤，有的網站是在登錄框附近提示錯誤，也有的是跳轉到一個頁面提...

duan199226 2019-07-30 15:28 評論0 收藏0
指尖一點歌聲來--微信小程序之仿網易云音樂心得

摘要：為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。查文檔發現，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護了，后者低版本需做兼容處理。目前還有一些功能暫未實現，會在以后繼續完善項目，繼續學習。為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。期間踩過了大把的坑，bug出現的難受和解決bug歡喜，一直是伴隨我階段性學習這個項目的心情。初步完成...

KitorinZero 2019-08-22 11:18 評論0 收藏0