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

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

這篇文章主要介紹了詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(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說明：

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

服務(wù)已啟動(dòng)成功 8081后加相應(yīng)后綴即可訪問數(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)聽db.json的狀態(tài),建議使用兩條命令分開在兩個(gè)命令行中執(zhí)行,可避免

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

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

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

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

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

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

,例:

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

您可能感興趣的文章:

相關(guān)文章

詳解如何在vue中使用sass
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-06-06
關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-11-11
vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果
這篇文章主要介紹了vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家何用vue和echarts實(shí)現(xiàn)一個(gè)地圖有一定的幫助,感興趣的朋友一起看看吧
2024-03-03
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue阻止重復(fù)請(qǐng)求實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue阻止重復(fù)請(qǐng)求實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
如何在Vue.js項(xiàng)目中使用Jest進(jìn)行單元測(cè)試
在眾多測(cè)試框架中,Jest?因其易用性、強(qiáng)大功能以及與?Vue.js?的良好兼容性,成為了許多開發(fā)者的首選,本文將詳細(xì)介紹如何在?Vue.js?項(xiàng)目中使用?Jest?進(jìn)行單元測(cè)試,需要的可以參考下
2024-11-11
vue實(shí)現(xiàn)文件上傳和下載
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
vue中slot插槽的參數(shù)匯總及使用方案
Vue.js中的插槽（slot）是一種機(jī)制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下
2024-03-03
vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-11-11