前言

其实我之前一点都不关心这个 mockjs 的,只了解了基本的用法但没实战使用过。但在偶然的一次面试上机做题,需要使用 mockjs 模拟数据,使用 axios 请求数据 和 vue 并渲染页面。

这时候,我很蒙再加上那电脑异常卡顿,现场学都是很大的问题。因为我之前从没有这样尝试过,我之前都是边写接口边开发前端页面的,所以不存在 mock 数据,唯一想到的是用 node的 express 导入 mockjs 然后模拟接口,但效果不太友好。

经过此次教训,我深刻反省。这是前端必备的插件,我竟然对其仅仅是了解的程度。这种感觉太不好了,我需要将其练熟,至此。

简介

Mackjs 有几大特性,使其风靡前端,专注开发而无需担心数据问题。

  1. 开发无入侵,不用修改原有的代码,直接拦截 ajax 请求,返回模拟响应数据
  2. 数据类型丰富,支持随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
  3. 支持更多数据类型,支持自定义函数和正则

用法

Mock.mock(url, type, data)
参数名 参数需求 参数描述 例子
rurl 可选: URL 字符串或 URL 正则 拦截请求的地址 /mock
rtype 可选 拦截Ajax类型 GETPOSTPUTDELETE
template 可选: 可以是对象或字符串 生成数据的模板 `{'data
function 可选:表示用于生成响应数据的函数 数据函数 function(options){}
  1. 直接引入 Mock.js 文件,直接使用 Mock.mock 劫持 XMLHttpRequest 模拟数据
  2. 使用 node 开启 mock 服务,但需要配置 node 跨域,以及 package.json 的启动方式,以及全局 nodemon 热更新
  3. Vue-cli 的 devServer 结合使用

常用字段

字段 中文 例子
@cparagraph(min, max) 段落 看青先王象回府自清科院了活即。
@csentence(min, max) 句子 边局则说公。
@ctitle(min, max) 标题 起毛办本眼
@cname 名称 邵洋
@ip 地址 49.224.5.83
@id 主键 370000202001049690
@increment(step) 自增 1
@province 黑龙江省
@city(prefix) 重庆 泉州市
@county(prefix) 省市县 山西省 阳泉市 平定县
@color、@rgba 颜色 #e079f2 、 rgba(242, 219, 121, 0.06)
@image( '200x100', '#894FC4', '#FFF', 'png', '!' ) 图片 img
@now('yyyy-MM-dd HH:mm:ss SS') 当前时间 2020-05-17 14:30:11 486
@date 日期 1970-02-22
@datetime() 时间 1986-06-12 06:12:09
@integer(min, max) 范围整数 92
@boolean 真假 true
@email 邮箱 v.vfnjfb@tqgn.li
@domain 域名 nvlrioeb.pm

其它

// 根据已提供的数组,随机取一个返回
"array|1": [
    "AMD",
    "CMD",
    "UMD"
]

// result
{
  "array": "UMD"
}


// 根据已提供的对象,随机取两个返回
Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})

// result
{
  "object": {
    "310000": "上海市",
    "330000": "浙江省"
  }
}

JQuery 使用

  1. 引入文件

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
  2. 模拟数据

    Mock.mock("/user/info", "get", function (options) {
      return {
        data: Mock.mock({
          id: "@id",
          username: "@cname",
          date: "@date",
          avatar: "@image",
          email: "@email",
        }),
      };
    });
  3. 请求数据

    $.ajax({
        url: "/user/info",
        method: "GET",
        dataType: "json",
    }).then((res) => {
        console.log(res);
    },err=>{
        console.log(err)
    });

Vue 使用

  1. 创建项目

    vue create mock-demo
  2. 安装依赖

    # axios 请求库
    npm i axios -S
    # mockjs 产生随机数据
    npm i mockjs -D
    # json5 解决 json 文件,无法添加注释问题
    npm i json5 -D
  3. 在跟目录创建 vue.config.js,在 devServer 做 api 中间件拦截

    module.exports = {
        devServer:{
            before:require('./mock/index.js') // 引入 mock/index.js
        }
    }
  4. 在 mock 目录创建 index.js ,

    const fs = require('fs')
    const path = require('path')
    const JSON5 = require('json5')
    const Mock = require('mockjs')
    
    // 读取 json 文件
    function getJsonFile(filePath){
        // 读取指定 json 文件
        var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
        // 解析并返回
        return JSON5.parse(json);
    }
    
    // 返回一个函数
    module.exports = function(app){
        // 监听 http
        app.get('/user/userInfo', (req, res)=>{
            // 请求数据
            var {query} = req
    
            // getJsonFile 读取本地 json5 文件
            var json = getJsonFile('./module/user.json5')
    
            // 根据对象生成 mock 数据
            res.json({
                query,
                data: Mock.mock(json)
            })
        })
    }
  5. 创建 /module/user.json5 文件

    {
        "id": "@id",
        name: "@cname()",
        content: "@cparagraph(1,3)",
        date: '@date()',
        avatar:"@image('500x200', 'red', '#fff', 'avatar')",
        ip:'@ip()',
        email:'@email()'
    }
  6. 通过 axios.get 就可以访问到数据了,npm run serve 启动服务

    import axios from 'axios'
    
    axios.get('/user/userinfo').then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })
  7. 使用环境变量控制是否访问 Mock 数据

    // 在根目录创建 .env.development 文件
    // 里面内容
    MOCK = true
    
    // 在 mock/index.js 中 module.exports 做一个判断
    if(process.env.MOCK !== 'true') return;

Nuxt 使用

  1. 安装环境

    npm i mockjs -D
  2. nuxt.config.js 中的 plugins 下注册插件 @/plugins/mockjs,然后 ./plugins 新建 mockjs.js

    import Mock from 'mockjs'
    
    Mock.mock('/demo/test',{
        'list|10'[
            {
                id:'@id',
                name:'@cname'
            }
        ]
    })
  3. 按照正常流程,请求数据即可。

Express 使用

伪真后台,使用 Node 来启动服务,创建一个 mock/server.js

安装环境

# 初始化 package.json
npm init -y
# 服务
npm i express -S
# 模拟
npm i mockjs -D
const express = require('express');   //引入express
const Mock = require('mockjs');       //引入mock
const app = express();        //实例化express

// 支持跨域
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.get('/mode2/DataOne',function(req, res){
    res.json(Mock.mock({
        'status': 200,
        'dataSource|1-9':[{
            'key|+1': 1,
            'mockTitle|1':['肆无忌惮'],
            'mockContent|1': ['角色精湛主题略荒诞', '理由太短 是让人不安', '疑信参半 却无比期盼', '你的惯犯 圆满', '别让纠缠 显得 孤单'],
            'mockAction|1': ['下载', '试听', '喜欢']
        }]
    }))
})

app.listen('8090', () => {
    console.log('监听端口 8090')
})

当需要修改数据时,需要 ctrl+c 关闭再开启很麻烦,所以....

# 安装全局 nodemon 热更新
npm i -g nodemon

# 配置 package.json
"scripts": {
    "start": "nodemon ./mock/server.js"
}

# 使用
npm run start

案例

待开发...

留言

暂无评论

我要发表看法