Python
【Flask+VUE】flask+vue开发web网页系统（详细安装使用范例）
【Flask\_VUE】flask+vue开发web网页系统（详细安装使用范例） ✅ 一、项目结构规划 ✅ 二、后端：Flask 搭建 API 服务 1\. 安装 Flask 并创建后端项目 2\. 编写 \app.py\ 3\. 运行后端服务 ✅ 三、前端：Vue 搭建用户界面 1\. 创建 Vue 项目（需要 Node.js 和 npm） 2\. 安装 Axios（用于 HTTP 请求） 3\…
【Flask\_VUE】flask+vue开发web网页系统（详细安装使用范例） ✅ 一、项目结构规划 ✅ 二、后端：Flask 搭建 API 服务 1\. 安装 Flask 并创建后端项目 2\. 编写 \app.py\ 3\. 运行后端服务 ✅ 三、前端：Vue 搭建用户界面 1\. 创建 Vue 项目（需要 Node.js 和 npm） 2\. 安装 Axios（用于 HTTP 请求） 3\…
使用 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 # 配置代理解决跨域
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
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)
cd backend python app.py
访问 http://localhost:5000/api/users 可看到 JSON 数据。
确保已安装 Node.js（建议 v16+），然后：
cd../frontend npm create vue@latest # 选择默认选项即可（或手动启用 Router、Pinia）cd frontend npminstall
npminstall axios
创建 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)}}
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>
编辑 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')
App.vue<!-- src/App.vue --> <template> <div> <router-view /> </div> </template> <script> export default { name: 'App' } </script>
创建 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
cd backend source venv/bin/activate # 激活虚拟环境 python app.py
cd frontend npm run dev
打开浏览器访问：http://localhost:5173
static/ 和 templates/index.html，或者用 Nginx 托管前端，Flask 单独做 API 服务。前端打包：
cd frontend npm run build
生成 dist/ 目录。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online