flask+bootstrap+sklearn从零实现机器学习分类模型的前后端交互网页(三): 表单、机器学习模型构建及前后端联动

前情提要:

        在前两篇中已经完成了着陆页和相关路由配置，目前目录结构和界面如下，本章节会接着来写，没完成前两章的可以跳转:

        【https://blog.csdn.net/HYQHYQ111/article/details/121525637?spm=1001.2014.3001.5502】

        【flask+bootstrap+sklearn从零实现机器学习分类模型的前后端交互网页(二): 着陆页的实现--巨幕组件_HYQHYQ111的博客-CSDN博客】

 

(为了便于展示，页面进行了简单缩放) 

一、本章内容概述:

        在本章主要介绍两个部分，一部分是自动分类页面中表单的完成，以及通过表单实现前后端数据的联动，另一部分是完成后端机器学习模型的构建，并通过调用模型将分类结果返回到前端，最终在本章会完成自动分类页面的雏形，为什么说是雏形，因为在下一章将会结合模态框优化分类结果的展示，优化按钮部分(按钮高亮置灰的设置)等，通过本章做出来的页面如下:

二、表单组件是啥:

        这里先简单介绍下什么是表单，可以参考【Bootstrap 表单 | 菜鸟教程】

         form表单使用的方式就是<form role="form">包含整个表单主体，然后每个填写的表单部分用<div class="form-group">包含，bootstrap提供了很多表单类型包含输入框、下拉框、勾选框等等，在这里根据分类特征，暂定为简单的输入框作为表单。

        bootstrap中提供的form中，如果按钮是submit类型的自带判断的功能，如果填入的表单内容为空会有提示，这点我非常喜欢，提示大致如下:

         所以在当前表单设计中，我是很想尽量保留form原始提供的一些特性，并且采用快速原型的开发模式，尽快交付(我自身时间安排的原因)

三、页面设计及实现:

        在本次项目中选取机器学习最经典的示例--鸢尾花，这个公开数据集，作为分类的数据源，该数据包含四个特征: '花萼长度'、'花萼宽度'、'花瓣长度'、'花瓣宽度'，因此在自动分类页面的表单输入也是包括这四个字段，以及两个按钮: 开始分类、查看结果。

3.1 表单配置及定义:

•         首先安装flask-wtf，这是表单的集成模块，配置好之后就可以使用啦

pip install flask-wtf

•         配置一个安全钥匙，为了保证表单提交过来的内容是安全的:

【.vscode/config.py】

# 设定一个安全钥匙

class Config(object):
    #设置密匙要没有规律，别被人轻易猜到哦
    SECRET_KEY = 'a9087FFJFF9nnvc2@#$%FSD'

•         在项目启动入口配置安全钥匙:

【.vscode/app/__init__.py】

#项目初始化
from flask import Flask
#导入配置文件
from config import Config
#导入bootstrap
from flask_bootstrap import Bootstrap

#创建app应用,__name__是python预定义变量，被设置为使用本模块.
app = Flask(__name__)
#初始化Flask_Bootstrap
bootstrap = Bootstrap(app)
#添加配置信息
app.config.from_object(Config)

#导入路由文件
from app import routes

•         新建一个forms.py，用来处理表单信息

【.vscode/app/dataForms.py】

# 处理输入分类数据的信息
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired,InputRequired
# from app.myButton import ButtonInputField

class JudgeForm(FlaskForm):
    #DataRequired，当你在当前表格没有输入而直接到下一个表格时会提示你输入
    helength = StringField('花萼长度:',validators=[InputRequired(message='请输入花萼长度:[0-10]')])
    hewidth = StringField('花萼宽度:',validators=[InputRequired(message='请输入花萼宽度:[0-10]')])
    hblength = StringField('花瓣长度:',validators=[InputRequired(message='请输入花瓣长度:[0-10]')])
    hbwidth = StringField('花瓣宽度:',validators=[InputRequired(message='请输入花瓣宽度:[0-10]')])
    start = SubmitField('开始分类');
    result = SubmitField('查看详情');

3.2 表单输入的设计:

        经过表单的配置和表单的信息处理文件的设置后，需要结合前端实现表单输入，对之前创建的judge.html文件进行修改和补充，加入表单部分:

【.vscode/app/templates/judge.html】更新为:

<!-- 主页模板 继承了基础模板-->
{%extends "base.html"%}

{%block content %}
<div class ='mybkg' onload='' >
    <div class="d-flex justify-content-center login-wrapper">
        <div class="col-sm-8 col-md-6 col-xl-4 p-4 card align-self-center login">
            <div class="card-header text-center bg-transparent">
                <h4 class="mb-0">鸢 尾 花 自 动 分 类</h4>
            </div>
            <hr>
            <div class="card-body">
                <form form class="form-signin" action="" method="post"  id="myForm" >
                    {{ form.hidden_tag() }}
                    <p class="mycolor">
                        {{ form.helength.label }} {{ form.helength(size=32) }}<br>
                        {% for error in form.helength.errors %}
                            <span style="color: red;">[{{ error }}]</span>
                        {% endfor %}
                    </p>
                    <p class ='mycolor'>
                        {{ form.hewidth.label }} {{ form.hewidth(size=32) }}<br>
                        {% for error in form.hewidth.errors %}
                            <span style="color: red;">[{{ error }}]</span>
                        {% endfor %}
                    </p>
                    <p class="mycolor">
                        {{ form.hblength.label }} {{ form.hblength(size=32) }}<br>
                        {% for error in form.hblength.errors %}
                            <span style="color: red;">[{{ error }}]</span>
                        {% endfor %}
                    </p>
                    <p class ='mycolor'>
                        {{ form.hbwidth.label }} {{ form.hbwidth(size=32) }}<br>
                        {% for error in form.hbwidth.errors %}
                            <span style="color: red;">[{{ error }}]</span>
                        {% endfor %}
                    </p>
                    <p class = 'btn-mybg'>
                        {{form.start()}}  {{form.result()}}
                    </p>
                </form> 
            </div>

        </div>
    </div>
