vue-cli結(jié)合mockjs模擬后臺數(shù)據(jù)

loostudy 發(fā)布于2019-08-22 18:27 / 1797人閱讀

摘要：在中使用準(zhǔn)備工作安裝加載模塊請求庫開始創(chuàng)建文件用于定于接口返回的數(shù)據(jù)到目錄下的任何一個合適的文件夾下，設(shè)置好攔截信息，，設(shè)置規(guī)則可以看官網(wǎng)規(guī)則在文件中寫入以下模擬數(shù)據(jù)單條數(shù)據(jù)多條數(shù)據(jù)在組件中引入和文件在中運(yùn)行項目查看控制臺以上，結(jié)束文

mockjs在vue中使用：

準(zhǔn)備工作：
1、安裝vue-cli
2、加載模塊mockjs、axios(http請求庫)
npm install mockjs axios --save

開始：
1、創(chuàng)建mock.js文件（用于定于接口返回的數(shù)據(jù)）到src目錄下的任何一個合適的文件夾下，設(shè)置好攔截信息，，設(shè)置規(guī)則可以看mock官網(wǎng)規(guī)則

2、在mock.js文件中寫入以下模擬數(shù)據(jù)
單條數(shù)據(jù)：

多條數(shù)據(jù)：

3、在組件中引入axios和mock.js文件

import axios from "axios";
import mockdata from "../mock/mockjs";
在mounted中：

axios.get("msg").then(res=>{
    // this.data1 = res.data;
    console.log(res);
})

4、運(yùn)行項目 npm run dev,查看控制臺

以上，結(jié)束
文章結(jié)合了多位前輩的經(jīng)驗得出，如果更好的方法，請大家在評論區(qū)評論，謝謝！
https://www.cnblogs.com/vicky...
https://www.imooc.com/article...

GPU云服務(wù)器云服務(wù)器 js 后臺模擬鍵盤 Mockjs vue-cli vue-cli3

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95867.html

相關(guān)文章

淺談前端mock

摘要：引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用方式來避免這個問題。可能會涉及到門技術(shù)，分別是服務(wù)端技術(shù)隨機(jī)生成特定格式數(shù)據(jù)的技術(shù)請求轉(zhuǎn)發(fā)請求攔截。引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用mock方式來避免這個問題。本人參考了大量文章，結(jié)合自己的經(jīng)驗，給出自己在mock上的一些理解。 1. 原理何為mock,我認(rèn)為mock主要就是通...

elina 2019-08-23 15:24 評論0 收藏0
手摸手，帶你用vue擼后臺系列五(v4.0新版本)

摘要：同時增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護(hù)至今已經(jīng)有兩年多的時間了了，發(fā)布了四十多個版本，...

MonoLog 2019-08-26 13:43 評論0 收藏0
手摸手，帶你用vue擼后臺系列五(v4.0新版本)

摘要：同時增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護(hù)至今已經(jīng)有兩年多的時間了了，發(fā)布了四十多個版本，收獲了三...

graf 2019-05-21 19:33 評論0 收藏0
vue-cli 中使用 Mockjs 詳解

摘要：想到函數(shù)有延遲網(wǎng)絡(luò)請求稀釋事件延遲執(zhí)行的效果，于是將模板函數(shù)用包裹起來，如下結(jié)果出現(xiàn)有意思的事情當(dāng)請求比較頻繁，在延遲時間內(nèi)，本次請求得到的響應(yīng)數(shù)據(jù)是上次請求的結(jié)果。 vue-cli 中使用 Mockjs 詳解背景前端在早期jQuery時代時，前端功能和后端工程基本上都是合在一起，典型的就是常見的maven工程下面的webapp目錄包含前端各類靜態(tài)資源文件。這個時候，我們總是會遇...

developerworks 2019-05-29 17:04 評論0 收藏0