Mint-ui设计移动端系统-Axios

末蓝、 2023-02-20 07:44 141阅读 0赞

Mint-ui开发系统是前端静态系统，其需要与后台系统交互信息完成业务逻辑，通过Http插件Axios实现前后端数据交互。

## package.json中引入Axios ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

{ 
      "name": "gf_mob",
      "version": "1.0.0",
      "description": "gf mobile project",
      "author": "qixiang_chen@aliyun.com <qixiang_chen@aliyun.com>",
      "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文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]

'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));
          });
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200625082727211.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200625083231812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70