vue-cli本地開發(fā)mock數(shù)據(jù)怎么用-創(chuàng)新互聯(lián)

這篇文章主要介紹了vue-cli本地開發(fā)mock數(shù)據(jù)怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有崇川免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue-cli 中可以通過配置 proxyTable 解決開發(fā)環(huán)境的跨域問題，具體可以參考這篇文章：Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題

如果后端接口尚未開發(fā)完成，前端開發(fā)一般使用mock數(shù)據(jù)。

mock方法有多種多樣，這里給出兩種：

方法一： 使用express搭建靜態(tài)服務(wù)

mock數(shù)據(jù)寫在json文件中，proxyTable 里將接口代理到具體mock數(shù)據(jù)json文件上。

具體方法：

創(chuàng)建 mock 文件夾

build/dev-server.js 中添加如下代碼

npm run dev 啟動(dòng)后，可以通過 http://localhost:8080/mock/db.json 訪問數(shù)據(jù)，proxyTable對應(yīng)設(shè)置代理即可（代理設(shè)置方法與解決跨域方法相似）

方法二 使用 JSON Server 搭建 Mock 服務(wù)器

JSON Server 是一個(gè)創(chuàng)建偽RESTful服務(wù)器的工具，具體使用方法可以看官方文檔，這里直接講在vue-cli 中的用法。

配置流程

全局安裝 $ npm install -g json-server

項(xiàng)目目錄下創(chuàng)建 mock 文件夾

mock 文件夾下添加 db.json 文件，內(nèi)容如下

{
 "posts": [
 { "id": 1, "title": "json-server", "author": "typicode" }
 ],
 "comments": [
 { "id": 1, "body": "some comment", "postId": 1 }
 ],
 "profile": { "name": "typicode" }
}

package.json 添加命令

"mock": "json-server --watch mock/db.json",
 "mockdev": "npm run mock & npm run dev"

啟動(dòng) mock 服務(wù)器

$ npm run mock 命令 運(yùn)行 mock server

訪問 http://localhost:3000/

發(fā)現(xiàn) db.json 下第一級(jí) json 對象被解析成為可訪問路徑

GET請求具體路徑 如：http://localhost:3000/posts 可獲取數(shù)據(jù)

faker.js 批量生成偽數(shù)據(jù)

如果需要大量的偽數(shù)據(jù)，手動(dòng)構(gòu)造比較費(fèi)時(shí)費(fèi)力，可以使用faker.js 批量生成。faker.js 的具體使用參見官方文檔，這里做一個(gè)示例。

$ cnpm install faker -G 全局安裝 faker

mock 目錄下創(chuàng)建 faker-data.js，內(nèi)容如下

module.exports = function () {
 var faker = require("faker");
 faker.locale = "zh_CN";
 var _ = require("lodash");
 return {
  people: _.times(100, function (n) {
   return {
    id: n,
    name: faker.name.findName(),
    avatar: faker.internet.avatar()
   }
  }),
  address: _.times(100, function (n) {
   return {
    id: faker.random.uuid(),
    city: faker.address.city(),
    county: faker.address.county()
   }
  })
 }
}

$ json-server mock/faker-data.js 在 json server 中使用 faker

請求 http://localhost:3000/address 可以獲取到隨機(jī)生成的100組偽數(shù)據(jù)

添加中間件

json server 使用 RESTful 架構(gòu)，GET請求可以獲取數(shù)據(jù)，POST 請求則是添加數(shù)據(jù)。
在開發(fā)過程中，有時(shí)候想直接模擬獲取POST請求返回結(jié)果，可以添加 express 中間件 將POST請求轉(zhuǎn)為GET請求。

mock 目錄下創(chuàng)建 post-to-get.js，內(nèi)容如下

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

啟動(dòng)命令添加運(yùn)行中間件 --m mock/post-to-get.js


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

重新啟動(dòng)服務(wù)，POST請求就被轉(zhuǎn)換為GET請求了

其他需求也可以通過添加不同的中間件實(shí)現(xiàn)。

代理設(shè)置

在 config/index.js 的 proxyTable 將請求映射到 http://localhost:3000

代碼中添加請求以測試效果

$ npm run mockdev 啟動(dòng)帶mock 數(shù)據(jù)的本地服務(wù)

結(jié)果如下：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue-cli本地開發(fā)mock數(shù)據(jù)怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

分享標(biāo)題：vue-cli本地開發(fā)mock數(shù)據(jù)怎么用-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.bm7419.com/article14/dgcege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)