flask+bootstrap+sklearn从零实现机器学习分类模型的前后端交互网页(一): 介绍、配置及新建项目、helloword

一、项目展示:

        项目目前完成的情况如下，已经实现了交互，主功能已完成，如下图，花了将近10天的时间，想把自己完成的过程一点点记录下，也是从零开始学习flask的过程，知识在于总结和积累。

        入门前端大概一个月，所以界面很简单，基本实现了功能再加一点点美化就达到我心里预期了，包含首页、分类页、提示框和模态框，前端采用bootstrap，后端采用flask，模型用sklearn构建的随机森林模型，数据集采用公开数据集鸢尾花，包含四个特征，分成三类。

二、内容概述:

        我打算写一个尽可能详细的实现过程教程(我希望我可以坚持)，在整理过程中自己也重新实现一次，写这个系列不会一上来就给出全部代码，如果你想一下就获得代码然后匆匆运行下，可能不适合本篇，写这个目的是想一步一步记录我学习和实现的过程和思路，我相信通过我记录的步骤，一定会有所收获。目前第一节主要交代项目背景、用到的技术、开发平台以及新建项目。

三、项目背景:

        研究生做的就是医疗大数据的疾病预测，一直想自己实现一个网页，能够在前端输入参数，后端调用训练好的机器学习模型，实现一个小型的在线自动分类(或者诊断)网页。在网上找了很多博客文章都没有合适的想要的，于是有了自己做这个网页的想法，一开始也没想到能做成，不断试错，目前呈现了一个较为满意的结果，因为bootstrap原生框架的约束，遇到了很多问题，也想记录下，下次不踩坑啦~

四、用到的技术和平台:

• 运行环境: windows10
• 编译平台: vscode 1.61
• 开发: 后端采用python3.8，前端用到html、css、js
• 框架: 后端flask，前端bootstrap5.0
• 数据库: 无
• 机器学习模型: sklearn中构建的随机森林
• 数据集: sklearn自带的鸢尾花数据，包含四个特征以及多分类(3类)
• 需要的基础知识: html/css/js 以及 Python

五、新建项目:

        这一步是在终端新建后在vscode打开，如果其他编译平台，可以用自己的方式新建，本章节跳过了软件的安装环节，如有需要可以参考:python虚拟环境配置_duke的博客-CSDN博客 

5.1 创建目录，激活虚拟环境:

1. 【mkdir onlineJudge】在d盘根目录下新建一个项目，命名为: onlineJudge
2. 【cd onlineJudge】进入项目文件中
3. 【virtualenv venv】自动创建venv文件
4. 【venv\scripts\activate】激活虚拟环境

​

        最后这里可以看到路径前面多了一个 (venv) 就说明虚拟环境构建成功了

5.2 在虚拟环境中安装flask:

1. 【pip install Flask】在虚拟环境中安装flask

​

         整个过程很快

5.3 在vscode中打开项目文件:

1. 通过前几步的操作，可以在D盘中找到创建的项目，并在vscode中打开
2. 进入vscode，选择文件，选择打开文件夹，找到创建的onlineJudge，打开即可
3. 导入后的初始路径和文件如下:

​

        注: 这里需要扩展python依赖，具体可以参考:VSCode编写简单flask文件&配置其虚拟运行环境（Windows）_xw_009的博客-CSDN博客

        但是不知道是不是版本问题，我打开后文件目录结构和博主不完全一样，也没遇到博主记录的各种问题，所以后面按照自己目录来写步骤

5.4 创建并配置launch.json:

•  点击vscode左侧菜单第三个，有小瓢虫的那个(vscode不同版本，顺序可能不同，我用的是1.61)

​

• 替换launch.json文件内容:

{
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Python: Flask (0.11.x or later)",
    "type": "python",
    "request": "launch",
    "stopOnEntry": false,
    "pythonPath": "${workspaceRoot}/.venv/Scripts/python.exe",
    "program": "${workspaceRoot}/main.py",
    "cwd": "${workspaceRoot}",
    "env": {
    "FLASK_APP": "${workspaceRoot}/main.py"
    },
    "args": [
    "run",
    "--no-debugger",
    "--no-reload"
    ],
    "envFile": "${workspaceRoot}/.env",
    "debugOptions": [
    "WaitOnAbnormalExit",
    "WaitOnNormalExit",
    "RedirectOutput"
    ]
    }
    ]
    }

