前后端分离实战：Django REST与Vue.js的跨域协同开发

Wang PengWen 2026-08-05 17:51

一、前后端分离开发概述

1.1 什么是前后端分离

前后端分离是一种开发模式，在这种模式下，前端和后端的开发工作可以独立进行。前端负责页面的展示和用户交互，而后端则专注于数据的处理和业务逻辑的实现。两者通过接口进行数据交互，就像两个人分工合作，一个负责把东西做得好看，另一个负责把事情办好，最后通过交流把成果整合起来。

1.2 为什么要前后端分离

前后端分离有很多好处。首先，开发效率更高。前端和后端的开发人员可以同时进行工作，互不干扰。比如一个电商网站，前端人员可以先把商品展示页面的样式做好，后端人员则可以同步开发商品数据的接口。其次，可维护性更强。如果前端页面需要修改样式，不会影响到后端的代码；反之，后端的业务逻辑调整，也不会对前端页面造成太大影响。另外，前后端分离还能提高系统的可扩展性，方便后续添加新的功能。

二、Django REST 框架介绍

2.1 Django 与 Django REST 框架

Django 是一个功能强大的 Python Web 框架，它提供了很多内置的功能，比如数据库管理、用户认证等。而 Django REST 框架则是基于 Django 开发的，专门用于构建 RESTful API 的框架。简单来说，Django 就像一个大工具箱，而 Django REST 框架则是这个工具箱里专门用来打造 API 的工具。

2.2 Django REST 框架的优势

Django REST 框架有很多优点。它提供了丰富的序列化器，可以方便地将数据对象转换为 JSON 格式，便于前端获取和使用。它还支持多种认证方式，如基本认证、Token 认证等，保证 API 的安全性。此外，Django REST 框架的文档生成功能也很实用，能够自动生成 API 文档，方便开发人员查看和调试。

2.3 使用 Django REST 框架创建 API 示例

