亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

用JSON-server模擬REST API(一) 安裝運(yùn)行

Sleepy / 1031人閱讀

摘要：曹縣宣布昨日晚間登日成功長(zhǎng)江流域首次發(fā)現(xiàn)海豚支持黨中央決定抄寫黨章勢(shì)在必行為了方便，再創(chuàng)建一個(gè)文件，寫入然后使用到目錄下執(zhí)行命令，如果成功會(huì)出現(xiàn)你的電腦中文件夾所在目錄的路徑如果不成功請(qǐng)檢查文件的格式是否正確。

在開(kāi)發(fā)過(guò)程中，前后端不論是否分離，接口多半是滯后于頁(yè)面開(kāi)發(fā)的。所以建立一個(gè)REST風(fēng)格的API接口，給前端頁(yè)面提供虛擬的數(shù)據(jù)，是非常有必要的。

對(duì)比過(guò)多種mock工具后，我最終選擇了使用 json server 作為工具，因?yàn)樗銐蚝?jiǎn)單，寫少量數(shù)據(jù)，即可使用。
也因?yàn)樗銐驈?qiáng)大，支持CORS和JSONP跨域請(qǐng)求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等。下面我將詳細(xì)介紹 json server 的使用。

安裝

首先你的電腦中需要安裝nodejs，建議使用最新版本。然后全局安裝json server.

  npm install json-server -g

使用linux和macOS的電腦需要加上sudo

  sudo npm install json-server -g

安裝完成后可以用 json-server -h 命令檢查是否安裝成功，成功后會(huì)出現(xiàn)

json-server [options] 

選項(xiàng)：
  --config, -c       Path to config file            [默認(rèn)值: "json-server.json"]
  --port, -p         Set port                                     [默認(rèn)值: 3000]
  --host, -H         Set host                                [默認(rèn)值: "0.0.0.0"]
  --watch, -w        Watch file(s)                                        [布爾]
  --routes, -r       Path to routes file
  --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                       [默認(rèn)值: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)          [默認(rèn)值: "id"]
  --quiet, -q        Suppress log messages from output                    [布爾]
  --help, -h         顯示幫助信息                                         [布爾]
  --version, -v      顯示版本號(hào)                                           [布爾]

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

https://github.com/typicode/json-server
運(yùn)行

安裝完成后，可以在任一目錄下建立一個(gè) xxx.json 文件,例如在 mock/ 文件夾下，建立一個(gè) db.json 文件，并寫入以下內(nèi)容，并在 mock/ 文件夾下執(zhí)行 json-server db.json -p 3003 。

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

為了方便，再創(chuàng)建一個(gè) package.json 文件，寫入

{
  "scripts": {
    "mock": "json-server db.json --port 3003"
  }
}

然后使用到 /mock 目錄下執(zhí)行 npm run mock 命令，如果成功會(huì)出現(xiàn)

