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