从0开始使用flask搭建WEB前端可视化界面-Toy模板网

这篇具有很好参考价值的文章主要介绍了从0开始使用flask搭建WEB前端可视化界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.download一个模板

模板
从0开始使用flask搭建WEB前端可视化界面

将其中的html结尾的文件放入template文件夹，其余的放入static文件夹，再创建一个python文件使用flask，文件结构如下：

2.配置flask python文件

# -*- coding: UTF-8 -*-
from flask import Flask, render_template, request, session, redirect, url_for

class Display():
    
    def __init__(self):
        self.app=Flask(__name__,template_folder="templates")
        self.app.add_url_rule("/", "/index/", methods=["GET","POST"],view_func = self.index)
        self.app.add_url_rule("/index/", methods=["GET","POST"],view_func = self.index)
        self.app.add_url_rule("/login/", methods=["GET","POST"],view_func = self.login)
        
    def login(self):  
        return render_template('login.html')    
    
    def index(self):
        return render_template('index.html')
    
    def run(self):
        self.app.run(host='127.0.0.1',port=5002,debug=True,threaded=True)


if __name__ == '__main__':
    app = Display()
    app.run()

3.移动模板中文件的相对位置

以该文件为例：
我们将所有的html文件放入template文件夹，其他文件夹如js、css、vendor等放入static文件夹（assets直接放入static也可以）

从0开始使用flask搭建WEB前端可视化界面

移动后如下图所示

4.修改html中的原路径

由于上步中移动了文件的位置，于是在html中引用的文件的路径可能发生了改变

从0开始使用flask搭建WEB前端可视化界面
选中并替换所有vendor/ （推荐使用vscode的多光标操作：ctrl+D）
替换后：

将所有assets/替换为static/

5.运行与调试

接下来终端键入命令：启动python文件
并在浏览器访问127.0.0.1:5002(如果没设置端口，默认是5000)
出现了如下报错，说明有的文件路径不对，再次修改一下（本次无报错，下面的图片只是举例）
从0开始使用flask搭建WEB前端可视化界面
文章来源地址https://www.toymoban.com/news/detail-430344.html