Vue.js与Flask/Django后端配合详细讲解

博客主页： 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

1. 安装 Vue CLI:

   npm install -g @vue/cli
   

2. 创建 Vue 项目:

   vue create frontend
   

3. 开发组件:
   在 frontend/src/components 下创建 Vue 组件，使用 axios 进行 API 调用。

4. 设置 Flask

1. 创建 Flask 项目:

   mkdir backend
   cd backend
   python -m venv venv
   source venv/bin/activate  # Linux/Mac
   venv\Scripts\activate     # Windows
   pip install Flask
   

2. 创建 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)
   

3. CORS 设置:
   为了允许 Vue.js 与 Flask 通信，需要安装 flask-cors:

   pip install flask-cors
   

   在 app.py 中添加:

   from flask_cors import CORS
   CORS(app)
   

5. 设置 Django

1. 创建 Django 项目:

   mkdir backend
   cd backend
   python -m venv venv
   source venv/bin/activate
   pip install django djangorestframework
   django-admin startproject myproject .
   

2. 创建 API 应用:

   python manage.py startapp api
   

3. 设置 Django REST Framework:
   在 settings.py 中添加:

   INSTALLED_APPS = [
       ...
       'rest_framework',
       'api',
   ]
   

4. 创建视图:
   在 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!'})
   

5. 设置路由:
   在 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')),
   ]
   

6. CORS 设置:
   安装 django-cors-headers:

   pip install django-cors-headers
   

   在 settings.py 中添加:

   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]
   
   MIDDLEWARE = [
       ...
       'corsheaders.middleware.CorsMiddleware',
   ]
   
   CORS_ALLOW_ALL_ORIGINS = True  # 或者设置具体的白名单
   

6. 连接前后端

1. 在 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/。

2. 启动开发服务器:

   • Flask:

     python app.py
     

   • Django:

     python manage.py runserver
     

   • Vue:

     cd frontend
     npm run serve
     

7. 生产环境配置

1. 构建 Vue 应用:

   npm run build
   

2. 部署 Flask/Django 应用:
   配置 Nginx 或 Apache 作为反向代理，确保它能服务于构建后的 Vue 应用。

3. 静态文件处理:

   • 对于 Flask，可以将构建后的 Vue 文件放在 Flask 的 static 目录。
   • 对于 Django，确保在 settings.py 中配置 STATICFILES_DIRS。

8. 总结

• 前后端分离使得开发和维护变得更高效。
• Vue.js 负责用户界面，Flask/Django 处理后端逻辑和数据交互。
• API 接口的设计和实现是关键，确保正确处理 CORS 和路由。
• 部署时，选择合适的服务器和代理配置，以确保性能和安全性。

这样就形成了一个完整的前后端分离应用，能够快速开发和扩展。

今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文