### Django 和 Vue 构建前后端分离项目的文章添加功能 #### 后端部分 (Django) 为了支持文章添加功能，后端需要提供一个RESTful API接口来接收来自前端的数据。可以利用 `Django REST Framework` 来快速实现这一需求。 1. **模型定义** 需要在应用的 `models.py` 文件中定义一个表示文章的模型类。 ```python from django.db import models class Article(models.Model): title = models.CharField(max_length=200) content = models.TextField() created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) def __str__(self): return self.title ``` 2. **序列化器定义** 创建一个序列化器用来处理数据转换，位于 `serializers.py` 中。 ```python from rest_framework import serializers from .models import Article class ArticleSerializer(serializers.ModelSerializer): class Meta: model = Article fields = '__all__' ``` 3. **视图集定义** 使用基于类的视图或者视图集合来处理请求逻辑，在 `views.py` 定义如下内容。 ```python from rest_framework import viewsets from .models import Article from .serializers import ArticleSerializer class ArticleViewSet(viewsets.ModelViewSet): queryset = Article.objects.all().order_by('-created_at') serializer_class = ArticleSerializer ``` 4. **路由配置** 将API路径映射到对应的视图集中去，在 `urls.py` 进行设置。 ```python from django.urls import path, include from rest_framework.routers import DefaultRouter from articles.views import ArticleViewSet router = DefaultRouter() router.register(r'articles', ArticleViewSet) urlpatterns = [ path('', include(router.urls)), ] ``` 以上步骤完成了后端对于文章管理的基础工作[^1]。 #### 前端部分 (Vue) 在Vue项目中通过HTTP客户端库（如Axios）向后端发送POST请求完成新增操作。 1. **安装 Axios** 如果尚未安装axios，则可以通过npm命令进行安装： ```bash npm install axios --save ``` 2. **组件编写** 编写一个简单的表单提交页面用于输入新文章的信息，并调用后台服务保存这些信息。 ```html <template> <div> <h2>发布新文章</h2> <form @submit.prevent="addArticle"> <label>Title:</label><br/> <input v-model="title"/><br/><br/> <label>Content:</label><br/> <textarea v-model="content"></textarea><br/><br/> <button type="submit">Submit</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { title: '', content: '' }; }, methods: { addArticle() { const articleData = { title: this.title, content: this.content }; axios.post('http://localhost:8000/api/articles/', articleData) .then(response => { console.log('Success:', response); alert('文章已成功发表！'); }) .catch(error => { console.error('Error:', error); alert('发生错误，请稍后再试'); }); } } }; </script> ``` 此代码片段展示了如何创建一个新的Vue组件来进行文章发布的交互过程[^2]。 #### 总结 整个流程从前端收集用户填写的文章标题和正文开始，经由Ajax技术传递至服务器；而后端接收到该请求之后解析参数并将它们存储进数据库之中，最后返回响应给前端告知其执行状态。