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

Fundebug 发布于2019-08-22 14:06 / 1226人阅读

摘要：一是什么目前的大部分公司的项目都是采用的前后端分离后端接口的开发和前端人员是同时进行的那么这个时候就会存在一个问题在页面需要使用大量数据进行渲染生成前后端开发人员的接口也许并没有写完作为前端的我们也就没有办法获取数据所以前端工程师就需要自己

一.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请求数据, 还是使用模拟数据. 这样在进行和后台联调的时候, 就可以自由的切换数据了!

参考链接

Mock.js官网: http://mockjs.com/

云服务器 GPU云服务器后端开发和前端开发前端开发后端开发后端和前端开发前端后端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92858.html

前后端开发分离之Mock

摘要：为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手动进行一些数据模拟，即假数据。覆盖拦截请求，目前内置支持。序有时候我们开发一般会分为前后端，前端负责数据显示和UI交互，后端负责数据IO等等。因此造成前端对后端有严重依赖，使得前端的开发进度普遍滞后于后端。为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手...

phpmatt 2019-08-21 17:49 评论0 收藏0
前后端开发分离之Mock

摘要：为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手动进行一些数据模拟，即假数据。覆盖拦截请求，目前内置支持。序有时候我们开发一般会分为前后端，前端负责数据显示和UI交互，后端负责数据IO等等。因此造成前端对后端有严重依赖，使得前端的开发进度普遍滞后于后端。为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手...

tyheist 2019-05-29 17:03 评论0 收藏0
mockjs让前端开发独立于后端

摘要：可以模拟数据，拦截请求，返回模拟数据，无需后端返回就可以测试前端程序官网原文首先在头中引入我们需要的文件在请求之前，用定义返回数据表示成功，表示错误信息不完整弹出错误信息在中的要与中的相同，比如我这里是那么好了，说到这里，我们进行测试一下调 mock.js 可以模拟ajax数据，拦截ajax请求，返回模拟数据，无需后端返回就可以测试前端程序 mockjs官网原文：http://i.j...

Half 2019-08-29 11:31 评论0 收藏0
mockjs让前端开发独立于后端

摘要：可以模拟数据，拦截请求，返回模拟数据，无需后端返回就可以测试前端程序官网原文首先在头中引入我们需要的文件在请求之前，用定义返回数据表示成功，表示错误信息不完整弹出错误信息在中的要与中的相同，比如我这里是那么好了，说到这里，我们进行测试一下调 mock.js 可以模拟ajax数据，拦截ajax请求，返回模拟数据，无需后端返回就可以测试前端程序 mockjs官网原文：http://i.j...

Ali_ 2019-08-20 12:01 评论0 收藏0
mockjs让前端开发独立于后端

摘要：可以模拟数据，拦截请求，返回模拟数据，无需后端返回就可以测试前端程序官网原文首先在头中引入我们需要的文件在请求之前，用定义返回数据表示成功，表示错误信息不完整弹出错误信息在中的要与中的相同，比如我这里是那么好了，说到这里，我们进行测试一下调 mock.js 可以模拟ajax数据，拦截ajax请求，返回模拟数据，无需后端返回就可以测试前端程序 mockjs官网原文：http://i.j...

Terry_Tai 2019-08-01 15:55 评论0 收藏0