json-server的使用

json-server是一个简单的模拟后台的框架，他可以直接返回你需要的JSON数据，并且支持简单的路由和查询参数，使用方法也非常简单。

首先全局安装json-server:

npm i json-server -g

然后写一个简单的json文件，将文件作为参数传入命令行

// db.json
{
  "userInfo": {
    "errorCode": 0,
    "errorMessage": "",
    "data": {
      "name": "Yuchen",
      "age": 25
    }
  }
}

json-server db.json

之后访问http://localhost:3000/userInfo

也就是说，JSON文件中JSON对象的第一个属性可以作为路径来使用。json-server支持以下参数：

  -c, --config                   配置文件            [默认值: "json-server.json"]
  -p, --port                     设置端口                          [默认值: 3000]
  -H, --host                     设置服务器地址            　[默认值: "localhost"]
  -w, --watch                    监听文件变化               　             [布尔]
  -r, --routes                   路由文件
  -m, --middlewares              中间件文件                                [数组]
  -s, --static                   设置静态文件目录
      --read-only, --ro          允许get请求                               [布尔]
      --no-cors, --nc            禁止CROS                                  [布尔]
      --no-gzip, --ng            禁止GZIP内容加密                          [布尔]
  -S, --snapshots                设置快照目录                        [默认值: "."]
  -d, --delay                    添加延迟（单位毫秒）
  -i, --id                       设置数据库主键id字段（比如_id）
                                                                  [默认值: "id"]
      --foreignKeySuffix, --fks  设置外键后缀 (比如 主键_id 外键 post_id)
                                                                  [默认值: "Id"]
  -q, --quiet                    静默模式，停止日志输出                    [布尔]
  -h, --help                     显示帮助信息                             [布尔]
  -v, --version                  显示版本号                               [布尔]

数据文件除了json文件之外，也可以使用js文件，使用commonJS方式导出一个JSON即可：

// db.js
let reuslt = {
  "userInfo": {
    "errorCode": 0,
    "errorMessage": "",
    "data": {
      "name": "Yuchen",
      "age": 25
    }
  }
};
module.exports = () => reuslt

json-server db.js -p 9527

mockjs的使用

按照上面的方式，我们可以返回一些固定数据了，但是，如果我们想随机生成一些数据呢？这时候，mockjs就派上用场了。mockjs是一个可以返回随机数据的框架，不仅是简单意义上的中英文字符串，甚至姓名、段落、地名以及不同大小颜色的图片都可以随机生成，而上面说到的json-server可以使用js来返回结果，则为mockjs的使用提供了可能。

初始化npm包并且安装mockjs：

npm init -y
npm install mockjs

引入mockjs，我们将刚才的姓名和年龄设置成随机：

// db.js
const { Random } = require("mockjs");
let reuslt = {
  "userInfo": {
    "errorCode": 0,
    "errorMessage": "",
    "data": {
      "name": Random.name(),
      "age": Random.age()
    }
  }
};
module.exports = () => reuslt

运行命令，得到的结果是：

mockjs直接生成随机内容就可以使用它的Random对象，可以用的占位符如下：

类型	占位符
基础类型	boolean, natural, integer, float, character, string, range, date, time, datetime, now
图片	image, dataImage
颜色	color
文字	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
姓名	first, last, name, cfirst, clast, cname
web相关	url, domain, email, ip, tld
地址	area, region
无障碍	capitalize, upper, lower, pick, shuffle
其他	guid, id

有意思的，其中还可以生成各种各样的图片：

// Random.image()
Random.image()
// Random.image( size )
Random.image('200x100')
// Random.image( size, background )
Random.image('200x100', '#FF6600')
// Random.image( size, background, text )
Random.image('200x100', '#4A7BF7', 'Hello')
// Random.image( size, background, foreground, text )
Random.image('200x100', '#50B347', '#FFF', 'Mock.js')
// Random.image( size, background, foreground, format, text )
Random.image('200x100', '#894FC4', '#FFF', 'png', '!')

此外，仍可以用mockjs的模板来直接渲染整个数据，并且可以加入参数来处理生成数量：

Mock.mock({ "string|1-10": "★" }) // { "string": "★★" }
Mock.mock({ "number|+1": 202 }) // { "number": 508 }
Mock.mock({ "array|1-10": [ { "name|+1": [ "Hello", "Mock.js", "!" ] } ] })
// { "array": [ { "name": "Mock.js" }, { "name": "!" }, { "name": "Hello" }, { "name": "Mock.js" }, { "name": "!" }, { "name": "Hello" }, { "name": "Mock.js" } ] }

关于更多的模板使用方式，可以参考这个网址：mockjs.com/examples.ht…

最后，将两个框架结合，可以生成我们需要的随机数据了：

const { mock } = require("mockjs");
let template = {
  "userInfo": {
    "errorCode": 0,
    "errorMessage": "",
    "data|1-10": [{
      "name": "@cname",
      "age": "@age",
      "protrait": "@image('200x100',@word)"
    }]
  }
};
module.exports = () => mock(template)

后端同学动作太慢？自己来mock数据吧

json-server的使用

mockjs的使用