vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù)
更新時(shí)間：2017年09月27日 14:50:35 作者：wolfSoul
本篇文章主要介紹了vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
在vue項(xiàng)目中, mock數(shù)據(jù)可以使用 node 的 express模塊搭建服務(wù)
1. 在根目錄下創(chuàng)建 test 目錄, 用來存放模擬的 json 數(shù)據(jù), 在 test 目錄下創(chuàng)建模擬的數(shù)據(jù) data.json 文件
2.在build目錄下的 dev-server.js的文件作如下更改
var appData = require('../test/data.json')
// 獲取數(shù)據(jù)
var apiRoutes = express.Router();
//get請(qǐng)求
apiRoutes.get('/seller',function(req,res){
res.send({
appData
});
});
app.use('/api',apiRoutes);
3. 在.vue做請(qǐng)求, 就可以成功獲取data.json的數(shù)據(jù)了, 下面使用 axios 進(jìn)行請(qǐng)求
axios.get('/api/seller',{
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
請(qǐng)求成功, 獲取到數(shù)據(jù)
4. 如過要做post請(qǐng)求, 需要對(duì) dev-server.js 文件做對(duì)應(yīng)的修改
apiRoutes.post('/seller',function(req,res){
res.send({
appData
});
});
這樣就可以在vue 項(xiàng)目中進(jìn)行模擬 ajax 請(qǐng)求了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 監(jiān)聽input輸入事件(oninput)的示例代碼支持模糊查詢
這篇文章主要介紹了vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢,比如說表格模糊查詢，實(shí)現(xiàn)一邊輸入，一邊過濾數(shù)據(jù)，本文通過示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue分頁器實(shí)現(xiàn)原理，編寫了分頁器組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue項(xiàng)目使用可選鏈操作符編譯報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue項(xiàng)目使用可選鏈操作符編譯報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue運(yùn)行環(huán)境搭建全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue cli使用絕對(duì)路徑引用圖片問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
vue2中如何更改el-dialog出場(chǎng)動(dòng)畫(el-dialog彈窗組件)
el-dialog是一個(gè)十分好用的彈窗組件，但是出場(chǎng)動(dòng)畫比較單調(diào)，于是決定自定義一個(gè)出場(chǎng)動(dòng)畫，本文通過實(shí)例代碼圖文相結(jié)合給大家敘述下實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-06-06
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個(gè)Vue中非常經(jīng)典的問題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue中的高德軌跡回放問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí)，需要的朋友參考下吧2018-09-09