vue-cli專案中用json-sever搭建mock伺服器,模擬本地json資料
阿新 • • 發佈:2019-01-10
在使用vue-cli開發專案時,無論後臺介面是否開發完成,我們都可以自己使用本地json資料用於模擬,但這些json資料要作為介面開發,json server 作為模擬工具就提供了這樣的功能,並且使用十分方便。
前提:已經使用vue-cli搭建好了專案
1、全域性安裝json-server
npm install json-server -g
或使用
cnpm install json-server -g
2、在專案目錄下建立mock資料夾,並在資料夾下建立db.json檔案
3、找到package.json資料夾,寫入兩個命令:
"mock": "json-server --watch mock/db.json" ,
"mockdev": "npm run mock & npm run dev"
我這裡只寫了一個,其實一個兩個都可以,寫兩個直接可以兩條命令一起執行
如果執行npm run mockdev 時一直處於監聽db.json的狀態,建議使用兩條命令分開在兩個命令列中執行,可避免在一條命令中重複監聽db.json。
4、在config/index.js中設定代理:
主要是為了將請求對映到http://localhost:3000
proxyTable: {
'/api/':{
target:'http://localhost:3000',
changeOrigin:true ,
pathRewrite:{
'^/api.':''
}
}
}
注意:如果此時你的服務已經開了(已經npm run dev 了),需重新啟動服務
在設定代理之前,可以先進行測試,看是否可以啟動mock伺服器
執行npm run mock 之後訪問http://localhost:3000 ,頁面中存在json物件並可訪問即可
這樣我們就實現了專案用npm run dev啟動,而json資料使用npm run mock啟動(mock伺服器用於模擬後臺介面請求)
最後:我們就可以使用vue的axios進行資料請求啦
axios({
url:'/api/table',//api 代理到json檔案地址,後面的字尾是檔案中的物件或者是陣列
method:'get',//請求方式
//這裡可以新增axios文件中的各種配置
}).then(function (res) {
console.log(res,'成功');
}).catch(function (err) {
console.log(err,'錯誤');
})