使用django和vue怎么实现数据交互

使用django和vue怎么实现数据交互？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

一、前端请求的封装

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

exportdefaultfunctiongetUrl(str){
　　leturl='http://localhost:8000/'+str;
　　returnurl;
}

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

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

importaxiosfrom'axios'
importgetUrlfrom'./getPath'
exportdefault{
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);
})
}

}
//状态检测
letstateDetection=(data,callback)=>{
letstatus=data.status_code;
switch(status){
case102:
break;
case103:
alert(data.content);
break;
case404:
window.location.href=data.url;
break;
}
}

二、前端Get请求使用

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

importaxiosfrom'../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);
letdata=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>
<divclass="specificarticalborderStylecontainer">
<h2class='title'>{{specific.title}}</h2>
<divclass='content'>
<div><spanclass='annotation'><i></i>{{specific.date}}</span>/
<spanclass='annotation'><i></i>{{specific.browse}}</span>/
<div>{{specific.content}}</div>
<divclass='attention'><i>@</i></div>
<divclass='lable'><i>*</i><av-for="(tag,index)inspecific.tags":key="index">{{index!=0?',':''}}{{tag}}</a></div>
</div>

</div>
</template>

<script>
import{mapState,mapActions}from'vuex'
exportdefault{
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里面的方法

fromblog.viewsimport*

2.注册url

fromblog.viewsimport*
urlpatterns=[
url(r'^get_article_specific/$',getArticleSpecific,name='get_article_specific'),
]

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

fromblog.modelsimport*
fromdjango.httpimportJsonResponse
fromdjango.db.models.functionsimportTruncDate

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

#得到文章详情
defgetArticleSpecific(request):
results={}
#得到标签数组
temp=list(Article.objects.get(id=request.GET['id']).tag.values_list('name'))
results['tags']=[]
#处理标签数组的格式
forvalueintemp:
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
returnJsonResponse(results,safe=False)

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。