vue+element-统一管理线上线下接口

青旅半醒 2022-01-23 10:55 350阅读 0赞

##### 需求分析 #####

> 我们在使用后端提供的接口的过程中，都是先在线下测试结束，没有问题以后才会将代码部署到线上，这样才保证线上的代码是没有问题的。所以如果只有一个接口和一个页面的话，那么是无所谓的， 要不要统一管理都是一样的，但是一旦接口和页面多的话，就会比较麻烦了，所以我们需要统一一个文件进行管理这些接口，这样可以不管是线上还是线下的跑项目，都是可以直接执行的，也不会出现更改过多的问题。

##### 实现思路 #####

> 我们在config文件里面新建一个管理api的js，这样可以进行统一设置，在我们系统目录下面进行更改dev.env.js和prod.env.js里面进行添加自己需要的线上和线下的接口

##### 代码实现 #####

###### dev.env.js ######

'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    /*module.exports = merge(prodEnv, { NODE_ENV: '"development"' })*/
    module.exports = merge(prodEnv, { 
     NODE_ENV: '"development"',//开发环境
     api_9101 : '"http://47.98.113.173:9101"',  //房价码的线下接口
     api_9102 : '"http://47.98.113.173:9102"',  //会员的线下接口
     api_9519 : '"http://47.98.113.173:9519"',  //登陆的线下接口
    });

###### prod.env.js ######

'use strict'
    /*module.exports = { NODE_ENV: '"production"' }*/
    module.exports = { 
     NODE_ENV: '"production"',//生产环境
     api_price : '"http://price.crowncrystalhotel.com"',   //房价码的线上接口
     api_member : '"http://member.crowncrystalhotel.com"', //会员的线上接口
     api_9022 :'"http://47.98.113.173:9022"',//登陆的线上接口
    };

###### api.js ######

/** * 线下接口 * @type {string} */
    const api_9519 = process.env.api_9519;  //登陆的线下接口 徐哥的所有的线下接口
    const api_9101 = process.env.api_9101;  //房价码的线下接口
    const api_9102 = process.env.api_9102;  //会员的线下接口
    
    /** * 线上接口 * @type {string} */
    
    const api_9022 = process.env.api_9022;         //登陆的线上接口 徐哥所有的线下接口
    const api_price = process.env.api_price;       //房价码的线上接口
    const api_member = process.env.api_member;     //会员的线上接口
    
    export default { 
     /** * 线上接口 */
      api_9022_9519 : api_9022,
      api_price_9101 : api_price,
      api_member_9102 : api_member,
      
     /** * 线下接口 */
      /*api_9022_9519 : api_9519, api_price_9101 : api_9101, api_member_9102 : api_9102,*/
    }

> 当然这里的接口的数量是不上限的，可以一直加，只要是你们的环境是存在的接口。api.js  
> 是我自己新建的，你们自己喜欢用什么都可以。

###### main.js ######

import api from '../config/api'
    Vue.prototype.api = api;

##### 引用 #####

handleLogin : function(){ 
    { 
            let that = this;
            /** * 常规登录 && code.trim().length > 0 */
            if(that.check_login === 'login_flag'){ 
              let url =  that.api.api_9022_9519 + '/v1/common/employee/login';
              let username = this.account.username;
              let pwd = this.account.pwd;
              let code = this.account.code;
              if(username.trim().length > 0 && pwd.trim().length > 0){ 
                this.$axios({ 
                  method: 'post',
                  url: url,
                  data: { 
                    code: code,
                    user_name: username,
                    password: that.getmd5(pwd),
                  }
                }).then((res) => { 
                  console.info(res);
                  if(res.data.message === "success") { 
                    sessionStorage.setItem("root_level",res.data.root_level);
                    sessionStorage.setItem("rules",JSON.stringify(res.data.rules));
                    localStorage.setItem('access-user', JSON.stringify(res.data.real_name));
                    localStorage.setItem('userInfo', JSON.stringify(res.data.user_info));
                    that.$router.push({ 
                      path: '/'
                    });
                  } else { 
                    that.$message({ 
                      message: '登录失败',
                      type: 'warning'
                    });
                    //this.loading = false;
                    //console.info(data.data.message);
                    //this.$message.error("登录失败，账号或密码错误");
                  }
                }).catch(function(err) { 
                  that.$message({ 
                    message: '登录失败',
                    type: 'warning'
                  });
                })
              }
          },
    }

> 当然你的url也可以在你的return里面定义，这样一个页面上的所有就可以再次统一一下，举个例子：

return { 
    url : this.api_9022_9519,
    }

那么下面用的就可以直接that.url就可以了。  
*哪里不明白的可以私信我，或者下方留言，看到了都会回复的，或者关注一下，一起学习！*