1. json-server 入门基础
1.1 安装 json-server
- 参考文档 :
- 执行
npm install -g json-server
安装 json-server - 注意: json-server 是严格遵守 restful 规范的
1.2 使用 json-server
-
创建 db.json 文件
{ "user": [ { "id": 1, "title": "json-server", "author": "knightzz" } ] }
-
执行
json-server --watch --port 3303 --host 127.0.0.1 db.json
命令即可启动$ json-server --watch --port 3303 --host 127.0.0.1 db.json \{^_^}/ hi! Loading db.json Done Resources http://127.0.0.1:3303/user Home http://127.0.0.1:3303 Type s + enter at any time to create a snapshot of the database Watching...
-
然后我们输入
http://127.0.0.1:3303/user
即可访问到
1.3 结合 mockjs
-
我们可以使用 mockjs 生成的数据作为数据源
// 用mockjs模拟生成数据 var Mock = require('mockjs'); module.exports = () => { // 使用 Mock var data = Mock.mock({ 'course|227': [ { // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1000, course_name: '@ctitle(5,10)', autor: '@cname', college: '@ctitle(6)', 'category_Id|1-6': 1 } ], 'course_category|6': [ { "id|+1": 1, "pid": -1, cName: '@ctitle(4)' } ] }); // 返回的data会作为json-server的数据 return data; };
-
使用下面的命令即可
json-server --watch --port 3303 --host 127.0.0.1 mock-data.js
1.4 自定义路由
1.4.1 基本概述
-
因为 json-server 是严格支持 restful 规范的, 所以默认实现了 restful
-
例如 :
GET /posts GET /posts/1 POST /posts PUT /posts/1 PATCH /posts/1 DELETE /posts/1
-
举个例子
-
db.json
{ "user": [ { "id": 1, "title": "json-server1", "author": "knightzz1" }, { "id": 2, "title": "json-server2", "author": "knightzz2" } ], "login": { "msg": "请求成功", "code": "100", "info": { "result": "fail" } } }
-
我们可以通过访问
http://127.0.0.1:3303/user/1
获取 id 为1的数据
1.4.2 自定义路由
-
虽然json-server给我们提供了restful api, 但是不能满足我们所有的需求, 所以我们需要自己定义
-
新建 json-server.json 这个文件里面可以填写相关配置, 名字不要改, 默认识别这个文件名
{ "port": 3303, "watch": true, "read-only": false, "no-cors": false, "no-gzip": false, "routes": "routes.json" }
-
"routes": "routes.json"
指定路由文件 -
新建
routes.json
, 左边是非 restful api 风格的请求, 右边是restful api 的请求路径{ "/login/auth": "/login" }
-
/login/auth
是我们在浏览器中访问的路径,/login
是实际映射的路径, 也就是对应 db.json 中的数据 -
如下图所示 :