租房项目八

登录模块

1、功能分析

• 业务：通过账号和密码完成登录，实现登录访问控制等。
• 难点： 登录访问控制、表单验证。
• 功能：
  • 用户登录
  • 我的页面
  • 封装路由访问控制组件

1. 登录模块
1.2 用户登录
1. 分析页面结构和样式
① 复用 NavHeader 组件设置顶部导航栏。
② WingBlank 两翼留白组件。
③ WhiteSpace 上下留白组件。

1. 登录模块
1.2 用户登录
2. 登录功能
① 添加状态：username（账号） 和 password（密码）。
② 使用受控组件方式获取表单元素值。
③ 给 form 表单添加 onSubmit。
④ 创建方法 handleSubmit，实现表单提交。
⑤ 在方法中，通过 username 和 password 获取到账号和密码。
⑥ 使用 API 调用登录接口，将 username 和 password 作为参数。
⑦ 判断返回值 status 为 200 时，表示登录成功。
⑧ 登录成功后，将 token 保存到本地存储中（hkzf_token）。
⑨ 返回登录前的页面。

1. 登录模块
1.2 用户登录
3. 表单验证说明
 表单提交前，需要先进行表单验证，验证通过后再提交表单。
 方式一：antd-mobile 组件库的方式。（需要 InputItem 文本输入组件