參考：https://blog.csdn.net/bocongbo/article/details/81700843
在前端開發(fā)過程中产雹，有后臺配合是很必要的。但是如果自己測試開發(fā)彼硫，或者后臺很忙，沒時間，那么我們需要自己提供或修改接口穷劈。下面提供兩種方式浪慌，第二種更簡單冤荆，個人推薦第二種。
一权纤、mock文件
1钓简、安裝乌妒，開發(fā)環(huán)境
npm i mockjs -D
//或者
yarn add mockjs
2、在src目錄下新建mock目錄外邓，結構如下：
/src/mock/index.js
/src/mock/userInfo.json
3撤蚊、index.js內容如下：
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'));
Mock.mock(/.*/,'get',function(){return 'xxx'})//特別注意此處如果url使用正則匹配則不要加引號损话，巨坑
4侦啸、json文件內容如下，以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ù)忘闻，關閉則注釋該行
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、注冊好后有一個默認接口疫衩，當然我們要做自己的項目缺厉。
3、新建項目
4隧土、添加接口
5提针、自定義接口
6、使用接口
7曹傀、前端項目中辐脖，后臺url地址，有開發(fā)版皆愉，測試版嗜价，產(chǎn)線版等多個版本，建議大家統(tǒng)一管理幕庐，訪問時久锥，做url拼接
作者：不求甚解bc
來源：CSDN
原文：https://blog.csdn.net/bocongbo/article/details/81700843
版權聲明：本文為博主原創(chuàng)文章，轉載請附上博文鏈接异剥！
