本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(1)

【鸿蒙】鸿蒙App应用-《记账软件》登录,注册,找回密码功能

发布于2021-08-29 18:01     阅读(420)     评论(0)     点赞(23)     收藏(0)


1.登录功能

【鸿蒙】鸿蒙App应用-《记账软件》开发步骤欢迎引导页进入之后,完成登录功能。界面效果如图

2.布局文件的搭建

在layout文件夹下新建xml文件,布局代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3. xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4. ohos:height="match_parent"
  5. ohos:width="match_parent"
  6. ohos:orientation="vertical">
  7. <Text
  8. ohos:height="match_content"
  9. ohos:background_element="#FFDA44"
  10. ohos:width="match_parent"
  11. ohos:text="登 录"
  12. ohos:padding="10fp"
  13. ohos:text_alignment="center"
  14. ohos:text_font="HwChinese-medium"
  15. ohos:text_weight="1200"
  16. ohos:text_color="#000"
  17. ohos:text_size="25fp"/>
  18. <DirectionalLayout
  19. ohos:height="match_content"
  20. ohos:width="match_parent"
  21. ohos:weight="2"
  22. ohos:orientation="vertical">
  23. <DirectionalLayout
  24. ohos:height="match_content"
  25. ohos:width="match_parent"
  26. ohos:alignment="vertical_center"
  27. ohos:background_element="$graphic:background_textfield"
  28. ohos:margin="20fp"
  29. ohos:orientation="horizontal">
  30. <Image
  31. ohos:height="50vp"
  32. ohos:width="50vp"
  33. ohos:image_src="$media:lr_ico_phone"
  34. ohos:left_margin="10vp"
  35. ohos:scale_mode="stretch"/>
  36. <TextField
  37. ohos:id="$+id:tv_user"
  38. ohos:height="match_content"
  39. ohos:width="match_parent"
  40. ohos:hint="手机号"
  41. ohos:text_input_type="pattern_number"
  42. ohos:hint_color="#aaaaaa"
  43. ohos:padding="15vp"
  44. ohos:text_color="#aaaaaa"
  45. ohos:text_size="20fp"/>
  46. </DirectionalLayout>
  47. <DirectionalLayout
  48. ohos:height="match_content"
  49. ohos:width="match_parent"
  50. ohos:alignment="vertical_center"
  51. ohos:background_element="$graphic:background_textfield"
  52. ohos:left_margin="20fp"
  53. ohos:orientation="horizontal"
  54. ohos:right_margin="20fp">
  55. <Image
  56. ohos:height="50vp"
  57. ohos:width="50vp"
  58. ohos:image_src="$media:lr_ico_pass"
  59. ohos:left_margin="10vp"
  60. ohos:scale_mode="stretch"/>
  61. <TextField
  62. ohos:id="$+id:tv_psd"
  63. ohos:height="match_content"
  64. ohos:width="match_parent"
  65. ohos:hint="账号密码"
  66. ohos:text_input_type="pattern_password"
  67. ohos:hint_color="#aaaaaa"
  68. ohos:padding="15vp"
  69. ohos:text_color="#aaaaaa"
  70. ohos:text_size="20fp"/>
  71. </DirectionalLayout>
  72. <Button
  73. ohos:id="$+id:btn_login"
  74. ohos:height="match_content"
  75. ohos:width="match_parent"
  76. ohos:background_element="$graphic:background_button_login"
  77. ohos:margin="20fp"
  78. ohos:padding="10fp"
  79. ohos:text="登录"
  80. ohos:text_color="#ffffff"
  81. ohos:text_size="25fp"
  82. />
  83. <DirectionalLayout
  84. ohos:height="match_content"
  85. ohos:width="match_parent"
  86. ohos:left_margin="20fp"
  87. ohos:orientation="horizontal"
  88. ohos:right_margin="20fp">
  89. <Text
  90. ohos:id="$+id:tv_register"
  91. ohos:height="match_content"
  92. ohos:width="match_content"
  93. ohos:text="注册"
  94. ohos:text_alignment="left"
  95. ohos:text_color="#FFDA44"
  96. ohos:text_size="20fp"
  97. ohos:weight="1"/>
  98. <Text
  99. ohos:id="$+id:tv_findpsd"
  100. ohos:height="match_content"
  101. ohos:width="match_content"
  102. ohos:text="找回密码"
  103. ohos:text_alignment="right"
  104. ohos:text_color="#FFDA44"
  105. ohos:text_size="20fp"
  106. ohos:weight="1"/>
  107. </DirectionalLayout>
  108. </DirectionalLayout>
  109. <DirectionalLayout
  110. ohos:height="match_content"
  111. ohos:width="match_parent"
  112. ohos:weight="1"
  113. ohos:orientation="vertical">
  114. <Text
  115. ohos:height="match_content"
  116. ohos:width="match_parent"
  117. ohos:text_size="20fp"
  118. ohos:text_alignment="center"
  119. ohos:text_color="#666"
  120. ohos:text="*第三方账号快速登录*"/>
  121. <DirectionalLayout
  122. ohos:height="match_content"
  123. ohos:width="match_parent"
  124. ohos:margin="30fp"
  125. ohos:alignment="horizontal_center"
  126. ohos:orientation="horizontal">
  127. <DirectionalLayout
  128. ohos:height="match_content"
  129. ohos:width="match_content"
  130. ohos:weight="1"
  131. ohos:alignment="center">
  132. <Image
  133. ohos:height="60fp"
  134. ohos:width="60fp"
  135. ohos:scale_mode="stretch"
  136. ohos:image_src="$media:loadweixin"/>
  137. <Text
  138. ohos:height="match_content"
  139. ohos:width="match_content"
  140. ohos:text_size="20fp"
  141. ohos:text="微信"/>
  142. </DirectionalLayout>
  143. <DirectionalLayout
  144. ohos:height="match_content"
  145. ohos:width="match_content"
  146. ohos:weight="1"
  147. ohos:alignment="center">
  148. <Image
  149. ohos:height="60fp"
  150. ohos:width="60fp"
  151. ohos:scale_mode="stretch"
  152. ohos:image_src="$media:qq"/>
  153. <Text
  154. ohos:height="match_content"
  155. ohos:width="match_content"
  156. ohos:text_size="20fp"
  157. ohos:text="QQ"/>
  158. </DirectionalLayout>
  159. <DirectionalLayout
  160. ohos:height="match_content"
  161. ohos:width="match_content"
  162. ohos:weight="1"
  163. ohos:alignment="center">
  164. <Image
  165. ohos:height="60fp"
  166. ohos:width="60fp"
  167. ohos:scale_mode="stretch"
  168. ohos:image_src="$media:weibo"/>
  169. <Text
  170. ohos:height="match_content"
  171. ohos:width="match_content"
  172. ohos:text_size="20fp"
  173. ohos:text="微博"/>
  174. </DirectionalLayout>
  175. </DirectionalLayout>
  176. </DirectionalLayout>
  177. </DirectionalLayout>

 在graphic文件夹中新建background_button_login.xml文件,用于控制登录按钮的显示样式

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3. xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4. ohos:shape="rectangle">
  5. <corners
  6. ohos:radius="20"
  7. />
  8. <solid
  9. ohos:color="#FFE3C33F"/>
  10. </shape>

 在graphic文件夹中新建background_textfield.xml文件,用于控制手机号和密码输入框的边框样式

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3. xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4. ohos:shape="rectangle">
  5. <corners
  6. ohos:radius="20"
  7. />
  8. <solid
  9. ohos:color="#FFffff"/>
  10. <stroke
  11. ohos:color="#FFDA44"
  12. ohos:width="10"/>
  13. </shape>

 结合当前组件和资源图片文本搭建登陆页面的布局,主题以黄色为主。

