1、開發(fā)簡單網(wǎng)頁多個頁面
使用flask框架實現(xiàn)了一個網(wǎng)頁的開發(fā)，還可以傳輸數(shù)據(jù)。但網(wǎng)站肯定是由多個網(wǎng)頁構(gòu)成的，多個網(wǎng)頁之間還要實現(xiàn)相互鏈接訪問。下面我們在上述基礎(chǔ)上增加兩個網(wǎng)頁，來說明多網(wǎng)頁開發(fā)和鏈接的方法。
首先在main.py文件增加多個網(wǎng)頁的路由和調(diào)用函數(shù)：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
msg = "my name is cr!"
return render_template("index.html", data=msg)
@app.route('/news') # 增加一個news頁面
def newspage():
newsContent = "全國上下一心支持武漢，武漢加油！"
return render_template("news.html", data=newsContent)
@app.route('/product') # 增加一個product頁面
def productpage():
return render_template("product.html")
if __name__ == "__main__":
app.run(port=2023, host="127.0.0.1", debug=True)
根據(jù)路由設(shè)定，在templates文件夾下新增兩個網(wǎng)頁文件，news.html和project.html。
news.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>news</title>
</head>
<body>
<p>今日新聞</p>
<p>2020年1月28日0-24時，浙江省報告新型冠狀病毒感染的肺炎新增確診病例123例，新增重癥病例11例，新增出院病例2例。</p>
<hr>
<p style="color:red">{{data}}</p>
</body>
</html>
那如何實現(xiàn)網(wǎng)頁之間的鏈接呢？
比如訪問新聞頁面后想返回首頁或者訪問project頁。我們知道使用a超鏈接可以實現(xiàn)，不過在a超鏈接的href屬性里如何構(gòu)建這種路由呢？
有兩種解決思路，一個是使用url_for函數(shù)，一個是使用路徑方式。
我們來實現(xiàn)一下，在news.html中加入兩個超鏈接代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>news</title>
</head>
<body>
<p>今日新聞</p>
<p>2020年1月28日0-24時，浙江省報告新型冠狀病毒感染的肺炎新增確診病例123例，新增重癥病例11例，新增出院病例2例。</p>
<hr>
<p style="color:red">{{data}}</p>
<p><a href="/ ">回到首頁</a></p> #回首頁超鏈接
<p> <a href="{{ url_for('productpage') }}">去看產(chǎn)品頁</a></p> #產(chǎn)品頁鏈接
</body>
</html>
代碼中url_for函數(shù)給定參數(shù)是路由頁面的函數(shù)名，如本例中的產(chǎn)品頁，main.py函數(shù)中路由為/product，但函數(shù)名為productpage,這里a超鏈接需要給定函數(shù)名即projectpage，<a href="{{ url_for('productpage') }} " 。
回首頁超鏈接直接給/即可，<a href="/">。也可以直接使用路徑方式,如/product，就是尋找main.py文件的product路由名，這也是指向了productpage函數(shù)。
同樣我們在首頁加入導(dǎo)航代碼 , index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>welcome to 2020</title>
</head>
<body>
welcome to my webpage
<ul>
<li><a href="/news">查看新聞</a></li>
<li><a href="/product">查看產(chǎn)品</a></li>
</ul>
<hr>
<p>這是采用render_template模板方法獲得的內(nèi)容:</p>
<br>
{{data}}
</body>
</html>
點擊超鏈接就可以順利訪問其他頁面。這樣就形成了網(wǎng)頁之間的互動。
如果想在超鏈接跳轉(zhuǎn)時攜帶參數(shù)，即使得url變成：http://ip/page1?var=value，這種方式，就需要在服務(wù)器文件中稍加修改。例如在上述首頁中查看產(chǎn)品超鏈接中加入?yún)?shù)傳遞，先將超鏈接修改為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>welcome to 2020</title>
</head>
<body>
welcome to my webpage
<ul>
<li><a href="/news">查看新聞</a></li>
<li><a href="{{ url_for('productpage',a=50) }}">查看產(chǎn)品</a></li> #注意超鏈接帶參數(shù)a傳遞
</ul>
<hr>
<p>這是采用render_template模板方法獲得的內(nèi)容:</p>
<br>
{{data}}
</body>
</html>
因為要跳轉(zhuǎn)到product裝飾器位置，就需要將其修改一下如下：
@app.route('/product/<a>',methods=['GET'])
def productpage(a):
return render_template("product.html",data=a)
此時在product.html中增加一行讀取這個data的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>product</title>
</head>
<body>
傳遞過來的值為{{data}}
<p>庫克表示,他不會就5G方面的未來蘋果產(chǎn)品發(fā)表評論,但表示5G處于“在全球范圍內(nèi)進行部署的早期階段”。蘋果對其現(xiàn)有的iPhone產(chǎn)品線“感到驕傲”</p>
</body>
</html>
