前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何查看自己的IP和根据指定IP查询地址

如何查看自己的IP和根据指定IP查询地址

作者头像
徐建国
发布2024-06-19 20:28:46
890
发布2024-06-19 20:28:46
举报
文章被收录于专栏:个人路线个人路线

先看效果

接下来我们一起来看一下具体实现

首先我们根据返回的数据,

代码语言:javascript
复制
{
    "code": 1,
    "msg": "数据返回成功",
    "data": {
        "ip": "119.123.72.166",
        "province": "广东省",
        "provinceId": 440000,
        "city": "深圳市",
        "cityId": 440300,
        "isp": "电信",
        "desc": "广东省深圳市 电信"
    }
}

返回参数说明:

名称

类型

说明

ip

字符串

访问者的ip地址

province

字符串

省份

code

字符串

省份id

city

字符串

城市

cityId

字符串

城市id

isp

字符串

网络服务商名称 例如 电信

desc

字符串

拼接好的描述信息

定义model

代码语言:javascript
复制
/**
 *
 * @author: 坚果派
 * @date: 2024/6/16
 * @phone:17752170152
 * website:nutpi.com.cn
 * @organization:坚果派
 */

export class IpInfo {
  ip: string = "" //访问者的ip地址
  province: string = "" //省份
  provinceId: number = 0 //省份id
  city: string = "" //  城市
  cityId: number = 0 //城市id
  isp: string = "" //网络服务商名称 例如 电信
  desc: string = "" //拼接好的描述信息
}

然后我们发起

网络请求

网络请求,加载数据

代码语言:javascript
复制
 getLocalAddress() {
    // 发送一个get请求(默认请求方式)
    axios.get<string, AxiosResponse<string>, null>("你的URL",
      { params: {} })
      .then((response: AxiosResponse) => {
        this.IpInfo = JSON.parse(JSON.stringify(response.data["data"]))
      })
      .catch((error: AxiosError) => {
        console.error("result:" + error.message);
      });
  }

  getAddress(ip: string) {
    // 发送一个get请求(默认请求方式)
    axios.get<string, AxiosResponse<string>, null>(""你的URL"",
      { params: {} })
      .then((response: AxiosResponse) => {
        this.IpInfo = JSON.parse(JSON.stringify(response.data["data"]))
      })
      .catch((error: AxiosError) => {
        console.error("result:" + error.message);
      });
  }

UI

代码语言:javascript
复制
build() {
  Column() {
    TextInput({
      placeholder: "输入IP、查地址"
    }).width("60%")
      .onChange((e: string) => {
        this.ipAddress = e
      }).onSubmit(() => {
      this.getAddress(this.ipAddress)
    })
    Text("坚果,你目前的IP是:").fancy()
    Text(this.IpInfo.province).fancy()
    Text(this.IpInfo.city).fancy()

  }
  .height('100%')
  .width('100%')
  .justifyContent(FlexAlign.Center)
  .backgroundColor("#F7CE00")
  .alignItems(HorizontalAlign.Center)
}

完整代码

代码语言:javascript
复制
import axios, { AxiosError, AxiosResponse } from '@ohos/axios'
import { IpInfo } from '../model/IpInfo';
// @Extend(Text)可以支持Text的私有属性fontColor等
@Extend(Text)
function fancy() {
  .fontColor(Color.Red)
  .fontSize(30)
}

@Entry
@Component
struct IpAddressPage {
  @State IpInfo: IpInfo = new IpInfo();
  @State ipAddress: string = "180.149.134.141"

  aboutToAppear(): void {
this.getLocalAddress()

  }

  getLocalAddress() {
    // 发送一个get请求(默认请求方式)
    axios.get<string, AxiosResponse<string>, null>("你的URL",
      { params: {} })
      .then((response: AxiosResponse) => {
        this.IpInfo = JSON.parse(JSON.stringify(response.data["data"]))
      })
      .catch((error: AxiosError) => {
        console.error("result:" + error.message);
      });
  }

  getAddress(ip: string) {
    // 发送一个get请求(默认请求方式)
    axios.get<string, AxiosResponse<string>, null>(""你的URL"",
      { params: {} })
      .then((response: AxiosResponse) => {
        this.IpInfo = JSON.parse(JSON.stringify(response.data["data"]))
      })
      .catch((error: AxiosError) => {
        console.error("result:" + error.message);
      });
  }

  build() {
    Column() {
      TextInput({
        placeholder: "输入IP、查地址"
      }).width("60%")
        .onChange((e: string) => {
          this.ipAddress = e


        }).onSubmit(() => {
        this.getAddress(this.ipAddress)

      })
      Text("坚果,你目前的IP是:").fancy()
      Text(this.IpInfo.province).fancy()
      Text(this.IpInfo.city).fancy()

    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#F7CE00")
    .alignItems(HorizontalAlign.Center)
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-06-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大前端之旅 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先看效果
  • 返回参数说明:
  • 定义model
  • 网络请求
  • UI
  • 完整代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档