MockJs的基础使用

文章目录

  • 前言
  • 一、MOCKJS是什么?
  • 二、Mock优点
  • 三、语法规则
  • 四、使用Mock
    • 1.安装Mock
    • 2.在环境中使用


前言

作为前端开发,很多时候我们还来不及等待后端程序员开发接口,想做数据渲染,已被测试怎么办呢,


一、MOCKJS是什么?

  1. 采用json数据模拟,生成数据比较繁琐,也比较有局限性,没办法达到增删改查

  2. 采用mockJs进行模拟数据,可以模拟各种场景(get、post)生成接口,并且随机生成所需数据,还可以对数据进行增删改查

二、Mock优点

1.前后端分离
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。

三、语法规则

  1. 数据模板定义规范(Data Template Definition,DTD)
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
  • 属性名 和 生成规则 之间用竖线 | 分隔。
    生成规则 是可选的。

  • 规则 有 7 种格式:

    'name|min-max': value
    'name|count': value
    'name|min-max.dmin-dmax': value
    'name|min-max.dcount': value
    'name|count.dmin-dmax': value
    'name|count.dcount': value
    'name|+step': value
  1. 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  2. 属性值 中可以含有 @占位符。
  3. 属性值 还指定了最终值的初始值和类型。

四、使用Mock

1.安装Mock

  • 首先,我们要通过Vue-cli创建一个vue项目

  • 使用一下命令

npm install mockjs   //安装mock

2.在环境中使用

实例代码如下:

import mock from 'mockjs'
// 调用Mock的方法。生产模拟数据
// var data = Mock.mock({...})
// 生成一个用户名长度随机1~10的随机数据
 var data = Mock.mock({
   'Username|1-10':'*' 
// })
//  生成一个年龄 18-40岁
 var data = Mock.mock({
   'age|18-40':0
// })
// 生产一个 id
 var data = Mock.mock('@id()')
// 随机生产中文名称
var data = Mock.mock('@cname()')
const data = mock({
  id: '@id',
  username: '@cname()',
  dateTime: '@date(yyyy-MM-dd)',
  description: '@paragraph()',
  email: '@email',
  'age|18-130': 0
})
console.log(data)
//试写一个接口
const Mock = require('mockjs')

module.exports = function(app) {
  // 参数1:接口地址 req
  // 参数2:服务器处理函数  res
  // eslint-disable-next-line brace-style

  app.get('api/userinfo', (req, res) => {
    var data = Mock.mock({
      id: '@id',
      username: '@cname()',
      dateTime: '@date(yyyy-MM-dd)',
      description: '@paragraph()',
      email: '@email',
      'age|18-130': 0
    })
    // node中的express框架
    res.json(data)
  })
}

你可能感兴趣的:(javascript,前端,vue.js)