【Flask+VUE】flask+vue开发web网页系统（详细安装使用范例）

Ne0inhk

— 5 min read
【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 npminstall

2. 安装 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

✅ 五、部署建议（生产环境）

  1. Flask 提供静态文件（可选方案）将 Vue 打包后的文件放入 Flask 的 static/ 和 templates/index.html，或者用 Nginx 托管前端，Flask 单独做 API 服务。
  2. 使用 Gunicorn + Nginx 部署 Flask
  3. 使用 Nginx 同时托管前端和反向代理 API

前端打包：

cd frontend npm run build

生成 dist/ 目录。

✅ 总结说明

  • Flask 负责提供 JSON 接口，处理业务逻辑和数据库。
  • Vue 负责构建交互式前端界面，通过 Axios 调用接口。
  • CORS 或 devServer.proxy 解决开发期跨域问题。
  • 前后端分离 提高开发效率和维护性。
Could not load content