برنامه نویسی
توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی

در اینجا اجرای کامل صفحه ارسال شغل با استفاده از ARKTS برای برنامه های Harmonyos ارائه شده است. این صفحه به کاربران سازمانی اجازه می دهد تا موقعیت های شغلی جدیدی را منتشر کنند.
توضیح کد
1. ماژول ها را وارد کنید
import { CompanyDetailModel, CompanyDetailModelData } from '../model/CompanyDetailModel';
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
برای TextInput
با lineStyle
برای Line
وت textStyle
برای 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: "Input cannot be empty"
});
} 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("Request 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 برای تعریف متغیرهای حالت چندگانه برای ذخیره اطلاعات کار ورودی کاربر
- افزودن تعریف شده برای نقطه پایانی API
- در روش افزودنی ، بررسی کنید که آیا ورودی کاربر خالی است ، در صورت وجود پیام نمایش داده می شود. در غیر این صورت ، URL API به نام 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("Add Position Information")
.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("Position Information").textStyle();
}.width(100).height("100%")
.justifyContent(FlexAlign.Center);
TextInput({ placeholder: "Please enter position information" })
.maxLength(20)
.type(InputType.Normal)
.inputStyle()
.onChange((value: string) => {
this.name = value;
}).margin({ left: 20 });
}.width("100%").height(50)
.justifyContent(FlexAlign.Start)
Line().lineStyle();
// Other input fields and line styles are similar, omitted...
Button("Submit")
.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%');
}
- ستون و NeativeContainer استفاده شده برای ساخت UI
- یک هدر ایجاد کرد که “اضافه کردن اطلاعات موقعیت” را با یک دکمه عقب نشان داد
- ردیف و متن مورد استفاده برای هر قسمت اطلاعات شغلی (به عنوان مثال ، اطلاعات موقعیت ، نام شرکت ، اندازه ، دامنه حقوق ، شخص تماس ، عنوان)
- یک دکمه برای ارسال را اجرا کرد ، که هنگام کلیک روی روش افزودنی تماس می گیرد
5. PationListModel: نوع ایمنی و ساختار داده های ساختاری را فراهم می کند
export class PositionListModel {
msg?: string = "";
code?: number = 0;
data: Array<PositionListModelData> = [];
}
export class PositionListModelData {
id?: number = 0;
name?: string = "";
cname?: string = "";
size?: string = "";
salary?: string = "";
username?: string = "";
title?: string = "";
}
نمایش تصویر