用户中心项目教程（九）---前端页面设计测试登录功能

1.前端页面的替换

原来的登录页面

1.1修改页面底部

原来的这个页面底部显示的是Ant design pro相关的链接，我们自己做项目，这个东西完全可以替换成为我们自己的；

下面的这个就是我自己修改部分代码进行替换之后的效果，这个下面的内容相当于是超链接，就是点击csdn就会跳转到我的个人的主页，点击星球就会跳转到知识星球和我一起交流，然后就是我的码云仓库，实际上这个操作就是把下面的这个认证换成我们自己的；

代码如何修改：

• 找到footer,ctrl+鼠标右键点进去；

• 修改里面的内容，替换里面的链接

主要就是修改return后面的这个内容，href就是超链接，我们换一下，title就是显示在网页端的内容，我们备注一下就可以了，true表示我们点击链接进行跳转的时候会打开新的页面，而不是在原来的页面直接跳转；

我们新建constant包包，这个包的下面新建文件，存一些常用的东西，我存放的是我的logo，然后后面我们直接使用就可以了，只要是一些类似于超链接的内容，我们都是可以存放进来，然后哪一个文件用到了，我们import一下这个constants文件夹，就可以快速的使用，这个原理和C语言里面的宏常量是很相似的，基本完全一致，但是我们的宏常量全局使用，不需要进行import的操作，但是我们的这个constants里面的内容使用的时候需要加上import操作；

其实需要修改的地方不多，就是这个logo，主标题和副标题，我们自定义下就可以使用了，然后重新运行查看效果：下面的这个是我的自定义内容，我的logo无法生效，所以就没有使用，大家自己可以尝试一下（前提是你的这个文件需要import constants）

修改之后的效果就是下面的这个样子的：

2.代码的修改

2.1删除无关代码

其他的登录方式：我们这个地方用不到，直接删除即可；

2.2修改参数和接口

下面的这个就是修改部分内容：下面展示的这个是修改之后的内容，就是把原来的修改为userAccount和userPasssword,和我们的后端的相关的参数进行对应；

下面的这个是到service里面的这个位置修改对应内容，目的是为了让这个地方和我们的后端的restcontroller里面的内容对应上；

2.3添加请求配置

在app.tsx里面设置超时的时间：10000ms,也就是10s

2.4修改代理

代理就是让一个中间商和我们的用户进行对接，发送请求之类的，让后我们可以控制这个中间者，但是用户感受不到，代理其实就是一个中间商罢了；

在我们的proxy.ts里面进行修改，记住是在dev里面修改，不是在下面的test，两个里面其实是有区别的，下面的是测试的，我们运行程序是不会走下面的（因为我第一次就是改错了，所以提醒下）；

在application.yml里面添加相关的配置，context-path其实就是一个路径的前缀罢了，和我们的web-storm里面是相互对应的；

变量名的替换，在下面的这个文件里面，把username替换为userAccount，把password替换为userPassword即可，主要还是和我们的后端对应上，替换方法：ctrl+F,分别输入想要替换的内容和替换之后的文本就可以啦；

替换说明：上面是搜索内容，下面是想要替换之后的内容；
其实这个玩意挺好用的，可以研究下，那个Cc是大小写忽略与否，w表示是独立单词还是包含这个字符串就可以，还有后面的那个通配符，可以仔细研究下，很好用，一键替换；

添加密码校验规则，红色的那个框框里面就是为哦们需要添加的内容；

全局替换msg为user，还是使用上面的方法一键替换即可；

还有就是这个if后面的括号里面的条件，也需要改一下，改成user，显示登陆成功的选项；

3.测试登录功能

这个时候需要输入真实存在数据库里面的账户和密码，前后端的项目都要启动，得到返回值，提示我们登陆成功，就可以啦；