python-56-基于Vue和Flask进行前后端分离的项目开发示例实战
文章目录
- 1 创建Vue前端项目
-
- 1.1 运行demo
- 1.2 实现需求
- 2 flask部署上述dist(前后端未分离)
-
- 2.1 代码app.py
- 2.2 运行访问
- 3 nginx部署(前后端分离)
-
- 3.1 nginx前端服务
-
- 3.3.1 windows安装nginx
- 3.3.2 修改nginx.conf配置文件
- 3.3.3 启动nginx
- 3.3.3 停止nginx
- 3.2 启动后端服务
-
- 3.2.1 app.py(去除前端渲染)
- 3.2.2 启动flask服务
- 4 三种方式对接Vue与Python前后端
-
- 4.1 通过API接口通信
-
- 4.1.1 Python后端创建API接口
- 4.1.2 Vue前端调用API接口
- 4.2 使用WebSocket进行实时通信
-
- 4.2.1 Python后端实现WebSocket
- 4.2.2 Vue前端连接WebSocket
- 4.3 通过静态文件进行简单的数据交换
-
- 4.3.1 Python后端生成静态文件
- 4.3.2 Vue前端读取静态文件
- 5 参考附录
三种方式对接Vue与Python前后端(1)通过API接口通信。(2)使用WebSocket进行实时通信。(3)通过静态文件进行简单的数据交换。
1 创建Vue前端项目
1.1 运行demo
(1)基于node.js，查看node.js的版本，需要更新node.js的版本
下载安装新的nodejs安装包node-v22.14.0-x64.msi。
安装目录D:\Program Files\nodejs\。
CMD>node -v 查看版本 输出v22.14.0
(2)进入指定目录，新建一个Vue项目，名称为demo。
CMD>npm init vue@latest 安装和执行create-vue
create-vue是Vue提供的官方脚手架工具。