json-server服務詳解
第1章 json-server服務
JSON-Server 是一個 Node 模塊，運行 Express 服務器，你可以指定一個 json 文件作為 api 的數據源。
1.1 json-server的安裝
命令：npm install --g json-server- 1
1.2 json-server服務的啟動
json-server可以直接把一個json文件托管成一個具備全RESTful風格的API,並支持跨域、jsonp、路由訂制、數據快照保存等功能的 web 服務器。
db.json文件的內容格式如下：
通過啟動json-server服務並偵聽db.json，就可以將db.json文件托管成一個 web 服務，此時db.json就充當了數據庫服務器的作用。
命令：json-server --port 53000 --watch db.json（不指定端口時默認端口是3000）- 1
如下圖所示, 則證明json-server服務啟動成功
此時，你可以打開你的瀏覽器，然后輸入：http://localhost:3000/students
1.3 json-server 啟動參數表
- 語法：json-server [options]
- source可以是json文件或者js文件
- [options]參數列表：
| 參數 | 簡寫 | 默認值 | 說明 |
|---|---|---|---|
| --config | -c | 指定配置文件 | [默認值: "json-server.json"] |
| --port | -p | 設置端口[默認值為3000] | Number |
| --host | -H | 設置域[默認值為"0.0.0.0"] | String |
| --watch | -w | Watch file(s) | 是否監聽 |
| --routes | -r | 指定自定義路由 | |
| --middlewares | -m | 指定中間件 files | [數組] |
| --static | -s | Set static files directory | 靜態目錄,類比：express的靜態目錄 |
| --readonly | --ro | Allow only GET requests | [布爾] |
| --nocors | --nc | Disable Cross-Origin Resource Sharing [布爾] | |
| --no gzip | gzip | --ng Disable GZIP Content-Encoding [布爾] | |
| --id | -i | Set database id property (e.g. _id) | [默認值: "id"] |
| --delay | -d | Add delay to responses (ms) | |
| --snapshots | -S | Set snapshots directory [默認值: "."] | |
| --foreignKeySuffix | -- | fks Set foreign key suffix (e.g. _id as in post_id) | [默認值: "Id"] |
| --help | -h | 顯示幫助信息 | [布爾] |
| --version | -v | 顯示版本號 | [布爾] |
幾種啟動json-server的方式
命令1：json-server db.json
命令2：json-server --watch app.js
命令3：json-server --watch -c ./jsonserver.json
命令4：json-server --port 8888 --watch db.json（不指定端口時默認端口是3000）- 1
- 2
- 3
- 4
1.4 通過app.js動態生成模擬數據
把app.js文件返回的數據托管成web服務。
使用app.js配合mockjs庫可以很方便的進行生成模擬數據。
// 用mockjs模擬生成數據
const Mock = require('mockjs');
module.exports = () => {
// 使用 Mock
var data = Mock.mock({
'students|10': [
{
// 屬性 id 是一個自增數，起始值為 1，每次增 1
"id|+1": 10,
"name|1": ["小明","小花","小龍","小林","小雨","小虎","小艾","小夢","小凡","小雲"],
"class|1": ["三年一班","三年二班"],
"school":"高新一中",
"category_Id": 995
}
]});
// 返回的data會作為json-server的數據
return data;
};
1.5 使用默認路由
默認的路由
json-server為提供了GET,POST, PUT, PATCH ,DELETE等請求的API,分別對應數據中的所有類型的實體。
# 獲取所有的學生信息
GET /students
# 獲取id=1001的學生信息
GET /students/1001
# 添加學生信息，請求body中必須包含學生的屬性數據，json-server自動保存。
POST
/students
# 修改學生信息，請求body中必須包含學生的屬性數據
PUT /students/1
# 刪除學生信息
DELETE /students/1
# 獲取具體學生信息id=1001
GET /students/1001
# 模糊查詢學生信息
GET /students/name_like='小' // _like--模糊查詢的關鍵字
# 過濾查詢學生信息
GET /students?id=json-server&name='小花'
GET /students?id=1&id=2
# 查詢學生信息，使用關系表達式進行過濾
GET /students?id_ne=1001 // _ne--不等於
GET /students?id_lte=1001 // _lte--小於等於
GET /students?id_lte=1001 // _gte--大於等於
# 查詢學生信息，分頁查詢
GET /students?_page=5 // 查詢第5頁的學生信息
GET /students?_page=5&_limit=20 // 查詢第5頁的學生信息並設置每頁顯示信息條數為20條
# 查詢學生信息，並以某個字段進行排序，同時可指定升序還是降序排列
GET /students?_sort=name&_order=asc // 按照姓名升序排列 _sort--排序關鍵字，_order--升降序關鍵字
GET /students/?_sort=id&_order=desc // 按照學號降序排列
GET /students?_sort=name,id&_order=desc,asc // 同時排序多個字段
# 查詢學生信息，從任意位置開始查詢已知數據中的部分數據
GET /students?_start=20&_end=30 // 從第20條開始查詢10條數據
GET /students?_start=20&_limit=10 // 從第20條開始查詢，每頁顯示10條數據
# 全文檢索
GET /students?q=internet // 通過q參數進行全文檢索
1.6 使用自定義路由
配置自定義路由的命令
命令：json-server --watch --routes route.json db.json- 1
路由配置文件的內容格式如下：
{
"/api/*": "/$1", // /api/students<==> /students
"/:students/:id/show": "/:students/:id",
"/posts/:id": "/posts?id=:id",
"/students\\?id=:id": "/posts/:id"
}
1.6 自定義配置文件
啟動json-server時， 如果自定義配置的參數和文件過多，容易出現命令敲錯的現象。json-server允許我們把所有的配置放到一個配置文件中，這個配置文件默認json-server.json;
配置文件的主要內容如下：
{
"port": 8888, // 自定義服務監聽端口
"watch": true, // 服務監聽
"static": "./public", //靜態文件目錄
"read-only": false, // 是否只允許get請求
"no-cors": false, // 是否允許跨域訪問
"no-gzip": false, // 是否可壓縮
"routes": "route.json" // 自定義路由
}
使用配置文件啟動json-server命令
json-server --watch -c jserver.json db.json- 1