​

• 再点击左侧菜单第一个文件目录，可以看到现在项目的结构有了点变化，出现了setting.json文件

​

        至此，项目已经新建好了，下面写个helloword并运行看看~

六. 用起来: helloword:

6.1 一个简单的helloword:

        1.给项目添加一个入口py文件，控制项目的执行起点: 

【.vscode/myJudge.py】

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == '__main__':
    app.debug = False
    app.run(host='localhost', port=5000)

        2. 在 VS Code 选择 “查看 > 命令面板” 或按下 “Ctrl + Shift + P” 来打开命令面板：输入 Python:Select Interpreter 来选择运行环境：

        3.开始执行项目，选择py文件右键【在终端中运行Python文件】 

         4.等待项目运行，出现一下内容后，复制链接在网页中打开即可:

          http://localhost:5000/

         至此，一个简单的helloword运行就完成啦，但是如果我们需要有点网页之间的跳转，以及不同页面展示，一个py文件是不行的，所以出现了下面6.2中进阶版的helloword~

6.2 进阶的helloword:

        新增以下几个文件，建立的时候存在依赖，因为我是按照倒序的方式，所以要等全部都创建好就不会有报错啦~【注意我的描述中，如果是修改则不用创建直接改就行，如果是创建则一定要按照给出的路径创建，路径都是用中括号包含的部分】

        1.修改入口myJudge.py文件:

【.vscode/myJudge.py】

#从app模板中导入app应用
from app import app
#防止被引用后执行，只有在当前模块中才可以使用
if __name__=='__main__':
    app.run()

        文件中包含python的入口，main函数，从app模块中导入应用

        2.在.vscode中创建一个app文件夹，里面创建启动文件__init__.py，标注了项目需要引入的文件:

【.vscode/app/__init__.py】

#项目初始化
from flask import Flask

#创建app应用,__name__是python预定义变量，被设置为使用本模块.
app = Flask(__name__)

#导入路由文件
from app import routes

             在app文件下创一个初始化文件，包含需要导入的模块和变量，并引入路由文件，这里要注意，路由文件没有写错顺序，就是需要挡在app= Flask(__name__)的后面，不然运行会报错

          3.还是在app文件夹中，创建一个路由文件，可以控制页面之间跳转:

【.vscode/app/routes.py】

#主页路由
#从app模块中即从__init__.py中导入创建的app应用
from app import app
from flask import render_template



#建立路由，通过路由找到覆盖的方法，可以多个路由指向同一个方法
@app.route('/')
@app.route('/index')
def hello():
    user = {'username':'tomato'} 
    return render_template('hello.html',title ='tomato的',user= user)

       路由文件中记录了主页中页面跳转的关系，当前只有一个hello页面，紧接着"/"后的则为着陆页，里面包含一个hello函数，声明了user这个变量，包含username参数，取值为tomato，最后一行return的作用是渲染该路由指定的页面，这里是hello.html，其中网页的标题为title内容，并且把user传到网页中，具体的页面拿到参数后可以进行一些处理和展示。

         4.创建首页文件:

        在app文件夹下新建templates文件夹，专门用于存放html文件，创建index.html，内容如下:

【.vscode/app/templates/index.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ title }} - 自动分类网页</title>
</head>

<body>
    <h1>欢迎来到首页, {{ user.username }} !</h1>

</body>

</html>

        在head的title中，两个花括号包住的部分，是从路由中传过来的参数‘tomato的’，所以可以在这猜想下最后运行后，网页的标题是‘tomato的 - 自动分类网页’

        在body中标题部分，也有两个花括号包住的部分，传参是user.username，回头看routes.py文件，这里是‘tomato’，所以猜想界面中有一段话: 欢迎来到首页，tomato

        5.执行后:

        项目的文件结构以及运行结果如下:

七、总结:

 现在目录结构为:

下一节将结合Bootstrap实现着陆页，主要包括页面背景，巨幕、导航栏、按钮组件，以及创建两个页面: 分类页和模型页

---

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