案例
1.需求:
需求说明:
-
完成用户登录功能,如果用户勾选“记住用户” ,则下次访问登录页面自动填充用户名密码
-
完成注册功能,并实现验证码功能
- 用户登录成功后,跳转到列表页面,并在页面上展示当前登录的用户名称
- 用户登录失败后,跳转回登录页面,并在页面上展示对应的错误信息
以及:
完成品牌数据的增删改查操作:
这个功能我们之前一直在做,而这个案例是将今天学习的所有的内容(包含 MVC模式 和 三层架构)进行应用,并将整个流程贯穿起来。
并且:
访问服务器资源时,需要先进行登录验证,如果没有登录,则自动跳转到登录页面
2.实现流程分析:
3.代码执行
3.1 创建工程
创建新的模块 brand_demo,引入坐标。我们只要分析出要用到哪儿些技术,那么需要哪儿些坐标也就明确了
- 需要操作数据库。mysql的驱动包
- 要使用mybatis框架。mybaits的依赖包
- web项目需要用到servlet和jsp。servlet和jsp的依赖包
- 需要使用 jstl 进行数据展示。jstl的依赖包
pom.xml
内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>band_demo</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>band_demo Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.31</version>
</dependency>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!--jsp-->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
<scope>provided</scope>
</dependency>
<!--jstl-->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</plugin>
</plugins>
</build>
</project>
3.2 创建包
创建不同的包结构,用来存储不同的类。包结构如下
3.3 创建表
tb_user和tb_brand 表:
3.4 创建实体类
在 pojo
包下创建名为 Brand
和User
的类。
public class Brand {
// id 主键
private Integer id;
// 品牌名称
private String brandName;
// 企业名称
private String companyName;
// 排序字段
private Integer ordered;
// 描述信息
private String description;
// 状态:0:禁用 1:启用
private Integer status;
public Brand() {
}
public Brand(Integer id, String brandName, String companyName, String description) {
this.id = id;
this.brandName = brandName;
this.companyName = companyName;
this.description = description;
}
public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {
this.id = id;
this.brandName = brandName;
this.companyName = companyName;
this.ordered = ordered;
this.description = description;
this.status = status;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getBrandName() {
return brandName;
}
public void setBrandName(String brandName) {
this.brandName = brandName;
}
public String getCompanyName() {
return companyName;
}
public void setCompanyName(String companyName) {
this.companyName = companyName;
}
public Integer getOrdered() {
return ordered;
}
public void setOrdered(Integer ordered) {
this.ordered = ordered;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
@Override
public String toString() {
return "Brand{" +
"id=" + id +
", brandName='" + brandName + '\'' +
", companyName='" + companyName + '\'' +
", ordered=" + ordered +
", description='" + description + '\'' +
", status=" + status +
'}';
}
}
package com.laila.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 + '\'' +
'}';
}
}
3.5 准备mybatis环境
定义核心配置文件 Mybatis-config.xml
,并将该文件放置在 resources
下
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!--起别名-->
<typeAliases>
<package name="com.laila.pojo"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///db2?useSSL=false&useServerPrepStmts=true"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<!--扫描mapper-->
<package name="com.laila.mapper"/>
</mappers>
</configuration>
在 resources
下创建放置映射配置文件的目录结构 com/itheima/mapper
,并在该目录下创建映射配置文件 BrandMapper.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.laila.mapper.BrandMapper">
</mapper>
3.6 编写Mapper
public interface BrandMapper {
@Select("select * from tb_brand;")
@ResultMap("selectAllMap")
List<Brand> selectAll();
@Insert("insert into tb_brand values (null,#{brandName},#{companyName},#{ordered},#{description},#{status});")
void add(Brand brand);
@Select("select * from tb_brand where id = #{id};")
@ResultMap("selectAllMap")
Brand selectById(int id);
@Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id= #{id};")
void update(Brand brand);
@Delete("delete from tb_brand where id = #{id};")
void deleteById(int id);
}
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);
}
3.7 编写serviice方法
public class UserService {
private SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
//登陆方法
public User login(String username,String password){
SqlSession sqlSession = factory.openSession();
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
User user = mapper.select(username, password);
sqlSession.close();
return user;
}
//添加用户
public boolean register(User user){
SqlSession sqlSession = factory.openSession();
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
User u = mapper.selectByUsername(user.getUsername());
if (u == null){
mapper.add(user);
sqlSession.commit();
}
sqlSession.close();
return u == null;
}
//根据用户名查询对象
public User selectByUsername(String username){
SqlSession sqlSession = factory.openSession();
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
User user = mapper.selectByUsername(username);
return user;
}
}
public class BrandService {
private SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
//查询所有
public List<Brand> selectAll(){
SqlSession sqlSession = factory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
List<Brand> brands = mapper.selectAll();
sqlSession.close();
return brands;
}
//添加
public void add(Brand brand){
SqlSession sqlSession = factory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.add(brand);
sqlSession.commit();
sqlSession.close();
}
//根据id查询
public Brand selectById(int id){
SqlSession sqlSession = factory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
Brand brand = mapper.selectById(id);
sqlSession.close();
return brand;
}
//修改
public void update(Brand brand){
SqlSession sqlSession = factory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.update(brand);
sqlSession.commit();
sqlSession.close();
}
//根据id删除
public void deleteById(int id){
SqlSession sqlSession = factory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.deleteById(id);
sqlSession.commit();
sqlSession.close();
}
}
3.8 写jsp网页
///登陆网页
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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="/band_demo/loginServlet" id="form">
<h1 id="loginMsg">LOGIN IN</h1>
<div id="errorMsg">${login_msg} ${register_msg}</div>
<p>Username:<input id="username" name="username" value="${cookie.username.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"></p>
<div id="subDiv">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
<a href="register.jsp">没有账号?</a>
</div>
</form>
</div>
</body>
</html>
///注册网页
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号?</span> <a href="login.html">登录</a>
</div>
<form id="reg-form" action="/band_demo/registerServlet" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" >${register_msg}</span>
<br>
<span id="username_no" class="err_msg" style="display: none">用户名不符合规则</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
<br>
<span id="password_no" class="err_msg" style="display: none">密码不符合规则</span>
</td>
</tr>
<tr>
<td>验证码</td>
<td class="inputs">
<input name="checkCode" type="text" id="checkCode">
<img id="checkCodeImg" src="/band_demo/checkCodeServlet">
<a href="#" id="changeImg">看不清?</a>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
document.getElementById("changeImg").onclick = function () {
document.getElementById("checkCodeImg").src = "/band_demo/checkCodeServlet?" + new Date();
}
document.getElementById("checkCodeImg").onclick = function () {
document.getElementById("checkCodeImg").src = "/band_demo/checkCodeServlet?" + new Date();
}
//1验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
//1.3获取用户输入的用户名
var username = usernameInput.value.trim();
//1.4判断用户名是否符合规则 长度 3~12
var flag = username.length >=3 && username.length<= 12;
if (flag){
//符合规则
document.getElementById("username_no").style.display = 'none'
}else {
//不符合规则
document.getElementById("username_no").style.display = '';
}
return flag;
}
//1验证密码是否符合规则
//1.1 获取用户名的输入框
var passwordInput = document.getElementById("password");
//1.2绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
//1.3获取用户输入的密码
var password = passwordInput.value.trim();
//1.4判断密码是否符合规则 长度 3~12
var flag = password.length >=3 && password.length<= 18;
if (flag){
//符合规则
document.getElementById("password_no").style.display = 'none'
}else {
//不符合规则
document.getElementById("password_no").style.display = '';
}
return flag;
}
//1.获取表单对象
var regForm = document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsubmit = function () {
//挨个判断每一个表单项是否都符合
return checkUsername() && checkPassword();
}
</script>
</body>
</html>
///产品信息网页
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>${user.username},欢迎您</h1>
<input type="button" value="新增" id="add"><br>
<input type="button" value="返回登录" id="login"><br>
<input type="button" value="返回登录并清空信息" id="login_no"><br>
<hr>
<table border="1" cellspacing="0" width="80%">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<c:forEach items="${brands}" var="brand" varStatus="status">
<tr align="center">
<%--<td>${brand.id}</td>--%>
<td>${status.count}</td>
<td>${brand.brandName}</td>
<td>${brand.companyName}</td>
<td>${brand.ordered}</td>
<td>${brand.description}</td>
<c:if test="${brand.status ==1}">
<td>启用</td>
</c:if>
<c:if test="${brand.status !=1}">
<td>禁用</td>
</c:if>
<td><a href="/band_demo/selectByIdServlet?id=${brand.id}">修改</a> <a href="/band_demo/deleteByIdServlet?id=${brand.id}">删除</a></td>
</tr>
</c:forEach>
</table>
<script>
document.getElementById("add").onclick = function () {
location.href = "/band_demo/addBrand.jsp";
}
document.getElementById("login").onclick = function () {
location.href = "/band_demo/login.jsp"
}
document.getElementById("login_no").onclick = function () {
location.href = "/band_demo/loginNoServlet"
}
</script>
</body>
</html>
///新增产品网页
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="/band_demo/addServlet" method="post">
品牌名称:<input name="brandName"><br>
企业名称:<input name="companyName"><br>
排序:<input name="ordered"><br>
描述信息:<textarea rows="5" cols="20" name="description"></textarea><br>
状态:
<input type="radio" name="status" value="0">禁用
<input type="radio" name="status" value="1">启用<br>
<input type="submit" value="提交">
</form>
</body>
</html>
其中登录网页中有个“记住我”选项 要是点击的话,那么其名为“remember”的value值就会为1,并且被servlet给接收从而进行判断是否存储Cookie值
其中注册网页用到了焦点绑定方法,即当鼠标离开用户名或者密码焦点的同时,会自动判断写的用户名和密码符不符合注册条件,不符合的话会给出错误提示并且无法点击注册 还有验证码功能,给验证码图片也绑定了单击事件,当鼠标点击图片或者看不清时都可以切换验证码
产品信息网页也设置了三个按键,分别是新增,返回登陆,返回登陆并清空信息。点击新增会跳转到新增产品信息的网页,点击返回登录会跳转到登录页面,但登录信息依旧保存,可以再次直接访问产品信息网站,但是如果点击返回登录并清空信息的话会清除自身信息并返回到登录界面,如果想再次访问产品信息需要再次登录,否者会被Filter方法拦截,无法访问
3.9 编写servlet
- 1 登录
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private UserService userService = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收数据
String username = request.getParameter("username");
String password = request.getParameter("password");
username = new String(username.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
//获取复选框数据
String remember = request.getParameter("remember");
//2.调用service查询
User user = userService.login(username, password);
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
//3.判断是否登陆成功
if (user != null) {
//登陆成功,跳转到查询所有的BrandServlet
//判断用户是否勾选记住我
if ("1".equals(remember)){
//勾选了,发送cookie
//创建cookie对象
Cookie c_username = new Cookie("username",username);
Cookie c_password = new Cookie("password",password);
//设置cookie存活时间
c_username.setMaxAge(60*60*24*7);
c_password.setMaxAge(60*60*24*7);
//发送
response.addCookie(c_username);
response.addCookie(c_password);
}
//将登陆成功后的user对象,存储到session中
HttpSession session = request.getSession();
session.setAttribute("user", user);
String contextPath = request.getContextPath();
response.sendRedirect(contextPath + "/selectAllServlet");
}else {
//登录失败
//存储错误信息到request
request.setAttribute("login_msg","用户名或密码错误");
//跳转到login.jsp
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
- 2 注册
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
private UserService service = new UserService();
private User user = new User();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收用户信息
String username = request.getParameter("username");
String password = request.getParameter("password");
username = new String(username.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
user.setUsername(username);
user.setPassword(password);
String checkCode = request.getParameter("checkCode");
HttpSession session = request.getSession();
String checkCodeImg = (String) session.getAttribute("checkCodeImg");
if (! checkCodeImg.equalsIgnoreCase(checkCode)){
request.setAttribute("register_msg","验证码错误");
request.getRequestDispatcher("/register.jsp").forward(request,response);
return;
}
//2.调用service添加
boolean flag = service.register(user);
//3.判断注册成功与否
if (flag){
//注册成功 跳转到登陆页面
request.setAttribute("register_msg","注册成功,请登录");
request.getRequestDispatcher("/login.jsp").forward(request,response);
}else {
//注册失败 跳转到注册页面
request.setAttribute("register_msg","用户名已存在");
request.getRequestDispatcher("/register.jsp").forward(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
- 3 退出登录清空信息
@WebServlet("/loginNoServlet")
public class LoginNoServlet extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收数据
String username = request.getParameter("username");
username = null;
User user = service.selectByUsername(username);
HttpSession session = request.getSession();
session.setAttribute("user",user);
// request.setAttribute("user",user);
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
- 4 新增
@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
private Brand brand = new Brand();
private BrandService service = new BrandService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理post乱码
request.setCharacterEncoding("utf-8");
//1.获取数据并封装
String brandName = request.getParameter("brandName");
String companyName = request.getParameter("companyName");
String ordered = request.getParameter("ordered");
String description = request.getParameter("description");
String status = request.getParameter("status");
brand.setBrandName(brandName);
brand.setCompanyName(companyName);
brand.setOrdered(Integer.valueOf(ordered));
brand.setDescription(description);
brand.setStatus(Integer.valueOf(status));
//2.调用service完成添加
service.add(brand);
//3.转发到查询所有
request.getRequestDispatcher("selectAllServlet").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
- 5 获取验证码
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取验证码
ServletOutputStream os = response.getOutputStream();
String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);
//2.储存到session
HttpSession session = request.getSession();
session.setAttribute("checkCodeImg",checkCode);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
- 6 查询所有
@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
private BrandService service = new BrandService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.调用service查询
List<Brand> brands = service.selectAll();
//2.将数据存入request
request.setAttribute("brands",brands);
//3.转发到brand.jsp
request.getRequestDispatcher("brand.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
4. 运行截图