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