前端5【登录】验证心血版

话说&＃xff1a;

各位读者&＃xff0c;晚上好&＃xff01;今天总结下登录的前端验证和后端代码&＃xff0c;虽说是作为前端发布的&＃xff0c;但是重心还是在后端。

包含功能&＃xff1a;
1.前端Ajax验证&＃xff1b;非空验证、验证码验证&＃xff1b;
2.根据是否记住&＃xff1f;存放用户于COOKIE中&＃xff1b;存放Session中&＃xff1b;
3.JSP页面显示

目录

1.前端效果展示
2.前端验证
3.后端代码
4.JSP页面代码
5.总结

难度系数&＃xff1a;★★☆☆☆
建议用时:1H

1.前端效果展示

2.前端验证

1)页面代码
2&＃xff09;验证代码

1)页面代码

	<%&＃61;loginMsg %>
用户名/E-mail:	"class&＃61;"text" maxlength&＃61;"20">
密  码:	" class&＃61;"text" maxlength&＃61;"20" autocomplete&＃61;"off">
验证码:
	记住我  找回密码
	还没有注册账号&＃xff1f; 立即注册即可体验在线购物&＃xff01;立即注册

2&＃xff09;验证代码

温馨提示&＃xff1a;验证码长度可以直接用input的属性maxlength控制&＃xff0c;而不用在前端代码中判断。

3.后端代码

1&＃xff09;Pojo
2&＃xff09;Dao
3)UserMapper.xml
4)Controller层

我们要优化的问题是&＃xff1a;注册用户会Ajax验证用户名&＃xff1b;登录Ajax也会验证用户名&＃xff1b;登录后还要进行判断操作&＃xff0c;这3种方式都用1个SQL语句搞定&＃xff0c;而不用写2个。
Mybatis的动态SQL&＃xff0c;非常方便。因为前端的注册userName和登录userName都是blur()事件&＃xff0c;这个时候password都是null(String password)。

1&＃xff09;Pojo

这里面当然也有&＃xff1a;【记住我&＃xff1f;】 这个属性。

public class User {
private int userId;
private String userName;
private String password;
private String rePassword;
private String email;
private String name;
private String sex;
private Date birth;
private String address;
private String code;
private Date registerTime;
private Date loginTime;private int remember;//记住我&＃xff1f;checkbox
public User() {}
其他省略......
}


2&＃xff09;Dao

public interface UserDao {//注册用户名Ajax验证 登录Ajax验证 及登录都用这个方法User getUserByUserName(User user);
}


3)UserMapper.xml

select * from user where userName &＃61; #{userName}and password &＃61; #{password}


注意&＃xff0c;用到 where或者 c:if等&＃xff0c;参数要封装在一个对象里面&＃xff0c;否则找不到。
这里是动态SQL的核心。

4)Controller层

Service层就省略&＃xff0c;调一下Dao方法即可。
这里要搞定的事情是&＃xff1a;
1.取得后台验证码&＃xff0c;并回调给前台做判断&＃xff1b;
2.查数据&＃xff0c;存COOKIE&＃xff0c;存Session&＃xff0c;页面跳转

