测试平台系列(10) 编写注册页面

编写注册页面

回顾

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

注册页面编写

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

首先进行名字上的修改:

将tab改为注册

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

修改成功

按照上图的格式，添加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副作用

参考*login方法

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

注意，这里的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