3.创建LoginAbilitySlice类完成登录功能

在src文件夹下的包中新建登录的界面,并继承至BaseAilitySlice基类。

加载布局之后,定义initView方法,初始化这些组件的对象。

  1. /**
  2. * 初始化组件
  3. */
  4. private void initView() {
  5. tv_user= (Text) this.findComponentById(ResourceTable.Id_tv_user);
  6. tv_findpsd= (Text) this.findComponentById(ResourceTable.Id_tv_findpsd);
  7. tv_psd= (Text) this.findComponentById(ResourceTable.Id_tv_psd);
  8. tv_register= (Text) this.findComponentById(ResourceTable.Id_tv_register);
  9. btn_login= (Button) this.findComponentById(ResourceTable.Id_btn_login);
  10. tv_register.setClickedListener(listener);
  11. tv_findpsd.setClickedListener(listener);
  12. btn_login.setClickedListener(listener);
  13. }

设置登录按钮,注册,找回密码的监听事件

  1. private Component.ClickedListener listener =new Component.ClickedListener() {
  2. @Override
  3. public void onClick(Component component) {
  4. switch (component.getId()){
  5. case ResourceTable.Id_btn_login:
  6. //登录按钮
  7. String name=tv_user.getText();
  8. String psd=tv_psd.getText();
  9. Map map=new HashMap();
  10. map.put("phone",name);
  11. map.put("psd",psd);
  12. User user= DBUtil.getInstance(rs).login("tb_user",map);
  13. if (user==null)
  14. showToastDialogShort("登录失败");
  15. else {
  16. showToastDialogShort("登录成功");
  17. CommonUtil.user=user;
  18. present(new MainAbilitySlice(),new Intent());
  19. terminate();
  20. }
  21. break;
  22. case ResourceTable.Id_tv_register:
  23. //注册
  24. present(new RegisterAilitySlice(),new Intent());
  25. break;
  26. case ResourceTable.Id_tv_findpsd:
  27. //找回密码
  28. break;
  29. }
  30. }
  31. };

