编写注册页面

回顾

上一节课我们已经编写好了登录页面，用户也可以正常登录了，不过我们不能让用户不能注册呀，而且注册也不能完全靠接口去做，前端也需要提供页面进行操作的。

注册页面编写

我们的目的是，把这里的手机号登录改为注册，并提供对应的输入框。

首先进行名字上的修改:

前端就是这个好，所见即所得，咱们来看看登录页面的效果:

按照上图的格式，添加 4 个字段: 用户名、姓名、邮箱、密码。

为了方便起见，我就没有设置二次确认密码，和邮箱格式校验，这个在正常的web系统都是必不可少的，但是我们是一个快餐，哈哈哈。能省则省，经费有限。

完整代码:

{type === 'register' && (
         <>
           <ProFormText
             fieldProps={{
               size: 'large',
               prefix: <UserOutlined className={styles.prefixIcon} />,
             }}
             name="username"
             placeholder="请输入用户名"
             rules={[
               {
                 required: true,
                 message: "请输入用户名",
               }
             ]}
           />
           <ProFormText
             fieldProps={{
               size: 'large',
               prefix: <MobileOutlined className={styles.prefixIcon} />,
             }}
             name="name"
             placeholder="请输入姓名"
             rules={[
               {
                 required: true,
                 message: "请输入姓名",
               }
             ]}
           />
           <ProFormText
             fieldProps={{
               size: 'large',
               prefix: <MobileOutlined className={styles.prefixIcon} />,
             }}
             name="email"
             placeholder="请输入用户邮箱"
             rules={[
               {
                 required: true,
                 message: "请输入用户邮箱",
               }
             ]}
           />
           <ProFormText.Password
             fieldProps={{
               size: 'large',
               prefix: <LockOutlined className={styles.prefixIcon} />,
               type: 'password'
             }}
             name="password"
             placeholder="请输入用户密码"
             rules={[
               {
                 required: true,
                 message: "请输入用户密码",
               }
             ]}
           />
         </>
       )}

新增注册方法

因为之前提交函数都是用来登录的，这次我们需要 type='register'的时候注册，而 type='account'的时候登录。

在 model 中新增 register 副作用

首先是调用注册方法，如果成功则回到登录页面，失败则输出错误信息。

注意，这里的setType就是index.js中的setType方法，因为dispatch不返回结果，所以我们把改变状态的方法传入，在effects中进行改变

修改 submit（提交）方法

上面说到，我们提交有时候是注册 有时候是登录，所以我们需要修改一下:

第一处就是要修改这里的 values，之前是取出 username 和 password，而现在我们需要全部字段的值，所以直接取到values即可。

注释: 这里 values 其实是表单的所有值，是一个 map，比如 values 可能是{username: "woody"}这样的形式。

接着改造 onFinish 方法，也就是提交的实际调用方法:

可以看到，我对 type 进行了判断，如果是 account 则调用 login/login 方法，否则调用 login/register 方法。这里把 setType 也传递了进去。

测试一下

• 注册失败即用户名或密码存在时，停留在注册页面

• 注册成功时，跳回登录页面

用刚才注册的账号登录

搞定！这篇文章可能以图片的形式居多，但是也解决了无法注册的核心问题。喜欢的朋友可以点个赞支持一下呀！

ant design 的标题有点多

我们通过全局搜索都替换成Pity。

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb