1、开发简单网页多个页面
使用flask框架实现了一个网页的开发，还可以传输数据。但网站肯定是由多个网页构成的，多个网页之间还要实现相互链接访问。下面我们在上述基础上增加两个网页，来说明多网页开发和链接的方法。
首先在main.py文件增加多个网页的路由和调用函数：
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)
根据路由设定，在templates文件夹下新增两个网页文件，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>
那如何实现网页之间的链接呢？
比如访问新闻页面后想返回首页或者访问project页。我们知道使用a超链接可以实现，不过在a超链接的href属性里如何构建这种路由呢？
有两种解决思路，一个是使用url_for函数，一个是使用路径方式。
我们来实现一下，在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') }}">去看产品页</a></p> #产品页链接
</body>
</html>
代码中url_for函数给定参数是路由页面的函数名，如本例中的产品页，main.py函数中路由为/product，但函数名为productpage,这里a超链接需要给定函数名即projectpage，<a href="{{ url_for('productpage') }} " 。
回首页超链接直接给/即可，<a href="/">。也可以直接使用路径方式,如/product，就是寻找main.py文件的product路由名，这也是指向了productpage函数。
同样我们在首页加入导航代码 , 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">查看产品</a></li>
</ul>
<hr>
<p>这是采用render_template模板方法获得的内容:</p>
<br>
{{data}}
</body>
</html>
image.png
点击超链接就可以顺利访问其他页面。这样就形成了网页之间的互动。
如果想在超链接跳转时携带参数，即使得url变成：http://ip/page1?var=value，这种方式，就需要在服务器文件中稍加修改。例如在上述首页中查看产品超链接中加入参数传递，先将超链接修改为：
<!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) }}">查看产品</a></li> #注意超链接带参数a传递
</ul>
<hr>
<p>这是采用render_template模板方法获得的内容:</p>
<br>
{{data}}
</body>
</html>
因为要跳转到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方面的未来苹果产品发表评论,但表示5G处于“在全球范围内进行部署的早期阶段”。苹果对其现有的iPhone产品线“感到骄傲”</p>
</body>
</html>
网友评论