前言

最近在尝试在自己的项目中引入mockjs，在尝试的过程遇上了不少坑，于是就打算整理成文章，方便以后复习巩固(:

本文是主要介绍简单的Mockjs封装，非常方便上手，让前端同学能“独立”地进行进行单元测试，不必受限于后端同学的进度

1 Mockjs-demo搭建

1.1 安装mockjs

npm install mockjs

1.2 创建mock文件夹

mock文件夹结构 文件说明：

mock : 放在根目录的mock文件夹，存放所以与mock相关的文件

**{module}文件夹 : ** 按照项目模块分类存放对应的mock文件，例如ntr模块中存放ntr-mock文件

**index ： ** 引入所有模块的mock文件，最后在main.js里引入

1.3 {module}-mock.js

import Mock,{ Random } from 'mockjs'

Random.extend({
    ntrName:function(){
        const names = ["弥诺陶洛斯","牛头人","格罗玛什","加尔鲁什"]
        return this.pick(names)
    }
})

//匹配普通api
//Mock.mock( rurl, template )
//rurl:拦截匹配rurl的Ajax请求， template：根据数据模板template生成模拟数据，并作为相应数据返回
Mock.mock("/api/ntr",{
    status:200,
    message:"获得ntr列表成功",
    //{属性名}|{个数}
    'ntrlist|4':[
        {
            //mock自增函数 从1开始
            id:'@increment(1)',
            //调用Random.extend中定义的函数
            name:'@ntrName'
        }
    ]
})

//匹配Rest风格api 需要使用正则表达式匹配
//Mock.mock( rurl, rtype, function( options ) )
//rurl:拦截匹配rurl和rtype的Ajax请求， rtype:需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等 , function(options):用于生成响应数据的函数
Mock.mock(/api\/ntr/,"get",(opt) => {
    //opt是请求相关的参数 url，type, body
    console.log(opt);
    const res = /api\/ntr\/(\d+)/.exec(opt.url)
    return Mock.mock({
        status:200,
        message:"获得ntr成功",
        data:{
            id:parseInt(res[1]),
            name:'@ntrName',
            //返回18-30间的一个自然数
            age:"natural(18,30)",
            //随机返回2-8个中文文字
            detail:"@cword(2, 8)",
        }
    })
})

1.4 index.js

//导入各个模块的mock文件，要添加新的mock文件都在这里引入
import './ntr/ntr-mock'

1.5 main.js

import Vue from 'vue'
import App from './App.vue'

import './mock'

new Vue({
  render: h => h(App)
}).$mount('#app')

到此就已经完成了mockjs的全部引入工作，可以把项目跑起来试一试了！

2 One More Thing

作为一个初学者，其实我在遇见const res = /api\/ntr\/(\d+)/.exec(opt.url)因为不熟悉曾感到困惑，为了让我一样的新手在看到这篇文章的时候不用再去查这个函数的用法，我把自己的学习心得贴在这里以便参考。

2.1 regexObj.exec(str) 简介

**str : **

要匹配正则表达式的字符串

返回值：

如果匹配成功，exec()方法返回一个数组（包含额外的属性 index 和 input），并更新正则表达式对象的 lastIndex 属性。完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应正则表达式内捕获括号里匹配成功的文本。
如果匹配失败，exec()方法返回 null，并将 lastIndex 重置为 0

2.2 栗子

//假设发送的ajax请求url '/api/ntr/1'
const res = /api\/ntr\/(\d+)/.exec(opt.url)

脚本的返回值

对象	属性/索引	描述	栗子
res	[0]	匹配到的全部字符串	api/ntr/1
	[1], ...[n]	括号中的分组捕获	[1] = 1
	index	匹配到的字符的索引值（基于0）	1
	input	原始字符串	/api/ntr/1

以上

小型项目中的Mockjs快速搭建

前言