</div>

{% endblock %}

 【.vscode/app/templates/base.html】更新为:

{%extends "bootstrap/base.html"%}

{%block title %}{{ title }} - 自动分类网页{% endblock %}

{%block body%}
<style> 
    .mybkg {
        background-image: url(../static/home.jpg);
        background-position: right bottom, left top;
        background-repeat: no-repeat, repeat;
        background-size:100% 100%;
        height: 700px;
    }
    .container {
        height: 100%;
        margin-top:0;
        margin-bottom: 0;
    }
    .mycolor{
        color: rgb(27, 27, 27);
        font-size: 14px;
        font-style:normal;
        text-align: center;
    }

    .mybtcolor{
        color: rgb(15, 15, 15);
        font-size: 14px;
        text-align: center;
    }

    .btn-mybg {
        color: rgb(19, 18, 18);
        border: none;
        text-align: center;
    }

    .btn-mybg:hover {
        color: rgb(20, 20, 20);
    }
    .login-wrapper {
            color:rgb(253, 252, 252);
            width: 50%;
            height: 100vh;
        }

    .login {
        background: rgba(120, 130, 133, 0.822);
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>

{%block navbar %}
...这一块不动
{% endblock %}

    {%block content %}
    {% endblock %}

{% endblock %}

3.3 路由的补充:

        页面已经设计完毕，但是需要前后端联动，路由文件起到很关键的作用，需要首先在路由文件中导入依赖的form包:

【.vscode/app/routes.py】

#导入表格处理方法
from app.dataForms import JudgeForm

然后在judge路由部分修改为以下内容:

@app.route('/judge',methods=['GET','POST'])
def judge():
    user = {'username':'tomato'} 
    form = JudgeForm()
    out = ''
    #验证表格中的数据格式是否正确
    if form.validate_on_submit():
        # 闪现的信息会出现在页面，当然在页面上要设置
        # flash('用户登录的用户名是:{} , 用户登录的密码是:{},是否记住我:{}'.format(
        # form.username.data,form.password.data,form.remember_me.data))
        s1 = form.helength.data
        s2 = form.hewidth.data
        s3 = form.hblength.data
        s4 = form.hbwidth.data
        out = '花萼长度:'+s1+'花萼宽度:'+s2+'花瓣长度:'+s3+'花瓣宽度:'+s4
        print("前端拿到的分类结果: ",out)  
    #首次登录/数据格式错误都会是在登录界面
    return render_template('judge.html',title ='tomato的',user= user,form=form,out = out)

3.4 输出的展示:

        经过以上步骤可以完成的界面如下:

        该页面中也包括了form检验的功能:

 

         在终端中可以看到打印出来的，拿到输入的参数:

         接着修改页面内容，增加一个输出出口，让拿到的输入参数返回到前端，进行简单的展示:

【.vscode/app/templates/judge.html】更新为:

<!-- 主页模板 继承了基础模板-->
{%extends "base.html"%}

{%block content %}
<div class ='mybkg' onload='' >
    <div class="d-flex justify-content-center login-wrapper">
        <div class="col-sm-8 col-md-6 col-xl-4 p-4 card align-self-center login">
            <div class="card-header text-center bg-transparent">
                <h4 class="mb-0">鸢 尾 花 自 动 分 类</h4>
            </div>
            <hr>
            <div class="card-body">
                <form form class="form-signin" action="" method="post"  id="myForm" >
                   ...省略这一段
                </form> 
                {{out}}
            </div>

        </div>
    </div>
</div>

{% endblock %}

         这一段，是在form标签外，增加一个{{out}}，因为在routes.py中已经将out传到页面，但是需要一个展示入口，对于form中定义的组件对象，可以直接采用两个花括号的方式引出。

        最后界面展示为:

        可以看到，已经实现了前端在表单中输入四个特征后，传到后端，后端进行拼接为一个字符串后在前端展示，这个流程已经通了，下面就是需要把后端的拼接过程，转为真实的模型分类，并把分类结果输出。

四、模型构建:

        这里采用机器学习随机森林对鸢尾花数据进行分类，因为算法模型超简单，也不是本次项目的重点，所以一笔带过，如果对构建模型很感兴趣的可以自学python中机器学习部分，这里不做详细讲解，用到的API是sklearn，主要就是分为:模型构建、模型保存以及模型的调用。

4.1模型构建:

待更新(2024.03.03，因为有些变动，所以很久没更新，后续有机会我再补上)

4.2模型保存:

4.3模型调用:

五、前后端联动--初级:

六、遇到的问题和解决:

七、总结:

---

写文章不易，你的点赞评论转发收藏是我前进的动力~