快捷導(dǎo)航

詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器

更新時(shí)間：2017年11月02日 09:25:56 作者：Cheny0815

這篇文章主要介紹了詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vue-cli下配置json-server

使用json-server實(shí)現(xiàn)后臺(tái)數(shù)據(jù)接口

先建一個(gè)json文件：db.json 放在build/下

在build/dev-server.js中配置（注意變量命名）

github說(shuō)明：

啟動(dòng)項(xiàng)目地址欄輸入 localhost:8081

服務(wù)已啟動(dòng)成功 8081后加相應(yīng)后綴即可訪問(wèn)數(shù)據(jù)

localhost:8081/posts

l

localhost:8081/comments

最后做一下瀏覽器代理設(shè)置config/index.jsr如下

最后驗(yàn)證一下

完結(jié)撒花=-=

全局安裝json-server

npm install json-server -g

在項(xiàng)目目錄下創(chuàng)建mock文件夾,并在文件夾下創(chuàng)建db.json文件

{
  "slides": [{
    "src": "/static/img/right1.png",
    "title": "xxx1",
    "href": "#"
  }, {
    "src": "/static/img/right2.png",
    "title": "xxx2",
    "href": "#"
  }, {
    "src": "/static/img/right3.png",
    "title": "xxx2",
    "href": "#"
  }, {
    "src": "/static/img/right4.png",
    "title": "xxx2",
    "href": "#"
  }],
  "list": [{
    "id": 1,
    "url": "#",
    "title": "文藝"
  }, {
    "id": 2,
    "url": "#",
    "title": "經(jīng)管"
  }, {
    "id": 3,
    "url": "#",
    "title": "社科"
  }]
}

文件格式如下:

找到package.json文件夾,寫入兩個(gè)命令:

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

我這里只寫了一個(gè),其實(shí)一個(gè)兩個(gè)都可以,寫兩個(gè)直接可以兩條命令一起執(zhí)行

如果執(zhí)行npm run mockdev 時(shí)一直處于監(jiān)聽(tīng)db.json的狀態(tài),建議使用兩條命令分開(kāi)在兩個(gè)命令行中執(zhí)行,可避免

在config/index.js中設(shè)置代理:

主要是為了將請(qǐng)求映射到http://localhost:3000

注意:如果此時(shí)你的服務(wù)已經(jīng)開(kāi)了(已經(jīng)npm run dev 了),需重新啟動(dòng)服務(wù)

在設(shè)置代理之前,可以先進(jìn)行測(cè)試,看是否可以啟動(dòng)mock服務(wù)器

運(yùn)行npm run mock 之后訪問(wèn)http://localhost:3000 ,頁(yè)面中存在json對(duì)象并可訪問(wèn)即可、

頁(yè)面中可采用axios進(jìn)行數(shù)據(jù)的請(qǐng)求

,例:

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的有效方法
我們有時(shí)候會(huì)遇到要輸入框自動(dòng)獲取焦點(diǎn)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的簡(jiǎn)單方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
源碼揭秘為什么 Vue2 this 能夠直接獲取到 data 和 methods
本篇文章主要介紹的是Vue2 this 能夠直接獲取到 data 和 methods，閱讀本文將能學(xué)到如何學(xué)習(xí)調(diào)試 vue2 源碼、data 中的數(shù)據(jù)為什么可以用 this 直接獲取到、methods 中的方法為什么可以用 this 直接獲取到,需要的朋友可以參考一下
2021-09-09
Vue2.x通用編輯組件的封裝及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue2.x通用編輯組件的封裝及應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue中計(jì)算屬性computed的示例解讀
計(jì)算屬性和普通屬性一樣是在模板中綁定計(jì)算屬性的，當(dāng)data中對(duì)應(yīng)數(shù)據(jù)發(fā)生改變時(shí)，計(jì)算屬性的值也會(huì)發(fā)生改變。下面這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性computed的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
vue組件內(nèi)部引入外部js文件的方法
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
一文帶你了解Vue3中toRef和toRefs的用法
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來(lái)給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧
2023-01-01
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
Vue 2源碼解析Parse函數(shù)定義
這篇文章主要為大家介紹了Vue 2源碼解析Parse函數(shù)定義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
ElementPlus組件與圖標(biāo)按需自動(dòng)引入的實(shí)現(xiàn)方法
這篇文章主要介紹了ElementPlus組件與圖標(biāo)按需自動(dòng)引入的實(shí)現(xiàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-06-06