# 我们先创建一个 Django 项目和应用
# 打开终端，输入以下命令
# 创建 Django 项目
```bash
django-admin startproject myproject
cd myproject

创建 Django 应用

python manage.py startapp myapp

在 myapp 应用的 models.py 中定义一个简单的模型

from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=100)
    # 定义一个书籍模型，包含标题和作者两个字段

    def __str__(self):
        return self.title

在 myapp 应用的 serializers.py 中创建序列化器

from rest_framework import serializers
from .models import Book

class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = '__all__'
# 这个序列化器用于将 Book 模型的对象转换为 JSON 格式

在 myapp 应用的 views.py 中创建视图

from rest_framework import viewsets
from .models import Book
from .serializers import BookSerializer

class BookViewSet(viewsets.ModelViewSet):
    queryset = Book.objects.all()
    serializer_class = BookSerializer
# 这个视图集提供了对 Book 模型的增删改查功能

在 myproject 项目的 urls.py 中配置 URL

from django.contrib import admin
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from myapp.views import BookViewSet

router = DefaultRouter()
router.register(r'books', BookViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
]
# 配置 URL 后，我们可以通过 /api/books/ 访问书籍列表

运行 Django 项目

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

现在我们可以通过浏览器或工具（如 Postman）访问 http://127.0.0.1:8000/api/books/ 查看书籍列表


## 三、Vue.js 介绍
### 3.1 Vue.js 是什么
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心库只关注视图层，非常容易上手。就像搭积木一样，我们可以使用 Vue.js 轻松地构建出各种复杂的前端页面。

### 3.2 Vue.js 的特点
Vue.js 有很多特点。它采用了虚拟 DOM 技术，能够高效地更新页面。虚拟 DOM 就像是一个页面的草稿，先在草稿上进行修改，然后一次性更新到真实的页面上，这样可以减少页面的重绘和回流，提高性能。Vue.js 还支持组件化开发，我们可以把页面拆分成多个小的组件，每个组件负责一个特定的功能，这样代码的复用性更高，维护也更方便。

### 3.3 使用 Vue.js 创建前端页面示例
```javascript
// 先创建一个 Vue 项目
// 打开终端，输入以下命令安装 Vue CLI
```bash
npm install -g @vue/cli

// 创建一个新的 Vue 项目

vue create my-vue-project
cd my-vue-project

// 在 src/components 目录下创建一个新的组件 BookList.vue

<template>
  <div>
    <h1>书籍列表</h1>
    <ul>
      <li v-for="book in books" :key="book.id">{{ book.title }} - {{ book.author }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    // 在组件挂载后获取书籍数据
    fetch('http://127.0.0.1:8000/api/books/')
      .then(response => response.json())
      .then(data => {
        this.books = data;
      });
  }
};
</script>

<style scoped>
/* 样式只作用于当前组件 */
h1 {
  color: blue;
}
</style>

// 在 src/App.vue 中引入并使用 BookList 组件

<template>
  <div id="app">
    <BookList />
  </div>
</template>

<script>
import BookList from './components/BookList.vue';

export default {
  components: {
    BookList
  }
};
</script>

<style>
/* 全局样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// 运行 Vue 项目

npm run serve

// 现在我们可以在浏览器中访问 http://localhost:8080 查看书籍列表


## 四、跨域问题及解决方案
### 4.1 什么是跨域
在浏览器中，出于安全考虑，有同源策略的限制。同源是指协议、域名和端口都相同。如果前端页面和后端 API 的源不同，就会产生跨域问题。比如前端页面的地址是 http://localhost:8080 ，而后端 API 的地址是 http://127.0.0.1:8000 ，这就属于跨域访问，浏览器会阻止这种请求。

### 4.2 跨域问题的解决方案
#### 4.2.1 JSONP
JSONP 是一种跨域数据交互的技术。它的原理是利用了 `<script>` 标签的 src 属性不受同源策略限制的特点。但是 JSONP 只支持 GET 请求，有一定的局限性。

#### 4.2.2 CORS
CORS（跨域资源共享）是一种现代的跨域解决方案。它通过在服务器端设置响应头，告诉浏览器允许跨域访问。在 Django REST 框架中，我们可以使用 `django-cors-headers` 库来实现 CORS。

### 4.3 在 Django 中配置 CORS 示例
```python
# 安装 django-cors-headers
```bash
pip install django-cors-headers

在 myproject 项目的 settings.py 中添加配置

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

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

CORS_ALLOW_ALL_ORIGINS = True
# 允许所有源进行跨域访问，在生产环境中建议设置为具体的源

现在前端页面就可以正常访问后端 API 了


## 五、前后端分离实战应用场景
### 5.1 企业级 Web 应用
对于大型的企业级 Web 应用，前后端分离可以提高开发效率和可维护性。不同的团队可以分别负责前端和后端的开发，并行工作，加快项目的进度。比如一个企业的内部管理系统，前端可以使用 Vue.js 构建美观易用的界面，后端使用 Django REST 框架提供稳定可靠的 API。

### 5.2 移动应用开发
在移动应用开发中，前后端分离也非常有用。前端可以开发原生的移动应用界面，而后端则提供统一的 API 供不同的移动应用调用。这样可以减少后端的开发工作量，提高代码的复用性。例如一个电商的移动应用，无论是 iOS 还是 Android 版本，都可以通过调用后端的 API 获取商品信息。

### 5.3 微服务架构
在微服务架构中，前后端分离可以更好地实现服务的拆分和独立部署。每个微服务可以有自己的后端 API，前端通过调用这些 API 来实现各种功能。这样可以提高系统的可扩展性和容错性。

## 六、技术优缺点分析
### 6.1 Django REST 框架的优缺点
#### 6.1.1 优点
- 基于 Django 框架，功能丰富，有大量的第三方插件可供使用。
- 提供了强大的序列化器和视图集，开发 API 非常方便。
- 支持多种认证方式，保证 API 的安全性。

#### 6.1.2 缺点
- 对于一些小型项目，可能会显得过于重量级，增加了开发的复杂度。
- 性能方面相对一些轻量级的框架可能会稍低。

### 6.2 Vue.js 的优缺点
#### 6.2.1 优点
- 易于上手，学习曲线低，适合初学者。
- 采用虚拟 DOM 和组件化开发，性能高，代码复用性强。
- 生态系统丰富，有大量的插件和工具可供选择。

#### 6.2.2 缺点
- 由于 Vue.js 是一个渐进式框架，对于一些复杂的项目，可能需要额外的配置和学习成本来搭建完整的架构。
- 在大型企业级项目中，可能需要更多的规范和约束来保证代码的可维护性。

### 6.3 前后端分离开发模式的优缺点
#### 6.3.1 优点
- 提高开发效率，前端和后端可以并行开发。
- 增强系统的可维护性和可扩展性。
- 便于代码的复用和团队协作。

#### 6.3.2 缺点
- 增加了开发的复杂度，需要处理跨域等问题。
- 前后端的调试和沟通成本相对较高。

## 七、注意事项
### 7.1 性能优化
在前后端分离开发中，性能优化非常重要。前端可以通过压缩代码、优化图片等方式减少页面加载时间；后端可以通过优化数据库查询、缓存数据等方式提高 API 的响应速度。

### 7.2 安全问题
要注意 API 的安全性，选择合适的认证和授权方式，防止数据泄露和非法访问。同时，前端也需要对用户输入进行验证，防止 SQL 注入、XSS 攻击等安全问题。

### 7.3 版本管理
在前后端分离开发中，前后端的版本管理要协调好。如果前端和后端的 API 版本不兼容，可能会导致功能异常。可以采用版本号控制 API 的版本，保证前后端的兼容性。

## 八、文章总结
通过本文的介绍，我们了解了前后端分离开发的概念和优势，学习了 Django REST 框架和 Vue.js 的基本使用方法，解决了跨域问题，并探讨了前后端分离开发的应用场景、技术优缺点和注意事项。前后端分离开发是一种高效、灵活的开发模式，适合各种规模的项目。在实际开发中，我们可以根据项目的需求选择合适的技术栈，同时注意性能优化和安全问题，以确保项目的顺利进行。

围绕“前后端分离实战：Django REST与Vue.js的跨域协同开发”参与讨论

0 条

前后端分离实战：Django REST与Vue.js的跨域协同开发

一、前后端分离开发概述

1.1 什么是前后端分离

1.2 为什么要前后端分离

二、Django REST 框架介绍

2.1 Django 与 Django REST 框架

2.2 Django REST 框架的优势

2.3 使用 Django REST 框架创建 API 示例

创建 Django 应用

在 myapp 应用的 models.py 中定义一个简单的模型

在 myapp 应用的 serializers.py 中创建序列化器

在 myapp 应用的 views.py 中创建视图

在 myproject 项目的 urls.py 中配置 URL

运行 Django 项目

现在我们可以通过浏览器或工具（如 Postman）访问 http://127.0.0.1:8000/api/books/ 查看书籍列表

在 myproject 项目的 settings.py 中添加配置

现在前端页面就可以正常访问后端 API 了

评论

关联文章

AI助手

一、前后端分离开发概述

1.1 什么是前后端分离

1.2 为什么要前后端分离

二、Django REST 框架介绍

2.1 Django 与 Django REST 框架

2.2 Django REST 框架的优势

2.3 使用 Django REST 框架创建 API 示例

创建 Django 应用

在 myapp 应用的 models.py 中定义一个简单的模型

在 myapp 应用的 serializers.py 中创建序列化器

在 myapp 应用的 views.py 中创建视图

在 myproject 项目的 urls.py 中配置 URL

运行 Django 项目

现在我们可以通过浏览器或工具（如 Postman）访问 http://127.0.0.1:8000/api/books/ 查看书籍列表

在 myproject 项目的 settings.py 中添加配置

现在前端页面就可以正常访问后端 API 了

同分类面试题

关联文章

AI助手