Mock.js

作者: zchuhyy | 来源:发表于2017-08-16 10:46 被阅读0次

Mock js~

(反正我是在网上看了好多怎么弄的,发现有点乱,各有各的方法,后面自己突然捣鼓好了,发现Mockjs用法并不难,自己的这种使用也很方便快捷)

什么是Mock js

是一种用于先与后端分离关系,在后端没写好数据返回接口的时候,自己通过设置Mock js随机生成自己需要的数据,同时自己可以设置链接进行数据传回使用。等后端开发好接口以后,直接将链接进行覆盖原始链接就好了。

现在讲述Mock.js怎么配置以及使用

在自己搭建的文件夹里面进入命令行输入:npm install mockjs;
然后直接进入到自己需要获取数据的组件里面,比如一个表格组件需要获取20条数据,就进入到table.vue然后

<script>
  import axios from "axios"//引入vue-axios包,当然前提是需要安装组件并且使用
  var Mock=require("mockjs")//引入已经装好的Mockjs包,位置在node_modules/mockjs
  Mock.mock('http://zchuhyy',{
      'user|20-30':[{       //随机生成20~30条的用户数据
          'name':'@cname',
        'age|1-100':100,

        'birthday':'@date("yyyy-MM-dd")',
        'city':'@city(true)'
      }]
  });
  //使用mock语法,对其进行命名链接,并开始对属性进行命名,声明属性规则,以及属性值定义
  axios.get('http://zchuhyy').then(response=>{
      console.log(response.data);//通过axios实现Ajax的数据传输,同时将数据输出到控制台,从而得到了数据
  }).catch(error=>{
      alert(123);
  })
</script>

控制台输出:

语法规则详解见文档;

官方文档

相关文章

网友评论

      本文标题:Mock.js

      本文链接:https://www.haomeiwen.com/subject/cltirxtx.html