完整代码如下:

  1. package com.example.bookkeepproject.slice;
  2. import com.example.bookkeepproject.ResourceTable;
  3. import com.example.bookkeepproject.entity.User;
  4. import com.example.bookkeepproject.utils.CommonUtil;
  5. import com.example.bookkeepproject.utils.DBUtil;
  6. import ohos.aafwk.content.Intent;
  7. import ohos.agp.components.Button;
  8. import ohos.agp.components.Component;
  9. import ohos.agp.components.Text;
  10. import java.util.HashMap;
  11. import java.util.Map;
  12. /**
  13. * 主子界面
  14. */
  15. public class LoginAbilitySlice extends BaseAbilitySlice {
  16. private Text tv_user,tv_psd,tv_register,tv_findpsd;
  17. private Button btn_login;
  18. @Override
  19. public void onStart(Intent intent) {
  20. super.onStart(intent);
  21. super.setUIContent(ResourceTable.Layout_ability_login);
  22. initView();
  23. }
  24. /**
  25. * 初始化组件
  26. */
  27. private void initView() {
  28. tv_user= (Text) this.findComponentById(ResourceTable.Id_tv_user);
  29. tv_findpsd= (Text) this.findComponentById(ResourceTable.Id_tv_findpsd);
  30. tv_psd= (Text) this.findComponentById(ResourceTable.Id_tv_psd);
  31. tv_register= (Text) this.findComponentById(ResourceTable.Id_tv_register);
  32. btn_login= (Button) this.findComponentById(ResourceTable.Id_btn_login);
  33. tv_register.setClickedListener(listener);
  34. tv_findpsd.setClickedListener(listener);
  35. btn_login.setClickedListener(listener);
  36. }
  37. private Component.ClickedListener listener =new Component.ClickedListener() {
  38. @Override
  39. public void onClick(Component component) {
  40. switch (component.getId()){
  41. case ResourceTable.Id_btn_login:
  42. //登录按钮
  43. String name=tv_user.getText();
  44. String psd=tv_psd.getText();
  45. Map map=new HashMap();
  46. map.put("phone",name);
  47. map.put("psd",psd);
  48. User user= DBUtil.getInstance(rs).login("tb_user",map);
  49. if (user==null)
  50. showToastDialogShort("登录失败");
  51. else {
  52. showToastDialogShort("登录成功");
  53. CommonUtil.user=user;
  54. present(new MainAbilitySlice(),new Intent());
  55. terminate();
  56. }
  57. break;
  58. case ResourceTable.Id_tv_register:
  59. //注册
  60. present(new RegisterAilitySlice(),new Intent());
  61. break;
  62. case ResourceTable.Id_tv_findpsd:
  63. //找回密码
  64. break;
  65. }
  66. }
  67. };
  68. @Override
  69. public void onActive() {
  70. super.onActive();
  71. }
  72. @Override
  73. public void onForeground(Intent intent) {
  74. super.onForeground(intent);
  75. }
  76. }

 

 4.定义用户实体类

