Harmonyos Development (Part 4) : Developing HarmonyOS Applications with ArkTS: Implementation of the Registration Page

🌟 Developing HarmonyOS applications with ArkTS: Implementation of the registration page

When developing HarmonyOS applications, the registration page is a key functional module. Through the registration page, users can create new accounts to use more functions of the application. The following is a complete implementation of the registration page, including the user entering the account and password, calling the back-end interface to complete the registration, and prompting the user based on the returned results.

Code Analysis

Import the module

import { router } from '@kit.ArkUI'; import prompt from '@ohos.promptAction'; import { httpRequestPost } from '.. /Utils/HttpUtils'; import { RegisterModel, RegisterModelUser } from '.. /model/RegisterModel';

Multiple modules have been imported to implement functions such as route jumps, prompt boxes, and HTTP requests.

1. Define the registration page component

@Entry @Component struct Register { @State username: string = ""; @State password: string = ""; private registerurl: string = "******"; // Change to your own interface

A registration page component named "Register" was defined.

The @State decorator is used to define username and password, which are used to store the account and password entered by the user.

The registerurl is defined for storing the URL of the registration interface.

1. Registration logic

async register() {if (this.username == "" || this.password == "") {prompt.showToast({message: "The input content cannot be empty"}); } else { const jsonData = JSON.stringify({ username: this.username, password: this.password }); console.log("jsonData --> ", jsonData); try { const response = await httpRequestPost(this.registerurl, jsonData); const data = response.toString(); console.log(" data returned by registration ", data); let registerModel: RegisterModel = JSON.parse(data); let msg = registerModel.msg; if (registerModel.code === 200) {prompt.showToast({message: "Registration successful!" , duration: 2000 }); router.back(); } else { prompt.showToast({ message: msg }); }} catch (error) {console.error(" Registration request failed ", error); prompt.showToast({message: "Registration failed. Please try again later"}); }}}

The register method is defined to handle the user registration logic.

Check whether the account and password entered by the user are empty. If they are, display a prompt message.

Encapsulate the account and password entered by the user into JSON format data.

Send a POST request to the backend interface using httpRequestPost.

If the registration is successful (the return code is 200), a success prompt will be displayed and you will return to the previous page.

If the registration fails, a failure prompt will be displayed.

1. Page layout

build() {

Column() {

Image($r('app.media.app_icon'))

.width(100)

.height(100)

.margin({ top: 200 })

Text(" Registration Page ")

.fontColor(Color.Black)

.fontWeight(700)

.margin({ top: 10 })

.fontSize(24)

TextInput({placeholder: "Please enter your account"})

.type(InputType.Normal)

.margin({ left: 20, right: 20, top: 10 })

.onChange((value) => {

this.username = value;

})

TextInput({placeholder: "Please enter password"})

.type(InputType.Password)

.margin({ left: 20, right: 20, top: 10 })

.onChange((value) => {

this.password = value;

})

Row({ space: 20 }) {

Button(" Register ")

.newLocalFancy()

.onClick(() => {

this.register();

})

Button(" Return ")

.newLocalFancy()

.onClick(() => {

router.back();

})

}

.margin({ top: 10 })

}

.height('100%')

.width('100%')

}

Use the Column and Row layout components to build the UI of the registration page.

It contains one picture, one text prompt, two input boxes (account and password), and two buttons (register and return).

Listen for the value changes of the input box through the onChange event and update the username and password.

When the "register" button is clicked, the "register" method is called. When the "Return" button is clicked, it returns to the previous page.

1. Style Definition

@styles newLocalFancy() { .backgroundColor(Color.Blue) .width('40%') }

A style method newLocalFancy was defined for setting the background color and width of the button.

1. RegisterModel: Provides type-safe and structured data processing methods

export class RegisterModel { msg? : string = ""; code? : number = 0; user? : RegisterModelUser = new RegisterModelUser(); token? : string = ""; } export class RegisterModelUser { id? : number = 0; username? : string = ""; password? : string = ""; phone? : string = ""; sex? : string = ""; }