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


Posted in Python onNovember 11, 2019

一、前端请求的封装

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

export default function getUrl(str) {
let url = 'http://localhost:8000/' + str;

return url;
}

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

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

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请求使用

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

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

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

specific: {
   browse: 0,
   content: '',
   title: '',
   date: '',
   tags: []
  }, //文章详情

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

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
    }
   })

  }

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

<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}}</span>/
   <div>{{specific.content}}</div>
   <div class='attention'><i>@</i></div>
   <div class='lable'><i>*</i><a v-for="(tag,index) in specific.tags" :key="index">{{index!=0?',':''}}{{tag}}</a></div>
  </div>
  
 </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
 name: 'specificartical',
 computed: {
 ...mapState({
  specific:state=>state.ArchiveStore.specific,
 })
 },
 methods:{
 ...mapActions([
  'getArticlesSpecific'
 ]), 
 },
 activated:function(){this.getArticlesSpecific(this.$route.params.id);
 }
}
</script>

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

三、后端Get请求使用

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

from blog.views import *

2.注册url

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

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

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

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

#得到文章详情
def getArticleSpecific(request):
 results={}
 #得到标签数组
 temp=list(Article.objects.get(id=request.GET['id']).tag.values_list('name') )
 results['tags']=[]
 #处理标签数组的格式
 for value in temp:
  results['tags'].append(value[0])
 #得到文章详情
 data=Article.objects.annotate(date=TruncDate('create_time')).values('title','content','browse','date').get(id=request.GET['id'])
 results['browse']=data['browse']
 results['title']=data['title']
 results['content']=data['content']
 results['date']=data['date']
 results['status_code']=102
 return JsonResponse(results, safe=False)

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

Python 相关文章推荐
python 示例分享---逻辑推理编程解决八皇后
Jul 20 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
Jan 20 Python
Python正则表达式如何进行字符串替换实例
Dec 28 Python
python安装Scrapy图文教程
Aug 14 Python
python enumerate函数的使用方法总结
Nov 15 Python
python实现换位加密算法的示例
Oct 14 Python
python去掉 unicode 字符串前面的u方法
Oct 21 Python
python print输出延时,让其立刻输出的方法
Jan 07 Python
Django的models中on_delete参数详解
Jul 16 Python
python机器学习库xgboost的使用
Jan 20 Python
Python绘图之二维图与三维图详解
Aug 04 Python
Python项目打包成二进制的方法
Dec 30 Python
如何使用python进行pdf文件分割
Nov 11 #Python
python实发邮件实例详解
Nov 11 #Python
Python 中 -m 的典型用法、原理解析与发展演变
Nov 11 #Python
原来我一直安装 Python 库的姿势都不对呀
Nov 11 #Python
Python帮你识破双11的套路
Nov 11 #Python
如何基于Python批量下载音乐
Nov 11 #Python
Python实现报警信息实时发送至邮箱功能(实例代码)
Nov 11 #Python
You might like
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php提取微信账单的有效信息
2018/10/01 PHP
DOM精简教程
2006/10/03 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
一些mootools的学习资源
2010/02/07 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
浅谈node的事件机制
2017/10/09 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
详解python的四种内置数据结构
2019/03/19 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
文员自我评价怎么写
2013/09/19 职场文书
优秀团员个人的自我评价
2013/10/02 职场文书
学前教育毕业生自荐信
2013/10/29 职场文书
护士岗位职责
2014/02/16 职场文书
树转促学习心得体会
2014/09/10 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
计划生育诚信协议书
2014/11/02 职场文书
全国助残日活动总结
2015/05/11 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python