结合 Django 和 Vue.js 打造现代 Web 应用

概要

在 Web 开发的世界里，Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称，而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。

本篇文章将详细介绍如何将 Django 与 Vue.js 结合使用，打造一个现代化的 Web 应用。文章会通过一个简单的博客应用案例，展示 Django 如何作为 API 服务端，而 Vue.js 如何用作客户端界面。

环境准备

在我们开始之前，确保您已经安装了 Python、Django、Node.js 和 npm。接下来，我们将分两部分进行：首先设置 Django，然后配置 Vue.js。

第一部分：Django 设置

创建项目

复制代码

django-admin startproject blogbackend
cd blogbackend

创建应用

复制代码

python manage.py startapp blog

定义模型

在 blog/models.py 中，我们定义一个简单的 Post 模型

复制代码

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()

    def __str__(self):
        return self.title

数据库迁移

复制代码

python manage.py makemigrations blog
python manage.py migrate

创建序列化器

安装 Django Rest Framework:

复制代码

pip install djangorestframework

在 settings.py 添加 'rest_framework' 到 INSTALLED_APPS。

创建 blog/serializers.py:

复制代码

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ("id", "title", "content")

创建视图

在 blog/views.py 中：

复制代码

from django.shortcuts import render
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

添加 URL 规则到 blog/urls.py:

复制代码

from django.urls import path
from .views import PostListCreate

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

并在 blogbackend/urls.py 中包含 blog 应的 urls 模块:

复制代码

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

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

现在，我们的 API 已经建立完毕，可以使用 Django Admin 创建一些 Post 博客文章或者使用 API 测试。

第二部分：Vue.js 设置

创建 Vue.js 项目

复制代码

vue create blogfrontend
cd blogfrontend

安装 Vue 资源库

为了与后端通信，我们将使用 axios 库。

复制代码

npm install axios

设置 Vue.js 组件

编辑 src/App.vue:

复制代码

<template>
  <div id="app">
    <h1>博客文章</h1>
    <PostList/>
  </div>
</template>

<script>
import PostList from './components/PostList.vue'

export default {
  name: 'App',
  components: {
    PostList
  }
}
</script>

创建 src/components/PostList.vue:

复制代码

<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    axios.get('http://localhost:8000/api/posts/')
      .then(response => {
        this.posts = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

运行 Vue.js 应用

启动 Vue.js 开发服务器：

复制代码

npm run serve

您现在应该能够访问 http://localhost:8080/，看到从 Django API 加载的文章列表。

总结

通过本文，您已经学会了如何将 Django 设置为强大的后端 API，以及如何使用 Vue.js 创建动态前端。这种前后端分离的架构可以让您的项目更容易扩展、维护并且更好地管理不同的开发团队。