HarmonyOS鸿蒙Next中如何查看自己的IP和根据指定IP查询地址

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

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

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

返回参数说明：

定义model

/**
 *
 * @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 = "" //拼接好的描述信息
}

然后我们发起

网络请求

网络请求，加载数据

 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

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)
}

完整代码

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)
  }
}