Mint-ui设计移动端系统-Axios
Mint-ui开发系统是前端静态系统，其需要与后台系统交互信息完成业务逻辑，通过Http插件Axios实现前后端数据交互。
package.json中引入Axios
{
"name": "gf_mob",
"version": "1.0.0",
"description": "gf mobile project",
"author": "[email protected] " ,
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"js-cookie": "^2.2.1",
"mint-ui": "^2.2.13",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"axios": "^0.18.1",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"nprogress": "^0.2.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
新建JS文件构建Axios对象
\src\util\ajax.js
/**
* axios全局配置
* TODO: 拦截器全局配置，根据实际情况修改
*/
import axios from 'axios'
import router from '../router'
import Auth from '@/util/auth'
var getTokenLock = false,
CancelToken = axios.CancelToken,
requestList = []
/**
* Token校验
* @param {function} cancel - 中断函数
* @param {function} callback - 回调
* @description 校验Token是否过期，如果Token过期则根据配置采用不同方法获取新Token
* 自动获取Token：过期时自动调用获取Token接口。注意：当有任一请求在获取Token时，其余请求将顺延，直至新Token获取完毕
* 跳转授权Token：过期时中断当前所有请求并跳转到对应页面获取Token。注意：跳转页面授权最佳实现应在授权页面点击触发
*/
function checkToken(cancel, callback){
console.log("checkToken..."+new Date()+',Auth.hasToken()='+Auth.hasToken());
if(!Auth.hasToken()){
//console.log("checkToken...hasToken")
// 自动获取Token
if(Auth.tokenTimeoutMethod == "getNewToken"){
// 如果当前有请求正在获取Token
if(getTokenLock){
setTimeout(function(){
checkToken(cancel, callback)
}, 500)
} else {
getTokenLock = true
store.dispatch("auth/getNewToken").then(() => {
console.log("已获取新token")
callback()
getTokenLock = false
})
}
}
// 跳转授权Token
if(Auth.tokenTimeoutMethod == "jumpAuthPage" && Auth.isLogin()){
if(router.currentRoute.path != '/auth'){
// BUG: 无法保证一定会中断所有请求
cancel()
router.push('/auth')
}
}
} else {
callback()
}
}
/**
* 阻止短时间内的重复请求
* @param {string} url - 当前请求地址
* @param {function} c - 中断请求函数
* @description 每个请求发起前先判断当前请求是否存在于RequestList中，
* 如果存在则取消该次请求，如果不存在则加入RequestList中，
* 当请求完成后500ms时，清除RequestList中对应的该请求。
*/
function stopRepeatRequest(url, c){
for( let i = 0; i < requestList.length; i++){
if(requestList[i] == url){
c()
return
}
}
requestList.push(url)
}
// 超时设置
const service = axios.create({
// 请求超时时间
timeout: 3600000,
//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
});
// baseURL
axios.defaults.baseURL=Auth.getServerUrl();
axios.defaults.withCredentials=true;
//axios.defaults.origin='http://localhost:8080';
// http request 拦截器
// 每次请求都为http头增加Authorization字段，其内容为token
service.interceptors.request.use(
config => {
console.log("axios 请求拦截...");
let cancel
//config.cancelToken = new CancelToken(function executor(c) {
// cancel = c;
//})
//如果是退出状态停止检测Token
//if(!Auth.logoutFlag)
//{
//console.log("axios 请求拦截...token="+`${store.state.user.token}`);
//checkToken(cancel, function(){
// Auth.setLoginStatus()
// config.headers.Authorization = `${store.state.user.token}`
//})
//}
let token = sessionStorage.getItem('token');
if (!(token == null || token == 'null' || token == '')) {
config.headers.Authorization = token;
}
let userId = sessionStorage.getItem('userId');
if (!(userId == null || userId == 'null' || userId == '')) {
config.headers.userId = userId;
}
let d = new Date();
let timestamp=d.getTime();
let params=config.params;
if (!(params == undefined || params == null)){
params.timestamp=timestamp;
}else{
params={};
params.timestamp=timestamp;
}
config.params=params;
//stopRepeatRequest(config.url, cancel)
return config
},
err => {
return Promise.reject(err);
}
);
// http response 拦截器
// 针对响应代码确认跳转到对应页面
service.interceptors.response.use(
response => {
console.log("axios 响应拦截...");
for( let i = 0; i < requestList.length; i++){
if(requestList[i] == response.config.url){
// 注意，不能保证500ms必定执行，详情请了解JS的异步机制
setTimeout(function(){
requestList.splice(i,1)
}, 1000)
break
}
}
return Promise.resolve(response.data)
},
error => {
console.log("axios 响应拦截 error..."+JSON.stringify(error));
if(axios.isCancel(error)){
console.log(error)
return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断")
} else if (error.response) {
if (error.response.status == 401){
router.push('/error/401');
}
else if (error.response.status == 403){
router.push('/error/403');
}else{
//Message({
// message: `服务器错误！错误代码：${error.response.status}`,
// type: 'error'
//})
return Promise.reject(error.response.data)
}
}
}
);
export default service;
新建auth.js文件，初始化配置
\src\util\auth.js
import Cookies from 'js-cookie'
const auth = {
isLogin: function(){
//return Cookies.get(this.loginKey)
let ret = false;
let isLogin = sessionStorage.getItem('isLogin');
if (isLogin != null && isLogin != ''){
ret = isLogin;
}
return ret;
},
getUserId: function() {
return sessionStorage.getItem('userId');
},
getUserName: function() {
return sessionStorage.getItem('userName');
},
isSsoEnv:function(){
return process.env.IS_SSO;
},
getServerUrl:function()
{
return process.env.SERVER_URL;
},
getSsoUrl:function(){
return process.env.SSO_URL;
}
}
export default auth
配置Conf文件
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
SERVER_URL: '"http://localhost:6060"',
IS_SSO: false,
SSO_URL: '"http://sso.test.com/oauth2/authorize?client_id=syscode&redirect_uri=http://localhost:8080/%23/sso&response_type=code&state=123"',
})
配置main.js文件，引入axios.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import router from './router'
import App from './App.vue'
import { Tabbar, TabItem } from 'mint-ui';
import axios from './util/ajax'
import utils from './util/utils'
import store from './store'
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
Vue.prototype.$axios = axios;
Vue.prototype.$utils = utils;
Vue.use(MintUI)
new Vue({
el: '#app',
router,
store,
axios,
utils,
render: h => h(App)
}).$mount('#app')
使用Axios与后台交互数据
data () {
return {
username:'',
email:'',
password:'',
phone:'',
website:'',
number:'',
birthday:'',
introduction:'',
storeList:[],
}
},
findStoreNameList() {
let that = this;
this.loading = true;
this.$axios({
url: "/store/storenamelist",
method: "get",
params: {
userId:'admin',
page:1,
size:10,
name:''
}
})
.then(res => {
this.loading = false;
that.storeList = res.list;
})
.catch(err => {
this.loading = false;
this.$message.error(`获取数据失败，失败码：`+JSON.stringify(err));
});
},