flask框架web网页简单运用

xing2516

已于 2023-11-28 14:30:29 修改

阅读量288

点赞数

分类专栏： flask 文章标签： flask 前端 python

于 2023-07-26 18:48:54 首次发布

本文链接：https://blog.csdn.net/xing2516/article/details/131945577

版权

flask 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!--index2.html -->
<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8">
    <title>第一个网页标题</title>
</head>123<br/>
{{jiangchi}}  <br/> <!--这里获取的是return render_template('index2.html',jiangchi=jiangchi)-->
<a href="/choujiang">随机抽取</a>   <br/> <!--调取choujiang函数接口-->
您抽到了：{{h}}  <!-- choujiang接口返回体中随机数h-->
</body>
</html>

##appweb.py
#通过浏览器访问我们的代码
from flask import Flask,render_template
from random import randint
#抽奖
jiangchi=['电视','冰箱','电脑','书籍红楼梦','电饭煲','书桌']
app=Flask(__name__)
@app.route('/index')
def index():
    #return "hello,访问浏览器网页" #浏览器页面中直接展示
     return render_template('index2.html',jiangchi=jiangchi)#返回一个模板文件：index2.html
@app.route('/choujiang')
def choujiang ():
    num= randint(0,len(jiangchi)-1)#随机生成一个数字
    return render_template('index2.html',jiangchi=jiangchi,h=jiangchi[num])
app.run(debug=True)#本地服务器一直运行，不关闭，方便调试

访问地址：http://127.0.0.1:5000/choujiang
HTML运行页面如下：
123
[‘电视’, ‘冰箱’, ‘电脑’, ‘书籍红楼梦’, ‘电饭煲’, ‘书桌’]
随机抽取
您抽到了：电脑

HTML页面可以优化一下：文字居中加粗

<!--index.html -->
<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8">
        <style>
            .bold-text{
                font-weight: bold;
                text-align: center;
            }
        </style>
        <title>第一个页面</title>
    </head>
    <body>
       <p class="bold-text"> 123大家来抽奖了<br/></p><!-- .bold-text这里 bold-text前面的点.要去掉，不然样式不生效-->
       <p class="bold-text"> {{jiangchi}}<br/></p>
        <p class="bold-text"> <a href="/choujiangAPI">随机抽奖</a></p><br/>
        <p class="bold-text">  你抽到里：{{H}}</p>
    </body>
</html>