概要
在 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 创建动态前端。这种前后端分离的架构可以让您的项目更容易扩展、维护并且更好地管理不同的开发团队。