✨博客主页: https://blog.csdn.net/m0_63815035?type=blog
💗《博客内容》:.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识
📢博客专栏: https://blog.csdn.net/m0_63815035/category_11954877.html
📢欢迎点赞 👍 收藏 ⭐留言 📝
📢本文为学习笔记资料,如有侵权,请联系我删除,疏漏之处还请指正🙉
📢大厦之成,非一木之材也;大海之阔,非一流之归也✨
前言
Vue.js 与 Flask 或 Django 的结合可以形成一个强大的前后端分离架构,适合构建现代 web 应用。以下是详细讲解如何将 Vue.js 与 Flask/Django 后端配合使用。
1. 基础架构
- Vue.js: 负责前端,构建用户界面。
- Flask/Django: 负责后端,处理数据存取和业务逻辑。
2. 项目结构
/my_project
/frontend # Vue.js 项目
/backend # Flask 或 Django 项目
3. 设置 Vue.js
安装 Vue CLI:
npm install -g @vue/cli
创建 Vue 项目:
vue create frontend
开发组件:
在frontend/src/components
下创建 Vue 组件,使用axios
进行 API 调用。
4. 设置 Flask
创建 Flask 项目:
mkdir backend cd backend python -m venv venv source venv/bin/activate # Linux/Mac venv\Scripts\activate # Windows pip install Flask
创建 Flask 应用:
在backend
目录下创建app.py
:from flask import Flask, jsonify, request app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): return jsonify({'message': 'Hello from Flask!'}) if __name__ == '__main__': app.run(debug=True)
CORS 设置:
为了允许 Vue.js 与 Flask 通信,需要安装flask-cors
:pip install flask-cors
在
app.py
中添加:from flask_cors import CORS CORS(app)
5. 设置 Django
创建 Django 项目:
mkdir backend cd backend python -m venv venv source venv/bin/activate pip install django djangorestframework django-admin startproject myproject .
创建 API 应用:
python manage.py startapp api
设置 Django REST Framework:
在settings.py
中添加:INSTALLED_APPS = [ ... 'rest_framework', 'api', ]
创建视图:
在api/views.py
中:from rest_framework.views import APIView from rest_framework.response import Response class DataView(APIView): def get(self, request): return Response({'message': 'Hello from Django!'})
设置路由:
在api/urls.py
中:from django.urls import path from .views import DataView urlpatterns = [ path('data/', DataView.as_view()), ]
在
myproject/urls.py
中包含api.urls
:from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('api/', include('api.urls')), ]
CORS 设置:
安装django-cors-headers
:pip install django-cors-headers
在
settings.py
中添加:INSTALLED_APPS = [ ... 'corsheaders', ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ] CORS_ALLOW_ALL_ORIGINS = True # 或者设置具体的白名单
6. 连接前后端
在 Vue.js 中使用 Axios:
安装axios
:npm install axios
在 Vue 组件中调用 API:
<template> <div>{{ message }}</div> </template> <script> import axios from 'axios'; export default { data() { return { message: '' }; }, mounted() { axios.get('http://localhost:5000/api/data') // Flask .then(response => { this.message = response.data.message; }); } }; </script>
对于 Django,URL 更改为
http://localhost:8000/api/data/
。启动开发服务器:
Flask:
python app.py
Django:
python manage.py runserver
Vue:
cd frontend npm run serve
7. 生产环境配置
构建 Vue 应用:
npm run build
部署 Flask/Django 应用:
配置 Nginx 或 Apache 作为反向代理,确保它能服务于构建后的 Vue 应用。静态文件处理:
- 对于 Flask,可以将构建后的 Vue 文件放在 Flask 的
static
目录。 - 对于 Django,确保在
settings.py
中配置STATICFILES_DIRS
。
- 对于 Flask,可以将构建后的 Vue 文件放在 Flask 的
8. 总结
- 前后端分离使得开发和维护变得更高效。
- Vue.js 负责用户界面,Flask/Django 处理后端逻辑和数据交互。
- API 接口的设计和实现是关键,确保正确处理 CORS 和路由。
- 部署时,选择合适的服务器和代理配置,以确保性能和安全性。
这样就形成了一个完整的前后端分离应用,能够快速开发和扩展。
今天这篇文章就到这里了,大厦之成,非一木之材也;大海之阔,非一流之归也。感谢大家观看本文