&＃64;Controller
public class StoreCustomerController {
&＃64;Autowiredprivate UserService userService;&＃64;Autowiredprivate VertifyCodeServlet vertifyCodeServlet;//6.登录用户名Ajax验证&＃64;RequestMapping("loginForm")&＃64;ResponseBodypublic String vertifyLoginUserName(User user) {User user2 &＃61; userService.getUserByUserName(user);System.out.println("根据用户名查到的用户为:"&＃43;user2);if(user2 !&＃61; null) {System.out.println("转换后的用户json不为空&＃xff1a;格式为&＃xff1a;"&＃43;new Gson().toJson(user2));return new Gson().toJson(user2);//当然的导包进去喽~}else {System.out.println("转换后的用户json为空&＃xff1a;格式为&＃xff1a;"&＃43;new Gson().toJson(user2));//nullreturn new Gson().toJson(user2);}}//7.用户登陆操作&＃64;RequestMapping("userLogin")public String userLogin(User user,Model model,HttpServletResponse resp,HttpServletRequest req) {int remember &＃61; user.getRemember();System.out.println("用户名是否记住? "&＃43;remember);//1.判断用户名和密码是否正确&＃xff1f;正确在进行以下操作User user2 &＃61; userService.getUserByUserName(user);System.out.println("动态Sql 得到的用户为&＃xff1a;"&＃43;user2);if(user2 &＃61;&＃61; null) {model.addAttribute("loginMsg", "用户名或密码不正确");//因为是重定向&＃xff0c;所以存不了值&＃xff0c;怎么办&＃xff1f;COOKIE COOKIE &＃61; new COOKIE("loginMsg", "用户名或密码不正确");COOKIE.setMaxAge(4);//4s就够啦&＃xff0c;下次登录就会消失resp.addCOOKIE(COOKIE);//返回登录接界面&＃xff0c;并给错误信息提示return "redirect:login.jsp";}else {//2.根据用户是否勾选记住我&＃xff1f;选择是否存COOKIEif(remember &＃61;&＃61; 1) {//如果用户勾选记住我&＃xff1f;就先默认存储60SCOOKIE COOKIEUserName &＃61; new COOKIE("userName", user2.getUserName());COOKIE COOKIEPassword &＃61; new COOKIE("password", user2.getPassword());COOKIEUserName.setMaxAge(60);COOKIEPassword.setMaxAge(60);resp.addCOOKIE(COOKIEUserName);resp.addCOOKIE(COOKIEPassword);}//不论勾选记住否&＃xff0c;都要存到session里面req.getSession().setAttribute("user", user2);//跳转页面return "index";}}}
--------------------------------------------------------------------------------

4.JSP页面代码

这个主要是从COOKIE里面拿数据&＃xff1a;用户信息和登录错误信息

<%
//如果用户保存了COOKIE&＃xff0c;取出来COOKIE[] COOKIEs &＃61; request.getCOOKIEs();String userName &＃61; "";String password &＃61; "";String loginMsg &＃61; "";if(COOKIEs !&＃61; null) {for(int i&＃61;0;i%>页面这么取值&＃xff1a;
value&＃61;"<%&＃61;userName%>"value&＃61;"<%&＃61;password%>"

5.总结

1.input框中maxlength属性作用蛮大的。比如&＃xff0c;用这个属性后&＃xff0c;前端验证就不用判断code.length>4的情况了&＃xff0c;因为不可能输入4位&＃xff01;
直接在表单里面做了控制&＃xff01;

之前我是这么处理的&＃xff1a;
if(code.length>4){
$("#code").val("").focus();这样的效果就是强制清空输入内容了&＃xff0c;感觉还是有点强制&＃xff01;
}

2.后端怎么知道前端是否记住用户名呢&＃xff1f;怎么判定选择还是未选择的状态呢&＃xff1f;

在前端&＃xff0c;地球人都知道&＃xff0c;type&＃61;“checkbox” 如果选择&＃xff0c;那么用前端技术直接判断其属性
$("#remember").checked &＃61;&＃61; true;
判断即可&＃xff0c;但是后端怎么判断呢&＃xff1f;

value的值给还是不给&＃xff1f;不给后端根据name获取到的是啥情况&＃xff1f;
给了比如value&＃61;“1” 那么选择或者不选择&＃xff0c;框架中&＃xff0c;封装后对象怎么判断选择还是没选择&＃xff1f;这个和你封装的对象参数类型有关。比如&＃xff0c;我们是否记住&＃xff1f;对应user对象的一个属性remember 是int类型的&＃xff0c;那么value&＃61;“1” 如果用户勾选&＃xff0c;那么后台获取的就是这个value值&＃xff1b;若未勾选,就是remember实体类属性对应的默认值。比如&＃xff1a;int 默认未勾选就是0&＃xff1b; String 未勾选默认就是null…

3.问题背景&＃xff1a;无论注册用户名Ajax验证、登录用户名Ajax验证、登录后整个用户判断&＃xff1b;
都需要用到同一个SQL语句&＃xff0c;所以写成动态的&＃xff0c;而不是写2个SQL。

.select * from user where userName &＃61; #{userName}and password &＃61; #{password}


这段代码有什么问题&＃xff1f;在c:if test&＃61;""里面&＃xff0c;是不能用|| 或者 && 只能用 and or 不行你试一试&＃xff1f;另外&＃xff0c;password没有&＃xff0c;就null&＃xff0c;当然满足 !&＃61; ""所以会满足条件&＃xff0c;所以就差不到。不是|| 或&& 用错&＃xff01;而是条件错了&＃xff01;


select * from user where userName &＃61; #{userName}and password &＃61; #{password}


4.autocomplete&＃61;“off” inpu属性
input 的属性autocomplete 默认为on其含义代表是否让浏览器自动记录之前输入的值
很多时候&＃xff0c;需要对客户的资料进行保密&＃xff0c;防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete&＃61;“off” 来关闭记录

5.COOKIE、Session还是蛮神奇的。COOKIE在创建添加的时候&＃xff0c;用到的是response对象&＃xff0c;前端取值遍历的时候&＃xff0c;用到的是request对象&＃xff0c;Session用request对象。
这个要深刻理解。用户发起请求&＃xff0c;是否存COOKIE&＃xff0c;用户选择&＃xff0c;用户一旦选择&＃xff0c;那么服务器在处理请求的时候&＃xff0c;会给用户地址带一个信息&＃xff08;COOKIE&＃xff09;&＃xff0c;添加COOKIE是服务器端在响应的时候做的处理&＃xff0c;所以response.addCOOKIE()要这么用&＃xff1b;
下次用户再次请求&＃xff0c;便携带上次服务器给它传递的COOKIE信息&＃xff0c;这个时候&＃xff0c;前端是否显示&＃xff0c;自然request就能够拿到这些信息了。所有在得到COOKIE的时候&＃xff0c;用request.getCOOKIEs()得到一个Coookies[];同理&＃xff0c;Session会话是用户请求主动建立的&＃xff0c;每次添加用request.getSession().addAttribute()即可。

6.我在处理用户名或密码错误的时候&＃xff0c;因为要重定向&＃xff0c;所以没发用model.addAttribute()带参&＃xff1b;但是又不能用session&＃xff0c;因为下次访问login.jsp&＃xff0c;错误提示不能一直在吧&＃xff1f;所以用的是COOKIE&＃xff0c;生命周期短点&＃xff0c;有点小残忍。

好了&＃xff01;开饭吧&＃xff01;一会再会&＃xff01;