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提供的官方脚手架工具。

你可能感兴趣的:(python3,python,vue.js,flask)