json server的簡單使用（附：使用nodejs快速搭建本地服務器）

時間 2019-11-29

標籤 json server 簡單使用 nodejs 快速搭建本地服務器欄目 JavaScript 简体版

原文原文鏈接

做爲前端開發人員，常常須要模擬後臺數據，咱們稱之爲mock。一般的方式爲本身搭建一個服務器，返回咱們想要的數據。json server 做爲工具，由於它足夠簡單，寫少許數據，便可使用。前端

安裝

首先須要安裝nodejs，建議使用最新版本。而後全局安裝json server.node

npm install json-server -g

安裝完成後能夠用jquery

json-server -h

命令檢查是否安裝成功，成功後會出現json-server相關的參數選項。ajax

運行

安裝完成後，能夠在任一目錄下創建一個 xxx.json 文件,例如在 mock/ 文件夾下，創建一個 db.json 文件，並寫入如下內容，apache

{
    "news": [
        {
            "id": 1,
            "title": "曹縣宣佈昨日晚間登日成功",
            "date": "2016-08-12",
            "likes": 55,
            "views": 100086
        },
        {
            "id": 2,
            "title": "長江流域首次發現海豚",
            "date": "2016-08-12",
            "likes": 505,
            "views": 9800
        }
    ],
    "comments": [
        {
            "id": 1,
            "news_id": 1,
            "data": [
                {
                    "id": 1,
                    "content": "支持黨中央決定"
                },
                {
                    "id": 2,
                    "content": "抄寫黨章勢在必行！"
                }
            ]
        }
    ]
}

並在 mock/ 文件夾下執行：npm

 json-server -w db.json -p 3003

操做數據json

GET瀏覽器

這個時候訪問 http://localhost:3003/db 能夠查看 db.json 文件中所定義的所有數據。服務器

使用瀏覽器地址欄，jQuery.get 或 fecth({method: "get"}) 訪問 http://localhost:3003/news ，則能夠看到 news 對象下的數據,以Array格式返回:工具

[
    {
        "id": 1,
        "title": "曹縣宣佈昨日晚間登日成功",
        "date": "2016-08-12",
        "likes": 55,
        "views": 100086
    },
    {
        "id": 2,
        "title": "長江流域首次發現海豚",
        "date": "2016-08-12",
        "likes": 505,
        "views": 9800
    }
]

POST

以jquery的 $.ajax 方法舉例,如下代碼會實時的向 db.json 中的 news 對象push一條新的數據再次用 get 方式訪問http://localhost:3003/news , 就能夠看到它了

$.ajax({ type: 'post', url: 'http://localhost:3003/news', data: { "id": 3, "title": "我是新加入的新聞", "date": "2016-08-12", "likes": 0, "views": 0 } }

使用動態數據

使用 db.json 做爲數據載體，雖然方便，可是若是須要大量的數據，則顯得力不從心。

幸虧 json server 能夠經過js動態生成json格式數據，官方例子爲生成1000組user數據：

# /mock/db.js

module.exports = function() {
    var data = {
        users: []
    }
    for (var i = 0; i < 1000; i++) {
        data.users.push({
            id: i,
            name: 'user' + i
        })
    }
    return data
}

/mock 目錄下運行

json-server db.js -p 3003

咱們訪問 http://localhost:3003/news/ 看到的數據是

[
    {
        "id": 0,
        "name": "user0"
    },
    {
        "id": 1,
        "name": "user1"
    },
    {
        "id": 2,
        "name": "user2"
    },
    {
        "id": 3,
        "name": "user3"
    },
    ...
    {
        "id": 999,
        "name": "user999"
    }
]

以上內容大部分來自於網上其餘網友的總結，此處只是方便往後本身查看。