完成登录功能需要获得当前登录的用户的个人信息,并进行存储。

  1. package com.example.bookkeepproject.entity;
  2. public class User {
  3. private int id;
  4. private String name;
  5. private String psd;
  6. private String phone;
  7. private String sex;
  8. private int age;
  9. public User(int id, String name, String psd, String phone, String sex, int age) {
  10. this.id = id;
  11. this.name = name;
  12. this.psd = psd;
  13. this.phone = phone;
  14. this.sex = sex;
  15. this.age = age;
  16. }
  17. @Override
  18. public String toString() {
  19. return "User{" +
  20. "id=" + id +
  21. ", name='" + name + '\'' +
  22. ", psd='" + psd + '\'' +
  23. ", phone='" + phone + '\'' +
  24. ", sex='" + sex + '\'' +
  25. ", age=" + age +
  26. '}';
  27. }
  28. public int getId() {
  29. return id;
  30. }
  31. public void setId(int id) {
  32. this.id = id;
  33. }
  34. public String getName() {
  35. return name;
  36. }
  37. public void setName(String name) {
  38. this.name = name;
  39. }
  40. public String getPsd() {
  41. return psd;
  42. }
  43. public void setPsd(String psd) {
  44. this.psd = psd;
  45. }
  46. public String getPhone() {
  47. return phone;
  48. }
  49. public void setPhone(String phone) {
  50. this.phone = phone;
  51. }
  52. public String getSex() {
  53. return sex;
  54. }
  55. public void setSex(String sex) {
  56. this.sex = sex;
  57. }
  58. public int getAge() {
  59. return age;
  60. }
  61. public void setAge(int age) {
  62. this.age = age;
  63. }
  64. }

 5.创建Sqlite关系型数据库

新建一个工具包Utils,在该包下存放整个项目需要用的工具类,这里需要创建数据库工具类以及执行sql的工具类

5.1创建数据库工具类

在utils包下新建MyHelper类继承至RdbOpenCallback类,实现抽象类中为实现的方法。

  1. package com.example.bookkeepproject.utils;
  2. import ohos.app.Context;
  3. import ohos.data.DatabaseHelper;
  4. import ohos.data.preferences.Preferences;
  5. import ohos.data.rdb.RdbOpenCallback;
  6. import ohos.data.rdb.RdbStore;
  7. import ohos.data.rdb.StoreConfig;
  8. /**
  9. * 创建sqlite数据库的辅助类
  10. */
  11. public class MyHelper extends RdbOpenCallback {
  12. DatabaseHelper db;
  13. private RdbStore rs;
  14. private static MyHelper helper;
  15. private Preferences preferences;
  16. // id,name,info,type
  17. private String tb_user = "create table tb_user(id Integer primary key autoincrement,name,phone,psd,sex,age)";
  18. //支出,收入类型,具体支出,收入来源,来源的图片,年,月,日,金额,备注信息
  19. private String tb_jz = "create table tb_jz(id Integer primary key autoincrement,userid,type,subtype,image,year,month,day,money,info)";
  20. //单例设计模式
  21. public static RdbStore getInstance(Context context,String DBName){
  22. if (helper==null)
  23. helper=new MyHelper(context,DBName);
  24. return helper.rs;
  25. }
  26. public static Preferences getInstance(String fileName,Context context){
  27. if (helper==null)
  28. helper=new MyHelper(fileName,context);
  29. return helper.preferences;
  30. }
  31. public MyHelper(String fileName,Context context) {
  32. db=new DatabaseHelper(context);
  33. preferences=db.getPreferences(fileName);
  34. }
  35. public MyHelper(Context context,String DBName) {
  36. db=new DatabaseHelper(context);
  37. //创建数据库
  38. StoreConfig config=StoreConfig.newDefaultConfig(DBName);
  39. rs=db.getRdbStore(config,1,this,null);
  40. }
  41. @Override
  42. public void onCreate(RdbStore rdbStore) {
  43. //创建表
  44. rdbStore.executeSql(tb_user);
  45. rdbStore.executeSql(tb_jz);
  46. rdbStore.executeSql("insert into tb_user(name,phone,psd,sex,age) values('1','1','1','1',1)");
  47. }
  48. @Override
  49. public void onUpgrade(RdbStore rdbStore, int i, int i1) {
  50. System.out.println("版本已更新");
  51. }
  52. }

