vue.js django示例

django-admin startproject myproject
cd myproject
django-admin startapp myapp

from django.http import JsonResponse

def hello_world(request):
    return JsonResponse({'message': 'Hello, World!'})

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world, name='hello_world'),
]

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    axios.get('/api/hello/')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};
</script>

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'my-vue-app/dist'),
]

from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

pip install django-cors-headers

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

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

CORS_ORIGIN_ALLOW_ALL = True  # 或者指定允许的域名列表