【Flask+VUE】flask+vue开发web网页系统（详细安装使用范例）
【Flask_VUE】flask+vue开发web网页系统（详细安装使用范例）
使用 Flask + Vue 开发 Web 网页系统是一种常见的前后端分离架构：Flask 作为后端提供 RESTful API 接口，Vue 作为前端构建单页面应用（SPA）。下面我将为你提供一个 详细的安装与使用范例，包括项目结构、环境搭建、接口通信、跨域处理等关键步骤。
✅ 一、项目结构规划
flask-vue-web-system/ │ ├── backend/ # Flask 后端 │ ├── app.py # 主程序 │ ├── models.py # 数据模型（可选） │ └── requirements.txt # Python依赖 │ └── frontend/ # Vue 前端 ├── public/ ├── src/ │ ├── views/ │ ├── components/ │ ├── services/ # API 请求服务 │ ├── App.vue │ └── main.js ├── package.json └── vue.config.js # 配置代理解决跨域 ✅ 二、后端：Flask 搭建 API 服务
1. 安装 Flask 并创建后端项目
mkdir flask-vue-web-system cd flask-vue-web-system mkdir backend cd backend python -m venv venv source venv/bin/activate # Linux/Mac# 或 venv\Scripts\activate # Windows安装依赖：
pip install flask flask-cors 保存依赖：
pip freeze > requirements.txt 2. 编写 app.py
# backend/app.pyfrom flask import Flask, jsonify, request from flask_cors import CORS # 解决跨域问题 app = Flask(__name__) CORS(app)# 允许前端访问（开发时）# 模拟数据 users =[{"id":1,"name":"Alice","email":"[email protected]"},{"id":2,"name":"Bob","email":"[email protected]"}]# GET /api/users - 获取用户列表@app.route('/api/users', methods=['GET'])defget_users():return jsonify(users)# POST /api/users - 添加新用户@app.route('/api/users', methods=['POST'])defadd_user(): data = request.get_json() new_id =max(u["id"]for u in users)+1if users else1 user ={"id": new_id,"name": data["name"],"email": data["email"]} users.append(user)return jsonify(user),201# 启动入口if __name__ =='__main__': app.run(host='0.0.0.0', port=5000, debug=True)3. 运行后端服务
cd backend python app.py 访问 http://localhost:5000/api/users 可看到 JSON 数据。
✅ 三、前端：Vue 搭建用户界面
1. 创建 Vue 项目（需要 Node.js 和 npm）
确保已安装 Node.js（建议 v16+），然后：
cd../frontend npm create vue@latest # 选择默认选项即可（或手动启用 Router、Pinia）cd frontend npminstall2. 安装 Axios（用于 HTTP 请求）
npminstall axios 3. 创建 API 服务文件
创建 src/services/api.js：
// src/services/api.jsimport axios from'axios'const apiClient = axios.create({baseURL:'http://localhost:5000',// Flask 后端地址headers:{'Content-Type':'application/json'}})exportdefault{getUsers(){return apiClient.get('/api/users')},addUser(user){return apiClient.post('/api/users', user)}}4. 创建用户列表组件（src/views/UserList.vue）
<!-- src/views/UserList.vue --> <template> <div> <h2>用户列表</h2> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} ({{ user.email }}) </li> </ul> <h3>添加用户</h3> <form @submit.prevent="handleSubmit"> <input v-model="name" placeholder="姓名" required /> <input v-model="email" placeholder="邮箱" type="email" required /> <button type="submit">添加</button> </form> </div> </template> <script> import api from '@/services/api' export default { name: 'UserList', data() { return { users: [], name: '', email: '' } }, async created() { try { const response = await api.getUsers() this.users = response.data } catch (error) { console.error('获取用户失败:', error) } }, methods: { async handleSubmit() { try { const response = await api.addUser({ name: this.name, email: this.email }) this.users.push(response.data) this.name = '' this.email = '' } catch (error) { console.error('添加用户失败:', error) } } } } </script> <style scoped> .user-list { max-width: 600px; margin: 2rem auto; padding: 1rem; } input { display: block; width: 100%; margin: 0.5rem 0; padding: 0.5rem; } button { margin-top: 1rem; padding: 0.5rem 1rem; } </style> 5. 配置路由（使用 Vue Router）
编辑 src/router/index.js：
import{ createRouter, createWebHistory }from'vue-router'import UserList from'../views/UserList.vue'const routes =[{path:'/',component: UserList }]const router =createRouter({history:createWebHistory(), routes })exportdefault router 在 src/main.js 中挂载：
import{ createApp }from'vue'import App from'./App.vue'import router from'./router'createApp(App).use(router).mount('#app')6. 修改 App.vue
<!-- src/App.vue --> <template> <div> <router-view /> </div> </template> <script> export default { name: 'App' } </script> 7. （可选）配置代理避免跨域（生产中应由 Nginx 处理）
创建 vue.config.js 在项目根目录（frontend/vue.config.js）：
// frontend/vue.config.js module.exports ={devServer:{proxy:{'/api':{target:'http://localhost:5000',changeOrigin:true,secure:false}}}}修改 api.js 的 baseURL 为相对路径：
baseURL:'/api'// 而不是 http://localhost:5000这样开发时请求 /api/users 会被代理到 http://localhost:5000/api/users
✅ 四、运行项目
启动后端（终端 1）：
cd backend source venv/bin/activate # 激活虚拟环境 python app.py 启动前端（终端 2）：
cd frontend npm run dev 打开浏览器访问：http://localhost:5173
✅ 五、部署建议（生产环境）
- Flask 提供静态文件（可选方案）将 Vue 打包后的文件放入 Flask 的
static/和templates/index.html，或者用 Nginx 托管前端，Flask 单独做 API 服务。 - 使用 Gunicorn + Nginx 部署 Flask
- 使用 Nginx 同时托管前端和反向代理 API
前端打包：
cd frontend npm run build 生成 dist/ 目录。
✅ 总结说明
- Flask 负责提供 JSON 接口，处理业务逻辑和数据库。
- Vue 负责构建交互式前端界面，通过 Axios 调用接口。
- CORS 或 devServer.proxy 解决开发期跨域问题。
- 前后端分离 提高开发效率和维护性。
