1、Mock.js 入门和安装

发布于 2022年 04月 12日 02:47

一．技术说明

1.Mock.js 是一款模拟 JSON 数据的前端技术，为什么要产生这种技术？

2.对于前后端分离的项目，后端工程师的 API 数据迟迟没有上线；

3.而前端工程师却没有 JSON 数据进行数据填充，自己写后端模拟又太繁重；

4.这个时候，Mock.js 就能解决这个问题，让前端工程师更加独立做自己；

5.官方网站为：mockjs.com；学前基础：Vue2.x 基础完结后方可学习；

二．安装测试

1.安装方式，我们这里提供两种，一种在 node 下运行，另一种在浏览器下运行；

2.如果在 node 下运行，需要先安装 node.js，官网：nodejs.org/zh-cn/；

3.安装好后，我们先在 webstorm 或 vscode 终端测试 node 是否已安装，命令：

node -v

4.创建 Mock 目录，先安装 node 下的 mock.js；

npm install mockjs

5.创建一个 js 文件，键入官网示例代码：

//引入 mock.js，相当于 src=mock.js
const Mock = require('mockjs');
//创建模拟数据
const data = Mock.mock({
    // 属性list 的值是一个数组，其中含有1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为1，每次增加 1
        'id|+1': 1
    }]
});

// 输出结果
console.log(data);
// 转换 JSON 格式
console.log(JSON.stringify(data, null, 4));

6.如果，你想在浏览器测试运行，那么直接在 html 文件引入以下文件；

<script src="http://mockjs.com/dist/mock.js"></script>

练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        const data = Mock.mock({
            'list|1-10' : [{
                'id|+1' : 1
            }]
        });
        console.log(data);
        console.log(JSON.stringify(data, null, 4));
    </script>
</head>
<body>

</body>
</html>

推荐文章