vue通过axios获取json数据
vue通过axios获取json数据.
·
前言
今天学习了通过axios发送请求来获取json数据,下面分享下axios获取json数据的使用
一、axios的安装
在html中导入下面这行代码即可下载
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
二.通过axios.get()方法获取json数据
2.1下面的代码是通过axios.get()获取json数据
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
//定义一个变量来获取返回的json数据
list:null
},
methods: {
getMovies:function () {
//在axios回调函数内部this是window,不是vue对象
//定义局部变量that代替vue对象
var that=this;
//get("url") url是要请求的地址
axios.get("http://localhost:3205/getMovies").then(function (resp){
//resp是服务器的响应,里面存有json数据
//json的数据存放在resp.data中
that.list=resp.data;
})
}
},
//通过这个方法可以在页面渲染时自动的调用里边的方法
mounted:function (){
this.getMovies();
}
})
json数据
2.2显示json数据
list中存放着json数据,可通过下边的代码进行简单的显示
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
总结
通过axios可以将前端和后端链接起来,之前想要做一个看电影的网站,但是不知道怎么获取json数据,但是今天学到,将学到的方法分享给你们,希望后面我能完成这个电影网站。
更多推荐
已为社区贡献1条内容
所有评论(0)