Как показывать геокампании по IP в Vue React

Описание API

Браузерный вызов проверяет IP посетителя и возвращает его IP, страну, регион и город. Это подходит для регионального отображения.

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

Сценарии применения

Эти сценарии показывают ценность IP-интерфейса и четко разделяют IP сервера и IP посетителя.

• Эти сценарии показывают ценность IP-интерфейса и четко разделяют IP сервера и IP посетителя.
• Как показывать геокампании по IP в Vue React
• Описание API
• Рекомендации по SEO и UX

Логика реализации

Перед реализацией определите инициатора запроса: серверные запросы возвращают IP сервера, браузерные — IP посетителя.

• Перед реализацией определите инициатора запроса: серверные запросы возвращают IP сервера, браузерные — IP посетителя.
• Браузерный вызов проверяет IP посетителя и возвращает его IP, страну, регион и город. Это подходит для регионального отображения.
• Все примеры ниже напрямую используют https://my.ipin.io/info, комментарии и тексты интерфейса локализованы.
• Контент по умолчанию должен быть полным и читаемым, а региональный контент — улучшением. Поисковые системы получают стабильный контент, а страница остается рабочей при сбое API.

Пример кода

Все примеры ниже напрямую используют https://my.ipin.io/info, комментарии и тексты интерфейса локализованы.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "Добро пожаловать. Это контент по умолчанию.", url: "/signup" };
const campaignMap = { TW: { title: "Контент для посетителей из Тайваня", url: "/tw" }, US: { title: "Контент для посетителей из США", url: "/us" }, JP: { title: "Контент для посетителей из Японии", url: "/jp" } };
export default function GeoCampaign() {
  const [campaign, setCampaign] = useState(defaultCampaign);
  useEffect(() => {
    let cancelled = false;
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { if (!cancelled) setCampaign(campaignMap[info.country] || defaultCampaign); })
      .catch(() => { if (!cancelled) setCampaign(defaultCampaign); });
    return () => { cancelled = true; };
  }, []);
  return <a href={campaign.url}>{campaign.title}</a>;
}

Vue

<template>
  <a :href="campaign.url">{{ campaign.title }}</a>
</template>
<script>
const defaultCampaign = { title: "Добро пожаловать. Это контент по умолчанию.", url: "/signup" };
const campaignMap = { TW: { title: "Контент для посетителей из Тайваня", url: "/tw" }, US: { title: "Контент для посетителей из США", url: "/us" }, JP: { title: "Контент для посетителей из Японии", url: "/jp" } };
export default {
  data() { return { campaign: defaultCampaign }; },
  mounted() {
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { this.campaign = campaignMap[info.country] || defaultCampaign; })
      .catch(() => { this.campaign = defaultCampaign; });
  }
};
</script>

Рекомендации по SEO и UX

Контент по умолчанию должен быть полным и читаемым, а региональный контент — улучшением. Поисковые системы получают стабильный контент, а страница остается рабочей при сбое API.

Частые ошибки

Следующие проблемы влияют на точность статьи, применимость кода и доверие к описанию API.

• Следующие проблемы влияют на точность статьи, применимость кода и доверие к описанию API.
• Контент по умолчанию должен быть полным и читаемым, а региональный контент — улучшением. Поисковые системы получают стабильный контент, а страница остается рабочей при сбое API.
• Перед реализацией определите инициатора запроса: серверные запросы возвращают IP сервера, браузерные — IP посетителя.
• Эти сценарии показывают ценность IP-интерфейса и четко разделяют IP сервера и IP посетителя.

Итог

Браузерный вызов проверяет IP посетителя и возвращает его IP, страну, регион и город. Это подходит для регионального отображения.

Частые вопросы

Вопросы ниже подготовлены специально для этой статьи и напрямую связаны с реализацией.