必须实现构造方法,以及创建数据库的方法和版本更新的方法

5.2 创建执行sql操作类

在utils包中新建DBUtil工具类,并采用单例模式减少对象的重复创建而导致影响软件运行速度。

  1. package com.example.bookkeepproject.utils;
  2. import com.example.bookkeepproject.entity.BookKeepInfo;
  3. import com.example.bookkeepproject.entity.User;
  4. import ohos.app.Context;
  5. import ohos.data.rdb.RdbPredicates;
  6. import ohos.data.rdb.RdbStore;
  7. import ohos.data.rdb.ValuesBucket;
  8. import ohos.data.resultset.ResultSet;
  9. import java.util.ArrayList;
  10. import java.util.List;
  11. import java.util.Map;
  12. /**
  13. * 数据库工具类
  14. */
  15. public class DBUtil {
  16. public static DBUtil db;
  17. private static RdbStore rs;
  18. //单例设计模式
  19. public static DBUtil getInstance(RdbStore rs) {
  20. if (db == null)
  21. db = new DBUtil();
  22. DBUtil.rs = rs;
  23. return db;
  24. }
  25. /**
  26. * 登录功能
  27. *
  28. * @param tableName
  29. * @param map
  30. * @return
  31. */
  32. public User login(String tableName, Map<String, Object> map) {
  33. User user = null;
  34. //定义要查询的字段数组
  35. String[] columns = new String[]{"id", "name", "age", "phone", "sex", "psd"};
  36. //设置要查询的表,以及查询的条件
  37. RdbPredicates rdbPredicates = new RdbPredicates(tableName);
  38. for (Map.Entry<String, Object> e : map.entrySet()) {
  39. rdbPredicates.equalTo(e.getKey(), (String) e.getValue());
  40. }
  41. ResultSet resultSet = rs.query(rdbPredicates, columns);
  42. if (resultSet.goToNextRow()) {
  43. int id = resultSet.getInt(resultSet.getColumnIndexForName("id"));
  44. String name = resultSet.getString(resultSet.getColumnIndexForName("name"));
  45. String psd = resultSet.getString(resultSet.getColumnIndexForName("psd"));
  46. String phone = resultSet.getString(resultSet.getColumnIndexForName("phone"));
  47. String sex = resultSet.getString(resultSet.getColumnIndexForName("sex"));
  48. int age = resultSet.getInt(resultSet.getColumnIndexForName("age"));
  49. user = new User(id, name, psd, phone, sex, age);
  50. }
  51. return user;
  52. }
  53. }

6.注册功能

通过从登录的界面点击“注册”进行页面跳转至注册界面,完成注册的功能操作。

