经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Django » 查看文章
使用django和vue进行数据交互的方法步骤
来源:jb51  时间:2019/11/12 8:29:58  对本文有异议

一、前端请求的封装

1.将请求地址封装起来,以便日后修改,在src/assets/js目录下创建getPath.js文件

  1. export default function getUrl(str) {
  2.   let url = 'http://localhost:8000/' + str;
  3.   return url;
  4. }

2.在同一个目录下创建axios.js文件

我的前端数据交互使用的模块使用的是axios

  1. import axios from 'axios'
  2. import getUrl from './getPath'
  3. export default {
  4. Get: (config) => {
  5. axios({
  6. methods: "get",
  7. url: getUrl(config.url),
  8. params: config.params
  9. }).then((res) => {
  10. stateDetection(res);
  11. config.callback && config.callback(res);
  12. })
  13.  
  14. },
  15. Post: () => {
  16. axios({
  17. methods: "post",
  18. url: getUrl(config.url)
  19. }).then((res) => {
  20. stateDetection(res);
  21. config.callback && config.callback(res);
  22. })
  23. }
  24.  
  25. }
  26. //状态检测
  27. let stateDetection = (data, callback) => {
  28. let status = data.status_code;
  29. switch (status) {
  30. case 102:
  31. break;
  32. case 103:
  33. alert(data.content);
  34. break;
  35. case 404:
  36. window.location.href = data.url;
  37. break;
  38. }
  39. }
  40.  

二、前端Get请求使用

1.在src/store/目录下的ArchiveStore.js文件引入axios模块

  1. import axios from '../assets/js/axios'

2.在src/store/目录下的ArchiveStore.js文件里的state添加文章详情的数据结构

  1. specific: {
  2. browse: 0,
  3. content: '',
  4. title: '',
  5. date: '',
  6. tags: []
  7. }, //文章详情

3.在src/store/目录下的ArchiveStore.js文件里创建一个action方法

  1. getArticlesSpecific({ commit, state }, id) { //得到指定文章详情
  2. axios.Get({
  3. url: 'get_article_specific',
  4. params: {
  5. id: id
  6. },
  7. callback: (res) => {
  8. // console.log(res);
  9. let data = res.data
  10. state.specific = {
  11. browse: data['browse'],
  12. content: data['content'],
  13. title: data['title'],
  14. date: data['date'],
  15. tags: data['tags']
  16. }
  17. state.loading = false;
  18. // specific
  19. }
  20. })
  21.  
  22. }
  23.  

4.在文章详情页面Specificartical.vue(src/components)下执行getArticlesSpecific方法即可

  1. <template>
  2. <div class="specificartical borderStyle container" >
  3. <h1 class='title'>{{specific.title}} </h1>
  4. <div class='content'>
  5. <div><span class='annotation'><i></i>{{specific.date}}</span>/
  6. <span class='annotation'><i></i>{{specific.browse}}</span>/
  7. <div>{{specific.content}}</div>
  8. <div class='attention'><i>@</i></div>
  9. <div class='lable'><i>*</i><a v-for="(tag,index) in specific.tags" :key="index">{{index!=0?',':''}}{{tag}}</a></div>
  10. </div>
  11. </div>
  12. </template>
  13.  
  14. <script>
  15. import {mapState, mapActions} from 'vuex'
  16. export default {
  17. name: 'specificartical',
  18. computed: {
  19. ...mapState({
  20. specific:state=>state.ArchiveStore.specific,
  21. })
  22. },
  23. methods:{
  24. ...mapActions([
  25. 'getArticlesSpecific'
  26. ]),
  27. },
  28. activated:function(){this.getArticlesSpecific(this.$route.params.id);
  29. }
  30. }
  31. </script>

在这里要注意的是使用activated生命周期函数,该函数会在keep-alive,组件被激活时调用

三、后端Get请求使用

1.在urls.py(djangoBlog)文件下面引入views.py里面的方法

  1. from blog.views import *

2.注册url

  1. from blog.views import *
  2. urlpatterns = [
  3. url(r'^get_article_specific/$', getArticleSpecific, name='get_article_specific'),
  4. ]

3.在views.py里面导入需要用到的模块和models

  1. from blog.models import *
  2. from django.http import JsonResponse
  3. from django.db.models.functions import TruncDate

4.在views.py里面添加getArticleSpecific方法

  1. #得到文章详情
  2. def getArticleSpecific(request):
  3. results={}
  4. #得到标签数组
  5. temp=list(Article.objects.get(id=request.GET['id']).tag.values_list('name') )
  6. results['tags']=[]
  7. #处理标签数组的格式
  8. for value in temp:
  9. results['tags'].append(value[0])
  10. #得到文章详情
  11. data=Article.objects.annotate(date=TruncDate('create_time')).values('title','content','browse','date').get(id=request.GET['id'])
  12. results['browse']=data['browse']
  13. results['title']=data['title']
  14. results['content']=data['content']
  15. results['date']=data['date']
  16. results['status_code']=102
  17. return JsonResponse(results, safe=False)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号