詳解vue-cli項目中用json-sever搭建mock服務器
vue-cli下配置json-server
使用json-server實現(xiàn)后臺數(shù)據(jù)接口
先建一個json文件：db.json 放在build/下
在build/dev-server.js中配置 （注意變量命名）
github說明：
啟動項目 地址欄輸入 localhost:8081
服務已啟動成功 8081后加相應后綴即可訪問數(shù)據(jù)
localhost:8081/posts
l
localhost:8081/comments
最后做一下瀏覽器代理 設置config/index.jsr如下
最后驗證一下
完結撒花=-=
全局安裝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中設置代理:
主要是為了將請求映射到http://localhost:3000
注意:如果此時你的服務已經(jīng)開了(已經(jīng)npm run dev 了),需重新啟動服務
在設置代理之前,可以先進行測試,看是否可以啟動mock服務器
運行npm run mock 之后訪問http://localhost:3000 ,頁面中存在json對象并可訪問即可、
頁面中可采用axios進行數(shù)據(jù)的請求
,例:
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
我們有時候會遇到要輸入框自動獲取焦點的情況,下面這篇文章主要給大家介紹了關于Vue?Input輸入框自動獲得焦點的簡單方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
源碼揭秘為什么 Vue2 this 能夠直接獲取到 data 和 methods
本篇文章主要介紹的是Vue2 this 能夠直接獲取到 data 和 methods，閱讀本文將能學到如何學習調試 vue2 源碼、data 中的數(shù)據(jù)為什么可以用 this 直接獲取到、methods 中的方法為什么可以用 this 直接獲取到,需要的朋友可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了Vue2.x通用編輯組件的封裝及應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家詳細介紹了vue elementUI表格控制顯示隱藏對應列的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
計算屬性和普通屬性一樣是在模板中綁定計算屬性的，當data中對應數(shù)據(jù)發(fā)生改變時，計算屬性的值也會發(fā)生改變。下面這篇文章主要給大家介紹了關于Vue中計算屬性computed的相關資料，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了vue組件內部引入外部js文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue3中toRef、toRefs都是與響應式數(shù)據(jù)相關的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
這篇文章主要為大家介紹了Vue 2源碼解析Parse函數(shù)定義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
ElementPlus組件與圖標按需自動引入的實現(xiàn)方法
這篇文章主要介紹了ElementPlus組件與圖標按需自動引入的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06