怎样让后台小哥哥快速对接你的前端页面

2019-09-26

前言

首先需要澄清一下，该篇文章并非标题党。这里介绍需要实现的效果是让后台工作人员不需要前端改动网络请求基础地址的前提下，使用前端代码便于本地调试。

不好意思这里说的可能有点绕了，待我给你简单的说明一下你就明白了。

我们知道前端在对接后台的时候都有这么一个基础地址，所有的后台接口调用都是通过它：

let _baseURL = 'http://api.xxx.develop.com'
const service = axIOS.create({ // 创建 axios 实例
 baseURL: _baseURL, // api base_url
 timeout: 120000 // 请求超时时间
})
复制代码

现在假设有这么一个场景：

后台和前端一起开发某个需求，前端童鞋比较勤(huo)劳(shao)已经开发完页面并将代码都部署到了公司的开发环境http://xxx.develop.com上。

此时后台小哥哥A想找你对接接口，你会运行本地的前端项目，然后将配置中的_baseURL改为同事A的IP地址(假设为10.0.17.231:1001);

但同事B也开发完了想与你对接，你会怎么做？

“稍等一下哈，小张现在在和我对接”

“要不你先自己用postman自测一下你的接口？”

好为南啊，前端童鞋想做到雨露均沾啊，怎么办...

此时你多么希望能把你的前端项目当成一个静态的页面，让后台小哥哥只要配置上自己的IP地址就可以查看前端页面并进行本地调试，而不再需要前端开启服务。

该篇文章就是针对以上这种情况提供一种简单的方案，若还有更优的解决方案请评论区留言，一起学习一下

实现思路

利用浏览器的Local Storage将后台的IP地址存储在其中;
前端在网络请求代码层上做一些适配,判断Local Storage中是否有指定的IP地址,若是有的话则使用该地址。

前端网络请求适配

这里我以使用axios为例进行讲解，你的代码中可能存在这么一段东西：

// request.js
let _baseURL = 'http://api.xxx.develop.com'
const service = axios.create({ // 创建 axios 实例
 baseURL: _baseURL, // api base_url
 timeout: 120000, // 请求超时时间
 headers: { 'Content-Type': 'Application/json' }
})
...
复制代码

(request.js是项目中的网络请求配置)

我们只需要将baseURL做一个简单的适配就可以了,

定义一个setBaseURL的函数：

function setBaseURL () {
 const webHost = localStorage.getItem('webHost') // 获取浏览器本地存储中Key为webHost那一项的值
 if (location.origin === 'http://xxx.develop.com' && webHost) { // 判断当前的环境以及是否存在webHost
 _baseURL = 'http://' + webHost // 将_baseURL重新赋值
 }
 return _baseURL
}
复制代码

然后使用它：

// request.js
let _baseURL = 'http://api.xxx.develop.com'
function setBaseURL () {...}
const service = axios.create({ // 创建 axios 实例
 baseURL: setBaseURL(), // api base_url
 timeout: 120000, // 请求超时时间
 headers: { 'Content-Type': 'application/json' }
})
复制代码

这样项目在生成axios实例的时候，就会判断你当前的环境(假设你只想要在开发环境上这样做),然后判断浏览器的LocalStorage中有没有需要指定的IP地址，从而返回新的_baseURL。

做好了这层适配之后，前端就可以将项目build之后放到服务器上，后台小哥哥要使用的时候做一些配置就可以了。

注这里的webHost字符串并非为固定写法，你也可以写成apiHost、host等等字段，只要和后台约定好就可以咯。

后台如何使用

后台小哥哥在使用的时候只需要在浏览器上配置一下就可以了。

假设前端项目放到的是http://xxx.develop.com上