vueプロジェクトアクセスmock&&axios汎用構成
8183 ワード
前言
兵馬は動かず、食糧と草が先行している.同様に、プロジェクト開発の過程でインタフェースが出ていないことが多く、フロントエンドのページが構築された場合がある.この場合、フロントエンドの開発効率を向上させ、生産性を解放するために、FEは所定のインタフェースドキュメントに従ってインタフェースシミュレーションの仕事をすることができます.バックエンドのパートナーがインタフェースを開発した後、インタフェースのベースアドレスを交換するだけでいいです.
初期準備
ここではvueプロジェクトを例に、必要なモジュール:mockjs,express;直接npmでインストールすればよい
プロジェクトでの使用
一般的にvueプロジェクトにmockフォルダを作成し、対応する処理ファイルを入れます.
インタフェース配布モジュール
主にフロントエンドからのリクエストURLの配布とローカルサービスの起動
インタフェースデータモジュール
上記のspecialApiを例にとると、xxx/special/listインタフェースを処理するためのモジュールです.
ローカルサービスの開始
ここではpackage.jsonファイルscriptフィールドの下に新しいコマンドを作成してサーバを開く必要があります.
axios汎用構成
1.axiosインスタンスの作成
2.使用
兵馬は動かず、食糧と草が先行している.同様に、プロジェクト開発の過程でインタフェースが出ていないことが多く、フロントエンドのページが構築された場合がある.この場合、フロントエンドの開発効率を向上させ、生産性を解放するために、FEは所定のインタフェースドキュメントに従ってインタフェースシミュレーションの仕事をすることができます.バックエンドのパートナーがインタフェースを開発した後、インタフェースのベースアドレスを交換するだけでいいです.
初期準備
ここではvueプロジェクトを例に、必要なモジュール:mockjs,express;直接npmでインストールすればよい
1.Mock.js // http://mockjs.com/examples.html
2.express // http://expressjs.jser.us/
プロジェクトでの使用
一般的にvueプロジェクトにmockフォルダを作成し、対応する処理ファイルを入れます.
インタフェース配布モジュール
主にフロントエンドからのリクエストURLの配布とローカルサービスの起動
let Mock = require('mockjs');
let express = require('express');
let app = express();
let bodyParser = require('body-parser'); // post
// mock api
let homeAPI = require('./home');
let specialAPI = require('./special');
let appAPI = require('./app');
app.use(bodyParser.json());
//
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
//
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
next();
});
// 1. : post
app.post('/android/home', (req, res) => {
//
// setTimeout(() => {
// res.json(Mock.mock(homeAPI.getHome(req)));
// }, 12000);
res.json(Mock.mock(homeAPI.getHome(req)));
console.log(' ...');
})
// 2. : post
app.post('/android/special/list', (req, res) => {
res.json(Mock.mock(specialAPI.getSpecialList(req)))
console.log(' ...');
})
app.post('/android/special/detail', (req, res) => {
res.json(Mock.mock(specialAPI.getSpecialDetail(req)))
console.log(' ...');
})
// 3.APP : post
app.post('/android/special/app', (req, res) => {
res.json(Mock.mock(appAPI.getAppList(req)))
console.log(' app ...');
})
app.listen('3000', () => {
console.log('mock ing ... port: 3000')
})インタフェースデータモジュール
上記のspecialApiを例にとると、xxx/special/listインタフェースを処理するためのモジュールです.
let Mock = require('mockjs');
let Random = Mock.Random;
//
// 1.
let specialList = [];
let total = 100;
// 100
for (let index = 0; index < total; index++) {
specialList.push(
Mock.mock({
id: '@increment',
title: '@ctitle',
desc: ''+Random.cparagraph()+'
',
icon: 'photo/special/1380/special_1380.jpg',
view_count: '@natural(60, 1000)',
comment_count: '@natural(60, 100)',
save_money: '@float(10, 50, 2, 2)',
app_count: '@natural(10, 100)',
detail_icon: 'https://images.tutuapp.com/photo/special/000/001/' + '@natural(100, 200)' + '/414x155.jpg',
})
);
}
module.exports = {
//
getSpecialList: config => {
//
console.log(config.body);
let { page = 1, size, lang, order_by } = config.body;
let tempList = [];
let pageList;
//
tempList = order_by === 'view' ? specialList.reverse() : specialList;
//
pageList = tempList.filter((item, index) => index < page * size && index >= (page-1)*size);
// ,
return {
status: {
code: 0,
message: ' ',
time: '2019-07-03 16:45:12',
},
data: pageList,
};
},
//
getSpecialDetail: config => {
let { id, page = 1, size, lang } = config.body;
return {
status: {
code: 0,
message: ' ',
time: '2019-07-03 16:45:12',
},
data: {
detail: specialList[Math.ceil(1 + Math.random() * 98)],
total: Math.ceil(Math.random() * 100),
},
};
},
};
ローカルサービスの開始
ここではpackage.jsonファイルscriptフィールドの下に新しいコマンドを作成してサーバを開く必要があります.
"mock": "node src/mock/index.js"
npm run mock ,
axios汎用構成
1.axiosインスタンスの作成
// 1. : axios,Vue,store,router, toast ...
import axios from 'axios';
import Vue from 'vue';
// axios
const Axios = axios.create({
//
baseURL: process.env.BASE_API, //
timeout: 10000, //
// withCredentials: true, // send cookies when cross-domain requests
});
// const TOKEN = window.sessionStorage.getItem('token'); // when set token
//
Axios.interceptors.request.use(
config => {
// TODO: , token; loading
// config.headers['X-Token'] = TOKEN
return config;
},
error => {
console.log('request error:', error); // for debug
return Promise.reject(error);
}
);
/**
*
* 1. http status: response.status error.response.status
* 2. response.data code: response.data.code ( )
*/
//
Axios.interceptors.response.use(
response => {
const res = response.data;
// 1. code
// 2. response.status === 200 ; 1
if (res.status.code === 0) {
return res.data; //
} else {
// for example: code
if (res.status.code === 50008 || res.status.code === 50012) {
// toast
alert(' !!!');
}
return Promise.reject(new Error(res.status.message || 'Error'));
}
},
error => {
// : , , ...
console.log('response error:', error); // for debug
console.log(error.response); // for debug
// const res = error.response;
// if (res) {
// // ， 2xx
// errorHandle(response.status, response.data.message);
// return Promise.reject(res);
// } else {
// // ...
// // app.vue
// if (!window.navigator.onLine) {
// console.log(' ....');
// } else {
// return Promise.reject(error);
// }
// }
}
);
/**
*
* @param {Number} status
*/
const errorHandle = (status, tips) => {
//
switch (status) {
// // 401: ，
// case 401:
// toLogin();
// break;
// // 403 token
// // token
// case 403:
// tip(' ， ');
// localStorage.removeItem('token');
// store.commit('loginSuccess', null);
// setTimeout(() => {
// toLogin();
// }, 1000);
// break;
// 404
case 404:
console.log(' ');
break;
default:
console.log(tips);
}
};
// , install , vue
// this.$http.post get
export const http = {
install(Vue) {
Vue.prototype.$http = Axios;
}
}
// Axios
export default Axios
2.使用
1. , mian.js
import { http } from './api/http';
Vue.use(http);
this.$http.post | get
2. , Axios
import request from './http';
//
export function getHomeData(data) {
return request({
url: '/home',
method: 'post',
data
})
}