编写注册页面
回顾
上一节课我们已经编写好了登录页面，用户也可以正常登录了，不过我们不能让用户不能注册呀，而且注册也不能完全靠接口去做，前端也需要提供页面进行操作的。
注册页面编写
image
我们的目的是，把这里的手机号登录改为注册，并提供对应的输入框。
首先进行名字上的修改:
image
将tab改为注册
前端就是这个好，所见即所得，咱们来看看登录页面的效果:
修改成功
image
按照上图的格式，添加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'的时候登录。
image
在model中新增register副作用
参考*login方法
首先是调用注册方法，如果成功则回到登录页面，失败则输出错误信息。
注意，这里的setType就是index.js中的setType方法，因为dispatch不返回结果，所以我们把改变状态的方法传入，在effects中进行改变
修改submit（提交）方法
上面说到，我们提交有时候是注册 有时候是登录，所以我们需要修改一下:
image
第一处就是要修改这里的values，之前是取出username和password，而现在我们需要全部字段的值，所以直接取到values即可。
注释: 这里values其实是表单的所有值，是一个map，比如values可能是{username: "woody"}这样的形式。
image
接着改造onFinish方法，也就是提交的实际调用方法:
可以看到，我对type进行了判断，如果是account则调用login/login方法，否则调用login/register方法。这里把setType也传递了进去。
测试一下
- 注册失败即用户名或密码存在时，停留在注册页面
image
- 注册成功时，跳回登录页面
image
image
用刚才注册的账号登录
image
搞定！这篇文章可能以图片的形式居多，但是也解决了无法注册的核心问题。喜欢的朋友可以点个赞支持一下呀！
ant design的标题有点多
我们通过全局搜索都替换成Pity。
