让前端攻城师独立于后端举行开辟: Mock.js

2019年8月24日 240次阅读 来源: 李棠辉

《让前端攻城师独立于后端举行开辟: Mock.js》

一.Mock.js是什么?

现在的大部份公司的项目都是采纳的前后端星散, 后端接口的开辟和前端职员是同时举行的. 那末这个时刻就会存在一个题目, 在页面须要运用大批数据举行衬着天生前, 后端开辟职员的接口或许并没有写完, 作为前端的我们也就没有办法猎取数据. 所以 前端工程师就须要本身依据接口文档模仿后端职员供应的数据, 以此举行页面的开辟.

这个时刻, Mock.js的作用就表现出来了, 在数据量较大的情况下, 我们不必一个一个的编写数据, 只须要依据接口文档将数据的花样填入, Mock.js就能够自动的按需天生大批的模仿数据. 且Mock.js供应了大批的数据类型, 包含文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 色彩等.

本文就简朴的引见一下Mock.js供应的语法, 并引见一下我日常平凡在项目中是怎样运用Mock.js去更轻易的举行开辟的.

二. 下载和引入Mock.js

1. 下载Mock.js

Mock.js供应多种下载体式格局, 本文以现在国内最常常使用的npm举例, 只须要在命令行输入npm install mockjs
即可完成Mock.js的下载.

2. 引入Mock.js

Mock.js暴露了一个全局的Mock对象, 我们只须要将Mock对象引入到文件中, 挪用Mock对象的要领即可

  • CommonJS的引入体式格局
//CommonJS引入
let Mock = require('mockjs)

//挪用Mock.mock()要领模仿数据
let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);
  • ES6的引入体式格局
//ES6的引入体式格局
import Mock from 'mockjs'

let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);

三.Mock.js的简朴语法

Mock对象供应了4个要领, 分别是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一个东西库Mock.Random. 个中我们常常运用到的就是Mock.mock()和Mock.Random.

1. Mock.js的范例

第二部份引入Mock.js的代码中的以下部份就能够表现Mock.js的语法范例

'list|1-10': [{
  'id|+1': 1
}]

上面的代码被称为数据模板, 用于通知Mock.js天生什么样的数据, 个中数据模板中的每一个属性由三部份组成: 属性名, 天生划定规矩, 属性值:

  • list为数据模板中的属性名;
  • 1-10为天生划定规矩(示意天生起码1个, 最多10个反复数据)
  • [{'id|+1': 1}]是属性值, 属性值中能够嵌套运用属性名和天生划定规矩.

详细的天生划定规矩拜见:
https://github.com/nuysoft/Mo…

2. Mock.mock()

Mock.mock()要领是用来依据数据模板天生模仿数据, 我常常使用到的是以下两种传参体式格局:

  • Mock.mock(template): 依据数据模板template天生模仿数据
let data = Mock.mock({
data: {
  'products|10-20': [{
    name: '手机',
    price: 1000
  }]
}
})
console.log(data);
  • Mock.mock(url, template): 阻拦要求地点为url的ajax要求, 并依据数据模板template天生模仿数据
let data = Mock.mock('api/products' , {
data: {
  'products|10-20': [{
    name: '手机',
    price: 1000
  }]
}
})

//运用jquery Ajax发送要求
$.ajax({
  url: 'api/products',
  type: 'GET',
  success: function(res) {
    console.log(res);
  }
})

3. Mock.Random

Mock.Random是Mock.js供应一个东西类, 用于天生常常使用的几种数据.

  • 天生布尔值
//运用@占位符的体式格局
 let data = Mock.mock({
    data: {
      boolean: '@boolean'
    }
  })
  console.log(data);
  
//运用Mock.Random挪用函数的体式格局
  let data = Mock.mock({
    data: {
      boolean: Mock.Random.boolean()
    }
  })
  console.log(data);
  • 天生日期
  let data = Mock.mock({
    data: {
      date: Mock.Random.date('yyyy-MM-dd')
    }
  })
  console.log(data);

Mock.js支撑雄厚的日期花样的自定义:
https://github.com/nuysoft/Mo…

  • 天生图片
  let data = Mock.mock({
    data: {
    //用于天生高度自定义的图片地点
      imgURL: Mock.Random.image()
    }
  })
  console.log(data);
  • 天生名字
 let data = Mock.mock({
    data: {
      //天生一个英文名字
      name: Mock.Random.name(),
      //天生一个中文名字
      chineseName: Mock.Random.cname()
    }
  })
  console.log(data);

更多Mock.Random东西库供应的数据:
https://github.com/nuysoft/Mo…

四.在Vue项目中运用Mock.js

以模仿一个上岸接口的数据为例:

1. 零丁写一个mockData.js文件作为假造数据的天生文件.

//mockData.js

import Mock from 'mockjs'

let Random = Mock.Random;


//用户上岸信息
let userInfo = Mock.mock({
  data: {
    responseCode: 200,
    responseMessage: 'success',
    userMessage: {
      email: Random.email(),
      'id|1-10': 1,
      realName: Random.cname(),
      roleCodes: 'admin',
      username: Random.first()
    }
  }
})



let mockData = {
  userInfo: userInfo
}

export default mockData;

2. 运用vuex去掌握是不是运用mock.js的数据

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
  //运用模仿数据, 只是开辟时运用, 假如不是开辟时, 请务必设置为false
  useMock: true
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

3. 在Login.vue中去完成要求上岸要领

//Login.vue

import mockData from '../utils/mockData.js'

exwport default {
  ...
  
  methods: {
    fetchUserInfo() {
      //假如vuex中userMock为true
      if (this.$store.state.useMock) {
        //运用延时器模仿异步
        window.setTimeout(() => {
          let res = mockData.userInfo;
          //营业逻辑
        }, 1000);
        return;
      }
      
      //假如vuex中userMock为false
      this.$axios.post('api/login', params).then(res => {
        //营业逻辑
      });
    }
  }
}

能够看出在Login.vue的fetchUserInfo()要领中, 假如userMock为true, 将运用的是mock.js中的模仿数据; 假如useMock为false, 运用的是经由过程Ajax要求的数据. 这么写的优点是, 你只须要在vuex中修正一下, 就能够掌握一切要求接口函数中是运用Ajax要求数据, 照样运用模仿数据. 如许在举行和后台联调的时刻, 就能够自在的切换数据了!

参考链接

  1. Mock.js官网: http://mockjs.com/
    原文作者：李棠辉
    原文地址: https://segmentfault.com/a/1190000013022560
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