在开发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应用。在实际开发中,还需要注意错误处理、身份验证以及数据安全等方面的问题。





















- 粉丝: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 2019年java面试知识点总结(1).doc
- 浅谈自动化生产线设备功能扩展改造研究.docx
- FX2N-4AD三菱PLC模拟量模块具体技术要求(1).ppt
- 2021国家开放大学电大本科《机械CAD-CAM》期末试题及答案(1).docx
- 软件工程师试用期转正工作总结总结(1).docx
- 会计新手必备:金蝶财务软件操作技巧及快捷键功能汇总-【推荐文章】(1).doc
- 本科毕业设计--基于at89c51单片机lcd显示3点ds18b20温度控制器设计(1).doc
- 企业软件系统升级服务合同(1).docx
- 国家开放大学《VisualBasic程序设计》章节测试参考答案(1).docx
- 武汉纺织大学2021年计算机网络专业大二计算机组成原理期末考试(1).pdf
- 计算机大学生职业生涯规划书范文通用(1).doc
- 信息化手段在技工学校市场营销专业教学中的应用策略(1).docx
- 软件开发合同(样式一)(1).docx
- 本科开题报告—-基于安卓的你画我猜游戏—-毕业论文设计(1).doc
- 浅析在机械工程设计中如何强化CAD技术的高效运用(1).docx
- 谈中职计算机的应用教学策略(1).docx


