JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】

迷南。 2022-10-29 15:29 179阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】][JavaWeb-_-_01]
> 2.  [JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】][JavaWeb-_-_02]
> 3.  [JavaWeb-综合案例(用户信息)-学习笔记03【添加删除修改功能】][JavaWeb-_-_03]
> 4.  [JavaWeb-综合案例(用户信息)-学习笔记04【删除选中功能】][JavaWeb-_-_04]
> 5.  [JavaWeb-综合案例(用户信息)-学习笔记05【分页查询功能】][JavaWeb-_-_05]
> 6.  [JavaWeb-综合案例(用户信息)-学习笔记06【复杂条件查询功能】][JavaWeb-_-_06]

**目录**

第1节 登录功能

今日内容

页面调整

内联表单

分页

list.jsp

登录功能\_验证码显示

CheckCodeServlet.java // 验证码的实现代码

修改表结构

登录功能\_代码实现

LoginServlet.java

登录页面 实现效果

--------------------

# 第1节 登录功能 #

## 今日内容 ##

> 1. 综合练习  
>     1. 简单功能  
>         1. 列表查询  
>         2. 登录  
>         3. 添加  
>         4. 删除  
>         5. 修改  
>           
>     2. 复杂功能  
>         1. 删除选中  
>         2. 分页查询  
>             \* 好处：  
>                 1. 减轻服务器内存的开销  
>                 2. 提升用户体验  
>         3. 复杂条件查询

> **登录**  
> 1. 调整页面，加入验证码功能  
> 2. 代码实现
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

## 页面调整 ##

### 内联表单 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

### 分页 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

### list.jsp ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    
    <html lang="zh-CN">
    <head>
        
        <meta charset="utf-8">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>用户信息管理系统</title>
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        <script src="js/jquery-2.1.0.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            td, th {
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <h3 style="text-align: center">用户信息列表</h3>
        <div style="float: left;">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">姓名</label>
                    <input type="text" class="form-control" id="exampleInputName2">
                </div>
                <div class="form-group">
                    <label for="exampleInputName3">籍贯</label>
                    <input type="text" class="form-control" id="exampleInputName3">
                </div>
    
                <div class="form-group">
                    <label for="exampleInputEmail2">邮箱</label>
                    <input type="email" class="form-control" id="exampleInputEmail2">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
        </div>
        <div style="float: right;margin: 5px;">
            <a class="btn btn-primary" href="add.html">添加联系人</a>
            <a class="btn btn-primary" href="add.html">删除选中</a>
        </div>
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th><input type="checkbox"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${users}" var="user" varStatus="s">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>${s.count}</td>
                    <td>${user.name}</td>
                    <td>${user.gender}</td>
                    <td>${user.age}</td>
                    <td>${user.address}</td>
                    <td>${user.qq}</td>
                    <td>${user.email}</td>
                    <td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td>
                </tr>
            </c:forEach>
        </table>
        <div>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">»</span>
                        </a>
                    </li>
                    <span style="font-size: 25px;margin-left: 5px;">
                        共16条记录，共4页
                    </span>
                </ul>
            </nav>
        </div>
    </div>
    </body>
    </html>

## 登录功能\_验证码显示 ##

### CheckCodeServlet.java // 验证码的实现代码 ###

