盐城市城乡建设局网站教育培训栏目,进黑龙江建设网站用哪个浏览器好,百度资源提交,黑马前端学费多少文章目录 准备工作Flask 后端设置Vue3 前端设置跨域问题测试 准备工作 安装开发环境 安装 Python#xff08;推荐 Python 3.8 或更高版本#xff09;。安装 Node.js#xff08;推荐 LTS 版本#xff09;。安装 PyCharm#xff08;用于 Flask 开发#xff09;和 VSCode推荐 Python 3.8 或更高版本。安装 Node.js推荐 LTS 版本。安装 PyCharm用于 Flask 开发和 VSCode用于 Vue3 开发。使用 npm 安装 Vue CLInpm install -g vue/cli。 创建项目 Flask 项目在 PyCharm 中新建一个 Python 项目并创建一个 app.py 文件。Vue3 项目在命令行中运行 vue create vue3-flask-project 创建一个新的 Vue 3 项目。
Flask 后端设置 安装 Flask 和 Flask-CORS 在 Flask 项目中使用 pip 安装 Flask 和 Flask-CORS pip install flask flask-cors编写 Flask 应用 在 app.py 中设置 Flask 应用并启用 CORS from flask import Flask, jsonify
from flask_cors import CORSapp Flask(__name__)
CORS(app, resources{r/*: {origins: *}}, supports_credentialsTrue)app.route(/api/data, methods[GET])
def get_data():return jsonify({message: Hello from Flask!})app.route(/api/login, methods[POST])
def login():# 假设接收 JSON 数据data request.get_json()# 这里可以添加数据库验证等逻辑return jsonify({status: success, user: data.get(username)})if __name__ __main__:app.run(debugTrue)Vue3 前端设置 安装 Axios 在 Vue3 项目中使用 npm 安装 Axios npm install axios配置 Axios 在 Vue 组件中引入 Axios 并配置请求 templatedivh1Vue3 with Flask Demo/h1button clickfetchDataFetch Data/buttonbutton clickloginLogin/buttonp v-ifmessage{{ message }}/p/div
/templatescript setup
import { ref } from vue;
import axios from axios;const message ref();function fetchData() {axios.get(http://localhost:5000/api/data).then(response {message.value response.data.message;}).catch(error {console.error(Error fetching data:, error);});
}function login() {axios.post(http://localhost:5000/api/login, {username: testuser,password: testpass // 注意实际应用中不应明文传输密码}).then(response {message.value Login success: ${response.data.user};}).catch(error {console.error(Error logging in:, error);});
}
/script运行项目 在 PyCharm 中运行 Flask 应用通常会自动打开 http://localhost:5000/。在 VSCode 的 Vue 项目中运行 npm run serve这将启动 Vue 开发服务器通常位于 http://localhost:8080/。
跨域问题
在 Flask 中通过 Flask-CORS 插件已经处理了跨域请求。如果在 Vue 项目中遇到跨域问题可以在 vue.config.js 文件中配置代理如果使用 Vue CLI 3module.exports {devServer: {proxy: {/api: {target: http://localhost:5000,changeOrigin: true,pathRewrite: { ^/api: }}}}
};配置后Vue 中的请求可以简化为 axios.get(/api/data) 而无需指定完整的 URL。
测试
点击 Vue 页面上的 “Fetch Data” 按钮查看是否能从 Flask 后端获取数据并显示。点击 “Login” 按钮查看是否能成功发送 POST 请求并处理返回的数据。
这样你就完成了 Vue3 与 Flask 后端的基本配合设置并能够通过实例看到前后端数据交互的过程。