> @ mock /你的電腦中mock文件夾所在目錄的路徑/mock
> json-server db.json -p 3003


  {^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3003/news
  http://localhost:3003/comments

  Home
  http://localhost:3003

如果不成功請(qǐng)檢查 db.json 文件的格式是否正確。

操作數(shù)據(jù) GET

這個(gè)時(shí)候訪問(wèn) http://localhost:3003/db 可以查看 db.json 文件中所定義的全部數(shù)據(jù)。
使用瀏覽器地址欄，jQuery.get 或 fecth({method: "get"}) 訪問(wèn) http://localhost:3003/news ，則可以看到 news 對(duì)象下的數(shù)據(jù),以Array格式返回:

[
  {
    "id": 1,
    "title": "曹縣宣布昨日晚間登日成功",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  },
  {
    "id": 2,
    "title": "長(zhǎng)江流域首次發(fā)現(xiàn)海豚",
    "date": "2016-08-12",
    "likes": 505,
    "views": 9800
  }
]
POST

以jquery的 $.ajax 方法舉例,以下代碼會(huì)實(shí)時(shí)的向 db.json 中的 news 對(duì)象push一條新的數(shù)據(jù)再次用 get 方式訪問(wèn) http://localhost:3003/news , 就可以看到它了

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

同樣以jquery的 $.ajax 方法舉例,以下代碼會(huì)實(shí)時(shí)的對(duì) db.json 中的 news 對(duì)象中 id=1 數(shù)據(jù)進(jìn)行修改

$.ajax({
    type: "put",
    url: "http://localhost:3003/news/1",
    data: {
      "title": "曹縣宣布昨日晚間登日失敗",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    }
  }
)

// 結(jié)果

[
  {
    "id": 1,
    "title": "曹縣宣布昨日晚間登日失敗",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  }
]

PATCH 和 DELETE 使用方式同上，就不做演示了。

參考資料

json-server源碼 ： json-server
mockjs源碼 ： mockjs
demo ： 示例代碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79763.html

相關(guān)文章

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

    摘要：今天發(fā)現(xiàn)了一個(gè)神器在他的幫助下可以在很短的時(shí)間內(nèi)搭建一個(gè)然后就可以讓前端在不依賴后端的情況下進(jìn)行開(kāi)發(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)行開(kāi)發(fā)啦！...

    sarva 評(píng)論0 收藏0

  • 使用json-server來(lái)模擬REST API

    摘要：官方地址使用可全局安裝，也可針對(duì)項(xiàng)目安裝?？捎瞄_(kāi)啟服務(wù)。數(shù)據(jù)文件格式如下讓讀書點(diǎn)燃?jí)粝氲攸c(diǎn)濱江星耀城讓讀書點(diǎn)燃?jí)粝氲攸c(diǎn)濱江星耀城仿京東購(gòu)物車仿京東購(gòu)物車修改里面的命令。 在前端開(kāi)發(fā)中，如果后端接口還沒(méi)有提供，前端拿不到數(shù)據(jù)，可能就沒(méi)法繼續(xù)寫一些交互行為的代碼。這一問(wèn)題可通過(guò)json-server來(lái)很好地解決。本文主要講如何將json-server和webpack進(jìn)行整合，基于vue-w...

    smartlion 評(píng)論0 收藏0

  • 用JSON-server模擬REST API(三) 進(jìn)階使用

    摘要：前面演示了如何安裝并運(yùn)行和使用第三方庫(kù)真實(shí)化模擬數(shù)據(jù)下面將展開(kāi)更多的配置項(xiàng)和數(shù)據(jù)操作。示例數(shù)據(jù)源元小總小把清保住影辦歷戰(zhàn)資和總由共先定制向向圓適者定書她規(guī)置斗平相。 前面演示了如何安裝并運(yùn)行 json server , 和使用第三方庫(kù)真實(shí)化模擬數(shù)據(jù) , 下面將展開(kāi)更多的配置項(xiàng)和數(shù)據(jù)操作。 配置項(xiàng) 在安裝好json server之后，通過(guò) json-server -h 可以看到如下配置項(xiàng)...

    xavier 評(píng)論0 收藏0

  • 用JSON-server模擬REST API(二) 動(dòng)態(tài)數(shù)據(jù)

    摘要：上一篇演示了如何安裝并運(yùn)行在這里將使用第三方庫(kù)讓模擬的數(shù)據(jù)更加豐滿和實(shí)用。使用動(dòng)態(tài)數(shù)據(jù)上一篇演示時(shí)，使用了作為數(shù)據(jù)載體，雖然方便，但是如果需要大量的數(shù)據(jù)，則顯得力不從心。 上一篇演示了如何安裝并運(yùn)行 json server , 在這里將使用第三方庫(kù)讓模擬的數(shù)據(jù)更加豐滿和實(shí)用。 使用動(dòng)態(tài)數(shù)據(jù) 上一篇演示時(shí)，使用了 db.json 作為數(shù)據(jù)載體，雖然方便，但是如果需要大量的數(shù)據(jù)，則顯得力不...

    weakish 評(píng)論0 收藏0

  • 理解RESTful架構(gòu)與json-server模擬REST api的使用

    摘要：一什么是架構(gòu)即的縮寫，我們把他翻譯為表述性狀態(tài)傳遞，是博士在年他的博士論文中提出來(lái)的一種軟件架構(gòu)風(fēng)格。是個(gè)無(wú)狀態(tài)的協(xié)議，所以狀態(tài)就保存在服務(wù)器端。只要少量的數(shù)據(jù)就可使用，支持和。同時(shí)支持，同時(shí)提供一系列的查詢方法如。 一、什么是RESTful架構(gòu)？ REST即Representational State Transfer的縮寫，我們把他翻譯為表述性狀態(tài)傳遞，是Roy Fielding博...

    Atom 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<