Vue.js与Flask/Django后端配合方式

my_project/
├── backend/       # 后端代码目录(Flask 或 Django)
│   ├── app.py     # Flask 应用入口
│   ├── views.py   # Django API views
│   └── ...
├── frontend/      # 前端代码目录(Vue.js 项目)
│   ├── src/
│   ├── public/
│   └── ...
└── README.md      # 项目说明

npm install -g @vue/cli

vue create frontend

cd frontend
npm install axios

<template>
  <div>
    <h1>{{ message }}</h1>
    <ul>
      <li v-for="item in data" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
      data: []
    };
  },
  mounted() {
    axios.get('http://localhost:5000/api/data')
      .then(response => {
        this.message = response.data.message;
        this.data = response.data.data;
      })
      .catch(error => {
        console.error('API Error:', error);
      });
  }
}
</script>

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

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({'message': 'Hello from Flask!', 'data': [1, 2, 3, 4, 5]})

if __name__ == '__main__':
    app.run(debug=True)

python app.py

mkdir backend
cd backend
python -m venv venv
source venv/bin/activate  # Linux/Mac
# venv\Scripts\activate  # Windows
pip install django djangorestframework
django-admin startproject myproject

python manage.py startapp api

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

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

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!', 'data': [1, 2, 3, 4, 5]})

# api/urls.py
from django.urls import path
from .views import DataView

urlpatterns = [
    path('data/', DataView.as_view()),
]

# myproject/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),
]

pip install django-cors-headers

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # 或者设置具体的白名单

python manage.py runserver

npm run build