一、实现功能说明
设计登录主要实现以下几个功能
1、校验账号是否为空
2、校验密码是否符合正则表达式（密码只能以字母开头，长度在5~18之间，只能包含字母、数字和下划线）
3、记住账号功能：点击记住账号，在将来一段时间打开登录界面账号将自动填入输入框，同时记住账号勾选框为√；如果用户不想记住密码了，取消记住账号勾选框，登录成功后，下次打开登录界面账号输入框将不再自动填写账号，同时记住账号也不再勾选
二、具体实现细节
2.1表单校验
校验账号、密码是否符合条件功能在前端直接实现，当用户点击登录按钮时，进行校验，具体代码如下：
loginTo(){
var RegExp=/^[a-zA-Z]\w{4,17}$/;
if (this.username==""){
this.notic="请输入用户名！";
return ;
}
if (!RegExp.test(this.password)){
this.notic="密码只能以字母开头，长度在5~18之间，只能包含字母、数字和下划线";
return ;
}
var _this=this;
axios({
method:"get",
url:"http://localhost:8080/loginTo?username=" + _this.username + "&password=" + _this.password + "&rememberUsername=" + this.rememberUsername
}).then(function (resp){
if (resp.data.code == "1"){
window.location.href="http://localhost:8080/brand.html";
}else {
_this.notic = resp.data.message;
}
})
}
几个注意点：
1、使用正则表达式校验要在正则表达式两侧添加//
2、其次正则表达式校验的格式为RegExp.test(变量)，返回值是boolean类型
2.2记住账号功能
记住账号的功能准备使用cookie来实现
分析：按钮使用elementUI的标签来实现，在标签中绑定一个值，用于确认是否勾选，这里我们在前端将checked改为了rememberUsername，默认false
当勾选之后，rememberUsername赋值为true，然后登录按钮绑定的login方法中将rememberUsername值传递到后端，进行判断添加cookie，在账户密码正确情况下，“true”.equals(rememberUsername)判断记住账号，如果允许则添加一个cookie，传递到前端；“false”.equals(rememberUsername)判断不记住账号，如果不记住账号，则遍历cookies，将"username"的cookie寿命设置为0，同时response.addCookie(cookie)传递给前端，具体后端代码如下
public Object login(String username, String password, String rememberUsername, HttpSession session, HttpServletResponse response, HttpServletRequest request){
User user = loginService.login(username, password);
//判断是否查询到账户
if (user != null){
//为前台设置username的cookie，便于自动获取获取cookie并填写上
if ("true".equals(rememberUsername)){
Cookie cookie = new Cookie("username", username);
response.addCookie(cookie);
}else if("false".equals(rememberUsername)){
Cookie[] cookies = request.getCookies();
for (Cookie cookie : cookies) {
//判断如果cookie的键为"username"，那么设置寿命为0删除cookie
if ("username".equals(cookie.getName())){
System.out.println("当前cookie的name为：" + cookie.getName());
//删除cookie
cookie.setMaxAge(0);
//别忘了将cookie添加！！！
response.addCookie(cookie);
}
}
}
}
}
后端代码实现后，前端需要识别cookie，添加一个getUserName方法，先将rememberUsername设置为false，再通过document对象遍历数组，判断是否有’username’的cookie，如果有将值赋值给username模型用于将账号自动填写进输入框中，同时将rememberUsername赋值true，用于实现自动勾选记住账号功能；在钩子函数中调用该函数，页面加载完成后调用方法，实现记住账号勾选功能
//获取username的cookie
getUsernameCookie(){
//先设置rememberUsername=false，在如下的判断中如果有username的cookie，再设置为true
this.rememberUsername=false;
if (document.cookie.length > 0){
var arr = document.cookie.split(";");
for (var i=0; i<arr.length; i++){
var keyValue=arr[i].split("=");
//如果有键的名字为"username"，那么将rememberUsername设为true，否则设置为false
if (keyValue[0]=="username"){
this.username=keyValue[1];
this.rememberUsername=true;
break;
}
}
}
}
mounted(){
//在页面加载完成后执行函数
this.getUsernameCookie();
}
三、总结
实现表单校验功能比较简单，实现记住账号的功能技术层面不难，只是相对复杂一点，一定要注意到各种可能性，将所有登录的可能性给想到，然后实现它，比如用户勾选记住账号登录成功后，下次取消记住账号功能登录成功后，再次打开登录页面时该如何实现cookie的清空，勾选功能不勾选等等