6.1新建注册页面的xml布局文件

 在layout文件夹中新建xml文件,布局代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView
  3. xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4. ohos:height="match_parent"
  5. ohos:width="match_parent"
  6. >
  7. <DirectionalLayout
  8. ohos:height="match_content"
  9. ohos:width="match_parent"
  10. ohos:orientation="vertical">
  11. <Text
  12. ohos:height="match_content"
  13. ohos:width="match_parent"
  14. ohos:background_element="#FFDA44"
  15. ohos:padding="10fp"
  16. ohos:text="注 册"
  17. ohos:text_alignment="center"
  18. ohos:text_color="#000"
  19. ohos:text_font="HwChinese-medium"
  20. ohos:text_size="25fp"
  21. ohos:text_weight="1200"/>
  22. <DirectionalLayout
  23. ohos:height="match_content"
  24. ohos:width="match_parent"
  25. ohos:alignment="vertical_center"
  26. ohos:background_element="$graphic:background_textfield"
  27. ohos:left_margin="20fp"
  28. ohos:right_margin="20fp"
  29. ohos:top_margin="10fp"
  30. ohos:bottom_margin="10fp"
  31. ohos:orientation="horizontal">
  32. <TextField
  33. ohos:id="$+id:re_user"
  34. ohos:height="match_content"
  35. ohos:width="match_parent"
  36. ohos:hint="用户名"
  37. ohos:hint_color="#aaaaaa"
  38. ohos:padding="15vp"
  39. ohos:text_color="#aaaaaa"
  40. ohos:text_size="20fp"/>
  41. </DirectionalLayout>
  42. <DirectionalLayout
  43. ohos:height="match_content"
  44. ohos:width="match_parent"
  45. ohos:alignment="vertical_center"
  46. ohos:background_element="$graphic:background_textfield"
  47. ohos:left_margin="20fp"
  48. ohos:right_margin="20fp"
  49. ohos:top_margin="10fp"
  50. ohos:bottom_margin="10fp"
  51. ohos:orientation="horizontal">
  52. <TextField
  53. ohos:id="$+id:re_psd"
  54. ohos:height="match_content"
  55. ohos:width="match_parent"
  56. ohos:hint="密码"
  57. ohos:text_input_type="pattern_password"
  58. ohos:hint_color="#aaaaaa"
  59. ohos:padding="15vp"
  60. ohos:text_color="#aaaaaa"
  61. ohos:text_size="20fp"/>
  62. </DirectionalLayout>
  63. <DirectionalLayout
  64. ohos:height="match_content"
  65. ohos:width="match_parent"
  66. ohos:alignment="vertical_center"
  67. ohos:background_element="$graphic:background_textfield"
  68. ohos:left_margin="20fp"
  69. ohos:right_margin="20fp"
  70. ohos:top_margin="10fp"
  71. ohos:bottom_margin="10fp"
  72. ohos:orientation="horizontal">
  73. <TextField
  74. ohos:id="$+id:re_phone"
  75. ohos:height="match_content"
  76. ohos:width="match_parent"
  77. ohos:hint="手机号"
  78. ohos:hint_color="#aaaaaa"
  79. ohos:text_input_type="pattern_number"
  80. ohos:padding="15vp"
  81. ohos:text_color="#aaaaaa"
  82. ohos:text_size="20fp"/>
  83. </DirectionalLayout>
  84. <DirectionalLayout
  85. ohos:height="match_content"
  86. ohos:width="match_parent"
  87. ohos:alignment="vertical_center"
  88. ohos:background_element="$graphic:background_textfield"
  89. ohos:left_margin="20fp"
  90. ohos:right_margin="20fp"
  91. ohos:top_margin="10fp"
  92. ohos:bottom_margin="10fp"
  93. ohos:orientation="horizontal">
  94. <TextField
  95. ohos:id="$+id:re_age"
  96. ohos:height="match_content"
  97. ohos:width="match_parent"
  98. ohos:hint="年龄"
  99. ohos:text_input_type="pattern_number"
  100. ohos:hint_color="#aaaaaa"
  101. ohos:padding="15vp"
  102. ohos:text_color="#aaaaaa"
  103. ohos:text_size="20fp"/>
  104. </DirectionalLayout>
  105. <DirectionalLayout
  106. ohos:height="match_content"
  107. ohos:width="match_parent"
  108. ohos:alignment="vertical_center"
  109. ohos:background_element="$graphic:background_textfield"
  110. ohos:left_margin="20fp"
  111. ohos:right_margin="20fp"
  112. ohos:top_margin="10fp"
  113. ohos:bottom_margin="10fp"
  114. ohos:orientation="horizontal">
  115. <TextField
  116. ohos:id="$+id:re_sex"
  117. ohos:height="match_content"
  118. ohos:width="match_parent"
  119. ohos:hint="性别"
  120. ohos:hint_color="#aaaaaa"
  121. ohos:padding="15vp"
  122. ohos:text_color="#aaaaaa"
  123. ohos:text_size="20fp"/>
  124. </DirectionalLayout>
  125. <DirectionalLayout
  126. ohos:height="match_content"
  127. ohos:width="match_parent"
  128. ohos:alignment="vertical_center"
  129. ohos:background_element="$graphic:background_textfield"
  130. ohos:left_margin="20fp"
  131. ohos:right_margin="20fp"
  132. ohos:top_margin="10fp"
  133. ohos:bottom_margin="10fp"
  134. ohos:orientation="horizontal">
  135. <TextField
  136. ohos:id="$+id:re_code"
  137. ohos:height="match_content"
  138. ohos:width="match_content"
  139. ohos:hint="验证码"
  140. ohos:hint_color="#aaaaaa"
  141. ohos:padding="15vp"
  142. ohos:text_color="#aaaaaa"
  143. ohos:text_size="20fp"
  144. ohos:weight="1"/>
  145. <Text
  146. ohos:id="$+id:tv_code"
  147. ohos:height="50fp"
  148. ohos:width="80fp"
  149. ohos:text="1234"
  150. ohos:text_color="#FFDA44"
  151. ohos:text_font="HwChinese-medium"
  152. ohos:text_size="25fp"
  153. ohos:text_weight="1000"/>
  154. </DirectionalLayout>
  155. <Button
  156. ohos:id="$+id:btn_register"
  157. ohos:height="match_content"
  158. ohos:width="match_parent"
  159. ohos:background_element="$graphic:background_button_login"
  160. ohos:left_margin="20fp"
  161. ohos:right_margin="20fp"
  162. ohos:top_margin="10fp"
  163. ohos:bottom_margin="10fp"
  164. ohos:padding="10fp"
  165. ohos:text="注册"
  166. ohos:text_color="#ffffff"
  167. ohos:text_size="25fp"
  168. />
  169. </DirectionalLayout>
  170. </ScrollView>

