介紹兩大神器！——使用json-server和faker.js模擬REST API

sarva 發(fā)布于2019-08-20 14:47 / 1655人閱讀

摘要：今天發(fā)現(xiàn)了一個(gè)神器在他的幫助下可以在很短的時(shí)間內(nèi)搭建一個(gè)然后就可以讓前端在不依賴后端的情況下進(jìn)行開發(fā)啦關(guān)于什么是設(shè)計(jì)指南阮一峰簡(jiǎn)單來(lái)說(shuō)，是一個(gè)模塊，運(yùn)行服務(wù)器，你可以指定一個(gè)文件作為的數(shù)據(jù)源。更多屬性可以查看這里好啦，基本就是這樣啦，

今天發(fā)現(xiàn)了一個(gè)神器——json-server!在他的幫助下可以在很短的時(shí)間內(nèi)搭建一個(gè)Rest API, 然后就可以讓前端在不依賴后端的情況下進(jìn)行開發(fā)啦！

關(guān)于什么是RESTful API:
《RESTful API 設(shè)計(jì)指南》—— 阮一峰
http://www.ruanyifeng.com/blo...

JSON-Server

簡(jiǎn)單來(lái)說(shuō)，JSON-Server是一個(gè)Node模塊，運(yùn)行Express服務(wù)器，你可以指定一個(gè)json文件作為api的數(shù)據(jù)源。

舉個(gè)例子：
我們現(xiàn)在想做一個(gè)app，用來(lái)管理客戶信息，實(shí)現(xiàn)簡(jiǎn)單的CRUD功能（create/retrieve/update/delete)，比如：

獲取客戶信息

增加一個(gè)客戶

刪除一個(gè)客戶

更新客戶信息

好啦，接下來(lái)我們就使用json-server完成這一系列動(dòng)作吧！

安裝JSON-Server

npm install -g json-server   //osx系統(tǒng)加"sudo"

新建一個(gè)文件夾同時(shí)cd它：

mkdir customer-manager && cd customer-manager

新建一個(gè)json文件，然后存放一點(diǎn)數(shù)據(jù)進(jìn)去：

touch customers.json

{
  "customers": [
    { "id": 1, "first_name": "John", "last_name": "Smith",  "phone": "219-839-2819" }
  ]
}

開啟json-server功能

所有你要做的事情只是讓json-server指向這個(gè)customers.json就ok啦！

json-server customers.js

然后出現(xiàn)這個(gè)提示就ok啦！

另外，JSON-Server很酷的一點(diǎn)就是支持各種GET/POST/PUT/DELETE的請(qǐng)求。
看幾個(gè)例子：

//GET
fetch("http://localhost:3000/tasks/")
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log("parsed json: ", json)
  }).catch(function(ex) {
    console.log("parsing failed: ", ex)
  });


//POST
fetch("http://localhost:3000/tasks/", {
  method: "post",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
       "title":   "Add a blogpost about Angular2",
       "dueDate": "2015-05-23T18:25:43.511Z",
       "done": false
   })
}).then(function(response) {
      return response.json()
    }).then(function(json) {
      console.log("parsed json: ", json)
    }).catch(function(ex) {
      console.log("parsing failed: ", ex)
    });
    
    
//PUT
fetch("http://localhost:3000/tasks/1", { //在url后面指定下id就好
  method: "put",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
       "done": true
   })
}).then(function(response) {
      return response.json()
    }).then(function(json) {
      console.log("parsed json: ", json)
    }).catch(function(ex) {
      console.log("parsing failed: ", ex)
    });
    
    
//DELETE
fetch("http://localhost:3000/tasks/1", {
method: "delete"
}).then(function(response) {
   return response.json()
 }).then(function(json) {
   console.log("parsed json: ", json)
 }).catch(function(ex) {
   console.log("parsing failed: ", ex)
 });

JSON-Server基本就是這樣啦！接下來(lái)介紹另一個(gè)神器~

Faker.js

如果要自己瞎編API數(shù)據(jù)的話也是比較煩惱，用faker.js就可以輕松解決這個(gè)問(wèn)題啦!他可以幫助你自動(dòng)生成大量fake的json數(shù)據(jù)，作為后端數(shù)據(jù)~

安裝faker.js

還是使用npm來(lái)安裝faker.js:

npm install faker

現(xiàn)在我們用javascript生成一個(gè)包含50個(gè)客戶數(shù)據(jù)的json文件：

//customers.js
var faker = require("faker")

function generateCustomers () {
  var customers = []

  for (var id = 0; id < 50; id++) {
    var firstName = faker.name.firstName()
    var lastName = faker.name.firstName()
    var phoneNumber = faker.phone.phoneNumberFormat()

    customers.push({
      "id": id,
      "first_name": firstName,
      "last_name": lastName,
      "phone": phoneNumber
    })
  }

  return { "customers": customers }
}

// 如果你要用json-server的話，就需要export這個(gè)生成fake data的function
module.exports = generateCustomers

然后讓json-server指向這個(gè)js文件：