vue通过axios获取json数据

• 文章目录

  • 前言

    一、axios的安装

    二.通过axios.get()方法获取json数据

    2.1下面的代码是通过axios.get()获取json数据

    2.2显示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数据，但是今天学到，将学到的方法分享给你们，希望后面我能完成这个电影网站。