文章目录
- 1.注册逻辑的设计和实现
- 2.解决自带的这个重定向的问题
- 3.增加属性的相关操作
- 4.关于如何修改页面上面的绿色按钮
1.注册逻辑的设计和实现
上次说到了的是登录功能,我们使用数据库里面存在的这个存在的账户和密码进行登录,但是是无法进行跳转的,虽然无法跳转,但是可以证明我们的这个整体的逻辑是没有问题的;
接下来就是讨论的如何去实现我们的注册的逻辑了:
首先找到这个和路由相关的配置文件,把上面的那个登录的路由配置cv一下,然后进行相关的修改,就是把path和component进行调换一下就可以了,换成我们的注册的相关urlregister表示的就是注册的意思;
下面的这个是把我们的pages目录下面的这个登录相关的逻辑复制一下,套用到我们的这个登录里面,相当于就是cv,然后根据需求进行修改;
首先需要修改这个const修饰的名字,我们的这个实现的是注册的逻辑,所以原来的login需要进行修改;
下面的这个是我们的tsx里面的最后部分,我们需要把login修改为register即可;
这个时候使用user/register进行验证,会发现进行了重定向,无法成功跳转,接下来说明一下如何解决这个重定向的问题;
2.解决自带的这个重定向的问题
首先需要到我们的app.tsx里面去排查问题,这个apptsx相当于我们的启动文件就是我们的这个项目开始运行的时候,先从这个文件开始扫描,所以这个文件我们需要尤为注意;
我们发现这个fetchUserInfo表示的是获取我们的用户相关的信息,这个里面有push(loginPath),这个就是我们的重定向的错误源头之一
然后就是这个app.tsx里面还有一个push跳转到登录的代码,就是下面的这个;
接下来我们针对于上面出现的问题进行修改:把那个跳转的代码注释掉;
下面的这个是没有登陆就进行跳转,这个显然是不合适的,我们如果进行注册,他也进行跳转,这个就有点无理取闹了,所以这个地方我们需要优化一下:
我们定了这个白名单,里面是我们的注册和登录的相关的url,然后如果是这两个里面的其中一个,我们直接return,如果不是的话,我们再让这个页面进行跳转;
register里面的index.tsx:因为这个是注册吗,所以这个里面获取用户信息的代码直接删去;
没用的这个相关定义也删除:
等待抓取用户信息的这个代码也删除:
我们把页面的那个蓝色的原来写的是登录的部分修改为注册的字样:
我们进行注册的时候,后端是设计了三个参数:账户,密码和校验密码,所以我们需要新建一个表单,这个直接复制上面的密码的,然后把这个提示词修改一下就可以了:
name修改为我们的checkpassword,然后是这个placeholder就是我们的前端上面输入的时候可以看到的这个话语;
这个时候的页面的效果就是下面的这个样子的,我们需要对于那个按钮进行修改,把注册修改为登录;
3.增加属性的相关操作
我们的注册是三个属性,因此这个时候我们需要修改注册的属性:
按住ctrl点击下面的这个内容,跳转到源码里面去:
我们的这个登录是两个属性:账户和账户的密码,我们直接把上面的复制一下,在这个基础上面进行修改就=可以了,其实修改的话就是增加一个checkpassword的属性即可;
然后使用的是一键替换:把loginparams修改为我们的registerparams:
4.关于如何修改页面上面的绿色按钮
想要修改原来的那个绿色按钮的字样,我们需要追溯源码:按住ctrl点击下面的这个loginform内容,就会被跳转
跳转之后的页面:
我们点击那个左上角的圆圈,找到下面的那个js文件,点进入:
这个时候出现的submitText里面的内容实际上就是我们的蓝色的按钮的显示字样,所以我们需要对于这个进行修改:
我们的修改不是在原来的基础上面修改,而是把原来的那个默认的属性字样重新定义一下,他就会使用我们定义的内容,而不是默认的内容(源码包里面的内容)
这个时候,我们的前端页面的设计:注册的页面,重定向问题的排查,以及这个蓝色的按钮的字体修改,全部都解决了,我们就开始具体逻辑的实现和设计;