💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
-
推荐：「stormsha的主页」👈，「stormsha的知识库」👈持续学习，不断总结，共同进步，为了踏实，做好当下事儿~
-
专栏导航
- Python系列: Python面试题合集，剑指大厂
- Git系列: Git操作技巧
- GO系列: 记录博主学习GO语言的笔记，该笔记专栏尽量写的试用所有入门GO语言的初学者
- 数据库系列: 详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
- 运维系列: 总结好用的命令，高效开发
- 算法与数据结构系列: 总结数据结构和算法,不同类型针对性训练,提升编程思维
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
💖The Start💖点点关注，收藏不迷路💖📒文章目录
- 1. 项目结构
- 2. 前端（Vue.js）
- 3. 后端（Flask/Django）
- 4. 前后端通信
- 5. CORS 设置
- 总结
使用Vue.js作为前端框架与Flask或Django作为后端框架的搭配是一个非常流行的技术栈组合。这种组合能够充分利用前端的动态交互和后端的强大数据处理能力。下面是一些关于如何将Vue.js与Flask或Django后端配合的一些建议和步骤：
1. 项目结构
通常情况下，你会将前端和后端分成两个独立的项目文件夹：
frontend/：存放Vue.js项目代码backend/：存放Flask或Django项目代码
2. 前端（Vue.js）
首先，你需要创建一个Vue.js项目。你可以使用Vue CLI来初始化一个新的Vue项目：
npm install -g @vue/cli
vue create frontend
3. 后端（Flask/Django）
接下来，你需要创建一个Flask或Django项目。
Flask：
mkdir backend
cd backend
python -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
pip install flask
创建一个简单的Flask应用：
# backend/app.py
from flask import Flask, jsonifyapp = Flask(__name__)@app.route('/api/data', methods=['GET'])
def get_data():return jsonify({'message': 'Hello from Flask!'})if __name__ == '__main__':app.run(debug=True)
Django：
pip install django
django-admin startproject backend
cd backend
python manage.py startapp api
配置Django项目，并创建一个简单的API视图：
# backend/api/views.py
from django.http import JsonResponsedef get_data(request):return JsonResponse({'message': 'Hello from Django!'})
将视图添加到URLs配置中：
# backend/backend/urls.py
from django.contrib import admin
from django.urls import path
from api.views import get_dataurlpatterns = [path('admin/', admin.site.urls),path('api/data/', get_data),
]
4. 前后端通信
你可以通过axios或fetch在Vue.js中进行HTTP请求，以与后端API进行通信。
安装axios：
npm install axios
在Vue组件中使用axios：
<template><div><h1>{{ message }}</h1></div>
</template><script>
import axios from 'axios';export default {data() {return {message: ''};},mounted() {axios.get('http://127.0.0.1:5000/api/data') // 修改为你的Flask或Django API地址.then(response => {this.message = response.data.message;}).catch(error => {console.error('There was an error!', error);});}
};
</script>
5. CORS 设置
为了允许前端和后端在不同的域上运行，你需要配置CORS（跨域资源共享）。
Flask：
安装Flask-CORS：
pip install flask-cors
修改Flask应用以允许CORS：
from flask_cors import CORSapp = Flask(__name__)
CORS(app)
Django：
安装django-cors-headers：
pip install django-cors-headers
在Django设置中添加CORS配置：
# backend/backend/settings.py
INSTALLED_APPS = [...'corsheaders',...
]MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware',...
]CORS_ALLOW_ALL_ORIGINS = True # 这是一个简单的配置，生产环境中需要进行更严格的控制
总结
通过以上步骤，你可以成功地将Vue.js前端与Flask或Django后端进行组合，实现一个全栈的Web应用。这样可以充分利用前后端各自的优势，构建高效、灵活的Web应用。
🔥🔥🔥道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
| 💖The End💖点点关注，收藏不迷路💖 |