当前位置：首页 > news >正文

flask静态资源与模板页面、模板用户登录案例

news 来源：原创 2025/6/21 12:13:41

案例代码

import flask# template_folder 模板文件夹(静态页面 html页面渲染)
# static_folder 静态资源文件夹主要存放的是类似静态数据、音频、视频、图片等
app = flask.Flask(__name__, static_folder='static', template_folder='template')@app.route('/')
def index():# render_template含义是渲染模板页面(渲染静态html模板页面)return flask.render_template('蜀道难案例.html')if __name__ == '__main__':app.run(debug=True)

对应的static资源与templete模板资源的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>李白诗词</title>
</head>
<body><div id="container" style="text-align: center"><div id="nav"><p>蜀道难</p></div><div id="content"><!--当前页面的上一级目录下的static下的文件夹下的蜀道难--><img src="../static/蜀道难.png" width="80"/><hr style="width: 20%"/><h1>蜀道难</h1><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！</p><p>蚕丛及鱼凫<sup>1</sup>，开国何茫然！</p><p>尔来四万八千岁，不与秦塞通人烟。</p><p>西当太白有鸟道，可以横绝峨眉巅。</p><p>地崩山摧壮士死，然后天梯石栈相钩连。</p><p>上有六龙回日之高标，下有冲波逆折之回川。</p><p>黄鹤之飞尚不得过，猿猱欲度愁攀援。</p><p>青泥何盘盘，百步九折萦岩峦。</p><p>扪参历井仰胁息，以手抚膺坐长叹。</p><p>问君西游何时还？畏途巉岩不可攀。</p><p>但见悲鸟号古木，雄飞雌从绕林间。</p><p>又闻子规<sup>2</sup>啼夜月，愁空山。</p><p>蜀道之难，难于上青天，使人听此凋朱颜！</p><p>连峰去天不盈尺，枯松倒挂倚绝壁。</p><p>飞湍瀑流争喧豗，砯崖转石万壑雷。</p><p>其险也如此，嗟尔远道之人胡为乎来哉！</p><p>剑阁峥嵘而崔嵬，一夫当关，万夫莫开。</p><p>所守或匪亲，化为狼与豺。</p><p>朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。</p><p>锦城虽云乐，不如早还家。</p><p>蜀道之难，难于上青天，侧身西望长咨嗟！</p></div><hr style="width: 20%"/><div><p> 1.鱼凫:捕鱼的水鸟</p><p> 2.子规:杜鹃鸟 </p></div></div>
</body>
</html>

在这里插入图片描述
最终执行结果如下

登录案例代码

import flaskapp = flask.Flask(__name__, template_folder='template', static_folder='static')@app.route('/', methods=['GET', 'POST'])
def index():return flask.render_template('login.html')@app.route('/login', methods=['GET', 'POST'])
def login():user = flask.request.values.get('user', '')pwd = flask.request.values.get('pwd', '')html = f'{user = },{pwd = }'return htmlif __name__ == '__main__':app.run(debug=True)

对应的html的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户登录</title>
</head>
<body><h1>模板用户登录 </h1><form action="/login" name="login_form" method="post"><div>用户:<input type="text" name="user"></div><div>密码:<input type="password" name="pwd"></div><div><input type="submit" value="登录"></div></form>
</body>
</html>