怎樣讓後臺小哥哥快速對接你的前端頁面

前言

首先須要澄清一下，該篇文章並不是標題黨。這裏介紹須要實現的效果是讓後臺工做人員不須要前端改動網絡請求基礎地址的前提下，使用前端代碼便於本地調試。

很差意思這裏說的可能有點繞了，待我給你簡單的說明一下你就明白了。

咱們知道前端在對接後臺的時候都有這麼一個基礎地址，全部的後臺接口調用都是經過它：

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地址就能夠查看前端頁面並進行本地調試，而再也不須要前端開啓服務。

該篇文章就是針對以上這種狀況提供一種簡單的方案，若還有更優的解決方案請評論區留言，一塊兒學習一下😊

實現思路

1. 利用瀏覽器的Local Storage將後臺的IP地址存儲在其中;
2. 前端在網絡請求代碼層上作一些適配,判斷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上

1. 打開http://xxx.develop.com，並打開控制檯(window快捷鍵F12, Mac快捷鍵option＋command＋i);
2. 找到Application下的Local Storage;
3. 展開Local Storage, 找到當前網址的那一項;
4. 在右邊添加Key爲webHost, Value爲後臺本地的IP地址(包括端口號)的鍵值對。
5. 刷新一下頁面

以下圖：

配置完以後可能長這樣：

注

1. webHost的拼寫;
2. 填入的IP地址必定要帶上端口號
3. 配置完以後刷新下頁面
4. 該配置針對的只是你本機的瀏覽器
5. 不想要本地調試的時候記得將這項配置清除，否則它會一直存在於你的瀏覽器中
6. 如果想刪除這項配置只須要將Value設置爲空字符串, 或刪除這一項，以下圖

檢測是否配置成功

檢測是否配置成功只須要查看一下發送的網絡請求的Request URL是否已經改變就能夠了。

仍是打開控制檯，而後找到NetWork那一項，篩選一下只查看XHR的網絡請求

假設原來應該請求的地址爲http://api.xxx.develop.com

配置以後要請求的地址 10.0.17.231:1001

查看此時發起網絡請求是否是你配置以後的地址便可。

後語

該解決方案是前公司的前端大哥提供的，我只是將它寫成文章分享給你們，在這裏也要感謝前端大哥在職業道路上對個人幫助。

以爲有幫助的小夥能夠點個👍支持一下 😊

知識無價，支持原創

更多推薦：

• 適合初學者的TCP講解
• ES9已經來了 Are you ready?
• 微信小程序使用多色圖標詳解