一、项目展示:
项目目前完成的情况如下，已经实现了交互，主功能已完成，如下图，花了将近10天的时间，想把自己完成的过程一点点记录下，也是从零开始学习flask的过程，知识在于总结和积累。
二、内容概述:
我打算写一个尽可能详细的实现过程教程(我希望我可以坚持)，在整理过程中自己也重新实现一次，写这个系列不会一上来就给出全部代码，如果你想一下就获得代码然后匆匆运行下，可能不适合本篇，写这个目的是想一步一步记录我学习和实现的过程和思路，我相信通过我记录的步骤，一定会有所收获。目前第一节主要交代项目背景、用到的技术、开发平台以及新建项目。
三、项目背景:
研究生做的就是医疗大数据的疾病预测，一直想自己实现一个网页，能够在前端输入参数，后端调用训练好的机器学习模型，实现一个小型的在线自动分类(或者诊断)网页。在网上找了很多博客文章都没有合适的想要的，于是有了自己做这个网页的想法，一开始也没想到能做成，不断试错，目前呈现了一个较为满意的结果，因为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 创建目录，激活虚拟环境:
- 【mkdir onlineJudge】在d盘根目录下新建一个项目，命名为: onlineJudge
- 【cd onlineJudge】进入项目文件中
- 【virtualenv venv】自动创建venv文件
- 【venv\scripts\activate】激活虚拟环境
最后这里可以看到路径前面多了一个 (venv) 就说明虚拟环境构建成功了
5.2 在虚拟环境中安装flask:
- 【pip install Flask】在虚拟环境中安装flask
整个过程很快
5.3 在vscode中打开项目文件:
- 通过前几步的操作，可以在D盘中找到创建的项目，并在vscode中打开
- 进入vscode，选择文件，选择打开文件夹，找到创建的onlineJudge，打开即可
- 导入后的初始路径和文件如下:
注: 这里需要扩展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)
- 在 VS Code 选择 “查看 > 命令面板” 或按下 “Ctrl + Shift + P” 来打开命令面板：输入 Python:Select Interpreter 来选择运行环境：
3.开始执行项目，选择py文件右键【在终端中运行Python文件】
4.等待项目运行，出现一下内容后，复制链接在网页中打开即可:
至此，一个简单的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】
{{ title }} - 自动分类网页
欢迎来到首页, {{ user.username }} !
在head的title中，两个花括号包住的部分，是从路由中传过来的参数’tomato的’，所以可以在这猜想下最后运行后，网页的标题是’tomato的 – 自动分类网页’
在body中标题部分，也有两个花括号包住的部分，传参是user.username，回头看routes.py文件，这里是’tomato’，所以猜想界面中有一段话: 欢迎来到首页，tomato
5.执行后:
项目的文件结构以及运行结果如下:
七、总结:
现在目录结构为:
下一节将结合Bootstrap实现着陆页，主要包括页面背景，巨幕、导航栏、按钮组件，以及创建两个页面: 分类页和模型页
写文章不易，你的点赞评论转发收藏是我前进的动力~
Original: https://blog.csdn.net/HYQHYQ111/article/details/121525637
Author: HYQHYQ111
Title: flask+bootstrap+sklearn从零实现机器学习分类模型的前后端交互网页(一): 介绍、配置及新建项目、helloword
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/746353/
转载文章受原作者版权保护。转载请注明原作者出处！