前言:
此时小伙伴们对“js输入ip”可能比较重视,姐妹们都需要分析一些“js输入ip”的相关知识。那么小编同时在网上网罗了一些有关“js输入ip””的相关资讯,希望我们能喜欢,各位老铁们一起来了解一下吧!网站可以利用IP地理定位为网站用户提供各种功能。这些功能包括根据国家进行网页重定向、以本地语言显示内容,或者根据用户的地理位置定制内容。
React是一个开源的JavaScript库,它使得网页开发人员可以基于组件轻松创建引人入胜的用户界面。它被设计为在前端(客户端)运行,这意味着它只能在浏览器端呈现页面。
与此同时,Next.js是由Vercel开发的开源React Web开发框架。Next.js使得React Web应用程序可以执行服务器端渲染、代码拆分等功能。该框架由Node.js提供支持,Node.js提供了JavaScript运行环境。
在本教程中,我将介绍如何使用React和Next.js搭建一个基本的网站。然后,我将演示如何通过检查访问者的IP地址来获取IP地理定位数据。这涉及与IP2Location.io进行简单集成,IP2Location.com是长期提供IP地理定位数据的服务提供商。
我将使用Debian 12实例进行演示。
先决条件:IP2Location.io免费API密钥。请记下您的API密钥,它将在下面的步骤中使用。
1. 安装Node.js
在撰写本文时,Next.js所需的最低Node.js版本为18或更高。请参考next.js设置以了解最新所需版本。
按照您的平台在node.js上安装。
对于Debian,请使用以下命令进行安装:
sudo apt install nodejs npm
安装完成后,请验证Node.js和npm的版本。
nodejs --version && npm --version
好的,我的版本符合要求。接下来,让我们进行下一步。
2. 创建基本的Next.js应用程序
使用下面的命令行自动生成基本的Next.js应用程序,基于默认模板。导航到您想要创建应用程序的文件夹,然后运行以下命令。
npx create-next-app@latest
我将使用默认项目名称“my-app”,并且在此演示中不使用TypeScript。选择ESLint为Yes,Tailwind为No,src director为No,App Router为No,import alias为No。
运行上述命令后,您应该看到名为“my-app”的文件夹已经创建,并且包含了默认模板的骨架代码。让我们进入“my-app”文件夹,看看创建了哪些文件和文件夹。
查看package.json文件,您会发现它已经自动包含了与React和Next.js一起使用所需的依赖项。
3. 安装IP2Location.io Node.js SDK
运行以下命令以安装IP2Location.io Node.js SDK。
npm install ip2location-io-nodejs
运行上述命令后,您会看到package.json已经更新,包含了IP2Location.io Node.js SDK。
4. 修改Pages文件夹中的Index.js以添加IP2Location.io代码
导航到pages文件夹,让我们使用文本编辑器查看index.js文件。我假设您已经熟悉React,因此我在这里不会涵盖这部分。
现在,让我们用下面的代码替换整个页面,以简化页面以便进行演示。在粘贴下面的简化代码后,请保存页面。
import Head from 'next/head'import Image from 'next/image'import { Inter } from 'next/font/google'import styles from '@/styles/Home.module.css'import ip2locationio from 'ip2location-io-nodejs'const inter = Inter({ subsets: ['latin'] })export async function getServerSideProps(context) { let ip const { req } = context if (req.headers['x-forwarded-for']) { ip = req.headers['x-forwarded-for'].split(',')[0] } else if (req.headers['x-real-ip']) { ip = req.connection.remoteAddress } else { ip = req.connection.remoteAddress } // Configures IP2Location.io API key let mykey = 'YOUR_API_KEY' let config = new ip2locationio.Configuration(mykey) let ipl = new ip2locationio.IPGeolocation(config) let lang = 'fr' // translation language, only supported in Plus and Security plans so use blank if not needed // Lookup ip address geolocation data const ipldata = await ipl.lookup(ip, lang) return { props: { ipldata: ipldata } }}export default function Home({ ipldata }) { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={`${styles.main} ${inter.className}`}> <div className={styles.description}> IP: {ipldata.ip} <br /> Country: {ipldata.country_name} ({ipldata.country_code}) <br /> Country translation: {ipldata.country.translation.value} ({ipldata.country.translation.lang}) <br /> Region: {ipldata.region_name} <br /> City: {ipldata.city_name} <br /> Latitude: {ipldata.latitude} <br /> Longitude: {ipldata.longitude} <br /> Continent: {ipldata.continent.name} <br /> Continent translation: {ipldata.continent.translation.value} ({ipldata.continent.translation.lang}) <br /> </div> </main> </> )}
现在,让我们分解一下将允许我们检索网站访问者IP地址的IP地理定位的重要部分。
首先,我们需要导入IP2Location.io Node.js SDK,以便我们可以使用它的功能。
import ip2locationio from 'ip2location-io-nodejs'
接下来,添加另一个名为“getServerSideProps”的函数,这是一个Next.js函数,允许我们在每次页面请求时设置动态属性。在这里,我们检索调用者的IP地址,并将其传递给IP2Location.io API以获取地理位置数据。
export async function getServerSideProps(context) { let ip const { req } = context if (req.headers['x-forwarded-for']) { ip = req.headers['x-forwarded-for'].split(',')[0] } else if (req.headers['x-real-ip']) { ip = req.connection.remoteAddress } else { ip = req.connection.remoteAddress } // Configures IP2Location.io API key let mykey = 'YOUR_API_KEY' let config = new ip2locationio.Configuration(mykey) let ipl = new ip2locationio.IPGeolocation(config) let lang = 'fr' // translation language, only supported in Plus and Security plans so use blank if not needed // Lookup ip address geolocation data const ipldata = await ipl.lookup(ip, lang) return { props: { ipldata: ipldata } }}
最后,我们可以在Home函数中使用我们上面设置的属性,该函数将呈现我们的索引页面。我们将ipldata传递给函数,然后IP地理位置字段如country_code、country_name、region_name和其他字段将被显示。
export default function Home({ ipldata }) { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={`${styles.main} ${inter.className}`}> <div className={styles.description}> IP: {ipldata.ip} <br /> Country: {ipldata.country_name} ({ipldata.country_code}) <br /> Country translation: {ipldata.country.translation.value} ({ipldata.country.translation.lang}) <br /> Region: {ipldata.region_name} <br /> City: {ipldata.city_name} <br /> Latitude: {ipldata.latitude} <br /> Longitude: {ipldata.longitude} <br /> Continent: {ipldata.continent.name} <br /> Continent translation: {ipldata.continent.translation.value} ({ipldata.continent.translation.lang}) <br /> </div> </main> </> )}5. 运行Next.js应用程序
运行以下命令以启动Next.js应用程序。
npm run dev
它会告诉您可以在本地主机的3000端口访问Web服务器。
6. 打开浏览器并测试页面
由于IP地理定位需要公共IP地址,我们将通过互联网从客户端机器访问我们的测试服务器,以便它可以读取我们的公共IP地址。
在客户端机器上打开浏览器,并导航到您正在使用的服务器的3000端口。
查看下面的页面输出。
注意:我的示例使用了API的Security计划,因此我能够检索更多的数据,比如大洲信息以及翻译。
结论
我希望上述指南能够帮助您轻松地将IP地理定位集成到您的Next.js Web应用程序中。现代网站确实依赖于IP地理定位来实现许多功能,而这是很容易实现的。
标签: #js输入ip #如何查看js文件 #js获取当前地理位置的方法有哪些