【Flask开发实战】首页模板

news2025/1/18 20:29:54

一、前言

前面我们已经完成登录页面的设定，登录后临时调转到“hello flask”的界面。现在我们根据实际首页的设计需要，来完成首页相关内容的开发。一般系统首页会放一些分析数据，多以图表的方式展示，方便使用者了解信息。以防火墙查询系统为例，此处首页我们测试主要以表格形式，简单展示各个防火墙的规则相关数据，例如防火墙名称、防火墙业务、规则总数量、地址组展开数量、端口组展开数量、规则组展开数量。那么在整体完成首页页面之前，我们需要依次配置好数据库模型、前端模板以及后端代码，之后的其他页面也会经历过相同的操作步骤。

二、数据库模型添加

文件：app/model.py，首先添加FwModel

class FwModel(db.Model):
    __tablename__ = "fullfirewalls"
    id = db.Column(db.BigInteger, primary_key=True, autoincrement=True)
    fwname = db.Column(db.String(200))
    ip = db.Column(db.String(200))
    rulenum = db.Column(db.String(200))
    hostnum = db.Column(db.String(200))
    servnum = db.Column(db.String(200))
    extrulenum = db.Column(db.String(200))

把当前的模型添加到迁移文件中：

flask db migrate

再把迁移文件中对应的数据库操作，真正的映射到数据库中：

flask db upgrade

记得最后在需要使用该数据库的脚本中导入模块：

from models import FwModel

三、首页前端模板

文件：app/templates/index.html

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block body %}
<table class="table table-bordered">
<tr align="center">
    <th>ID</th>
    <th>防火墙名称</th>
    <th>所属业务</th>
    <th>规则数量</th>
    <th>地址组展开数量</th>
    <th>端口组展开数量</th>
    <th>规则展开数量</th>
</tr >
    {% for i in u %}
        <tr align="center">
            <td>{{ i.id }}</td>
            <td>{{ i.fwname }}</td>
            <td>{{ i.ip }}</td>
            <td>{{ i.rulenum }}</td>
            <td>{{ i.hostnum }}</td>
            <td>{{ i.servnum }}</td>
            <td>{{ i.extrulenum }}</td>
        </tr>
{% endfor %}
</table>

{% endblock %}

四、首页后端调用模板

blueprints蓝图目录创建蓝图fw.py，后续页面的后端代码都可在这个文件里编写

文件：app/blueprints/fw.py

from flask import Blueprint, request, render_template, g, redirect, url_for
from models import FwModel
from exts import db
from decorators import login_required
import pymysql


bp = Blueprint("fw", __name__, url_prefix="/")


@bp.route("/")
@login_required
def index():
    u = FwModel.query.all()
    return render_template('index.html',u=u)

主程序app.py中导入并关联新建蓝图fw.py

from blueprints.fw import bp as fw_bp
app.register_blueprint(fw_bp)