1. 程式人生 > >Json-server搭建前端虛擬REST API服務

Json-server搭建前端虛擬REST API服務

嘮嘮嗑、

為什麼要來詳細介紹一下json-server呢?因為我們前端開發人員在開發後臺管理類專案的過程中打交道最多還是API聯調,然後資料渲染頁面,或者動態資料繫結。

但是有個很矛盾的問題就是,很多時候前後端是一起開發的,有可能後端的進度趕不上前端的進度。一般情況下的解決辦法就是在前端應用裡面寫死資料模擬,在缺少了請求的一個過程後,在更新資料,刪除資料等一些頁面切換複雜互動的場景下,死資料還需要vuex或redux的支援。

在前端安裝json-server依賴,可以很好的解決這些問題,在寫前端頁面邏輯的時候可以直接請求互動,新增、更新、刪除資料可以直接修改本地json檔案裡面的資料。就不需要在全域性定義變數儲存資料。且可以直接跨域請求,不需要同源請求才能聯調。

一、安裝

1.npm安裝 (建議cnpm安裝)    npm install -g json-server  2.yarn安裝    yarn  global add json-server

安裝成功後打印出:

C:\Users\92809>yarn global add json-server
yarn global v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "
[email protected]
" with binaries:       - json-server

二、建立json資料庫資料表

1.建立一個自定義dbname.json/ dbname.js檔案 2.dbname檔案內檔案格式保持json風格 3.Json風格如下:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment1", "author": { "name": "typicode1", "age": 10 },"postId": 1 },
    { "id": 2, "body": "some comment2", "author": { "name": "typicode2", "age": 12 },"postId": 2 },
    { "id": 3, "body": "some comment3", "author": { "name": "typicode3", "age": 15 },"postId": 3 }
  ],
  "profile": { "name": "typicode" }
}

4.Js風格如下:

