📜  如何在 ReactJS 中构建 IP 地址查找器应用程序?

📅  最后修改于: 2022-05-13 01:56:23.805000             🧑  作者: Mango

如何在 ReactJS 中构建 IP 地址查找器应用程序?

在本文中,我们将构建一个 IP 地址查找器应用程序,让您可以在地图上找到客户的大致位置。 IP 地址是标识 Internet 或本地网络上的设备的唯一地址。 IP 代表“互联网协议”,它是一组规则,用于管理通过互联网或本地网络发送的数据格式。通过本文,我们将学习如何获取用户的 IP 地址以及在地图上显示他/她的大致位置。

先决条件:该项目的先决条件是:

  • 反应
  • 功能组件
  • 反应钩子
  • Axios 和 APIS
  • Javascript ES6

创建 React 应用程序和模块安装:

第 1 步:通过在终端中键入以下命令来创建一个反应应用程序:

npx create-react-app ip-finder

第 2 步:现在,通过运行以下命令进入项目文件夹,即 ip-finder:

cd ip-finder

第 3 步:使用以下命令安装此项目所需的一些 npm 包:

npm install axios 
npm install react-map-gl
npm install react-icons

项目结构:它看起来像这样:

示例:让我们获取该项目所需的 Mapbox API 密钥。请按照以下简单步骤操作:

  • 访问网站:https://www.mapbox.com/ 并创建一个免费帐户。
  • 转到您的帐户仪表板,在页面底部,您将找到一个名为“访问令牌”的部分。

  • 复制默认的公共访问令牌并将其保存在某处以供以后使用。

文件名:App.js在此文件中,我们将使用名为 https://ipapi.co/ 的免费开源 API 获取用户的 IP 地址(免费计划:1000 个请求/天)。 App.js 分为两部分,一部分用于显示用户的 IP 地址、位置和 ISP(Internet Service Provider),另一部分用于在动态地图上显示用户的大致位置。现在,在App.js组件中写下以下代码。

Javascript
import { useEffect, useState } from 'react';
import Axios from 'axios';
import Map from './Map';
import './App.css';
 
function App() {
 
  // Setting up the initial state variables
  const [ipDetails, setIpDetails] = useState([]);
  const [lat, setLat] = useState(22.5726);
  const [lon, setLon] = useState(88.3832);
 
  // Fetching the API once when the
  // component is mounted
  useEffect(() => {
    Axios.get('https://ipapi.co/json/').then((res) => {
      setIpDetails(res.data);
      setLat(res.data.latitude);
      setLon(res.data.longitude);
    });
  }, [])
 
  return (
    <>
      

IP Address Finder

      
        
          

What is my IPv4 address?

          

{ipDetails.ip}

          

Approximate location:

           

{ipDetails.city}, {ipDetails.region},           {ipDetails.country_name}.

              

Internet Service Provider(ISP):

           

{ipDetails.org}

          
               
       ); }   export default App;


Javascript
import React, { useEffect, useState } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';
import { RiUserLocationFill } from 'react-icons/ri';
 
const API_KEY = '';
 
const Map = ({ lat, lon }) => {
 
  // Setting up the initial viewport of the map
  const [viewport, setViewport] = useState({
    latitude: lat,
    longitude: lon,
    zoom: 14,
    bearing: 0,
    pitch: 0,
    width: '100%',
    height: '100%',
  });
 
  // Viewport re-renders whenever latitude
  // and longitude changes
  useEffect(() => {
    const a = { ...viewport };
    a.latitude = lat;
    a.longitude = lon;
    setViewport(a);
  }, [lat, lon]);
 
  return (
    
       setViewport(viewport)}         mapStyle="mapbox://styles/mapbox/streets-v11">                    
                       
        
      
    
  ); };   export default Map;


CSS
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.App{
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left{
  box-sizing: border-box;
  padding-left: 80px;
  width: 40%;
}
.map{
  width: 550px;
  height: 350px;
  border: 4px solid #1453dc;
}
.mark{
  padding: 40px;
  border-radius: 50%;
  background-color: #d2d8fabe
}
.heading{
  font-size: 60px;
  text-align: center;
  text-decoration: underline;
  font-family: 'Pacifico', cursive;
  color: #1453dc;
}
p{
  font-size: 20px;
  color: #1453dcaf;
}
#ip{
  color: #1453dc;
}


在 App.js 组件中,我们导入了渲染地图的自定义 Map.js 组件。现在创建该组件。在src文件夹下创建一个名为Map.js的文件。

Map.js组件中,我们将使用react-map-gl包导入地图。此外,我们将使用标记指向用户的大致位置。有关react-map-gl 的更多信息,请访问他们的官方文档 (https://visgl.github.io/react-map-gl/)。

文件名:Map.js现在在Map.js组件中写下以下代码。

Javascript

import React, { useEffect, useState } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';
import { RiUserLocationFill } from 'react-icons/ri';
 
const API_KEY = '';
 
const Map = ({ lat, lon }) => {
 
  // Setting up the initial viewport of the map
  const [viewport, setViewport] = useState({
    latitude: lat,
    longitude: lon,
    zoom: 14,
    bearing: 0,
    pitch: 0,
    width: '100%',
    height: '100%',
  });
 
  // Viewport re-renders whenever latitude
  // and longitude changes
  useEffect(() => {
    const a = { ...viewport };
    a.latitude = lat;
    a.longitude = lon;
    setViewport(a);
  }, [lat, lon]);
 
  return (
    
       setViewport(viewport)}         mapStyle="mapbox://styles/mapbox/streets-v11">                    
                       
        
      
    
  ); };   export default Map;

注意: 替换为您自己的 Mapbox 公共访问令牌。

文件名:App.css

CSS

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.App{
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left{
  box-sizing: border-box;
  padding-left: 80px;
  width: 40%;
}
.map{
  width: 550px;
  height: 350px;
  border: 4px solid #1453dc;
}
.mark{
  padding: 40px;
  border-radius: 50%;
  background-color: #d2d8fabe
}
.heading{
  font-size: 60px;
  text-align: center;
  text-decoration: underline;
  font-family: 'Pacifico', cursive;
  color: #1453dc;
}
p{
  font-size: 20px;
  color: #1453dcaf;
}
#ip{
  color: #1453dc;
}

运行应用程序的步骤:使用以下命令从项目的根目录运行应用程序。

npm start

输出:现在打开浏览器并转到http://localhost:3000/ ,您将看到以下输出:

应用演示