vue中mock數(shù)據(jù),模擬后臺接口實例
更新時間：2022年04月06日 10:20:38 作者：不求甚解bc
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
在前端開發(fā)過程中，有后臺配合是很必要的。但是如果自己測試開發(fā)，或者后臺很忙，沒時間，那么我們需要自己提供或修改接口。
下面提供兩種方式，第二種更簡單，個人推薦第二種。
一、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自定義移動端touch事件之點擊、滑動、長按事件的實例代碼,需要的朋友可以參考下2018-07-07
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期2022-07-07
Delete `,` 如何解決(vue eslint與prettier沖突)
這篇文章主要介紹了Delete `,` 如何解決(vue eslint與prettier沖突)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue2學(xué)習(xí)筆記之請求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學(xué)習(xí)筆記之?dāng)?shù)據(jù)交互vue-resource ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue?響應(yīng)式系統(tǒng)依賴收集過程原理解析
Vue 初始化時就會通過 Object.defineProperty 攔截屬性的 getter 和 setter ，為對象的每個值創(chuàng)建一個 dep 并用 Dep.addSub() 來存儲該屬性值的 watcher 列表，這篇文章主要介紹了Vue?響應(yīng)式系統(tǒng)依賴收集過程分析,需要的朋友可以參考下2022-06-06
vant遇到van-sidebar數(shù)據(jù)超出不能滑動的問題
這篇文章主要介紹了vant遇到van-sidebar數(shù)據(jù)超出不能滑動的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE +Element 實現(xiàn)多個字段值拼接功能
這篇文章主要介紹了VUE +Element 實現(xiàn)多個字段值拼接,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法
今天小編就為大家分享一篇vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對象的值，需要的朋友可以參考下2022-12-12