欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年04月06日 10:20:38   作者：不求甚解bc  
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺(tái)接口實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

在前端開發(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)文章

最新評(píng)論