day17--途牛旅游项目-登录功能V2

科技2022-07-11 82

day17–途牛旅游项目-登录功能V2

学习目标

（1）改进登录（2）注册功能

MySessionUtils改进

(1) A依赖B,移除B,A报错，耦合

public static <T> T getMapper(Class clz) { return (T) getSession().getMapper(clz); }

去除耦合

include标签***

（1）include指令　include指令用于在本JSP中引入其他JSP页面。 <%@ include file=“relativeURI”%> <jsp:include page=“header.jsp”/> 将重复做使用的头部和尾部提取出来单独成一个页面，使用时引入对应jsp就行，实现jsp的公用

两种方式：建议用第一种

<div id="footer"> <%@include file="footer.jsp"%> </div>

登录_欢迎信息提示

（1）欢迎信息提示是什么？用户登录成功之后，页面顶部显示的用户名(例如，xxx欢迎登录）（2）从哪里取数据？ session对象（登录时loginservlet将uesr放session对象里）（3）数据哪里来的？登入成功时，保存在session对象中的（4）如何取出来显示？ el表达式与jstl取数据

页面想用el表达式和jstl标签只能写在jsp里，不能写在html里，htnl只能写html标签，css代码和js代码，别的不支持

pom.xml 配置 jstl

if(code == 1){ info.setData("登录成功"); //查找出用户数据 User user = userService.findUserByName(u.getUsername()); //保存到session中 request.getSession().setAttribute("user",user);

header.jsp

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...  <div class="login"> <%-- 将session中的用户数据取出来 --%> <%-- 判断用户对象是否为空如果是提示请登录，否则显示用户信息--%> <c:if test="${user != null}"> <span>欢迎回来，${user.name}</span> </c:if> <c:if test="${user == null}"> <span>您未登录，请登录</span> </c:if> <a href="myfavorite.html" class="collection">我的收藏</a> <a href="javascript:;">退出</a> </div>

el表达式默认关闭，要手动打开 isELIgnored=“false”

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

乱码将html换成jsp

退出登录功能

（1）退出是什么？登录状态可以查看用户个人信息什么叫做登录了？session中有user对象。退出就是删除session或者session中的user对象(一般不会移除对象，直接让session销毁或者过期就行）（2）如何实现？实现步骤：》访问servlet，将session销毁》跳转到登录页面

jsp里退出连接

loginOutServlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //查找session HttpSession session = request.getSession(); //让session销毁或者过期 session.invalidate(); //重定向 login.jsp response.sendRedirect(request.getContextPath()+"/login.jsp"); }

登录改进_验证码功能

（1）为什么要有验证码？防止他人使用程序进行登录的行为（2）验证码流程是什么？后台程序ASevlet产生随机字符 code1 随机字符保存在session中 code1 随机字符再转成图片响应给img标签当用户提交表单时也同时提交输入的验证码 code2 后台程序B比较两个随机字符串是否相等，不相等则验证码出错。

<div class="verify"> <input name="check" type="text" placeholder="请输入验证码" autocomplete="off"> <span><img src="${pageContext.request.contextPath}/checkCode" alt="" onclick="changeCheckCode(this)"></span> <script type="text/javascript"> //图片点击事件 function changeCheckCode(img) { img.src="${pageContext.request.contextPath}/checkCode?"+new Date().getTime();//加时间参数是为了不让验证码图片缓存 } </script> </div>

loginservlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //从请求中获取check1码 String check1 = request.getParameter("check"); //从session中获取check2码 String check2 = (String) request.getSession().getAttribute("CHECKCODE_SERVER"); System.out.println(check1); System.out.println(check2); //从session中删除check2码 request.getSession().removeAttribute("CHECKCODE_SERVER"); //比较check1 与 check2 //相同表示验证码不正确，将提示信息写到页面的错误提示 if(check1 == null || !check1.equalsIgnoreCase(check2)){ //验证码不看大小写 ResponseInfo responseInfo = new ResponseInfo(); responseInfo.setCode(-4); responseInfo.setData("登录失败，验证码出错"); //json，页面用ajax，要转为json String json = new ObjectMapper().writeValueAsString(responseInfo); response.getWriter().println(json); return; } //省略验证账号密码

$.ajax({ url:"loginServlet", async:true, data:"username="+un+"&password="+pw+"&check="+check, type:"post", dataType:"json", success:function (data) { // alert(data) {"code":1,"data":"登录成功"} if(1 == data.code){ //跳转到主页 index.jsp $("#errorMsg").html(""); window.location="index.jsp" }else{ //显示在界面上 $("#errorMsg").html(data.data); } }, error:function () { alert("服务器发生了错误") } });

登录改进_serialize函数***

data:$("#loginForm").serialize(),

(1)jquery对象 serialize函数将表单数据拼接成 key1=val1&key2=val2 多个键值对用&分开表单对象.serialize() (2)简化提交代码 (3)Ajax请求函数

$.post("registerServlet",$(this).serialize(),function (data) { })

不用手动的去拼接

Processed: 0.013, SQL: 8