成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用json-server來模擬REST API

smartlion / 2418人閱讀

摘要：官方地址使用可全局安裝，也可針對項目安裝。可用開啟服務(wù)。數(shù)據(jù)文件格式如下讓讀書點燃夢想地點濱江星耀城讓讀書點燃夢想地點濱江星耀城仿京東購物車仿京東購物車修改里面的命令。

在前端開發(fā)中，如果后端接口還沒有提供，前端拿不到數(shù)據(jù)，可能就沒法繼續(xù)寫一些交互行為的代碼。這一問題可通過json-server來很好地解決。本文主要講如何將json-server和webpack進行整合，基于vue-webpack-boilerplate。

json-server官方地址

使用

1.可全局安裝json-server，也可針對項目安裝。這里是全局安裝json-server。
npm install json-server -g

2.安裝完成后，可以在任一目錄下建立一個 xxx.json 文件。這里是在src的同級目錄新建文件夾mock，在該文件夾內(nèi)新增文件db.json，文件內(nèi)容格式如下：

{
activitys: [
  {
    "id": 1,
    "url": "/static/actimg1.jpg",
    "desc": "讓讀書點燃夢想",
    "place": "地點：濱江星耀城",
    "time": "2017-5-10"
  },
  {
    "id": 2,
    "url": "/static/actimg1.jpg",
    "desc": "讓讀書點燃夢想",
    "place": "地點：濱江星耀城",
    "time": "2017-5-10"
  }
],
blogs: [
  {
    "id": 1,
    "avatarUrl": "/static/bloglistimg1.jpg",
    "name": "張三",
    "grade": "資深前端工程師",
    "slogan": "學(xué)習(xí)、分享，共同進步，只有堅持才能獲得最后的成功"
  },
  {
    "id": 2,
    "avatarUrl": "/static/bloglistimg1.jpg",
    "name": "張三",
    "grade": "資深前端工程師",
    "slogan": "學(xué)習(xí)、分享，共同進步，只有堅持才能獲得最后的成功"
  }
]
}

3.為了便于之后接入后臺 API，所以需要進行代理。在config/index.js文件內(nèi)增加proxyTable（即圖中紅線框出來的部分）。圖中將所有以/api開頭的請求委托給http://localhost:3000 ，即請求/api/activitys/1相當(dāng)于是請求http://localhost:3000/activitys/1。該參數(shù)配置詳解見這里

4.在package.json的scripts內(nèi)新增兩行命令。

"mock": "json-server mock/db.json "
"mockdev": "npm run mock | npm run dev"

可用npm run mock開啟json-server服務(wù)。成功開啟見下圖：

也可使用npm run mockdev直接運行mock和dev命令。

5.在其他頁面可通過/api/XXX/獲取數(shù)據(jù)。

存在的問題

若是要模擬的接口非常多，都往db.json里面添加的話，會導(dǎo)致這個文件變得非常龐大，難以維護。而且其他前端人員也會修改到這個文件，每次合并代碼都要考慮沖突問題。

解決方案

每個人各自建立自己模塊的數(shù)據(jù)文件，最終通過代碼將多個數(shù)據(jù)文件合并為一個文件。

1.在mock/下新建server.js，該文件用于將各數(shù)據(jù)文件內(nèi)的數(shù)據(jù)合并后統(tǒng)一輸出。內(nèi)容如下：

const fs = require("fs")
const path = require("path")
const MOCK_DIR = path.resolve(__dirname, "test")

const walk = dir => {
  let results = []
  let list = fs.readdirSync(dir)
  list.forEach(function (file) {
    file = dir + "/" + file
    let stat = fs.statSync(file)
    if (stat && stat.isDirectory()) {
      results = results.concat(walk(file))//若file是文件夾，則遍歷獲取該文件夾下文件內(nèi)數(shù)據(jù)。
    } else if (path.extname(file) === ".js") {
      results.push(file)
    }
  })
  return results
}
const files = walk(MOCK_DIR)
let db = {}
files.forEach(function (file) {
  Object.assign(db, require(file))
})
module.exports = function () {
  return db
}

2.在mock/下新增test文件夾，各前端人員可自行在test/下新增數(shù)據(jù)文件(xx.js)和文件夾。數(shù)據(jù)文件格式如下:

module.exports = {
  activitys: [
    {
      "id": 1,
      "url": "/static/actimg1.jpg",
      "desc": "讓讀書點燃夢想",
      "place": "地點：濱江星耀城",
      "time": "2017-5-10"
    },
    {
      "id": 2,
      "url": "/static/actimg1.jpg",
      "desc": "讓讀書點燃夢想",
      "place": "地點：濱江星耀城",
      "time": "2017-5-10"
    }
  ],
  works: [
    {
      "id": 1,
      "imgUrl": "/static/workslistimg1.jpg",
      "iconUrl": "/static/workslisticon1.jpg",
      "desc": "仿京東購物車Vue.js"
    },
    {
      "id": 2,
      "imgUrl": "/static/workslistimg1.jpg",
      "iconUrl": "/static/workslisticon1.jpg",
      "desc": "仿京東購物車Vue.js"
    }
  ] 
}

3.修改package.json里面的mock命令。--m mock/post-to-get.js表示添加運行中間件。

"mock": "json-server mock/server.js --m mock/post-to-get.js",

上面代碼中的post-to-get.js文件用于將post請求轉(zhuǎn)為get請求。該文件內(nèi)容如下:

module.exports = (req, res, next) => {
  req.method = "GET"
  next()
}

修改完成后，最終的文件結(jié)構(gòu)如下：

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85053.html

相關(guān)文章

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

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

    Atom 評論0 收藏0

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

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

    sarva 評論0 收藏0

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

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

    xavier 評論0 收藏0

  • 用JSON-server模擬REST API(一) 安裝運行

    摘要：曹縣宣布昨日晚間登日成功長江流域首次發(fā)現(xiàn)海豚支持黨中央決定抄寫黨章勢在必行為了方便，再創(chuàng)建一個文件，寫入然后使用到目錄下執(zhí)行命令，如果成功會出現(xiàn)你的電腦中文件夾所在目錄的路徑如果不成功請檢查文件的格式是否正確。 在開發(fā)過程中，前后端不論是否分離，接口多半是滯后于頁面開發(fā)的。所以建立一個REST風(fēng)格的API接口，給前端頁面提供虛擬的數(shù)據(jù)，是非常有必要的。 對比過多種mock工具后，我最終...

    Sleepy 評論0 收藏0

  • 30秒無需編碼完成一個REST API服務(wù)

    摘要：秒內(nèi)無需編碼快速完成一個模擬的服務(wù)。這個服務(wù)主要是給那些需要快速的模擬原型后端接口的前端人員使用的安裝新建一個文件啟動服務(wù)到這一步秒不到吧，一個完整的就基本完成了。 JSON Server 30秒內(nèi)無需編碼快速完成一個模擬的REST API服務(wù)。 這個服務(wù)主要是給那些需要快速的模擬原型后端接口的前端人員使用的 GitHub：https://github.com/typicode/j.....

    amuqiao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<