vue项目引入mock.js 简单使用

解决的痛点

1、开发时，后端还没完成数据输出，前端只好写静态模拟数据。
2、在页面js上写模拟json数据，数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。
3、想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。
4、特殊的格式，例如IP,随机数，图片，地址，需要去收集

优点

1、前后端分离
　　让前端工程师独立于后端进行开发。
2、增加测试的真实性
　　通过随机数据，模拟各种场景。
3、 方便单测开发
通过模拟随机数据，增加单元测试的可靠性。
4、用法简单 方便扩展
　　符合直觉的接口，支持支持扩展更多数据类型，支持自定义函数和正则。
5、数据类型丰富
　　支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、项目的转接上更加方便 几乎不用修改现有代码
在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。
7、 不涉及跨域问题，

使用

项目背景: vue+webpack +axios 构建
1.安装 mockjs 依赖

npm install mockjs

2.在原有的项目下创建 mock文件夹 最好不要创建到src里面，不参与项目打包构建

mock/index.js

import Mock from 'mockjs'
import '@/mock/user/login'


// 设置全局延时
Mock.setup({
  timeout: '300-600'
})

mock/user/login 登录接口的mock数据封装

import Mock from 'mockjs'
import '@/mock/extend'

const user = Mock.mock({
  name: '@ADMIN',
  avatar: '@AVATAR',
  address: '@CITY',
  welcome: '@WELCOME',
  timefix: '@TIMEFIX',
  position: '@POSITION'
})

Mock.mock('/login', 'post', ({body}) => {
  let result = {}
  const {name, password} = JSON.parse(body)

  if (name !== 'admin' || password !== '888888') {
    result.code = -1
    result.message = '账户名或密码错误（admin/888888）'
  } else {
    result.code = 0
    result.message = Mock.mock('@TIMEFIX') + '，欢迎回来'
    result.data = {}
    result.data.user = user
  }
  return result
})

在 项目的入口文件main.js 进行项目的引入

//开发环境使用mock
if (process.env.NODE_ENV === 'production') {
  require('../mock')
}
//import '@/mock'  //引入

mock的文件位置没有较为死板的写法 比较灵活 可参考 antdv-vue-admin 或 element-vue-admin

单独的mock模块使用，要使用的话要在mian.js里面进行引用 mock模块的统一暴露的index.js文件即可较为简单直接，mock会拦截相对应的 axios请求

mock api

mock语法可参考
https://github.com/nuysoft/Mock/wiki/Mock.mock()
http://mockjs.com/0.1/#Web

Mock.mock( rurl?, rtype?, template ) )
// 或者
Mock.mock( rurl, rtype, function( options ) )
/**
*@rurl 可选 表示要拦截的url，可以使字符串，也可以是正则
*@rtype 可选 表示要拦截的ajax请求方式，如get、post
*@template 可选 数据模板，可以是对象也可以是字符串
*@function 可选 表示用于生成响应数据的函数
*/

关于mock模块的封装
可参考
https://www.jianshu.com/p/c5568910e946
https://www.cnblogs.com/-wenli/p/13828521.html
antdv-vue-admin
element-vue-admin

---

补充项目截图.
mock模块搭建 源码地址：https://gitee.com/sink_zjx/vue-mock-demo

mock注入到项目里 注意项目要有 axios

在页面上发送axios请求
账号密码正确

密码错误

---