编写注册页面
回顾
上一节课我们已经编写好了登录页面，用户也可以正常登录了，不过我们不能让用户不能注册呀，而且注册也不能完全靠接口去做，前端也需要提供页面进行操作的。
注册页面编写
我们的目的是，把这里的「手机号登录」改为「注册」，并提供对应的输入框。
首先进行名字上的修改:
前端就是这个好，所见即所得，咱们来看看登录页面的效果:
按照上图的格式，添加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