vue-cli3使用mock數(shù)據(jù)的方法分析
本文實(shí)例講述了vue-cli3使用mock數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：
在前后端分離的開(kāi)發(fā)模式中，后端給前端提供一個(gè)接口，由前端向后端發(fā)請(qǐng)求，得到數(shù)據(jù)后前端進(jìn)行渲染。由于前后端開(kāi)發(fā)進(jìn)度的不統(tǒng)一，前端往往使用本地的測(cè)試數(shù)據(jù)進(jìn)行數(shù)據(jù)渲染的測(cè)試。
正文開(kāi)始
在vue-cli構(gòu)建的項(xiàng)目，我們可以借助devServer開(kāi)啟一個(gè)服務(wù)，然后我們可以通過(guò)路由模擬一個(gè)接口來(lái)進(jìn)行測(cè)試。
在vue-cli2和vue-cli3中的配置方式是不同的。下面分別展示
## vue-cli2
先放一張vue-cli2生成項(xiàng)目圖片
mock文件夾是一個(gè)我自己創(chuàng)建的用來(lái)存放模擬數(shù)據(jù)的文件夾，其中有一個(gè)json文件，下面我們要對(duì)build目錄下webpack.dev.conf.js進(jìn)行配置
// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
before(app){
app.get('/goods/list',(req,res,next)=>{
res.json(goodsList);
})
}
后面的before(app)部分就定義了可以通過(guò)向/goods/list發(fā)送get請(qǐng)求來(lái)得到我們要的json文件。
同事我們?cè)趘ue文件中只要
// 利用了axios
axios.get("/goods/list").then(res => {
this.goodsList = res.data.result;
}).catch(error=>{
console.log(error);
});
就可以請(qǐng)求到數(shù)據(jù)
vue-cli3
vue-cli3主打自動(dòng)化，0配置。但是我們往往需要進(jìn)行一些配置，這時(shí)我們就要?jiǎng)?chuàng)建一個(gè)配置文件。目錄結(jié)構(gòu)如下
vue.config.js就是我們手動(dòng)創(chuàng)建的配置文件，完整的配置項(xiàng)可以在官網(wǎng)看到，在這里我們著重于devServer
const mockdata = require('./mock/test.json');
module.exports={
devServer: {
port:4000,
before(app){
app.get('/goods/list',(req,res,next)=>{
res.json(mockdata);
})
}
}
}
這樣就達(dá)到了相同的效果
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解
這篇文章給大家介紹了Vue3快速實(shí)現(xiàn)文件上傳OSS的方法,上傳文件可以說(shuō)是經(jīng)典的需求了,在后臺(tái)管理項(xiàng)目中隨處可見(jiàn),一般是由前端進(jìn)行文件上傳,然后再由后端去處理,本文旨在實(shí)現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了基于vue實(shí)現(xiàn)微博三方登錄流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法
這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法,vue比較常見(jiàn)的坑就是數(shù)據(jù)(后臺(tái)返回)更新了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
傳統(tǒng)的?DOM?更新方法會(huì)在有新舊子節(jié)點(diǎn)時(shí)卸載舊節(jié)點(diǎn)并掛載新節(jié)點(diǎn),這種方法沒(méi)有考慮到節(jié)點(diǎn)的復(fù)用可能性,diff?算法通過(guò)比較新舊節(jié)點(diǎn)的差異來(lái)復(fù)用節(jié)點(diǎn),從而優(yōu)化性能,本文給大家介紹了Vue3快速diff算法的處理過(guò)程,需要的朋友可以參考下2024-05-05
詳解vuelidate 對(duì)于vueJs2.0的驗(yàn)證解決方案
本篇文章主要介紹了vuelidate 對(duì)于vueJs2.0的驗(yàn)證解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10