Flask 渲染html文件

【确定所需要的路由】

路由系统确定了网页入口对应的视图函数(说白了就是控制用户访问哪个URL我们需要返回什么东西)

【代码修改】

  1. 增加路由/home,更改为调试模式(调试模式会再代码有改动的时候自动刷新服务器)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Hello World"
# 增加了home路由
@app.route("/home")
def home():
    return "Home Page"

#更改成debug模式
if __name__ == "__main__":
    app.run(debug=True)
  • 这时访问http://127.0.0.1:5000/home,则会返回home函数return的字符。

【渲染html而不是返回文字】

返回文字的方式没有太多实际作用,也不美观,那么我们尝试返回渲染的html页面,这才是最常用的方式。

  1. 在项目根目录创建文件夹templates,然后在templates里面新建一个index.html,这时候你的文件目录应该是这样的:
  2. 修改一下代码,引入render_template,更改/路由返回的方式为渲染html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
# 引入render_template
from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
def index():
    # 更改返回方式,渲染index.html
    return render_template("index.html")

@app.route("/home")
def home():
    return "Home Page"

if __name__ == "__main__":
    app.run(debug=True)
  1. index.html添加自己需要的页面代码:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test Flask</title>
</head>
<body>
	<h1>hello Flask</h1>
</body>
</html>
  1. 保存好之后,这时候访问http://127.0.0.1:5000/会发现页面呈现的是渲染好的index.html内容。

下一文章会演示如何向html页面动态渲染内容»