学习目标
- （1）改进登录
- （2）注册功能
MySessionUtils改进
(1) A依赖B,移除B,A报错，耦合
com\wzx\util\MySessionUtils2.java
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"/>
<!--引入尾部-->
<div id="footer">
<%@include file="footer.jsp"%>
</div>
登录_欢迎信息提示
- （1）欢迎信息提示是什么？
用户登录成功之后，页面顶部显示的用户名 - （2）从哪里取数据？
session对象 - （3）数据哪里来的？
登入成功时，保存在session对象中的 - （4）如何取出来显示？
el表达式与jstl
pom.xml
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
com\wzx\web\servlet\LoginServlet.java
if(code == 1){
info.setData("登录成功");
//查找出用户数据
User user = userService.findUserByName(u.getUsername());
//保存到session中
request.getSession().setAttribute("user",user);
src\main\webapp\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>
登出功能
- （1）退出是什么？
登录状态可以查看用户个人信息
什么叫做登录了？session中有user对象。
退出就是删除session或者session中的user对象
（2）如何实现？ - 实现步骤：
》访问servlet，将session销毁
》跳转到登录页面
src\main\webapp\header.jsp
<a href="${pageContext.request.contextPath}/loginOutServlet">退出</a>
com\wzx\web\servlet\LoginOutServlet.java
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比较两个随机字符串是否相等，不相等则验证码出错。
login.jsp
<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>
login.jsp
修改post请求，需要添加验证码
data:"username="+un+"&password="+pw+"&check="+check,
src\main\java\com\wzx\web\servlet\LoginServlet.java
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
String json = new ObjectMapper().writeValueAsString(responseInfo);
response.getWriter().println(json);
return;
}
//省略验证账号密码
login.jsp
$.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) {
})