Hiển thị chiến dịch theo IP trong Vue React

Giải thích API

Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.

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

Ngữ cảnh ứng dụng

Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.

• Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.
• Hiển thị chiến dịch theo IP trong Vue React
• Giải thích API
• Khuyến nghị SEO và UX

Logic triển khai

Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.

• Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
• Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.
• Tất cả ví dụ dưới đây dùng trực tiếp https://my.ipin.io/info, với chú thích và nội dung giao diện đã được bản địa hóa.
• Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.

Ví dụ code

Tất cả ví dụ dưới đây dùng trực tiếp https://my.ipin.io/info, với chú thích và nội dung giao diện đã được bản địa hóa.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "Chào mừng bạn. Đây là nội dung mặc định.", url: "/signup" };
const campaignMap = { TW: { title: "Nội dung cho người truy cập Đài Loan", url: "/tw" }, US: { title: "Nội dung cho người truy cập Hoa Kỳ", url: "/us" }, JP: { title: "Nội dung cho người truy cập Nhật Bản", 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: "Chào mừng bạn. Đây là nội dung mặc định.", url: "/signup" };
const campaignMap = { TW: { title: "Nội dung cho người truy cập Đài Loan", url: "/tw" }, US: { title: "Nội dung cho người truy cập Hoa Kỳ", url: "/us" }, JP: { title: "Nội dung cho người truy cập Nhật Bản", 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>

Khuyến nghị SEO và UX

Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.

Lỗi thường gặp

Các vấn đề sau ảnh hưởng đến độ chính xác của bài viết, khả năng dùng code và độ tin cậy khi giải thích API.

• Các vấn đề sau ảnh hưởng đến độ chính xác của bài viết, khả năng dùng code và độ tin cậy khi giải thích API.
• Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.
• Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
• Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.

Tổng kết

Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.

Câu hỏi thường gặp

Các câu hỏi dưới đây được viết riêng cho bài này và liên quan trực tiếp đến cách triển khai.