这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战

因为管理后台需要数据请求，在这里我们使用最常见的mockjs来做虚拟请求。这里介绍mockjs使用过程 git文档地址：github.com/nuysoft/Moc…

一、mockjs的引用

mockjs的优点很多，比如可以随机生成大量数据，用法简单，数据类型丰富等等

加载mockjs

npm install --save mockjs @types/mockjs

这里加载了mockjs 和mockjs的ts定义

打开package.json文件查看mockjs是否存在，如下

二、mockjs的使用

mockjs有以下方法

Mock.mock:根据数据模板生成模拟数据。
Mock.setup:配置拦截 ajax 请求时的行为，支持的配置项有： timeout，时间为毫秒级
Mock.Random: 一个工具类，用于生成各种随机数据
Mock.valid: 校验真实数据 data 是否与数据模板 template 匹配
Mock.toJSONSchema:把 Mock.js 风格的数据模板 template 转换成 JSON Schema

Mock.mock

在mock文件夹下，我们要定义第一个接口，创建index.ts文件，引入我们需要的Mockjs

在index.ts中引用

import Mock from 'mockjs'

Mock.mock()有三个参数，分别是url,type和data,

url:可以选择url字符串和url正则
type: post/get
data: 对象或者字符串

get请求

get请求如下

// get
Mock.mock('http://localhost:8080/userList', 'get', {
  status: 200,
  message: '获取数据成功',
  'data|1-10': [
    {
      'id|+1': 1,
      name: '@cword(2,3)',
      age: '18'
    }
  ]
})

这是我们定义的第一个接口，当前文件要在main.ts文件中通过import引用

import '@/mock/index'

引用之后，就可以在页面中使用了，使用方式和我们正常的请求一样

结果如下:

post请求

Mock.mock('http://localhost:8080/login', {
  name: 'admin',
  password: '123456'
})

Mock.setup

配置拦截 Ajax 请求时的行为，支持的配置项有：timeout

参数：settings，必选，配置项集合
配置项：timeout，可选，指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒后才会返回相应内容；也可以是横杠 ‘-’ 风格的字符串，例如 '‘200-600’，表示响应时间介于 200 和 600 毫秒之间，默认值是 ‘10-100’

Mock.setup({
  timeout: 500
})

Mock.setup({
  timeout: '500-1000'
})

Mock.Random

一个工具类，用于生成各种随机数据

以下代码来源于官网github.com/nuysoft/Moc…

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

Random提供了很多的类型，如Basic,Image,Color,Text,Name,Web,Address,Helper,Miscellaneous等等

这里有basic的例子

const Random = Mock.Random

Random.boolean()

结果如下：

Mock.valid

检验真实数据 data 是否与数据模板 data 匹配

我这里做了一个例子

const data1 = {
  value: '1'
}

const data2 = {
  value: '2'
}

valid: Mock.valid(data1, data2)

结果如下：

Mock.toJSONSchema

把 Mock.js 风格的数据模板 template 转换成 JSON Schema

例子如下：

const email = {
  email: '@EMAIL'
}

toJSONSchema: Mock.toJSONSchema(email)

结果如下

剩余还有其他的几种使用方式，后续补充！！！

搭建管理后台-4(mockjs)