Как разрешить младшему брату в фоновом режиме быстро подключаться к вашей странице интерфейса

JavaScript

предисловие

Прежде всего, необходимо уточнить, что данная статья не является заглавной партией. Здесь нужно добиться эффектаИсходя из того, что фоновому персоналу не нужно менять базовый адрес сетевого запроса на внешнем интерфейсе, интерфейсный код используется для облегчения локальной отладки..

Мне жаль, что то, что я сказал здесь, может быть немного искажено, вы поймете, когда я дам вам краткое объяснение.

Мы знаем, что фронтенд имеет такой базовый адрес, когда подключается к бэкенду, и через него проходят все вызовы интерфейса бэкенда:

let _baseURL = 'http://api.xxx.develop.com'

const service = axios.create({ // 创建 axios 实例
  baseURL: _baseURL, // api base_url
  timeout: 120000 // 请求超时时间
})

Теперь предположим, что есть такой сценарий:

Back-end и front-end совместно разрабатывают определенное требование. Front-end детская обувь более усердная (хуо) и трудовая (шао).Разработана страница и развернут код в среде разработки компании.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, найти элемент текущего URL;
  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

Проверьте, является ли сетевой запрос, инициированный в это время, адресом, который вы настроили.

послесловие

Это решение было предоставлено фронтенд-старшим братом бывшей компании. Я просто написал его в виде статьи, чтобы поделиться с вами. Я также хотел бы поблагодарить старшего брата-фронтендщика за помощь мне в моей карьере.

Ребята, которые находят это полезным, могут нажать 👍, чтобы поддержать 😊

Знания бесценны и поддерживают оригинальность

больше рекомендаций:

Категории