会话技术2 Cookie和Session入门(案例)
学习目标
- 理解什么是会话跟踪技术
- 掌握Cookie的使用
- 掌握Session的使用
- 完善用户登录注册案例的功能
学习内容
- 完善用户登录注册案例的功能
学习产出.
1 用户登录注册案例
1.1 需求分析
1、完成登录功能,在下方添加记住按钮,点击后下次登录可以自动填充用户名和密码
2、完成注册功能,添加验证码模块
1.2 用户登录功能
- 需求:
- 用户登录成功后,跳转到列表页面,并在页面上展示当前登录的用户名称
- 用户登录失败后,跳转回登录页面,并在页面上展示对应的错误信息
- 实现流程分析
(1)前端通过表单发送请求和数据给Web层的LoginServlet
(2)在LoginServlet中接收请求和数据[用户名和密码]
(3)LoginServlet接收到请求和数据后,调用Service层完成根据用户名和密码查询用户对象
(4)在Service层需要编写UserService类,在类中实现login方法,方法中调用Dao层的UserMapper
(5)在UserMapper接口中,声明一个根据用户名和密码查询用户信息的方法
(6)Dao层把数据查询出来以后,将返回数据封装到User对象,将对象交给Service层
(7)Service层将数据返回给Web层
(8)Web层获取到User对象后,判断User对象,如果为Null,则将错误信息响应给登录页面,如果不为Null,则跳转到列表页面,并把当前登录用户的信息存入Session携带到列表页面。
- 具体实现
将资料中的UserMAapper.java
,复制到mapper中,里面代码是:
UserMapper.java
package com.zpd.mapper;
import com.zpd.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
public interface UserMapper {
/**
* 根据用户名和密码查询用户对象
* @param username
* @param password
* @return
*/
@Select("select * from tb_user where username = #{username} and password = #{password}")
User select(@Param("username") String username, @Param("password") String password);
/**
* 根据用户名查询用户对象
* @param username
* @return
*/
@Select("select * from tb_user where username = #{username}")
User selectByUsername(String username);
/**
* 添加用户
* @param user
*/
@Insert("insert into tb_user values(null,#{username},#{password})")
void add(User user);
}
创建对应的UserMapper.xml
文件,修改xml文件中的namespace
,代码:
UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zpd.mapper.UserMapper">
</mapper>
将资料中的User实体类粘贴到pojo中,User代码:
package com.zpd.pojo;
public class User {
private Integer id;
private String username;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
将资料中的静态页面中的内容复制到webapp
下,创建login.jsp,将login.html中的代码复制进去。
login.jsp
<%--
Created by IntelliJ IDEA.
User: zpd
Date: 2022/6/3
Time: 17:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<div id="loginDiv" style="height: 350px">
<form action="/brand-demo/loginServlet" id="form">
<h1 id="loginMsg">LOGIN IN</h1>
<div id="errorMsg">${loginError}</div>
<p>Username:<input id="username" name="username" type="text"></p>
<p>Password:<input id="password" name="password" type="password"></p>
<p>Remember:<input id="remember" name="remember" type="checkbox"></p>
<div id="subDiv">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
<a href="register.html">没有账号?</a>
</div>
</form>
</div>
</body>
</html>
编写Servlet的代码,在com.zpd.web
包下,创建LoginServlet
- 获取
username
和password
- 通过
Service
查询 - 判断当登录成功的时候会跳转到
selectAllService
中 - 判断当登录失败后会跳转到
login.jsp
界面并显示用户名或者密码错误
package com.zpd.web; /**
* @Description
* @Author zpd
* @Date 2022/6/3
*/
import com.zpd.pojo.User;
import com.zpd.service.UserService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
//调用service查询
User user = service.login(username, password);
if (user != null){
//登录成功,跳转到查询所有的BrandServlet
HttpSession session = request.getSession();
session.setAttribute("user",user);
String contextPath = request.getContextPath();
response.sendRedirect(contextPath+"/selectAllServlet");
}else {
request.setAttribute("loginError","用户名或者密码错误");
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
1.3 测试
登录成功后为了在brand.jsp界面中显示出用户名,Servlet中将user利用Session保存到服务器中,跳转到selectAllServlet后可以直接调用。
在brand.jsp
的body
标签最上面添加<h1>${user.username},欢迎您!</h1>
则会在登录成功后显示用户名。
登录失败后在login.jsp界面显示出。错误信息使用EL表达式来获取不需要用Session保存数据。
修改前内容:<div id="errorMsg">用户名或密码不正确</div>
修改后内容: <div id="errorMsg">${login_msg}</div>
登录成功
登录失败
小结
- 在LoginServlet中,将登录成功的用户数据存入session中,方法在列表页面中获取当前登录用户信息进行展示
- 在LoginServlet中,将登录失败的错误信息存入到request中,如果存入到session中就会出现这次会话的所有请求都有登录失败的错误信息,这个是不需要的,所以不用存入到session中
2 记住我-Cookie
2.1 设置Cookie
- 需求:
如果用户勾选“记住用户” ,则下次访问登陆页面自动填充用户名密码。这样可以提升用户的体验。
最大的问题就是: 如何自动填充用户名和密码?
- 实现流程分析
因为记住我
功能要实现的效果是,就算用户把浏览器关闭过几天再来访问也能自动填充,所以需要将登陆信息存入一个可以长久保存,并且能够在浏览器关闭重新启动后依然有效的地方,就是我们前面讲的Cookie,所以:
-
将用户名和密码写入Cookie中,并且持久化存储Cookie,下次访问浏览器会自动携带Cookie
-
在页面获取Cookie数据后,设置到用户名和密码框中
-
何时写入Cookie?
- 用户必须登陆成功后才需要写
- 用户必须在登录页面勾选了
记住我
的复选框
(1)前端需要在发送请求和数据的时候,多携带一个用户是否勾选Remember
的数据
(2)LoginServlet获取到数据后,调用Service完成用户名和密码的判定
(3)登录成功,并且用户在前端勾选了记住我
,需要往Cookie中写入用户名和密码的数据,并设置Cookie存活时间
(4)设置成功后,将数据响应给前端
在登陆成功后需要对选择框的状态进行判断。在login.jsp中添加默认值。
<p>Remember:<input id="remember" name="remember" value="1" type="checkbox"></p>
在LoginServlet.java中创建并上传Cookie对象
package com.zpd.web; /**
* @Description
* @Author zpd
* @Date 2022/6/3
*/
import com.zpd.pojo.User;
import com.zpd.service.UserService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
//调用service查询
User user = service.login(username, password);
if (user != null) {
//remember单选框的状态
String remember = request.getParameter("remember");
//登录成功,跳转到查询所有的BrandServlet
HttpSession session = request.getSession();
session.setAttribute("user", user);
if ("1".equals(remember)) {
//勾选了
//创建Cookie对象
Cookie CookieUsername =new Cookie("username",username);
Cookie CookiePassword =new Cookie("password",password);
//存活时间7天
CookieUsername.setMaxAge(60*60*24*7);
CookiePassword.setMaxAge(60*60*24*7);
//添加
response.addCookie(CookieUsername);
response.addCookie(CookiePassword);
}
String contextPath = request.getContextPath();
response.sendRedirect(contextPath + "/selectAllServlet");
} else {
request.setAttribute("loginError", "用户名或者密码错误");
request.getRequestDispatcher("/login.jsp").forward(request, response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
启动访问测试:
只有当前用户名和密码输入正确,并且勾选了Remeber的复选框,在响应头中才可以看得cookie的相关数据
2.2 获取 Cookie
- 需求
登录成功并勾选了Remeber后,后端返回给前端的Cookie数据就已经存储好了,接下来就需要在页面获取Cookie中的数据,并把数据设置到登录页面的用户名和密码框中。
- 实现流程分析
在页面可以使用EL表达式,${cookie.key.value}
key:指的是存储在cookie中的键名称
(1)在login.jsp用户名的表单输入框使用value值给表单元素添加默认值,value可以使用${cookie.username.value}
(2)在login.jsp密码的表单输入框使用value值给表单元素添加默认值,value可以使用${cookie.password.value}
- 具体实现
<p>Username:<input id="username" name="username" value="${cookie.password.value}" type="text"></p>
<p>Password:<input id="password" name="password" value="${cookie.password.value}" type="password"></p>
<p>Remember:<input id="remember" name="remember" value="1" type="checkbox" checked="checked"></p>
3 注册案例
3.1 注册功能
保存用户信息到数据库中
1、
先编写Dao层,在里面编写根据用户名查询用户对象
,添加用户
方法。
UserMapper.java
package com.zpd.mapper;
import com.zpd.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
public interface UserMapper {
/**
* 根据用户名和密码查询用户对象
* @param username
* @param password
* @return
*/
@Select("select * from tb_user where username = #{username} and password = #{password}")
User select(@Param("username") String username, @Param("password") String password);
/**
* 根据用户名查询用户对象
* @param username
* @return
*/
@Select("select * from tb_user where username = #{username}")
User selectByUsername(String username);
/**
* 添加用户
* @param user
*/
@Insert("insert into tb_user values(null,#{username},#{password})")
void add(User user);
}
2、
在UserService.java
中,编写注册方法,并调用SelectByUsername
方法来判断用户名是否存在,存在则调用add
方法,将user添加到数据库中。通过返回的boolean
结果来判断。
UserService.java
package com.zpd.service;
import com.zpd.mapper.UserMapper;
import com.zpd.pojo.User;
import com.zpd.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
/**
* @Description
* @Author zpd
* @Date 2022/6/3
*/
public class UserService {
SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
/**
* 登录方法
* @param username
* @param password
* @return
*/
public User login(String username, String password) {
//2.获取SqlSession
SqlSession sqlSession = factory.openSession();
//3.获取UserMapper
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
User user = mapper.select(username, password);
sqlSession.close();
return user;
}
/**
* 注册方法
* @param user
* @return
*/
public boolean register(User user){
//2.获取SqlSession
SqlSession sqlSession = factory.openSession();
//3.获取UserMapper
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
//判断用户是否存在
User user1 = mapper.selectByUsername(user.getUsername());
if (user1 == null){
//用户名不存在,注册
mapper.add(user);
sqlSession.commit();
}
sqlSession.close();
return user1 == null;
}
}
3、
将register.html文件中的代码复制到register.jsp中
将login.jsp中的<a></a>
标签中的跳转改为register.jsp<a href="register.jsp">没有账号?</a>
RegisterServlet
package com.zpd.web; /**
* @Description
* @Author zpd
* @Date 2022/6/3
*/
import com.zpd.pojo.User;
import com.zpd.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户名和密码的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
User user = new User();
user.setUsername(username);
user.setPassword(password);
boolean register = service.register(user);
if (register){
request.setAttribute("RegisterFinish","注册成功请登录!");
request.getRequestDispatcher("/login.jsp").forward(request, response);
}else {
request.setAttribute("RegisterError", "用户名重复!");
request.getRequestDispatcher("/register.jsp").forward(request, response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
需要在页面上展示后台返回的错误信息,需要修改register.jsp
修改前:<span id="username_err" class="err_msg" style="display:none">用户名不太受欢迎</span>
修改后:<span id="username_err" class="err_msg" >${RegisterError}</span>
如果注册成功,需要把成功信息展示在登录页面,所以也需要修改login.jsp
修改前:<div id="errorMsg">${login_msg}</div>
修改后:<div id="errorMsg">${loginError} ${RegisterFinish}</div>
3.2 验证码功能
3.2.1 获取验证码
- 需求分析
展现验证码:展示验证码图片,点击可以切换
验证码的生成是通过工具类来实现的,具体的工具类参考资料中的04-资料\1. 登录注册案例\CheckCodeUtil.java
在该工具类中编写main方法进行测试:
public static void main(String[] args) throws IOException {
//生成验证码的图片位置
OutputStream fos = new FileOutputStream("d://a.jpg");
//checkCode为最终验证码的数据
String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, fos, 4);
System.out.println(checkCode);
}
生成完验证码以后,我们就可以知晓:
- 验证码就是使用Java代码生成的一张图片
- 验证码的作用:防止机器自动注册,攻击服务器
- 实现流程分析
(1)前端发送请求给CheckCodeServlet
(2)CheckCodeServlet接收到请求后,生成验证码图片,将图片用Reponse对象的输出流写回到前端
如何将图片写回到前端浏览器呢?
(1)Java中已经有工具类生成验证码图片,测试类中只是把图片生成到磁盘上
(2)生成磁盘的过程中使用的是OutputStream流,如何把这个图片生成在页面呢?
(3)前面在将Reponse对象的时候,它有一个方法可以获取其字节输出流,getOutputStream()
(4)综上所述,我们可以把写往磁盘的流对象更好成Response的字节流,即可完成图片响应给前端
- 具体实现
(1)修改Register.jsp页面,将验证码的图片从后台获取
<td class="inputs">
<input name="checkCode" type="text" id="checkCode">
<img id="CodeImage" src="/brand-demo/checkCodeServlet">
<a href="#" id="changeImg">看不清?</a>
</td>
<script>
document.getElementById("changeImg").onclick = function (){
//路径后面添加时间戳的目的是避免浏览器进行缓存静态资源
document.getElementById("CodeImage").src= "/brand-demo/checkCodeServlet?"+new Date().getMilliseconds();
}
document.getElementById("CodeImage").onclick = function (){
document.getElementById("CodeImage").src ="/brand-demo/checkCodeServlet?"+new Date().getMilliseconds();
}
</script>
(2)编写CheckCodeServlet类,用来接收请求生成验证码
package com.zpd.web; /**
* @Description
* @Author zpd
* @Date 2022/6/4
*/
import com.zpd.util.CheckCodeUtil;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ServletOutputStream os = response.getOutputStream();
String s = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
3.2.1 校验验证码
- 需求
- 判断程序生成的验证码 和 用户输入的验证码 是否一样,如果不一样,则阻止注册
- 验证码图片访问和提交注册表单是两次请求,所以要将程序生成的验证码存入Session中
- 实现流程分析
(1)在CheckCodeServlet中生成验证码的时候,将验证码数据存入Session对象
(2)前端将验证码和注册数据提交到后台,交给RegisterServlet类
(3)RegisterServlet类接收到请求和数据后,其中就有验证码,和Session中的验证码进行对比
(4)如果一致,则完成注册,如果不一致,则提示错误信息
- 具体实现
(1)修改CheckCodeServlet类,将验证码存入Session对象,添加
//存入Session中
HttpSession session = request.getSession();
session.setAttribute("checkCode",s);
(2)在RegisterServlet中,获取页面的和session对象中的验证码,进行对比, 先进行验证码的对比错误直接显示验证码错误!再进行user对象是否重复
package com.zpd.web; /**
* @Description
* @Author zpd
* @Date 2022/6/3
*/
import com.zpd.pojo.User;
import com.zpd.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户名和密码的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
User user = new User();
user.setUsername(username);
user.setPassword(password);
boolean register = service.register(user);
//获取用户输入的验证码
String checkCode = request.getParameter("checkCode");
//获取Session中的验证码
HttpSession session = request.getSession();
String checkCodeGen = (String) session.getAttribute("checkCode");
// System.out.println(checkCode); //打印输入的验证码
//System.out.println(checkCodeGen);//打印生成的验证码
if (!checkCodeGen.equalsIgnoreCase(checkCode)){
//验证码错误
request.setAttribute("RegisterError", "验证码错误!");
request.getRequestDispatcher("/register.jsp").forward(request, response);
return;
}
if (register){
request.setAttribute("RegisterFinish","注册成功请登录!");
request.getRequestDispatcher("/login.jsp").forward(request, response);
}else {
request.setAttribute("RegisterError", "用户名重复!");
request.getRequestDispatcher("/register.jsp").forward(request, response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
验证码错误
验证码正确用户名重复