测试平台系列(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: "请输入用户密码",
                }
              ]}
            />
          </>
        )}