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

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

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

vue-cli下配置json-server

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

先建一個json文件：db.json 放在build/下

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

github說明：

啟動項目地址欄輸入 localhost:8081

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

localhost:8081/posts

localhost:8081/comments

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

最后驗證一下

完結(jié)撒花=-=

全局安裝json-server

npm install json-server -g

在項目目錄下創(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文件夾,寫入兩個命令:

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

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

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

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

主要是為了將請求映射到http://localhost:3000

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

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

運行npm run mock 之后訪問http://localhost:3000 ,頁面中存在json對象并可訪問即可、

頁面中可采用axios進行數(shù)據(jù)的請求

,例:

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

您可能感興趣的文章:

相關(guān)文章

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