2. 程式人生 > >json-server模擬REST API

json-server模擬REST API

阿新 • • 發佈：2017-07-14
put foreign 6.0 功能 ron htm 寫入 ring har

一般情況下，一個APP的數據都需要等待接口人員開發完對應的接口才可以獲取到，這樣子的效率有點低。最好是我們可以自己模擬接口數據，進行頁面的數據填充，打通所有關節，之後等接口開發好了，改下接口地址就好了。

我們今天所要講的工具：json-server就能實現這樣的功能。

1、安裝json-server

首先我們的電腦要安裝有nodejs，然後使用npm命令來安裝：sudo npm install -g json-server

MeWifi:~ cjy$ npm install -g json-server
/usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js
- [email protected]
/* */ [email protected] /usr/local/lib └─┬ [email protected] ├─┬ [email protected] │ ├── [email protected] │ └── [email protected] ├── [email protected] ├─┬ [email protected] │ └─┬ [email protected] │ └── [email protected]
/* */ ├── [email protected] ├─┬ [email protected] │ └─┬ [email protected] │ └─┬ [email protected] │ └─┬ [email protected] │ └─┬ [email protected] │ └── [email protected] └─┬ [email protected] └─┬ [email protected]
/* */ └─┬ [email protected] └─┬ [email protected] └── [email protected]

檢驗是否安裝成功，查看json-server配置項：json-server -h

MeWifi:~ cjy$ json-server -h
/usr/local/bin/json-server [options] <source>

