Django+Vue构建前后端分离开发模式

将Django作为后端，Vue作为前端进行前后端分离开发是一个常见的模式。
下面是一个完整的步骤，以构建一个Django和Vue整合的项目。

1. 准备Django后端

安装必要的库

确保你已经安装了Django和Django REST framework：

pip install django djangorestframework

配置Django项目

在 myproject/settings.py 中，添加 rest_framework 到 INSTALLED_APPS：

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

创建一个API端点

在 blog 应用中创建一个API端点。首先，在 blog 应用目录下创建一个 serializers.py 文件，并定义序列化器：

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ['id', 'title', 'content', 'created_at']

然后，在 views.py 中创建一个视图来处理API请求：

from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostListCreate(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

接下来，在 urls.py 中定义API的路由：

from django.urls import path
from .views import PostListCreate

urlpatterns = [
    path('api/posts/', PostListCreate.as_view(), name='post-list-create'),
]

在主项目的 urls.py 文件中包含 blog 应用的URL：

from django.contrib import admin
from django.urls import include, path

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

2. 准备Vue前端

安装Vue CLI

首先，安装Vue CLI（如果尚未安装）：

npm install -g @vue/cli

创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create frontend
cd frontend

安装Axios

在Vue项目中安装Axios，用于与后端API通信：

npm install axios

配置Axios

在 src 目录下创建一个 api 目录，并在其中创建一个 index.js 文件来配置Axios：

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://127.0.0.1:8000/blog/api',
  withCredentials: false,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

export default {
  getPosts() {
    return apiClient.get('/posts/');
  }
}

创建Vue组件

在 src 目录下创建一个 components 目录，并在其中创建一个 PostList.vue 文件：

<template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} - {{ post.created_at }}
      </li>
    </ul>
  </div>
</template>

<script>
import api from '../api'

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    api.getPosts().then(response => {
      this.posts = response.data;
    });
  }
}
</script>

<style>
/* Add some basic styling */
</style>

配置路由

在 src/router/index.js 中添加路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import PostList from '@/components/PostList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PostList',
      component: PostList
    }
  ]
})

3. 启动项目

启动Django后端

确保你的Django开发服务器在运行：

python manage.py runserver

启动Vue前端

在 frontend 目录下启动Vue开发服务器：

npm run serve

4. 访问项目

打开浏览器，访问 http://localhost:8080，你应该会看到从Django后端API获取并显示的博客文章列表。

重点和难点

1. CORS问题：前后端分离的项目中，通常会遇到跨域资源共享(CORS)问题。你需要在Django项目中配置CORS，安装 django-cors-headers 并进行配置。

   pip install django-cors-headers
   

   在 settings.py 中添加：

   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]
   
   MIDDLEWARE = [
       ...
       'corsheaders.middleware.CorsMiddleware',
   ]
   
   CORS_ORIGIN_ALLOW_ALL = True  # 或者配置具体允许的域名
   

2. API端点和前端接口的设计：确保API设计合理，前端接口简单易用。序列化器和视图的设计需要考虑前端需求。

3. 环境配置：在开发和生产环境中，可能需要不同的配置。例如，前端在生产环境中通常会构建为静态文件，放置在Django的静态文件目录中。

通过以上步骤，你可以成功构建一个前后端分离的Django和Vue项目，前端通过API与后端通信，实现完整的功能。