Mockjs全面解读

最新推荐文章于 2023-07-12 11:17:43 发布

大前端工程师

最新推荐文章于 2023-07-12 11:17:43 发布

阅读量458

点赞数

文章标签： nginx vue.js 前端 mock

程麒阁-大连大学-软件工程学院

本文链接：https://blog.csdn.net/chengqige/article/details/121556735

版权

简介

前后端分离架构是现在比较常用的架构，它的主要思想是由前端工程师负责用户的交互逻辑。后端工程师负责代码接口的编写，使用swagger生成api文档提供给前端工程师调用使用。

但是在实际开发过程中，后端写接口往往很慢，可是前端代码的编写却不能因此而耽搁。所以前端需要模拟一些数据，来填补项目的空洞。Mock.js是一种模拟数据的办法，它可以使我们前端在后端没有写好接口的前提下，也可以进行独立开发

安装

npm i mockjs -S

安装完mockjs之后，我们可以在node_modules文件夹内找到mock.js文件，复制它并引入到我们的项目中

或者直接srcipt引入

<script src="https://web.chengqige.com/CSDN/json-server/mock.js"></script>

基本用法

下面演示的是，前端模拟数据。并发出xhr请求这个模拟数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mock拦截器</title>
    <script src="https://web.chengqige.com/CSDN/json-server/mock.js"></script>
</head>
<body>
<script>
    // 前端生成Mock数据，进行批量导出
    const data = Mock.mock({
        code: 200,
        msg: '商品列表数据',
        'data|5-10': [{
            'id|+1': 1,
            'title': '@ctitle(5,10)',
            'img': "@img('400x400')"
        }]
    })
    Mock.mock('http://xxxx.com/demo', data)
    // 可以拦截请求
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://xxxx.com/demo')
    xhr.send()
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText))
        }
    }
</script>
</body>
</html>

接下来我们对上面的代码进行解读：

1. 生成mock格式的数据

// 前端生成Mock数据，进行批量导出
const data = Mock.mock({
    code: 200,
    msg: '商品列表数据',
    'data|5-10': [{
        'id|+1': 1,
        'title': '@ctitle(5,10)',
        'img': "@img('400x400')"
    }]
})

在mock中json数据的key值有着特殊的格式，下面介绍它的几个常见格式

格式语法	含义
data\|5-10	data数组长度是随机变化的，长度变化范围是5-10
id\|+1	id是一个自增字段每次+1
@ctitle(5,10)	从汉字字典中随机抽取5-10个汉字，形成随机汉字串（语义不通顺）
@img(400x400)	生成400x400的占位图片

这种格式语法方便我们自动化生成大量的模拟数据

上面的data生成的数据为;

{
    "code": 200,
    "msg": "商品列表数据",
    "data": [
        {
            "id": 1,
            "title": "不装四传活院即油物",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 2,
            "title": "四切起权条与据写",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 3,
            "title": "日列领而子律被持管",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 4,
            "title": "主行同府华亲",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 5,
            "title": "五理导相利把严",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 6,
            "title": "参连每斯些圆想省马",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 7,
            "title": "消复织总标指",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 8,
            "title": "适类统务前京着按青",
            "img": "http://dummyimage.com/400x400"
        },
        {
            "id": 9,
            "title": "家别处几音六它",
            "img": "http://dummyimage.com/400x400"
        }
    ]
}

2. 创造拦截器

创造拦截器的意思是，我的模拟数据生成之后，把它映射到一个网址上。前端发送请求，当请求这个网址时候，请求会被自动被拦截，然后重定向到我们的模拟数据上

// 网址可以随便写，因为被解析成字符串，但是http://不能乱写剩下的都行
Mock.mock('http://xxxx.com/demo', data)

好了现在，我们的data数据已经映射在接口http://xxxx.com/demo上了

注意：Mock这个映射只适用于基于xhr的网络请求,不适用于fetch请求。对于axios、fetch的拦截是不起作用的

3.发送AJAX请求

我们使用xhr发送请求，发现我们的请求到的数据是我们的mock模拟数据了

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://xxxx.com/demo')
xhr.send()
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText))
    }
}

小练习：你可以把拦截器的地址修改为https://www.baidu.com，然后xhr请求百度的地址，看看会发生什么？

高级用法

通过基本用法的练习，我们了解了mock的格式语法特点，了解了拦截器机制。接下来我们玩点高级的技术吧，我们直接创建一个服务器

json-server

json-server是一个直接把json数据当成服务器的一种手段，非常的好用。

安装

npm install -g json-server

使用方法

我们在项目文件夹下新建文件server.json

server.json

{
  "stu": [
    {
      "id": "18413001",
      "name": "cqg"
    },
    {
      "id": "18413002",
      "name": "wht"
    },
    {
      "id": "18413003",
      "name": "hkc"
    }
  ],
  "age": [
    {
      "age": 18
    },
    {
      "age": 19
    }
  ]
}

然后我们在项目文件夹打开终端

json-server server.json

你会看到控制台下面生成这两个服务(分别对应key中的stu、age)

我们访问这个链接就生成了这个服务了

结合mockjs使用

json-server虽然强大，但是json数据还是需要我们自己去写呀。但是mock有格式化语法可以帮助我们生成json数据，所以它们两个配合是有戏看的

server.js

// json-server和mockjs混合解决方案
const Mock = require('mockjs')
const data = Mock.mock({
    'data|5-10': [{
        'id|+1': 1,
        'title': '@ctitle(5,10)',
        'img': '@img(\'400x400\')'
    }]
})
module.exports = () => {
    return data
}

启动服务：

json-server server.js

生成的服务:

这里需要解读一下，我们的json-server不仅可以启动json文件，还可以启动js文件。不过需要导出模块，而且模块必须返回一个json格式数据才行

以上就是mock教学的全部内容

大前端工程师

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Mockjs全面解读

简介前后端分离架构是现在比较常用的架构，它的主要思想是由前端工程师负责用户的交互逻辑。后端工程师负责代码接口的编写，使用swagger生成api文档提供给前端工程师调用使用。但是在实际开发过程中，后端写接口往往很慢，可是前端代码的编写却不能因此而耽搁。所以前端需要模拟一些数据，来填补项目的空洞。Mock.js是一种模拟数据的办法，它可以使我们前端在后端没有写好接口的前提下，也可以进行独立开发安装npm i mockjs -S安装完mockjs之后，我们可以在node_modules文件夹内找到
复制链接

扫一扫