1 min to read

如何使用mock模拟数据

使用mock模拟数据，摆脱无意义的等待

Featured image

Mockjs的使用

　　如今的项目开发模式大多都是前后端分离，既然前后端分离，那开发时就可能会遇到前后端不同步，当前端多次催促服务端后还得不到接口时，分歧就有可能产生。此时Mock.js的存在，对前端而言应该算是一种福利了，在开发过程中，前端可以自己模拟数据，开发进度不再受服务端影响

　　有文章说Mock.js数据模拟通过改写jquery和zepto的$.ajax方法实现拦截Ajax请求，使用原生js封装的ajax方法可能不能拦截

　　本篇是在Vue项目中使用Mock.js,各位看官可根据个人的项目使用灵活应变

安装 Mock.js 模块

> npm install mockjs --save-dev

使用 Mock.js 进行数据模拟

　　新建一个模拟数据的js文件，如在src目录下新建mock.js,并在 main.js引入该文件 以下是个简单的例子：

　　src/mock.js 内容

import Mock from 'mockjs'
const Random = Mock.Random
const customList = function() {
  let Data = []
  for (let i = 0; i < 10; i++) {
    let data = {
        id: Random.natural(),
        sex: Random.pick(['F', 'M']),
        name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
        date: Random.date(),  // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd
        ip: Random.ip(),
        address: Random.county(true),
        email: Random.email()
    }
    Data.push(data)
  }
  return {
    Data: Data
  }
}

Mock.mock('/query/customs', 'get', customList)
// Mock.mock( url, post/get , 返回的数据)，url尽量与服务端规定的请求路径相同，减少后期联调的工作量

export default{
    customList()
}
export default { customList } // 貌似加不加都无所谓

src/main.js 的内容：

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

require('./mock.js');

// 引入文件的上下文部分省略

资料