vue项目实战（十）：Axios+mock实现简单的前后台数据交互与渲染

一、Axios简介

中文文档
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Features

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

二、基本使用

1-安装与引包

在vscode中打开一个终端，输入

npm install axios

如果此时你在一个项目中（Vue+VsCode输出HelloWorld项目及项目结构解析
），那么你的axios会在这个文件下被下载

在新建文件中，我们需要引入Vue.js与axios.js两个包

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>

此时全局会创建一个axios对象，可以使用以下语句在控制台打印他

   <script type="text/javascript">
   console.log(axios);
  </script>

如果你看到了这个对象，那你就稳了。

2-发出ajax请求并使用mock拦截

（i）使用mock创建模拟数据与拦截列表

mock基础，我们使用mock拦截指向http://localhost:8080/news的get请求，并回馈以下数据，这个列表已经很像数据库传回的json数据了。

      //1: 创建mock对象,绑定需要拦截的url与ajax请求类型
      var data = Mock.mock("http://localhost:8080/news", "get", {
          //2：声明数据对象
          // 属性 list 的值是一个数组，其中含有 10 个元素
          'list|10': [{
              // 属性 id 是一个自增数，起始值为 1，每次增 1
              'id|+1': 1,
              //生成一个名字：随机的字符串@即随机标识符
              'name' : '@string',
              //生成价格属性，值处于100-10000之间
              'price|100-10000': 0,
              //生成库存属性，值处于0-200之间
              'story|0-200':0,
              //生成进货日期，随机的日期值
              'date':'@date',
              //生成一张图片来描述这个商品
              'img':'@image'
          }]
      });

（ii）axios发起ajax请求并拿出json数据

我们使用以下的方式（在这里使用了create函数，一开始就进行渲染，当然也可以把它声明到methods中，作为点击事件），我们访问mock所拦截的端口，拿回应有的数据，并把list内部的json数据传给Vue实例化对象，等待下一步的渲染。

      var vm = new Vue({
        el:"#app",
        data:{
          itemData: [],
          userId : 1
        },
        beforeCreate:function(){
          this.$axios.get("/news")
            .then(res=>{
              let data_ = JSON.stringify(res.data,  null, 4);
              //去除mock对象的数据列表
              this.itemData = res.data.list;
            })
            .catch(err=>{
              console.log(err)
            })
        }
      })

结果：注意这里的then(res=>{一定要有=>，确保了this指针不会偏移，否则你的赋值不能成功。

（iii）利用返回数据进行简单渲染

使用v-for进行简单的渲染

   <div id="app">
     <ol>
       <li v-for="item in itemData">
          <h1>name:{{item.name}},price:{{item.price}}</h1>
          <img :src="item.img">
       </li>
     </ol>
   </div>

虽然很丑，但是原理就是这样。