package cn.itcast.web.servlet;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.util.Random;
    
    /**
     * 验证码
     */
    @WebServlet("/checkCodeServlet")
    public class CheckCodeServlet extends HttpServlet {
        public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //服务器通知浏览器不要缓存
            response.setHeader("pragma", "no-cache");
            response.setHeader("cache-control", "no-cache");
            response.setHeader("expires", "0");
            //在内存中创建一个长80，宽30的图片，默认黑色背景
            //参数一：长
            //参数二：宽
            //参数三：颜色
            int width = 80;
            int height = 30;
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            //获取画笔
            Graphics g = image.getGraphics();
            //设置画笔颜色为灰色
            g.setColor(Color.GRAY);
            //填充图片
            g.fillRect(0, 0, width, height);
            //产生4个随机验证码，12Ey
            String checkCode = getCheckCode();
            //将验证码放入HttpSession中
            request.getSession().setAttribute("CHECKCODE_SERVER", checkCode);
            //设置画笔颜色为黄色
            g.setColor(Color.YELLOW);
            //设置字体的小大
            g.setFont(new Font("黑体", Font.BOLD, 24));
            //向图片上写入验证码
            g.drawString(checkCode, 15, 25);
            //将内存中的图片输出到浏览器
            //参数一：图片对象
            //参数二：图片的格式，如PNG,JPG,GIF
            //参数三：图片输出到哪里去
            ImageIO.write(image, "PNG", response.getOutputStream());
        }
    
        /**
         * 产生4位随机字符串
         */
        private String getCheckCode() {
            String base = "0123456789ABCDEFGabcdefg";
            int size = base.length();
            Random r = new Random();
            StringBuffer sb = new StringBuffer();
            for (int i = 1; i <= 4; i++) {
                //产生0到size-1的随机值
                int index = r.nextInt(size);
                //在base字符串中获取下标为index的字符
                char c = base.charAt(index);
                //将c放入到StringBuffer中去
                sb.append(c);
            }
            return sb.toString();
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

### login.jsp ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> <img src="$\{pageContext.request.contextPath\}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>管理员登录</title>
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        <script src="js/jquery-2.1.0.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            //切换验证码
            function refreshCode() {
                //1.获取验证码图片对象
                var vcode = document.getElementById("vcode");
                //2.设置其src属性，加时间戳
                vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time=" + new Date().getTime();
            }
        </script>
    </head>
    <body>
    <div class="container" style="width: 400px;">
        <h3 style="text-align: center;">管理员登录</h3>
        <form action="${pageContext.request.contextPath}/loginServlet" method="post">
            <div class="form-group">
                <label for="user">用户名：</label>
                <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
            </div>
            <div class="form-inline">
                <label for="vcode">验证码：</label>
                <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
                <a href="javascript:refreshCode();">
                    <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
                </a>
            </div>
            <hr/>
            <div class="form-group" style="text-align: center;">
                <input class="btn btn btn-primary" type="submit" value="登录">
            </div>
        </form>
        
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert">
                <span>×</span>
            </button>
            <strong>${login_msg}</strong>
        </div>
    </div>
    </body>
    </html>

### 修改表结构 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![20210216133029263.png][]

## 登录功能\_代码实现 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

### LoginServlet.java ###

package cn.itcast.web.servlet;
    
    import cn.itcast.domain.User;
    import cn.itcast.service.UserService;
    import cn.itcast.service.impl.UserServiceImpl;
    import org.apache.commons.beanutils.BeanUtils;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.io.IOException;
    import java.lang.reflect.InvocationTargetException;
    import java.util.Map;
    
    @WebServlet("/loginServlet")
    public class LoginServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.设置编码
            request.setCharacterEncoding("utf-8");
            //2.获取数据
            //2.1获取用户填写验证码
            String verifycode = request.getParameter("verifycode");
            //3.验证码校验
            HttpSession session = request.getSession();
            String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
            session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
            if (!checkcode_server.equalsIgnoreCase(verifycode)) {
                //验证码不正确
                //提示信息
                request.setAttribute("login_msg", "验证码错误！");
                //跳转登录页面
                request.getRequestDispatcher("/login.jsp").forward(request, response);
                return;
            }
            Map<String, String[]> map = request.getParameterMap();
            //4.封装User对象
            User user = new User();
            try {
                BeanUtils.populate(user, map);
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            }
            //5.调用Service查询
            UserService service = new UserServiceImpl();
            User loginUser = service.login(user);
            //6.判断是否登录成功
            if (loginUser != null) {
                //登录成功
                //将用户存入session
                session.setAttribute("user", loginUser);
                //跳转页面
                response.sendRedirect(request.getContextPath() + "/index.jsp");
            } else {
                //登录失败
                //提示信息
                request.setAttribute("login_msg", "用户名或密码错误！");
                //跳转登录页面
                request.getRequestDispatcher("/login.jsp").forward(request, response);
            }
        }
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

### 登录页面 实现效果 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]
> 
> ![20210216134327138.png][]

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[JavaWeb-_-_01]: https://blog.csdn.net/weixin_44949135/article/details/113823440
[JavaWeb-_-_02]: https://blog.csdn.net/weixin_44949135/article/details/113822709
[JavaWeb-_-_03]: https://blog.csdn.net/weixin_44949135/article/details/113824663
[JavaWeb-_-_04]: https://blog.csdn.net/weixin_44949135/article/details/113826067
[JavaWeb-_-_05]: https://blog.csdn.net/weixin_44949135/article/details/113826657
[JavaWeb-_-_06]: https://blog.csdn.net/weixin_44949135/article/details/113827460
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/077c6daf250044b0a9edbdc3b40a9bea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/2eaa150ac6bc44f9803e2896e3d619c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/f6ecff94ba494facb1ab6fd0a1b65104.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/d4b0fb2f01a74bc29c2486250e572903.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/ed1c1afa3b2b40848e25b895ff37cfc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/30236dfcdf6e448c814132b8a82f15c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/5c3090b58ae04d1b8e54ff9482a9c78c.png
[20210216133029263.png]: /images/20221024/128b314c28d44e9c87766ebed2437937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/15cf7f1384f4417eb5bad04ca42316b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210216134414967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/dced5f6fc46e43cd9064931a6cd40d1c.png
[20210216134327138.png]: /images/20221024/98e0eb86d12243578caff38279dfa388.png