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

合集 - Python Web(14)

1.Django应用创建到启动的简单示例2024-05-252.Django中型项目的目录结构和一个应用创建启动示例2024-05-253.Ubungu+Django简单项目创建代码全2024-05-25

4.Django+Vue构建前后端分离开发模式2024-05-25

5.Django和MySQL与Vue项目之间的数据是如何流动实现交互响应的2024-05-266.Django项目中关于静态文件的引用2024-06-277.Django+nginx+静态网站2024-06-308.Django项目中Ajax的应用，博客分类文章阅读，左右栏目自动更新2024-07-159.Ajax代码运行前应该先加载jQuery2024-07-1510.关于css选择器和样式表的应用2024-07-1611.Django项目中使用markdown语法2024-07-1612.关于静态文件目录与模板引用和Nginx location块的适配设置2024-07-1613.html中javascript点击事件后显示或隐藏某些元素时需要点击两次才生效的原因分析和优化2024-07-2914.Flask与Django返回json数据的等价方法2024-09-27

收起

将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与后端通信，实现完整的功能。