spring boot 与 iview 前后端分离架构之前端指定环境的实现（七）

偏执的太偏执、 2022-01-31 18:17 202阅读 0赞

### spring boot 与 iview 前后端分离架构之前端指定环境的实现（七） ###

*  公众号
 *  前端环境配置
 *  动态配置axios的请求地址

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg07】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 前端环境配置 #

我们在开发中，经常需要切换环境，在不同环境需要不同的变量信息，那么我们就需要有动态的指定环境，当我们指定这个环境的时候，直接就使用这个环境的变量信息。  
打开我们的bg-admin-web的前端工程，然后再我们的src目录底下创建一个config目录，接着在该目录底下创建prod.js【正式环境的配置】、env.js【当前启动的环境】、dev.js【测试环境配置】、run.config.js【动态获取当前环境的信息】这四个文件，分别如下：  
prod.js代码如下：

export const runDevConfig = {
      baseUrl : 'http://127.0.0.1:8088',
      imgUrl : 'http://127.0.0.1:80/vcm'
    };

dev.js代码如下：

export const runProdConfig = {
      baseUrl : 'http://127.0.0.1:8288',
      imgUrl : 'http://127.0.0.1:80/vcm'
    };

如果我们需要切换环境只需要修改"development"为其他值就可以了，若需要扩展则自行在run.config.js去扩展，env.js代码如下：

export default "development";

run.config.js代码如下：

import {runDevConfig} from './dev';
    import {runProdConfig} from './prod';
    import env from './env';
    
    export default {
      /**
       * 根据启动项env来获取配置文件
       */
      runConfig:env === 'development' ? runDevConfig : runProdConfig,
    }

# 动态配置axios的请求地址 #

我们在开发环境的响应后端的地址和正式环境响应后端的地址是不一样的，因此我们需要动态的去配置此块的信息，因此打开我们之前写好的axios.js将其进行改造，改造完成以后代码如下：

import Axios from 'axios';
    import {Message} from 'iview';
    import config from '../config/run.config';
    
    class httpRequest {
    
      constructor() {
        this.options = {
          method: '',
          url: ''
        };
        // 存储请求队列
        this.queue = {};
      }
    
      // 销毁请求实例
      destroy(url) {
        delete this.queue[url];
        const queue = Object.keys(this.queue);
        return queue.length;
      }
    
      // 请求拦截
      interceptors(instance, url) {
        // 添加请求拦截器
        instance.interceptors.request.use(config => {
          // 在往后端发送请求的时候，还没有发送之前的处理，
          // 比如我们需要往我们的请求的header里面添加一些token或者其他信息的时候可以在此处进行相应的操作处理
          console.log('请求拦截')
          return config
        }, error => {
          // 对请求错误做些什么
          return Promise.reject(error);
        })
    
        // 添加响应拦截器
        instance.interceptors.response.use((res) => {
          // 已经完成了和后端的交互，此处已经获取到了后端返回的请求了，
          // 可以在此处做权限的验证拦截，比如用户非法登录的时候可以在此处重定向到登录页面
          let {data} = res;
          console.log('响应拦截'+res)
          return data;
        }, (error) => {
          Message.error('服务内部错误');
          // 对响应错误做点什么
          return Promise.reject(error);
        })
      }
    
      // 创建实例
      create() {
        let conf = {
          // 远程请求的服务的地址，动态获取，此处为第七章改造的关键点
          baseURL: config.runConfig.baseUrl,
          // 超时时间
          timeout: 5000,
          headers: {
            // 设置前端的跨域
            'Access-Control-Allow-Origin': '*',
            // 数据的提交方式为form的方式提交，若需要使用json的模式提交则将Content-Type值改为如下
            // application/json; charset=utf-8
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
            'X-URL-PATH': location.pathname
          }
        };
        return Axios.create(conf);
      }
    
      // 请求实例
      request(options) {
        let instance = this.create();
        this.interceptors(instance, options.url);
        options = Object.assign({}, options);
        this.queue[options.url] = instance;
        return instance(options);
      }
    }
    
    export default httpRequest;

到此处我们就完成了我们的前端指定环境的实现，接着我们启动我们的项目，然后访问，可以正常调用到我们的登录逻辑则说明我们的指定环境已经生效了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之前后端交互的实现（六）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之接口文档的编写（八）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20220131/b8df36b6cb5c4583ad8d6d68e418e282.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/90236546
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/90292545