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

先看效果

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

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

代码语言：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)
  }
}

ip string 数据 网络 字符串

0 人点赞