Vue2.0、axios实现前后端数据的交互

1.进入网站下载vue2的资源包和axios的资源包

https://cdn.jsdelivr.net/npm/vue@2
https://unpkg.com/axios/dist/axios.min.js

2.引入资源,将下载好的资源引入你的项目中

<!--引入vue-->
<script src="vueDome/vue@2.js"></script>
<!--引入axios-->
<script src="vueDome/axios.min.js"></script>

3.创建vue环境

<script>
  new Vue({
    el: "挂载对象",
    data(){
      return{
       // 数据域
      }
    },
    methods: {
      //方法区
    },
    created() {
     //回调函数
    }
  });
</script>

 4.创建好vue环境后，就需要向后端传送信息并且获取后端返回的数据，这时就需要使用axios进行交互，axios就是对Ajax的进一步封装，使代码变得更加简洁。axios应用于具体的方法内。

例如，在methods方法区内定义一个查询所有商品的方法：

        /*查询所有商品的方法*/
        queryGoods(){
          /*提交给后端的路径，可带参数*/
          axios.get('query.do?method=selectGoods')
          /*获取后端返回的数据*/
          .then(response=>{
            this.goodsArr= response.data;//获取到数的数据，将他设置到数据区，用于前端页面显示
          })
          .catch(err=>{
            console.log(err);
          })

        }

 --axios.get().then().catch()

 --get()方法用于指定提交给后端Servlet的路径

 --then()方法用于获取后端返回的数据,通过.data获取后端回传的参数

 --catch()方法用于处理请求异常错误的情况

5.回显数据

  在then()方法获取后端数据后需要将数据交给前端，所以要在数据域中定义所需要的数据结构，最后通过前端组件将数据绑定，展示给用户。