如何在 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;
注意:将
文件名: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/ ,您将看到以下输出: