鸿蒙开发(十一)：发布职位信息页面的实现

🚀使用ArkTS开发鸿蒙应用：发布职位信息页面的实现

发布职位信息页面是企业用户发布新职位的重要功能模块。以下是一个完整的发布职位信息页面的实现，包括用户输入职位信息、提交职位信息和提示用户等功能。

代码解析

1. 导入模块

import { CopanyDetailModel, CopanyDetailModelData } from '../model/CopanyDetailModel'; import Logger from '../Utils/Logger'; import { httpRequestGet, httpRequestPost } from '../Utils/HttpUtils'; import { router } from '@kit.ArkUI'; import prompt from '@ohos.promptAction'; import { AddpositionModel } from '../model/AddpositionModel'; import uri from '@ohos.uri';

导入了多个模块，用于实现公司详情模型、日志记录、HTTP请求、路由跳转、提示框和职位模型等功能。

2. 定义样式扩展

@Extend(TextInput) function inputStyle() { .placeholderColor("#99182431") .height(45) .fontSize(18) .backgroundColor("#F1F3F5") .width('100%') .padding({ left: 0 }) .margin({ top: 12 }) }

@Extend(Line) function lineStyle() { .width('100%') .height(1) .backgroundColor("#FF131416") }

@Extend(Text) function textStyle() { .fontColor("#FF0C0C0C") .fontSize(18) .fontWeight(FontWeight.Medium) }

定义了三个样式扩展函数​​inputStyle​​、​​lineStyle​​ 和​​textStyle​​，分别用于设置​​TextInput​​、​​Line​​ 和​​Text​​ 组件的样式。

3. 定义发布职位信息组件

@Entry @Component struct PostaPosition { @State name: string = ""; @State cname: string = ""; @State positionsize: string = ""; @State salary: string = ""; @State username: string = ""; @State title: string = "";

private addPosition: string = "********";

async addposition() { if (this.name === '' || this.cname === '' || this.positionsize === '' || this.salary === '' || this.username === '' || this.title === '') { prompt.showToast({ message: "输入不能为空" }); } else { const neturl = new uri.URI(this.addPosition) .addQueryValue("name", this.name) .addQueryValue("cname", this.cname) .addQueryValue("size", this.positionsize) .addQueryValue("salary", this.salary) .addQueryValue("username", this.username) .addQueryValue("title", this.title) .toString();

  Logger.error("请求neturl - > " + neturl);

  await httpRequestGet(neturl).then((data) => {
    console.log("data ---> " + data);
    let addpositionModel: AddpositionModel = JSON.parse(data.toString());
    let msg = addpositionModel.msg;
    if (addpositionModel.code == 200) {
      prompt.showToast({
        message: msg
      });
      // router.pushUrl({
      //   url: "pages/Home"
      // });
    } else {
      prompt.showToast({
        message: msg
      });
    }
  });
}

}

定义了一个名为​​PostaPosition​​ 的发布职位信息组件。 使用​​@State​​ 装饰器定义了多个状态变量，用于存储用户输入的职位信息。 定义了​​addPosition​​，用于存储添加职位信息的接口URL。 在​​addposition​​ 方法中，检查用户输入是否为空，如果为空，显示提示信息；否则，拼接接口URL，调用​​httpRequestGet​​ 方法提交职位信息，并根据返回结果提示用户。

4. 页面布局

build() { Column() { RelativeContainer() { Image($r('app.media.bossback')).width(20).height(20) .onClick(() => { router.back(); }).alignRules({ 'top': { 'anchor': 'container', 'align': VerticalAlign.Top }, 'left': { 'anchor': 'container', 'align': HorizontalAlign.Start } }).margin({ left: 5, top: 7 });

  Text("添加职位信息")
    .fontSize(25)
    .fontWeight(FontWeight.Medium)
    .fontColor(Color.White)
    .alignRules({
      center: { anchor: '__container__', align: VerticalAlign.Center },
      middle: { anchor: '__container__', align: HorizontalAlign.Center }
    });
}.height(40)
.width("100%")
.backgroundColor(Color.Green);

Row() {
  Row() {
    Text("职位信息").textStyle();
  }.width(100).height("100%")
  .justifyContent(FlexAlign.Center);

  TextInput({ placeholder: "请输入职位信息" })
    .maxLength(20)
    .type(InputType.Normal)
    .inputStyle()
    .onChange((value: string) => {
      this.name = value;
    }).margin({ left: 20 });
}.width("100%").height(50)
.justifyContent(FlexAlign.Start)
Line().lineStyle();

// 其他输入框和线条样式类似，省略...

Button("提交")
  .width("90%")
  .height(40)
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .backgroundColor("#007DFF")
  .margin({ top: 47, bottom: 12 })
  .onClick(() => {
    this.addposition();
  });

}.backgroundColor("#F1F3F5") .height('100%') .width('100%'); }

使用​​Column​​ 和​​RelativeContainer​​ 布局组件，构建发布职位信息页面的UI。 包含一个标题栏，显示“添加职位信息”字样，并包含一个返回按钮。 使用​​Row​​ 和​​TextInput​​ 组件，为每个职位信息字段（如职位信息、公司名、公司规模、薪资范围、联系人、联系人职务）提供输入框。 使用​​Button​​ 组件，提供提交按钮，点击时调用​​addposition​​ 方法提交职位信息。

5.PositionListModel：提供类型安全和结构化的数据处理方式

export class PositionListModel { msg?: string = ""; code?: number = 0; data: Array = []; } export class PositionListModelData { id?: number = 0; name?: string = ""; cname?: string = ""; size?: string = ""; salary?: string = ""; username?: string = ""; title?: string = ""; }