選項：
  --config, -c               Path to config file    [默認值: "json-server.json"]
  --port, -p                 Set port                             [默認值: 3000]
  --host, -H                 Set host                        [默認值: "0.0.0.0"]
  --watch, -w                Watch file(s)                                [布爾]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                    [數組]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                      [布爾]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing        [布爾]
  --no-gzip, --ng            Disable GZIP Content-Encoding                [布爾]
  --snapshots, -S            Set snapshots directory               [默認值: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id)  [默認值: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                  [默認值: "Id"]
  --quiet, -q                Suppress log messages from output            [布爾]
  --help, -h                 顯示幫助信息                                 [布爾]
  --version, -v              顯示版本號                                   [布爾]

示例：
  /usr/local/bin/json-server db.json
  /usr/local/bin/json-server file.js
  /usr/local/bin/json-server
  http://example.com/db.json

https://github.com/typicode/json-server　

2、運行

在任意的目錄創建一個json文件，例如在json目錄創建data.json文件,寫入以下內容，並在json目錄下執行json-server data.json

{
    "list": {
        "news": [
            {
　　　　　　　　　 "newsId": 1,
                "title": "標題1",
                "content": "私服大師傅放聲大哭"
            },
            {
　　　　　　　　　 "newsId": 2,
                "title": "標題2",
                "content": "怎麽可能"
            }
        ]
    },
    "detail": {
        "object": {
            "name": "我是大錘",
            "sex": 1,
            "isComplete": true
        }
    }
}

成功的話會出現如下內容

MeWifi:~ cjy$ cd /工作/json/
MeWifi:json cjy$ json-server data.json

  \{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:3000/list
  http://localhost:3000/detail

  Home
  http://localhost:3000

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

接下去就可以訪問了：

技術分享

3、常用操作

json-server支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等。

這裏主要介紹下它的強大的過濾功能。

示例數據源：

[
    {
        "newsId": 1,
        "title": "標題1",
        "content": "私服大師傅放聲大哭"
    },
    {
        "newsId": 2,
        "title": "標題2",
        "content": "怎麽可能"
    }
]

屬性值(Filter)

使用 . 操作對象屬性值

//獲取content的長度為4的數據

技術分享

排序(Sort)

使用 _sort 和 _order (默認使用升序(ASC))

//按照newsId降序排列

技術分享

分割(Slice)

使用 _start 和 _end 或者 _limit

//從下標0（第一個對象）開始，獲取1條數據

技術分享

全文檢索

使用 q，在對象全部value中遍歷查找包含指定值的數據

//查找全部字段包含“可能”的數據

技術分享

使用 _like 進行模糊查找 (支持正則表達式)

//查找content中含有“大哭”字樣的數據

技術分享

還有一些操作，可以參考這篇文章：json-server說明

json-server模擬REST API

相關推薦

json-server模擬REST API

put foreign 6.0 功能 ron htm 寫入 ring har 一般情況下，一個APP的數據都需要等待接口人員開發完對應的接口才可以獲取到，這樣子的效率有點低。最好是我們可以自己模擬接口數據，進行頁面的數據填充，打通所有關節，之後等接口開發好了，改下接口地址就

json-server 模仿REST API 接口

patch local 跨域 少量數據 cal 跨域請求 安裝 url地址 nbsp 身為小白自學的時候面臨沒有數據接口煩惱，經過一番查找了解知道了 json-server 工具，因為它足夠簡單，寫少量數據，即可使用。也因為它足夠強大，支持CORS和JSONP跨域請求，支持

使用 json-server 模擬數據

.json title clas 定義 指定端口 測試 啟動 host 代碼 1. 先安裝 npm install json-server -g 2.查看是否安裝成功 json-server -h 3.準備數據，新建一個文件夾 mock，cd mock，在mo

fetch 代替 XMLHttpRequest (json-server 模擬後臺接口)

bject clas 代碼 說了 cti jpg lan author alt 一、fetch 是 XMLHttpRequest 的替代方案。說白了就是除了 ajax 獲取後臺數據之外也可以用fetch 來獲取。 二、fetch 的支持性還不是很好。掛載於BOM中可以通過瀏

json-server模擬後端介面處理資料

在開發過程中，前後端不論是否分離，介面多半是滯後於頁面開發的。所以建立一個REST風格的API介面，給前端頁面提供虛擬的資料，是非常有必要的。 對比過多種mock工具後，我最終選擇了使用 json server 作為工具，因為它足夠簡單，寫少量資料，即可使用。也因為它足夠強大，支援COR

json-server模擬後端接口處理數據

建立 輸入 模糊 cors size 開發 支持 code con 在開發過程中，前後端不論是否分離，接口多半是滯後於頁面開發的。所以建立一個REST風格的API接口，給前端頁面提供虛擬的數據，是非常有必要的。 對比過多種mock工具後，我最終選擇了使用 json serv

MockJs結合json-server模擬後臺資料

Mock.js 結合 json-server 模擬後臺資料 說明 Mock.js 是一款模擬資料生成器，可以根據模板生成資料、模擬網路請求，返回模擬資料等 更多細節參考 官

json-server模擬介面獲取mock資料

安裝json-server 執行以下命令 cnpm install json-server –save 參考官方文件修改dev-server.js 文件地址：json-server官方文件 2.1 修改dev-server.js const

Vue.js（15）之 json-server搭建模擬的API服務器

詳情 dash margin 個數 container time clas nbsp host json-server搭建模擬的API服務器 運行命令 npm install json-server -D 全局安裝 json-server 項目根目錄下創建 moc

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

嘮嘮嗑、 為什麼要來詳細介紹一下json-server呢？因為我們前端開發人員在開發後臺管理類專案的過程中打交道最多還是API聯調，然後資料渲染頁面，或者動態資料繫結。 但是有個很矛盾的問題就是，很多時候前後端是一起開發的，有可能後端的進度趕不上前端的進度。一般情況下的解

使用 json-server 來創建一個模擬 API

參考資料 html mes 安裝 特定 這樣的 來安 資源 字符串 在本教程中，您會看到如何通過 json-server 來設置和使用模擬的 REST API，並可以使用它來完成移動應用或 Web 應用程序的開發 什麽是 REST？ REST 是 Representat

使用 json-server 來建立一個模擬 API

點選上方“前端達人” 可以訂閱哦！在本教程中，您會看到如何通過 json-server 來設定和

一分鐘內搭建全web的API接口神器json-server詳解

一個 設置 director sha sna 用法 依然 ref 參考 JSON-Server 是一個 Node 模塊，運行 Express 服務器，你可以指定一個 json 文件作為 api 的數據源。 安裝json-server npm install -g jso

json-server+faker模組批量建立本地模擬資料

JSON-Server 簡單來說，JSON-Server是一個Node模組，執行Express伺服器，你可以指定一個json檔案作為api的資料來源。 只用json-server可以在很短的時間內搭建一個Rest API, 讓前端在不依賴後端的情況下進行開發。 全域性安裝JSO

使用WebStorm的REST Client操作JSON Server

文章目錄 建立db.json 使用WebStorm的REST Client操作JSON Server 資料查詢 插入資料 修改資料 刪除操作 生成資料儲存快照 建立db.json   

如何禁用WordPress程式REST API功能且移除wp-json連結

WordPress是什麼？ WordPress是使用PHP語言開發的部落格平臺，使用者可以在支援PHP和MySQL資料庫的伺服器上架設屬於自己的網站。也可以把 WordPress當作一個內容管理系統（CMS）來使用。   WordPress是一款個人部落格系統，並逐步演化成一款

前端模擬資料模型-json-server-配置

專案開發過程中，前後端開發人員並行開發效率是不言而喻的，如果前端er，指令碼提前完成，而後端er由於業務複雜介面還沒有完成，那前端er就會出現等待狀態。 如果兩者可以將資料模型提前商量好，然後有一個工具可以模擬介面，那前端er就可以繼續寫非同步互動的響應邏輯了

Ask HN: Which tool/workflow is best to describe a JSON/REST API

Hi Hackernews,I'm tasked with defining a new JSON API for an existing tool. Our current API is pretty fugly and we're going to rewrite large parts of it to

Httpclient 請求帶Authorization（授權）的REST API 返回JSON資料

import net.sf.json.JSONArray; import net.sf.json.JSONObject; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; impo

Python REST API Authentication with JSON Web Tokens

1. Setting up the API Client ModelAdd a new files models/client.py and add the code below. This model will store an API clients access credentials. The cli