一、前言

    前面我们已经完成登录页面的设定，登录后临时调转到“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 pymysqlbp = 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)

五、效果展示