react-使用mock创建假数据书写页面

前言

不知道大家有没有这样一个问题在做前端页面的时候当后端数据接口没回来的时候我们应该怎么写前端代码？
大家会怎么办？等后端先写接口？那前端就干等着吗？
不不不！干等着是很危险滴，一时半会我们等不回来后端的接口，很有可能等来领导的谈话…
所以！我们应该先自力更生！应该制作一些假数据来帮助我们书写前端页面，而不至于闲着…
这里给大家分享的就是mock！

一、作用

我们不需要写完整的node后台，而是利用json-server来制作假数据帮助前端书写代码

二、什么是json-server

json-server是一个 Node 模块，运行 Express 服务器，可以指定一个 json 文件或js文件作为 api 的数据源

三、安装json-server

二选其一

1、npm install -g json-server
2、yarn add json-server -D

四、配置json-server

json-server可以直接把一个json文件托管成一个具备全RESTful风格的API，并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器

步骤一：创建一个json文件用来存放mock数据

步骤二：在创建好的json文件内写数据
{
    "data": [
        {
            "id": 1,
            "name": "丹佛斯",
            "age": "18"
        },
        {
            "id": 2,
            "name": "公拉农",
            "age": "20"
        }
    }
}
注意：类似上面的数据结构，具体需要什么字段的数据自行创建

五、配置mock

在package.json的scripts内添加mock字段："mock" : "json-server --watch --port 8080 数据json文件路径"

注意：路径是从根来寻找的

六、启动mock

新建一个终端启动mock：npm run mock 或 yarn mock


输出类似以下内容，说明启动成功：
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:端口号/data
Home
http://localhost:端口号

Type s + enter at any time to create a snapshot of the database
Watching...

七、静态数据与动态数据

如果数据不是很多我们可以手动书写静态数据，而当数据很庞大的时候手动书写的方式就有些过于麻烦了，这个时候我们就需要动态生成数据，静态数据我们可以写在json文件内，而动态数据我们需要一些简单逻辑写在js文件内。
在这里使用mockjs库可以很方便的动态进行生成模拟数据。

步骤一：安装mockjs   
	   npm install -g mockjs  或  yarn add mockjs -S   

步骤二：创建一个js文件，引入mock
	   var Mock = require('mockjs');

步骤三：配置规则（具体配置规则看官网  http://mockjs.com/）
module.exports = () => {       
    var data = Mock.mock({     
    	//约定100条数据
        'data|100': [			           
            {                  
            	//id从1开始每生成一条数据就+1                                                                  
                'id|+1': 1,    
                //采用中文标题5-10个随机字    
                title: '@ctitle(5,10)',   
                //生成中文百家姓名
                name: '@cname'             
            }
        ]
    });
    //必须要有返回值
    return data;    
};

注意：
	1、模块要求是commonJs
	2、对外暴露的函数 或 对象 要求要有返回值
	3、配置完后重启mock

注意：“配置mock”那里就要写成js文件路径

总结

不管用哪一种方法都是为了我们更好的开发，如果大家有别的方式欢迎讨论交流哦~多多指教