1. Function introduction
The registration and login page is a basic module, including registration, login, and planning and design of the interface after login.
1.1 Registration
Registration includes three processes: username, password, and password confirmation. The password is now displayed in plain text. In this module, a link for judging whether the "confirm password" and "password" are consistent is set.
1.2 Login
The login includes two processes of user name and password, and two cases of password error prompt and correct password to log in to a specified page are set.
1.3 Login jump
When the login user name and password correspond correctly, you will officially enter the application service page. Due to space limitations, the jump here is only a simple page for your reference. You can set the page according to your business needs.
Second, realize the key point of registration and login page development:
page design. Here we need to design registration, login, and jump pages after login. Please note that in this demo, we design the login page as the first page presented after the application is opened;
Implementation of the login module. Including correct and incorrect judgment of account password, correct jump and error prompt, here we will use the form of simulated login (design fixed value) to facilitate everyone's better understanding;
The implementation of the registration module. Including the writing of registration information, the judgment of password confirmation and the reminder of correctness and error.
3. Code Implementation
3.1 Page Design
The xml file xml layout in entry/src/main/resources/base/layout. Since we need three pages, we need to recreate two pages ability_register.xml and ability_login.xml on the basis of the original ability_main.xml to realize the registration page and login page respectively, while ability_main.xml is used to realize the login page Jump page.
The display effect of the registration interface is shown in the figure:
The display effect of the login interface is shown in the figure:
The display effect of the jump interface is shown in the figure:
3.2 Implementation of the login module
According to our page design, we can see that the login page actually implements the following functions:
The callback of the registration page, but jumps to the registration page when the user clicks the registration button;
Get the correct judgment and feedback of the login information in the input box. If it is correct, it will give a correct prompt and jump to the page. If it is wrong, it will give a prompt to re-enter. We are in \entry\src\main\java\com\example\harmonyos_jltf\slice Write code in \LoginAbilitySlice. For the callback of the registration button, you only need to directly jump to the registration page:
private void login(){
button2.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
String name = text_name.getText().toString().trim();
String password = text_password.getText().toString().trim();
if(button2!=null && name.equals("zhuguoen") && password.equals("2021")){
present(new MainAbilitySlice(),new Intent());
new ToastDialog(context).setText("登录成功").show();
}else {
new ToastDialog(context).setText("用户名或密码有误请重新输入").show();
}
}
});
};
3.3 Implementation of registration module
The registration interface also obtains the value in the input box of the registration interface in the same way, and judges the value (username, password, confirmation password) inside. Judgment is mainly divided into two aspects:
Determine whether the value in the input box is perfect, if not, the interface will give a prompt
There is also a judgment between the password and the confirmation password 3. If the passwords are inconsistent, the interface will also give a prompt
Therefore, the interface prompts are divided into three types:
Incomplete information: Please enter complete information
Inconsistent passwords: The passwords are inconsistent, please try again
Neither exists: the registration is successful (and jump to the login page at the same time).
Similarly, we use the judgment statement to implement it in RegisterAbilitySlice:
private void zhuce_login(){
// 为按钮设置点击回调
button_zhuce.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
String name =name_zhuce.getText().toString().trim();
String password = password_zhuce.getText().toString().trim();
String queren = password_queren.getText().toString().trim();
if(!name.equals(null) && !name.equals("") && !password.equals(queren)){
new ToastDialog(context).setText("密码不一致，请重新尝试！").show();
}else if (button_zhuce!=null && !name.equals(null)&& !name.equals("") && !password.equals(null) && !password.equals("") && password.equals(queren)){
new ToastDialog(context).setText("注册成功！").show();
present(new LoginAbilitySlice(),new Intent());
}else{
new ToastDialog(context).setText("请输入完整信息！").show();
}
}
});
};
4. Project summary
From the design of the page, it is necessary to pay attention to the layout setting and the design of the page button logic. For the login module and the registration module, it is necessary to consider the prompts and jumps that need to be fed back to the user after inputting different information. Of course, everyone You can also make a registration and login module that is more suitable for user needs according to your own business needs.