如何安装很早就讲过了，这里就省略了

创建虚拟环境

python -m venv ./venv

激活虚拟环境

source venv/Scripts/activate

退出虚拟环境

deactivate

打开一个vue项目，安装一些东西，然后启动

npm run serve
npm install element-plus --save
npm install axios --save

pip3 freeze > requirements.txt
cat requirements.txt
blinker==1.6.2
click==8.1.7
colorama==0.4.6
docx==0.2.4
fire==0.5.0
Flask==3.0.0
fonttools==4.39.3
itsdangerous==2.1.2
Jinja2==3.1.2
lxml==4.9.2
MarkupSafe==2.1.3
mod-wsgi @ file:///C:/Users/wang/Downloads/mod_wsgi-4.9.2-cp310-cp310-win_amd64.whl#sha256=fcb20934ba7e732d9407644f2e40dd73beac04013590ead5e16546a160411684
numpy==1.24.3
opencv-python==4.7.0.72
pdf2docx==0.5.6
Pillow==9.5.0
PyMuPDF==1.22.2
python-docx==0.8.11
six==1.16.0
termcolor==2.3.0
Werkzeug==3.0.0

写了一个简单的flask接口
命名随便命名，python直接启动就可。
企业级别启动会涉及到并发等问题。
可以使用 gunicorn 组件来启动。
详细功能可自己百度 gunicorn 的详细功能。

from flask import Flask,request
from flask import render_template
from flask import jsonifyapp = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  # 禁止中文转义@app.route('/')
def hello_world():return 'Hello World!'@app.route("/user/login", methods=["POST"])
def user_login():"""用户登录:return:"""data = request.get_json()userName = data.get("userName")password = data.get("password")if userName == "admin" and password == "123456":return jsonify({"code": 0,"data": {"token": "666666"}})else:return jsonify({"code": 99999999,"msg": "用户名或密码错误"})@app.route("/user/info", methods=["GET", "POST"])
def user_info():"""获取当前用户信息:return:"""token = request.headers.get("token")if token == "666666":return jsonify({"code": 0,"data": {"id": "1","userName": "admin","realName": "张三","userType": 1}})return jsonify({"code": 99990403,"msg": "token不存在或已过期"})@app.route('/my/blog/<blog_id>')
def blog_detail(blog_id):return 'you doing access {}'.format(blog_id)@app.route('/book/list')
def book_detail():page = request.args.get('page',default=1,type=int)return '你获取的是{}'.format(page)@app.route('/book/index')
def template():return render_template('book.html')if __name__ == '__main__':app.run(host="0.0.0.0",debug=True)
# 增加host="0.0.0.0"
# 提供了局域网IP网文

写了一个简单vue访问界面，使用axios访问。之前讲了VUE的使用，这里就不展开了，只显示了axios界面
更多功能详情自己查看axios的功能，UI设计可以直接套用阿里或其他公司等完善的UI组件，这里就不展开了。

<template><div><p>账号<input type="text" v-model="UserNameA"></p><p>密码<input type="text" v-model="PassWordA"></p><button type="primary" @click="getMsg"> 获取token </button><button @click="consoleLog"> 验证 {{CheckV}} </button><button type="primary" @click="getName">获取名字</button><div>用户名：{{ this.userName }}</div><div>姓名：{{ this.userRealName }}</div></div>
</template><script>
// @ is an alias to /src
import axios from "axios";
export default {data() {return {user: {},token: "null",CheckV: "",userName: "",userRealName: ""};},methods:{getMsg(){console.log(this.UserNameA),console.log(this.PassWordA),this.token = axios.post("/api/user/login",{"userName": this.UserNameA,"password": this.PassWordA},{headers:{},}).then((res) => {if (res.data.code === 0){this.token = res.data.data.token;}})},consoleLog(){console.log(this.token),this.CheckV = "True"},getName(){axios.post("/api/user/info",{},{headers: {token: this.token,},}).then((res) => {if (res.data.code === 0) {this.user = res.data.data;}});this.userName = this.user.userName,this.userRealName = this.user.realName},}
};
</script>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
module.exports = {devServer: {// 设置代理proxy: {"/api": {target: "http://localhost:5000", // 访问数据的计算机域名ws: true, // 是否启用websocketschangOrigin: true, //开启代理,pathRewrite: { // 重写代理规则，/api开头，代理到/'^/api': '/'// 例：/api/user/login代理到// http://localhost:5000/user/login}}}}
};