6.2创建RegisterAbilitySlice界面

在slice包中新建AbilitySlice类继承至BaseAbilitySlice类,代码如下:

  1. package com.example.bookkeepproject.slice;
  2. import com.example.bookkeepproject.ResourceTable;
  3. import com.example.bookkeepproject.utils.DBUtil;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.Text;
  8. import ohos.agp.components.TextField;
  9. import ohos.data.rdb.ValuesBucket;
  10. import java.util.HashMap;
  11. import java.util.Map;
  12. import java.util.Random;
  13. public class RegisterAilitySlice extends BaseAbilitySlice {
  14. private TextField re_user,re_psd,re_phone,re_age,re_sex,re_code;
  15. private Text tv_code;
  16. private Button btn_register;
  17. private int code;
  18. @Override
  19. protected void onStart(Intent intent) {
  20. super.onStart(intent);
  21. this.setUIContent(ResourceTable.Layout_ability_register);
  22. initView();
  23. showRandomCode();
  24. }
  25. private void initView() {
  26. re_age= (TextField) this.findComponentById(ResourceTable.Id_re_age);
  27. re_user= (TextField) this.findComponentById(ResourceTable.Id_re_user);
  28. re_psd= (TextField) this.findComponentById(ResourceTable.Id_re_psd);
  29. re_phone= (TextField) this.findComponentById(ResourceTable.Id_re_phone);
  30. re_sex= (TextField) this.findComponentById(ResourceTable.Id_re_sex);
  31. re_code= (TextField) this.findComponentById(ResourceTable.Id_re_code);
  32. tv_code= (Text) this.findComponentById(ResourceTable.Id_tv_code);
  33. btn_register= (Button) this.findComponentById(ResourceTable.Id_btn_register);
  34. tv_code.setClickedListener(listener);
  35. btn_register.setClickedListener(listener);
  36. }
  37. private Component.ClickedListener listener=new Component.ClickedListener() {
  38. @Override
  39. public void onClick(Component component) {
  40. switch (component.getId()){
  41. case ResourceTable.Id_tv_code:
  42. showRandomCode();
  43. break;
  44. case ResourceTable.Id_btn_register:
  45. String user=re_user.getText();
  46. String psd=re_psd.getText();
  47. String phone=re_phone.getText();
  48. String age=re_age.getText();
  49. String sex=re_sex.getText();
  50. String code=re_code.getText();
  51. Map map=new HashMap();
  52. map.put("phone",phone);
  53. if (code==null||"".equals(code))
  54. showToastDialogShort("验证码不能为空");
  55. else if (!code.equals(String.valueOf(RegisterAilitySlice.this.code))) {
  56. showToastDialogShort("验证码不正确");
  57. showRandomCode();
  58. re_code.setText("");
  59. }else if(DBUtil.getInstance(rs).selectPhone("tb_user",map)){
  60. showToastDialogShort("该手机号已被注册,请重新注册");
  61. re_code.setText("");
  62. re_age.setText("");
  63. re_phone.setText("");
  64. re_psd.setText("");
  65. re_sex.setText("");
  66. re_user.setText("");
  67. showRandomCode();
  68. }else {
  69. ValuesBucket vb = new ValuesBucket();
  70. vb.putString("name",user);
  71. vb.putString("psd",psd);
  72. vb.putString("phone",phone);
  73. vb.putString("sex",sex);
  74. vb.putInteger("age",Integer.parseInt(age));
  75. long i= DBUtil.getInstance(rs).insert("tb_user",vb);
  76. if (i>0) {
  77. showToastDialogShort("注册成功");
  78. terminate();
  79. }else {
  80. showToastDialogShort("注册失败");
  81. re_code.setText("");
  82. re_age.setText("");
  83. re_phone.setText("");
  84. re_psd.setText("");
  85. re_sex.setText("");
  86. re_user.setText("");
  87. showRandomCode();
  88. }
  89. }
  90. break;
  91. }
  92. }
  93. };
  94. private void showRandomCode() {
  95. code=new Random().nextInt(9000)+1000;
  96. tv_code.setText(code+"");
  97. }
  98. }

