資訊專欄INFORMATION COLUMN
摘要：我們的導(dǎo)航條有搜索輸入框和按鈕，現(xiàn)在我們來完善這部分功能。然后設(shè)計一個，其樣式如下不僅在倒計時結(jié)束后跳轉(zhuǎn)回首頁，還增加了一個立即跳轉(zhuǎn)的按鈕通過實現(xiàn)，其代碼如下提示提示信息未找到相關(guān)結(jié)果，秒后將自動跳轉(zhuǎn)回首頁。
我們的導(dǎo)航條有搜索輸入框和按鈕，現(xiàn)在我們來完善這部分功能。首先搜索的邏輯，我們簡單地設(shè)定為問題的title或者content包含搜索的關(guān)鍵字即可。假設(shè)搜索的關(guān)鍵字存在變量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結(jié)合來篩選指定的Column字段包含keyword的內(nèi)容，由于我們的邏輯是或的關(guān)系，所以使用了一個從sqlalchemy中導(dǎo)出的or_函數(shù)。當(dāng)然我們也完全可以自己寫一個函數(shù)去實現(xiàn)同樣的搜索功能，畢竟這部分邏輯很簡單。
搜索功能一般都是用GET方法來傳遞參數(shù)的，對應(yīng)成url為"/search?keyword=XXX"，我們需要處理的是"/search"，編寫一個與之對應(yīng)的視圖函數(shù)，檢索結(jié)果我們可以完全使用首頁模板home.html去展示，只是內(nèi)容不一樣而已：
@app.route("/search")
def search():
# 獲取GET數(shù)據(jù)，注意和獲取POST數(shù)據(jù)的區(qū)別
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中，我們?yōu)樗阉骺蛱砑?b>name="keyword"屬性，對應(yīng)form表單添加action="{{ url_for("search") }}和method="GET"，如下：
此時搜索功能已經(jīng)基本實現(xiàn)，如搜索GDP，url變?yōu)?b>"http://127.0.0.1:5000/search?keyword=GDP"，結(jié)果只有一條如下：
我們再優(yōu)化一下未找到結(jié)果的情況，如之前所說，無搜索結(jié)果時頁面顯示提示并通過倒計時返回首頁。頁面的倒計時跳轉(zhuǎn)，我們可以用js來實現(xiàn)，代碼如下：
function timetojump(second,jumpurl){
var timer= document.getElementById("timer");
timer.innerHTML=second;
if(--second>0){
setTimeout("timetojump("+second+",""+jumpurl+"")",1000);
}
else{
location.href=jumpurl;
}
}
函數(shù)timetojump獲取一個id為timer的html元素，將second秒數(shù)寫入其內(nèi)容，秒數(shù)如果減1后大于0，則用setTimeout繼續(xù)執(zhí)行timetojump，此時的second已經(jīng)減1了，這樣就實現(xiàn)了html倒計時的效果，當(dāng)second等于0時，就執(zhí)行location.href跳轉(zhuǎn)到jumpurl，我們將js代碼存在static/javascript/timer.js中。然后設(shè)計一個warn.html，其樣式如下：
不僅在倒計時結(jié)束后跳轉(zhuǎn)回首頁，還增加了一個立即跳轉(zhuǎn)的按鈕(通過onclick="location=url"實現(xiàn))，其html代碼如下：
{% extends "base.html" %}
{% block static_files %}
{% endblock %}
{% block page_name %}提示{% endblock %}
{% block body_part %}
提示信息
，
5秒后將自動跳轉(zhuǎn)回首頁。
{% endblock %}
search視圖函數(shù)結(jié)尾的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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/41279.html
摘要：組件結(jié)構(gòu)接著我們就該搭建這個播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。 這個播放器的開發(fā)歷時2個多月，并不是說它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習(xí)公司項目太緊。8月底結(jié)束實習(xí)前寫完了樣式，之后在家空閑...
摘要：功能三滴滴費用計算古人云細(xì)節(jié)決定成敗，一個良好的微信小程序往往就是一些細(xì)節(jié)打動人心，居然是模仿，雖做不到百分百，至少還是很希望一模一樣。 最近時常感嘆道：時間總是那么的快，轉(zhuǎn)瞬即逝。對于像我這種剛?cè)腴T的小生來講，技術(shù)每天都在更新，框架也層出不窮，有時候還沒弄懂這個知識大牛們又推出了更好的技術(shù)。當(dāng)然學(xué)習(xí)好的技術(shù)也是十分重要的。但是在學(xué)習(xí)之后怎樣才能夠得到自己想要的呢，一個好的建議便是靜...
摘要：在注冊和登錄功能實現(xiàn)中，我們已經(jīng)獲取到了頁面過來的登錄或者注冊數(shù)據(jù)，接下來我們需要與數(shù)據(jù)庫中的數(shù)據(jù)做驗證，驗證通過才能登錄或者注冊。 在注冊和登錄功能實現(xiàn)（1）中，我們已經(jīng)獲取到了頁面POST過來的登錄或者注冊數(shù)據(jù)，接下來我們需要與數(shù)據(jù)庫中的數(shù)據(jù)做驗證，驗證通過才能登錄或者注冊。我們平時在登錄網(wǎng)站時，如果輸入的用戶名或者密碼錯誤，有的網(wǎng)站是在登錄框附近提示錯誤，也有的是跳轉(zhuǎn)到一個頁面提...
摘要：為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。查文檔發(fā)現(xiàn)，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護(hù)了，后者低版本需做兼容處理。目前還有一些功能暫未實現(xiàn)，會在以后繼續(xù)完善項目，繼續(xù)學(xué)習(xí)。 為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。期間踩過了大把的坑，bug出現(xiàn)的難受和解決bug歡喜，一直是伴隨我階段性學(xué)習(xí)這個項目的心情。初步完成...
閱讀 3080·2021-09-28 09:43
閱讀 911·2021-09-08 09:35
閱讀 1450·2019-08-30 15:56
閱讀 1196·2019-08-30 13:00
閱讀 2742·2019-08-29 18:35
閱讀 1837·2019-08-29 14:07
閱讀 3443·2019-08-29 13:13
閱讀 1339·2019-08-29 12:40
