Mock.js新手教程
in Web with 0 comment

Mock.js新手教程

in Web with 0 comment

说在前面

前后端分离是我们经常说的一件事,有时候后端进度停滞,而前端开发需要一些数据接口做调试时,Mock.js就派上用场了。正如官方网站上说的Mock.js的本质就是拦截ajax,返回你设计(比如随机、模板)的数据
Mock.js
学习一样东西最好的做法是看官方文档,个人感觉官方文档对于新手没讲得那么明白,这里我就想写一个新手教程,也方便日后回顾。

需求场景

根据接口文档,你需要去http://myapi.com 这个接口调数据(暂时不考虑跨域问题),展示在前端页面上。
接口返回的数据是多个json对象

假设是一个商品展示页面,那从接口获得的数据可能有:

起步

静态HTML

首先引入jQuery和Mock.js

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>

在你的script标签中写具体的代码,首先是Mock模拟接口数据,官方参考实例文档提供了几乎所有要用到的类型。

    // 模拟接口
    Mock.mock('http://myapi.com', {
        "products|5-10": [{
            'id': '@integer(1,100)',   //100以内随机整数
            'name': '@cword(1,5)',   //随机的1-5字中文
            'count': '@integer(1,100)',
            'defaultPic': '@image(\'200x200\')',//生成200x200的图片URL,需要转义单引号
            'date': '@date("yyyy-MM-dd")',  //日期
            'price': '@float(60, 100, 2)', //60到100且小数最小位数为2
            'city': '@city(true)'   //中国城市
        }]
    });

接着调用接口api

    //jquery版
    $(document).ready(function(){
        htmlobj=$.ajax({url:"http://myapi.com",async:false});
        console.log(htmlobj.responseText)
    });
    //原生ajax版
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET","http://api.com",true);
        xmlhttp.send();
    }
    loadXMLDoc();

在浏览器的控制台console打开即可看到接口返回的数据
控制台数据

Vue项目

国内惯例npm记得换国内淘宝源
进入你的项目目录下安装Mock.js,
npm install mockjs
我们使用axios来调用接口,一般不使用原生Ajax操作
npm install axios

在package.json的dependencies有看到axios和mock的版本号说明安装成功。
要使用mockjs首先新建一个mock.js文件,我放在src/fakerData/下,然后在其中写入刚刚我们设计的数据

import Mock from 'mockjs'

const mockData = Mock.mock('http://api.com', {
  'products|5-10': [{
    'id': '@integer(1,100)', // 100以内随机整数
    'name': '@cword(1,5)', // 随机的1-5字中文
    'count': '@integer(1,100)',
    'defaultPic': '@image(\'200x200\')', // 生成200x200的图片URL,需要转义单引号
    'date': '@date("yyyy-MM-dd")', // 日期
    'price': '@float(60, 100, 2)', // 60到100且保留2位小数
    'city': '@city(true)'// 中国城市
  }]
})

export default {
  mockData
}

在入口文件main.js中引入该文件,告诉程序我们使用了Mock.js,它的路径在src/fakerData/
require('@/fakerData/mock.js')

并且把axios模块挂到Vue原型上面,这样就可以比较舒服的使用。也是在main.js中添加
Vue.prototype.$axios = axios

在Vue组件中,例如在一个handleMock方法中可以直接调this.$axios使用axios调用接口

    handleMock () {
      this.$axios.get('http://myapi.com')
        .then((response) => {
          console.log(response.data)
        })
        .catch((error) => {
          console.log(error)
        })
    }

同样打开浏览器控制台console可以看到mockjs生成的数据
mockjs生成的数据

参考资料

http://mockjs.com/examples.html
https://segmentfault.com/a/1190000010592626
https://www.kancloud.cn/yunye/axios/234845

Responses