6.3 完成数据库的数据添加操作

在DButils工具类中定义查询当前手机号是否存在,用于判断注册的时候出现相同手机号

  1. /**
  2. * 验证手机号是否已被注册
  3. *
  4. * @param tableName
  5. * @param map
  6. * @return
  7. */
  8. public boolean selectPhone(String tableName, Map<String, Object> map) {
  9. boolean is = false;
  10. //定义要查询的字段数组
  11. String[] columns = new String[]{"id", "name", "age", "phone", "sex", "psd"};
  12. //设置要查询的表,以及查询的条件
  13. RdbPredicates rdbPredicates = new RdbPredicates(tableName);
  14. for (Map.Entry<String, Object> e : map.entrySet()) {
  15. rdbPredicates.equalTo(e.getKey(), (String) e.getValue());
  16. }
  17. ResultSet resultSet = rs.query(rdbPredicates, columns);
  18. if (resultSet.goToNextRow())
  19. is = true;
  20. return is;
  21. }

在DBUtils工具类中定义执行插入数据的操作方法

  1. //添加
  2. public long insert(String tableName, ValuesBucket vb) {
  3. return rs.insert(tableName, vb);
  4. }

点击注册的时候进行判断验证码是否一致,或者注册信息是否全面,如果不符合要求则清空用户填写的所有数据,同时刷新验证码,重新注册,直到注册成功。注册成功后,销毁当前页面,回到上一页面,也就是登录页面,进行登录。登录成功后进入主页面。主界面效果图如下:

主界面的功能将在后面的文章中展出,感谢大家的关注和阅读。

原文链接:https://blog.csdn.net/u010321564/article/details/119954330



所属网站分类: 技术文章 > 博客

作者:天上飘来一个字

链接:http://www.phpheidong.com/blog/article/139991/903b697bc4f17e5f0afe/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

23 0
收藏该文
已收藏

评论内容:(最多支持255个字符)