使用django和vue进行数据交互的方法步骤

在开发Web应用时，前后端分离的架构变得越来越普遍，Django作为强大的Python后端框架，Vue则作为轻量级的前端MVVM库，两者结合可以实现高效的数据交互。本篇将详细介绍如何在Django与Vue项目中进行数据交互。 我们需要在前端封装请求。在`src/assets/js`目录下创建`getPath.js`文件，用于存储API的基地址，这样当需要更换服务器或调整接口时，只需要修改一处即可。例如： ```javascript export default function getUrl(str) { let url = 'http://localhost:8000/' + str; return url; } ``` 接着，在同一目录下创建`axios.js`文件，导入axios库并封装Get和Post请求。这个文件中，我们调用getUrl函数获取完整的URL，并添加了一个状态检测函数`stateDetection`用于处理不同状态码的响应： ```javascript import axios from 'axios' import getUrl from './getPath' export default { Get: (config) => { axios({ methods: "get", url: getUrl(config.url), params: config.params }).then((res) => { stateDetection(res); config.callback && config.callback(res); }) }, Post: () => { axios({ methods: "post", url: getUrl(config.url) }).then((res) => { stateDetection(res); config.callback && config.callback(res); }) } } // 状态检测 let stateDetection = (data, callback) => { let status = data.status_code; switch (status) { case 102: break; case 103: alert(data.content); break; case 404: window.location.href = data.url; break; } } ``` 在前端使用Get请求时，例如在Django中获取文章详情，我们需要在`src/store`目录下的`ArchiveStore.js`文件中引入axios模块： ```javascript import axios from '../assets/js/axios' ``` 然后定义一个状态对象，包括文章详情的数据结构： ```javascript specific: { browse: 0, content: '', title: '', date: '', tags: [] }, // 文章详情 ``` 接下来，我们需要创建一个action方法来获取指定文章的详情： ```javascript getArticlesSpecific({ commit, state }, id) { // 得到指定文章详情 axios.Get({ url: 'get_article_specific', params: { id: id }, callback: (res) => { // console.log(res); let data = res.data state.specific = { browse: data['browse'], content: data['content'], title: data['title'], date: data['date'], tags: data['tags'] } state.loading = false; // specific } }) } ``` 在文章详情页面`Specificartical.vue`中调用这个action方法： ```vue <template> <div class="specificartical borderStyle container"> <h1 class='title'>{{ specific.title }}</h1> <div class='content'> <div><span class='annotation'><i></i>{{ specific.date }}</span>/ <span class='annotation'><i></i>{{ specific.browse }} <!-- ...其他内容... --> </div> </div> </template> <script> import { mapActions } from 'vuex' export default { name: 'Specificartical', data() { return { // ... } }, methods: { ...mapActions(['getArticlesSpecific']), mounted() { this.getArticlesSpecific(this.$route.params.id) } } } </script> ``` 在Django后端，你需要创建一个视图处理GET请求，返回文章详情数据。例如，你可以在views.py文件中定义如下视图： ```python from django.http import JsonResponse from .models import Article def get_article_specific(request, id): article = Article.objects.get(id=id) data = { 'browse': article.browse, 'content': article.content, 'title': article.title, 'date': article.pub_date.strftime('%Y-%m-%d'), 'tags': [tag.name for tag in article.tags.all()], } return JsonResponse(data, safe=False) ``` 同时，别忘了在urls.py中为该视图设置路由： ```python from django.urls import path from . import views urlpatterns = [ path('get_article_specific/<int:id>/', views.get_article_specific, name='get_article_specific'), # ... ] ``` 以上就是使用Django和Vue进行数据交互的基本步骤。前端通过axios发送HTTP请求，后端Django接收请求并处理数据，然后返回JSON响应。通过这种方式，你可以轻松地构建出动态的、实时更新的Web应用。在实际开发中，还需要注意错误处理、身份验证以及数据安全等方面的问题。