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

2023-08-09 13:31:04 67

一、前端请求的封装

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方法即可

在这里要注意的是使用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)

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