您的位置 首页 flask

flask开发简单网站案例-网页跳转

pycharm flaskweb demo : 连接

flask开发简单网站案例

接: pycharm flaskweb demo : 连接    到此为止,我们使用flask框架实现了一个网页的开发,还可以传输数据。但网站肯定是由多个网页构成的,多个网页之间还要实现相互链接访问。下面我们在上述基础上增加两个网页,来说明多网页开发和链接的方法。

1-首先在main.py文件增加多个网页的路由和调用函数:

from flask import  Flask,render_template
app=Flask(__name__)

@app.route('/')
def index():
    msg="my name is caojianhua, China up!"
    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=2020,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>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>news</title>
</head>
<body>
<p>product</p>
<p> 科沃斯 ,chatpod</p>
<hr>
<p style="color:red">{{data}}</p>
</body>
</html>

 

 

接下来重启一下main.py文件,在浏览器地址栏输入: 127.0.0.1:2020/news,即可获得如下页面:

2-网页连接

那如何实现网页之间的链接呢?比如访问新闻页面后想返回首页或者访问project页。我们知道使用a超链接可以实现,不过在a超链接的href属性里如何构建这种路由呢?

有两种解决思路,一个是使用url_for函数,一个是使用路径方式。我们来实现一下,在news.html中加入两个超链接代码:

<p><a href="/ ">回到首页</a></p>   #回首页超链接
<p> <a href="{{ url_for('productpage') }}">去看产品页</a></p>   #产品页链接

 

代码中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>

首页效果如下:

点击超链接就可以顺利访问其他页面。这样就形成了网页之间的互动。

2-flask开发简单网站-网页跳转: :连接

3- flask传递参数(url 携带参数) : 连接

4-flask实现表单数据传输 : 连接

 

欢迎来撩 : 汇总all

白眉大叔

关于白眉大叔linux云计算: 白眉大叔

热门文章