module.exports = function() {
  return {//...}
};

三、開啟json-server服務

(1)原生態開啟

D:\me\json-server\jserver-one>json-server --w onedb.json

  \{^_^}/ hi!

  Loading onedb.json
  Done

  Resources
  http://localhost:3000/news
  http://localhost:3000/comments

  Home
  http://localhost:3000

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

(2)開啟遠端json資料庫檔案

$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db

(3)設定服務埠號

json-server --watch db.json --port 3004

(4)yarn / npm開啟

  2-1.  yarn init / npm init   2-2. 在初始化的package.json檔案中新增:  

 "scripts": {
     "server": "json-server onedb.json --port 3003"
    }

  2-3. 執行:

npm run server / yarn run server /. yarn server

(4)作為伺服器載入本地靜態網頁

md asset
cd asset
echo asset.html > asset.html
json-server onedb.json --port 3006 --static asset [ 資源目錄名 ]

訪問:http://localhost:3006/asset.html (OK)

注:如果啟動時沒有配置目錄 -> json-server onedb.json --port 3006 

4-1. 如果有設定public目錄,http://localhost:3006/訪問的是public下的index.html檔案 4-2. 如果沒有public目錄或index,html檔案則顯示 {} 

四、json-server提供的請求方式

簡述:Get請求主要用於獲取資料,POST請求用於新增資料,PUT請求用於修改替換資料,PATCH表示部分替換資料,OPTIONS用於獲取伺服器支援的HTTP請求方法及其他請求功能選項(GET、POST、PUT、DELETE、PATCH、OPTIONS)

注:POST\PUT\PATCH請求需要設定請求頭Content-type: application/json

1.基礎請求方式

GET    /posts
GET    /posts/:id
POST   /posts
PUT    /posts/:id
PATCH  /posts/:id
DELETE /posts/:id

2.獲取json資料庫中所有資料

GET /db

3.帶引數查詢請求方式

GET /posts?title=json-server&author=typicode
GET /posts?id=1&postid=2
GET /comments?author.name=typicode1  * 使用.訪問下級屬性值

4.頁面分頁連結請求(first、last、prev、next)

GET /posts?_page=7
GET /posts?_page=7&_limit=20

5.升降序排列請求

GET /users?_sort=id&_order=asc
GET /users?_sort=name&_order=asc

多條件升降序: GET /posts?_sort=user,views&_order=desc,asc

6.範圍查詢資料

GET /users?_start=2&_end=20 (類似於substring)
GET /users?_start=2&_limit=3    (類似於substr)

7.根據文字模糊匹配查詢資料

GET /users?q=情感

五、自定義路由配置

1.新建一個routes.json檔案:echo {} > routes.json 2.向檔案中寫入:

{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/books/:name": "/books?name=:name",
  "/articles\\?id=:id": "/books/:id",
  "/articles/:id": "/books/:id"
}

3.啟動服務:json-server onedb.js --routes routes.json

列印: 

 \{^_^}/ hi!

  Loading onedb.js
  Loading routes.json
  Done

  Resources
  http://localhost:3000/users
  http://localhost:3000/books

  Other routes
  /api/* -> /$1
  /:resource/:id/show -> /:resource/:id
  /books/:name -> /books?name=:name
  /articles\?id=:id -> /books/:id
  /articles/:id -> /books/:id

  Home
  http://localhost:3000

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

4.測試ap介面

  GET /api/users  等價於 GET /users
  GET /users/1/show 等價於 GET /users/1
  GET /books/意林 等價於 GET/books?name=意林
  GET /articles?id=3 等價於 GET /books/3

六、Node模組中引入使用方法

1.新建server.js檔案:echo server > server.js 2.依賴安裝json-server、express : 

cnpm install express --save-dev
cnpm install json-server --save-dev
或者:
yarn add express  --dev
yarn add json-server --dev 

開啟服務: node server.js

2-1.使用 express開啟服務:

const app = require('express')();

app.get('/',(req,res)=>{
    res.send({'name':'哆啦A夢'});
});

var server = app.listen(3008,()=>{
    var host = server.address().address;
    var port = server.address().port; 
    console.log('example app listening at http://%s:%s',host,port);
});

2-2. 使用json-server開啟服務

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('onedb.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3009, () => {
  console.log('JSON Server is running at port 3009.')
})

七、json-server在node中的進階使用

1.自定義路由配置

(1)在上述json-server.js檔案中新增:

//在JSON Server router之前新增自定義路由
server.get('/echo', (req, res) => {
  res.jsonp(req.query)
})

//你需要使用一個body-parser來處理POST,PUT和PATCH
//你可以使用JSON Server使用的那個
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  // 繼續json-server路由
  next()
})

(2)啟動服務 node json-srevr.js (3)測試自定義介面:

  請求: GET /echo?id=2&pid=3&page=20
  響應: { "id": "2", "pid": "3", "page": "20" }

2.訪問許可權控制

server.use((req, res, next) => {
 if (isAuthorized(req)) { // 在這兒新增你的許可權邏輯
   next() // 繼續json-server路由
 } else {
   res.sendStatus(401)
 }
})

3.過濾本地json資料,格式化後響應給請求

// In this example, returned resources will be wrapped in a body property
router.render = (req, res) => {
  res.jsonp({
    body: res.locals.data  // res.locals.data 代表重onedb.json中查詢到到的內容
  })
}

4.自定義返回狀態碼

// In this example we simulate a server side error response
router.render = (req, res) => {
  res.status(500).jsonp({
    body: res.locals.data,
    error: "error message here"
  })
}

5.新增路由重定向規則 

// Add this before server.use(router)
server.use(jsonServer.rewriter({
  '/api/*': '/$1',
  '/blog/:resource/:id/show': '/:resource/:id'
}))

測試:GET /api/comments 等價於 GET /comments

6.建立子路由物件

server.use('/api', router)

八、再嘮嘮

  在Angular的單元測試中接觸到了json-server,然後覺得這個虛擬前端服務使用起來非常順手。然後花了一整天的時間,完完整整的把json-srever的相關知識點和使用方法捋了一遍,確實是個很好的服務,但是和node結合起來的話,有感覺有些彆扭;有可能是我用express用習慣了,但是怎麼說呢,功能確實很強大,但是後面些好多和express結合起來開發的時候就有點感覺小重的感覺。違背了輕、快、巧的初衷,不過這個也是看個人喜好,個人建議還是和npm或者yarn結合起來用,一行命令搞定,要清爽的多 哈哈~~  

九、再囉嗦幾句、哈哈