在Server端,可以用Mock来模拟前端的请求,从而在没有前端联调的情况下进行单元测试;同样地,在前端,可以用Mock来拦截前端请求,并返回模拟数据,从而在没有Server端联调的情况下进行单元测试。

在Vue中使用Mock

一.安装Mock库

运行命令:

npm install mockjs

二.编写Mock的拦截接口脚本

Mock需要使用js文件来定义所有需要拦截的脚本及返回数据。

在src下新建一个文件夹,命名为mock。在其下创建一个js文件,命名为mock.js。

为mock.js添加内容:

// 引入mockjs
import Mock from 'mockjs';

const url = '/test/getInfo';
Mock.mock(RegExp(url + ".*"), 'get', {
    title: 'this is a test',
    value: 20181105
});
export default Mock;

可以看到该脚本做了一个事情:为Mock对象添加了一个get请求拦截,并设置了请求的url和返回值。当Mock检测到该请求时,就会进行拦截,并返回指定的返回值。

注意传入的url使用了正则表达式:RegExp(url + ".*")。这是因为Mock是严格按字符串匹配的。若这里直接传入一个字符串:'http://localhost/test/getInfo',当为get请求附加不同的参数,Mock就会匹配不到。

一个js文件中可以mock多个请求。也可以将请求分类,放在多个js文件中。

js文件可以放在任意位置。上面放在了src/mock文件夹下。只要后面引入的时候路径正确即可。

三.将Mock引入Vue中

在主入口的js文件中,添加:

import Mock from '@/mock/mock'

不同的工程,主入口js文件名不同。有的是index.js,有的是main.js。引入后,文件内容如下:

import App from '@/views/index/index.vue'
import router from '@/router/index-router'
import store from '@/store/index-store'

// 引入mock脚本
import Mock from '@/mock/mock'

new Vue({ el: '#root', store, router, render: h => h(App) })

这里将前面定义的mock.js进行了引入。若定义了多个js文件,在这里都进行引入即可。

实际上,引入mock脚本用的是import,因此该引入操作也可以在具体页面的.vue中进行。只是这样就会将mock局限在某个页面中,其他页面不受影响。考虑到开发的方便性,推荐在主入口js中进行引入。

四.在.vue文件中使用

这里使用Vue的fectch请求:

stream.fetch({
        method: 'GET',
        url:'http://localhost/test/getInfo',
        type:'json'
    }, function(ret){
        console.log(ret);
    }
);

当执行该请求后,Mock就会按用户定义的js来对请求进行匹配。

若请求的url匹配成功,则拦截该请求,并返回用户定义的数据;若匹配不成功,则按正常请求处理。

也就是说,Mock只拦截js中配置的请求,对于没有配置的请求不拦截。

Logo

前往低代码交流专区

更多推荐