Web开发 Flask渲染Html

Sanstye_Long

已于 2024-06-22 12:18:59 修改

阅读量686

点赞数 9

文章标签：前端 flask html

于 2024-06-22 12:09:30 首次发布

本文链接：https://blog.csdn.net/Sanstye_Long/article/details/139877846

版权

在Web开发中Flask是一个流行的Python Web框架，用于构建Web应用程序。如何在Flask中链接HTML页面

1.项目结构设置：
在Flask项目中，通常会有一个称为templates的文件夹，用于存放所有的HTML文件。确保你的HTML文件都放在这个文件夹下。

   project/
   ├── app.py
   ├── templates/
   │   ├── index.html
   │   ├── other_page.html
   │   └── ...
   └── ...

2.在Flask应用中渲染HTML：
在Flask中，你需要使用render_template函数来渲染HTML页面并传递数据到页面中。

from flask import Flask, render_template

app = Flask(__name__)


# 根路由，返回index.html页面
@app.route('/')
def index():
    return render_template('index.html') #根据地址跳转到页面


# 地址栏追加other_page
@app.route('/other_page')
def other_page():
    return render_template('other_page.html')


if __name__ == '__main__':
    app.run(debug=True)

在上面的例子中，当用户访问根路径（'/'）时，Flask将渲染index.html页面。
当访问'/other'路径时，Flask将渲染other_page.html页面。

3.HTML文件编写：
在HTML文件中，你可以像平常一样编写HTML和CSS来构建前端页面。在需要显示动态内容的地方，你可以使用Flask提供的模板语言（Jinja2）来插入数据。

这是index.html作为链接的根目录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>index</p>
</body>
</html>

这是other_page.html,需要在地址栏追加other_page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>other_page</title>
</head>
<body>
<p>other_page页面</p>
</body>
</html>

4.代码实现：

我们需要确保我们创建的文件储存在templates文件夹中,再运行app.py

点击http://127.0.0.1:5000，这是我们的本地主机链接，可以在编辑配置里更改

接下来我们进入下一个页面，在http://127.0.0.1:5000后面追加other_page，后端app会返回对应函数的html文件

5.总结:

在实际项目中，可能需要从数据库或其他地方获取数据，并在HTML中动态展示这些数据。Flask的Jinja2模板语言使得这些操作变得非常方便。
使用Flask链接HTML页面涉及到几个步骤：设置项目结构、在Flask应用中配置路由和渲染模板、以及编写HTML文件来构建前端界面。Flask提供了强大的模板引擎（Jinja2），可以更加灵活和高效地管理和渲染HTML内容。