vue中mock數(shù)據(jù),模擬后臺接口實例

更新時間：2022年04月06日 10:20:38 作者：不求甚解bc

這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一、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)容如下，以userInfo.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ù)，不需要時，則注釋掉。

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/

需登錄，沒注冊過的小伙伴，注冊一個賬號吧。

2、注冊好后有一個默認(rèn)接口，當(dāng)然我們要做自己的項目。

3、新建項目

4、添加接口

5、自定義接口

6、使用接口

7、前端項目中，后臺url地址，有開發(fā)版，測試版，產(chǎn)線版等多個版本，建議大家統(tǒng)一管理，訪問時，做url拼接

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經(jīng)常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下
2024-06-06
el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實現(xiàn)方法,我們再實際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動調(diào)節(jié)尺寸,需要的朋友可以參考下
2023-08-08
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
vue中如何通過函數(shù)傳參數(shù)
這篇文章主要介紹了vue中如何通過函數(shù)傳參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue編程格式化代碼屬性自動換行問題
這篇文章主要為大家介紹了Vue編程格式化代碼屬性及自動換行問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06
一文完全掌握Vue中的$set方法
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對數(shù)組和對象的處理本質(zhì)上的一樣的,對新增的值添加響應(yīng)然后手動觸發(fā)派發(fā)更新,需要的朋友可以參考下
2023-11-11
使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細(xì)代碼,感興趣的朋友跟隨小編一起看看吧
2024-02-02
vuex使用方法超詳細(xì)講解(實用)
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下
2024-10-10
淺談axios中取消請求及阻止重復(fù)請求的方法
在實際項目中，我們可能需要對請求進行“防抖”處理。本文主要實現(xiàn)axios中取消請求及阻止重復(fù)請求，具有一定的參考價值，感興趣的可以了解一下
2021-08-08
vue2和vue3的v-if與v-for優(yōu)先級對比學(xué)習(xí)
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級對比學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10