异常教程

django vue（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 100w+ 字，讲解图 4013+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3700+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发领域，Django 和 Vue.js 是两颗耀眼的明星。Django 是 Python 后端框架的代表，以“快速开发”和“可扩展性”著称；Vue.js 则是前端框架中的佼佼者，凭借简洁的语法和灵活的组件化设计，成为构建现代化前端界面的首选。两者的结合，形成了前后端分离的典型技术栈，既能发挥 Python 的高效性，又能利用 JavaScript 的灵活性，为开发者提供了一种高效、优雅的解决方案。本文将从零开始，逐步解析 Django Vue 技术栈的核心概念、实战案例及优化策略，帮助读者构建出功能完善且体验流畅的 Web 应用。

Django：后端开发的“瑞士军刀”

核心优势与应用场景

Django 是一个基于 MVC（模型-视图-控制器）模式的全栈框架，其核心优势在于：

  1. 快速开发：内置 ORM（对象关系映射）系统，开发者无需直接编写 SQL 语句，即可通过 Python 代码操作数据库；
  2. 安全性：内置防止 SQL 注入、XSS 攻击等安全机制，降低漏洞风险；
  3. 可扩展性：支持丰富的第三方插件（如 Django REST Framework），方便快速集成新功能。

例如，在电商系统中，Django 可以快速搭建商品信息管理、用户认证、订单处理等模块，而无需从零开始编写底层逻辑。

Django REST Framework（DRF）：构建 API 的利器

当与 Vue.js 结合时，Django 需要通过 RESTful API 与前端通信。此时，Django REST Framework（DRF） 是关键工具。它提供了以下核心功能：

  • 序列化器（Serializer）：将数据库模型转换为 JSON 格式，例如将 User 模型转换为 { "id": 1, "username": "admin" }；
  • 视图集（ViewSet）：通过继承 ViewSet 类，可以快速定义增删改查（CRUD）操作；
  • 认证与权限：支持 Token、OAuth 等认证方式，确保 API 的安全性。

代码示例：定义一个简单的 API 端点

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False)

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Todo
        fields = ['id', 'title', 'completed']

from rest_framework import viewsets
from .models import Todo
from .serializers import TodoSerializer

class TodoViewSet(viewsets.ModelViewSet):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

Vue.js：前端开发的“积木系统”

组件化开发：以小见大

Vue.js 的核心理念是组件化开发，将复杂的界面拆解为可复用的小部件，例如按钮、表单、导航栏等。这种设计如同“乐高积木”，开发者可以自由组合这些组件，快速构建复杂界面。

代码示例：创建一个待办事项组件

<template>
  <div class="todo-item">
    <input type="checkbox" v-model="todo.completed">
    <span :class="{ 'completed': todo.completed }">{{ todo.title }}</span>
  </div>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  }
}
</script>

状态管理：Vuex 的“指挥中心”

当应用规模扩大时，组件间的状态传递可能变得复杂。此时，Vuex 作为 Vue 的状态管理库，扮演了“指挥中心”的角色：

  • Store：集中存储全局状态（如用户信息、待办事项列表）；
  • Actions/Mutations：通过分层操作确保状态变更的可追溯性；
  • Getter：提供计算属性，方便对状态进行衍生计算。

代码示例：Vuex 管理待办事项列表

// store.js
const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    ADD_TODO(state, todo) {
      state.todos.push(todo);
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await axios.get('/api/todos/');
      commit('ADD_TODO', response.data);
    }
  }
});

前后端交互实战：以待办事项应用为例

架构设计与分工

假设我们要开发一个简单的待办事项（Todo）应用，其架构如下：
| 模块 | 负责方 | 职责描述 |
|---------------------|-----------------|-----------------------------------|
| 用户界面 | Vue.js | 展示待办事项列表、接收用户操作 |
| API 接口 | Django + DRF | 提供数据增删改查的接口 |
| 数据持久化 | Django | 使用 PostgreSQL 存储数据 |

步骤 1：Django 后端实现 API

  1. 创建模型：如前文的 Todo 模型；
  2. 配置路由：使用 routers.DefaultRouter 自动生成 API 路径：
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TodoViewSet

router = DefaultRouter()
router.register(r'todos', TodoViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]
  1. 运行服务：通过 python manage.py runserver 启动后端，此时访问 http://localhost:8000/api/todos/ 可获取待办事项列表。

步骤 2：Vue.js 前端调用 API

  1. 安装 Axios：用于发送 HTTP 请求：
npm install axios
  1. 实现数据获取：在 Vue 组件中调用后端接口：
<template>
  <div>
    <ul>
      <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue';
import axios from 'axios';

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      todos: []
    };
  },
  async created() {
    const response = await axios.get('/api/todos/');
    this.todos = response.data;
  }
}
</script>

优化与部署：让应用飞起来

性能优化策略

  1. 缓存机制：在 Django 中使用 Cache-Control 头或 Redis 缓存高频 API 请求；
  2. 懒加载：Vue 中通过 v-lazy 指令优化图片加载，减少首屏时间；
  3. 代码分割：利用 Vue CLI 的代码分割功能，按需加载组件。

部署方案：Docker + Nginx

将前后端打包为 Docker 镜像，通过 Nginx 反向代理实现统一入口：

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/vue-app/dist;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://django:8000;
        proxy_set_header Host $host;
    }
}

结论

Django Vue 技术栈通过清晰的分工与协作，为开发者提供了高效、可维护的解决方案。Django 的强大后端能力与 Vue.js 的灵活前端设计相辅相成，既能快速搭建复杂功能，又能保障用户体验的流畅性。随着项目规模的扩大，开发者可通过 Vuex 管理状态、DRF 扩展 API 功能，并结合 Docker 等工具实现一键部署，最终打造出一个既符合业务需求又具备高扩展性的 Web 应用。

希望本文能为读者提供一条清晰的学习路径，无论是初次接触前后端分离，还是希望优化现有技术栈，都能从中找到实用的思路与技巧。

最新发布

查看更多文章