快速搭建假數(shù)據服務器

在前后端分離的這種工作模式下,分工明確,各司其職。前端負責展示數(shù)據,后端提供數(shù)據。然而,在這種過程中對于接口的規(guī)范 需要提前制定好。例如根據規(guī)范提前模擬數(shù)據,這個時候就比較麻煩的。
json-server快速搭建
JsonServer這個比較NB了,它可以快速搭建服務端環(huán)境,創(chuàng)建json文件,便于調用。
json-server可以直接把一個json文件托管成一個具備全RESTful風格的API,并支持跨域、jsonp、路由訂制、數(shù)據快照保存等功能的 web 服務器。
操作步驟

(1) 命令行進入項目目錄demo,執(zhí)行下面的命令。

$ npm install -S json-server
(2) 在項目根目錄下,新建一個 JSON 文件db.json。
簡單總結:db.json第一層key值代碼接口地址,請求該地址會得到對應的json數(shù)據

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "users": [
    { "id": 1, "name": "jack", "age": 12 }
  ]
}

(3) 打開package.json,在scripts字段添加一行。

"scripts": {
  "server": "json-server db.json",
  "test": "..."
}

配置"server": "json-server db.json" 使用json-server啟動服務對應下一步的:npm run server
(4) 命令行下執(zhí)行下面的命令,啟動服務。

$ npm run server

(5)請求查看結果:
http://127.0.0.1:3000/posts發(fā)出GET請求
http://127.0.0.1:3000/posts/1發(fā)出GET請求

(6)向http://127.0.0.1:3000/users發(fā)出POST請求。向對應數(shù)據添加數(shù)據。

接口轉發(fā)
配合mock.js更復雜的使用。

為什么不在瀏覽器中使用mockjs

通過閱讀 mockjs 的官方文檔可以發(fā)現(xiàn),它其實是作為一個獨立的 mock server 存在的,就算沒有json server,一樣可以反饋數(shù)據,但是由于以下一些缺點,讓我只能把它作為一個數(shù)據構造器來使用:

不能跨域使用

與某些框架中的路由處理邏輯沖突

無法定義復雜的數(shù)據結構,比如下面的數(shù)據結構,images 將會是字符串 [object object], 而非預想中的數(shù)組:

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容