如何在项目中使用MockJs模拟数据

Tips:项目用vue用script引入的方式

一、为什么要模拟数据

• 前端界面完后台接口普遍没有出完，或者根本还没有开始写，为了项目的整体进度，前端必须要进行数据模拟，才能实现等后台接口出完后，迅速的实现数据对接。

二、实现模拟数据的几种方法和优劣

1、直接在data中写数组

优点：方便，在data里面写上数据结构的数组就可以用
缺点：会导致js臃肿,只适合结构简单的数据结构

2、写json

优点：对比data方法代码易于维护，能处理复杂的数据结构；对比Mock方法没有学习成本
缺点：耗费时间，大量复制粘贴

2、用MockJs

优点：结构清晰，数据可变，方便维护
缺点：最大的缺点就是，没有缺点（选择性的无视）

三、MockJs的语法

1、中文字符：4个字符的中文— @cword(4)

2、数组：data数组长度为3到5— “data|3-5”:[ ]

3、图片：var Random = Mock.Random; Random.image(‘200x100’, ‘#FF6600’)

4、数字：1到100之间的数字： “factoryId|1-100”: 1

tips:虽然还有很多功能，但是高频率的就这些了，更多的可以到官网查看文档http://mockjs.com/examples.html

四、如何使用MockJs

1、引入mock.js

2、使用：代码如下

//Mock.Random的方法在模板数据中被称为占位符
	var Random = Mock.Random;
    var data = Mock.mock({
        "data|3-5": [{
            "title": "@cword(4)",
            "name":"@cname",
            "city":"@city",
            "time": Random.date('yyyy-MM-dd'),
            "icon":Random.image('200x100', '#FF6600'),
            "content":"@cparagraph()",
            "factoryName": "@cword(5)",
            "factoryId|1-100": 1,
            "tableTop":["统计","#1","#2"],
            "tableBody|2":[{
                    "title": {
                        "name":"@cword(4)",
                        "unit":"MPa"
                    },
                    "value|2":[{
                            "value|1-900.2": 1,
                            "targetId|+1": 1
                        }]
                }]

        }]
    })
    
    console.log(data)

3、打印出的data

---

最后感谢阅读，致谢！