vue中mock數(shù)據(jù),模擬后臺(tái)接口實(shí)例
在前端開發(fā)過程中，有后臺(tái)配合是很必要的。但是如果自己測(cè)試開發(fā)，或者后臺(tái)很忙，沒時(shí)間，那么我們需要自己提供或修改接口。
下面提供兩種方式，第二種更簡(jiǎn)單，個(gè)人推薦第二種。
一、mock文件
1、安裝，開發(fā)環(huán)境
npm i mockjs -D
2、在src目錄下新建mock目錄，結(jié)構(gòu)如下：
3、index.js內(nèi)容如下：
const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的數(shù)據(jù))；
Mock.mock('/user/userInfo', 'get', require('./json/userInfo'));
Mock.mock('/home/banner', 'get', require('./json/homeBanner'));4、json文件內(nèi)容如下，以u(píng)serInfo.json為例：
{
"result": "success",
"data": {
"userSn": "3785521",
"username": "不求甚解",
"age": 25,
"imgUrl": "https://avatar.csdn.net/8/5/D/3_bocongbo.jpg"
},
"msg": ""
}5、在main.js入口文件中引入mock數(shù)據(jù)，不需要時(shí)，則注釋掉。
import Vue from 'vue';
import App from './App';
import router from './router';
require('./mock'); //引入mock數(shù)據(jù)，關(guān)閉則注釋該行
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});6、在vue模板訪問
axios.get('/user/userInfo')
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});二、第三方接口eolinker
1、官網(wǎng)接口地址：https://www.eolinker.com/#/home/project/api/
需登錄，沒注冊(cè)過的小伙伴，注冊(cè)一個(gè)賬號(hào)吧。
2、注冊(cè)好后有一個(gè)默認(rèn)接口，當(dāng)然我們要做自己的項(xiàng)目。
3、新建項(xiàng)目
4、添加接口
5、自定義接口
6、使用接口
7、前端項(xiàng)目中，后臺(tái)url地址，有開發(fā)版，測(cè)試版，產(chǎn)線版等多個(gè)版本，建議大家統(tǒng)一管理，訪問時(shí)，做url拼接
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經(jīng)常會(huì)遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06
el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法,我們?cè)賹?shí)際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動(dòng)調(diào)節(jié)尺寸,需要的朋友可以參考下2023-08-08
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue中如何通過函數(shù)傳參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了Vue編程格式化代碼屬性及自動(dòng)換行問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對(duì)數(shù)組和對(duì)象的處理本質(zhì)上的一樣的,對(duì)新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下2023-11-11
使用vuetify實(shí)現(xiàn)全局v-alert消息通知的方法
使用強(qiáng)大的Vuetify開發(fā)前端頁(yè)面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡(jiǎn)便的全局消息通知組件,所以自己動(dòng)手寫了一個(gè)簡(jiǎn)單的組件,接下來通過本文給大家介紹使用vuetify實(shí)現(xiàn)全局v-alert消息通知的詳細(xì)代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲(chǔ)狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
淺談axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
在實(shí)際項(xiàng)目中，我們可能需要對(duì)請(qǐng)求進(jìn)行“防抖”處理。本文主要實(shí)現(xiàn)axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10