vue前端获取django后端数据
在我们构建好后端api,也就相当于把让前端获取的数据准备好了。这个时候需要前端使用axios请求向后端api请求数据。其实这个过程很简单啊,为什么第一次做的时候就做的这么吃力呢???
script
首先我们在想要获得数据的vue组件里的script部分编写获取数据、处理数据的方法,然后将数据返回。返回的数据可以在template部分获取、展示。
<script>
export default {
name: "Banner",
data(){
return{
banner_list : []
}
},
created(){
this.get_banner_list();
},
methods: {
get_banner_list(){
//获取轮播广告
this.$axios.get(`${this.$settings.HOST}/banner`, {}).then(response=>{
console.log(response.data)
this.banner_list = response.data
}).catch(error=>{
console.log(error.response)
})
}
}
}
</script>
因为前面我们已经在main.js中将axios、setting作为vue的property,所以我们能够直接通过this来调用。这里有几个点需要注意:
${}
语法:{}中,javascript会将其认为是变量,在渲染的时候会填充相应的值- axios使用方法得记住
- created(){}是vue的生命周期,有必要了解,起码得熟悉
template
<template>
<el-carousel height="720px" :interval="3000" arrow="always">
<el-carousel-item :key="key" v-for="banner,key in banner_list">
<a :href="banner.link">
<img :src="banner.image_url">
</a>
</el-carousel-item>
</el-carousel>
</template>
在标签中循环script返回的列表,将得到的image_url作为img标签的源链接,得到的link作为a标签的跳转链接。
有这么几个点要注意:
- v-for的使用,有点像python里面的for循环
- vue的属性前的冒号
加冒号的,说明后面的是一个变量或者表达式;
没加冒号的后面就是对应的字符串字面量。
ajax和axios有什么区别呢?
- axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封 装一样。(ajax技术实现了局部数据的刷新,axios实现了对ajax的封装。);
- axios是ajax,ajax不止axios;axios有的ajax都有,ajax有的axios不一 定有。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhibeija
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22