卡比图床项目——登录和注册页面引入AntDesign 运行yarn add antd以安装Ant Design 引入Bu

运行yarn add antd以安装Ant Design

引入Button组件截屏2022-12-13 11.28.10.png

使用styled-components进行微调

截屏2022-12-13 11.28.34.png

截屏2022-12-13 11.34.44.png

使用useState进行状态判断

截屏2022-12-13 12.35.11.png 使用问号冒号表达式

截屏2022-12-13 12.35.33.png

截屏2022-12-13 12.35.44.png 此时header就做好了

常规的注册界面基本就是用户输入用户名，密码以及重复密码。从antd中引入form表单。复制实例代码进行修改。基本样式：

截屏2022-12-13 13.00.36.png

开始优化：添加一些css

截屏2022-12-13 13.08.47.png

截屏2022-12-13 13.09.02.png

现在只是做好了样式，还缺乏对于用户填写信息的验证。比如用户的用户名和密码输入不符合规范，或者两次输入的密码不同，这样的数据是不能直接上传给服务器的。

方法1:直接在rules中加入校验规则 要对密码做一个长度校验：

截屏2022-12-13 13.46.45.png

方法2:使用validator

提前声明好方法然后在rules中使用validator对象

截屏2022-12-13 14.29.24.png 校验用户名：

截屏2022-12-13 14.30.00.png

截屏2022-12-13 13.58.39.png

方法3:直接写一个函数调用 确定密码校验： 这个校验比较复杂因为还要判断是否和刚才输入的密码是否一致，所以我们选择自己写一个方法——confirmPassword。 confirmPassword接受一个参数叫getFieldValue，可以获取当前表单其他name的value。

截屏2022-12-13 14.24.03.png

截屏2022-12-13 14.23.52.png

完成form表单验证。

把注册界面的样式搬过来，删除确认密码的部分即可。

截屏2022-12-14 13.16.12.png