Java-Servlet-用户登录案例(二)

最新推荐文章于 2022-04-29 11:06:22 发布

__Miracle__

最新推荐文章于 2022-04-29 11:06:22 发布

阅读量412

点赞数 1

分类专栏： Java项目文章标签： java sql struts

原文链接：https://www.baidu.com/

版权

Java项目专栏收录该内容

4 篇文章 1 订阅

订阅专栏

用户列表分页

修改index.jsp
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>用户首页</title>
</head>
<body>
<c:if test="${not empty user.name}">
    <h1>${user.name}, 欢迎您登录</h1>
<%--    <a href="/userListServlet">点击查询所有用户信息</a>--%>
    <a href="/findUserByPageServlet">点击查询所有用户信息</a>
</c:if>
<c:if test="${empty user.name}">
    <h1>欢迎您, 请您先<a href="/loginServlet">登录</a></h1>
</c:if>

</body>
</html>

编写findUserByPageServlet

package com.neuedu.hebeigc_usercase.servlet;

import com.neuedu.hebeigc_usercase.domain.PageBean;
import com.neuedu.hebeigc_usercase.domain.User;
import com.neuedu.hebeigc_usercase.service.impl.UserServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.Map;

@WebServlet(name = "findUserByPageServlet", value = "/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String currentPage = request.getParameter("currentPage");// 当前页
        String rows = request.getParameter("rows"); // 一页几条
        if (currentPage == null || "".equals(currentPage))
            currentPage = "1";
        if (rows == null || "".equals(rows))
            rows = "5";

        Map<String, String[]> condition = request.getParameterMap();
        // 调用分页查询
        UserServiceImpl userService = new UserServiceImpl();
        PageBean<User> pb = userService.findUserByPage(currentPage, rows, condition);
        System.out.println("pb = " + pb);

        request.setAttribute("pb", pb);
        request.setAttribute("condition", condition);
        request.getRequestDispatcher("./list.jsp").forward(request, response);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

service实现


    @Override
    public PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {
        int currentPage = Integer.parseInt(_currentPage);
        int rows = Integer.parseInt(_rows);
        if (currentPage <= 0)
            currentPage = 1;
        int start  = (currentPage - 1)*rows; // 这里需要乘以 rows才能跳转到那个显示页面  比如 愿意 0, 5, 10...
        List<User> list = dao.findByPage(start, rows, condition);

        // 要返回PageBean  上面的list知识其中的一部分
        PageBean<User> pageBean = new PageBean<>();
        pageBean.setCurrentPage(currentPage);
        pageBean.setRows(rows);
        pageBean.setList(list);

        // 配置.setTotalCount();
        int totalCount = dao.findTotalCount(condition);
        pageBean.setTotalCount(totalCount);

        // 配置.setTotalPage();
        int totalPage = (totalCount%rows) == 0 ? totalCount/rows : (totalCount/rows + 1);
        pageBean.setTotalPage(totalPage);
        return pageBean;
    }

dao实现

 @Override
    public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
        String sql = "select * from user where 1 = 1 ";
        StringBuilder sb = new StringBuilder(sql);
        Set<String> keySet = condition.keySet();
        ArrayList<Object> params = new ArrayList<>();
        // 支持模糊查询
        for (String key : keySet){
            // 排除 currentPage rows
            if ("currentPage".equals(key) || "rows".equals(key)){
                continue;
            }
            // SELECT * FROM user where 1=1 AND  name LIKE '%田%' LIMIT 0, 2
            String value = condition.get(key)[0];
            if (value != null && !"".equals(value)) {
                sb.append(" AND " + key + "  LIKE  ?  ");
                params.add("%"  + value  + "%");
            }
        }

        sb.append(" limit ?, ?");
        sql = sb.toString();
        params.add(start);
        params.add(rows);
        System.out.println("findByPagesql = " + sql);
        System.out.println("findByPageparams = " + params);

        return template.query(sql, new BeanPropertyRowMapper<User>(User.class), params.toArray());
    }

    @Override
    public int findTotalCount(Map<String, String[]> condition) {
        String sql = "select count(*) from user where 1 = 1 ";
        StringBuilder sb = new StringBuilder(sql);
        Set<String> keySet = condition.keySet();
        ArrayList<String> params = new ArrayList<>();
        // 支持模糊查询
        for (String key : keySet){
            // 排除 currentPage rows
            if ("currentPage".equals(key) || "rows".equals(key)){
                continue;
            }
            // SELECT * FROM user where 1=1 AND  name LIKE '%田%' LIMIT 0, 2
            String value = condition.get(key)[0];
            if (value != null && !"".equals(value)) {
                sb.append(" AND " + key + "  LIKE  ?  ");
                params.add("%"  + value  + "%");
            }
        }
        System.out.println("params" + params);

        return template.queryForObject(sb.toString(), Integer.class,  params.toArray());
    }

测试 http://localhost:8080/findUserByPageServlet
在这里插入图片描述
测试 http://localhost:8080/findUserByPageServlet?currentPage=2&rows=3

在这里插入图片描述

重新修改list.jsp

<%--
  Created by IntelliJ IDEA.
  User: ericli
  Date: 2021/8/30
  Time: 15:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户管理系统</title>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
        td. th {
            text-align: center;
        }

        #container {
            width: 90%;
            margin: 0 auto;
        }
        #right{
            float: right;
        }

    </style>
</head>
<body>
<div id="container">
    <h3 style="text-align: center"><a href="#">用户信息列表</a></h3>
    <div style="float: left;">

        <form class="form-inline" action="#" method="post">
            <div class="form-group">
                <label for="exampleInputName2">姓名</label>
                <input type="text" name="name" value="" class="form-control" id="exampleInputName2">
            </div>
            <div class="form-group">
                <label for="exampleInputName3">籍贯</label>
                <input type="text" name="address" value="" class="form-control" id="exampleInputName3">
            </div>

            <div class="form-group">
                <label for="exampleInputEmail2">邮箱</label>
                <input type="text" name="email" value="" 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="#">添加联系人</a>
        <a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>

    </div>
    <form id="form" action="#" method="post">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th><input type="checkbox" id="firstCb"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${pb.list}" var="user" varStatus="s">
                <tr>
                        <%--          <td><input type="checkbox" id="uid" value="${user.id}"></td>--%>
                        <%--          //todo--%>
                    <td><input type="checkbox" name="uid" value="${user.id}"></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="">修改</a>
                        <a class="btn btn-default btn-sm" href="">删除</a></td>
                </tr>

            </c:forEach>
        </table>

    </form>
    <%--    分页按钮--%>
    <div id="right">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <%--    左箭头--%>
                <c:if test="${pb.currentPage == 1}">
                    <li class="disabled"></li>
                </c:if>
                <c:if test="${pb.currentPage != 1}">
                    <li><a aria-label="Previous"
                           href="/findUserByPageServlet?currentPage=${pb.currentPage-1}&rows=5"><span
                            aria-hidden="true">上一页</span></a></li>
                </c:if>
                <%--        分页列表--%>
                <c:forEach begin="1" end="${pb.totalPage}" var="i">
                    <%--         当前页--%>
                    <c:if test="${pb.currentPage == i}">
                        <li class="active"><a href="/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
                    </c:if>
                    <%--        其他页--%>
                    <c:if test="${pb.currentPage != i}">
                        <li><a href="/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
                    </c:if>
                </c:forEach>
                <%--  右箭头--%>
                <c:if test="${pb.currentPage == pb.totalPage}">
                    <li class="disabled"></li>
                </c:if>
                <c:if test="${pb.currentPage != pb.totalPage}">
                    <li><a aria-label="Next" href="/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5"><span
                            aria-hidden="true">  下一页 </span></a></li>
                </c:if>
                <span style="font-size: 25px;margin-left: 5px;">
      共${pb.totalCount}条记录， 共${pb.totalPage}页
    </span>

            </ul>
        </nav>


    </div>

</div>

</body>
</html>

在这里插入图片描述

模糊查询

分页查询时候已经同时实现了
在这里插入图片描述

新增

在这里插入图片描述
编写AddUserServlet

@WebServlet(name = "addUserServlet", value = "/addUserServlet")
public class AddUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.getRequestDispatcher("./add.jsp").forward(request, response);
    }

编写add.jsp

<%@ 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>
    <%--    <base href="<%=basePath%>"/>--%>
    <!-- 指定字符集 -->
    <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>

</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">添加联系人</h3>
    <form action="/addUserServlet" method="post">

        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" />
        </div>
        <%--            TODO--%>
        <div class="form-group">
            <label>性别：</label>
            <input type="radio" name="gender" value="男" />男
            <input type="radio" name="gender" value="女" />女

        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age"  name="age" placeholder="请输入年龄"/>
        </div>

        <div class="form-group">
            <label>籍贯：</label>
            <select name="address" class="form-control">
                <option value="广东">广东</option>
                <option value="广西">广西</option>
                <option value="湖南">湖南</option>
            </select>
        </div>

        <div class="form-group">
            <label>QQ：</label>
            <input type="text" class="form-control"  name="qq" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label>Email：</label>
            <input type="text" class="form-control" name="email" placeholder="请输入邮箱地址"/>
        </div>

        <div class="form-group" style="text-align: center">
            <input class="btn btn-primary" type="submit" value="提交"/>
            <input class="btn btn-default" type="reset" value="重置"/>
            <input class="btn btn-default" type="button" value="返回"/>
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述

实现 AddUserServlet的 doPost

@Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        Map<String, String[]> map = request.getParameterMap();
        User user = new User();

        try {
            BeanUtils.copyProperties(user, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        UserServiceImpl userService = new UserServiceImpl();
        userService.addUser(user);
        response.sendRedirect("/findUserByPageServlet");
    }

在这里插入图片描述

修改

在这里插入图片描述
编写FindUserServlet

package com.neuedu.hebeigc_usercase.servlet;

import com.neuedu.hebeigc_usercase.domain.User;
import com.neuedu.hebeigc_usercase.service.impl.UserServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "findUserServlet", value = "/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String id = request.getParameter("id");
        UserServiceImpl userService = new UserServiceImpl();
        User user = userService.findUserById(id);
        request.setAttribute("user", user);
        request.getRequestDispatcher("/update.jsp").forward(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

增加update.jsp

<%@ 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>
    <%--    <base href="<%=basePath%>"/>--%>
    <!-- 指定字符集 -->
    <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>

</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">修改联系人</h3>
    <form action="/updateUserServlet" method="post">
<%--        隐藏主键,目的是后台需要--%>
    <input type="hidden" name="id" value="${user.id}">

    <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" value="${user.name}" name="name" />
        </div>
        <%--            TODO--%>
        <div class="form-group">
            <label>性别：</label>
            <input type="radio" name="gender" value="男" <c:if test="${user.gender eq '男'}">checked="checked"</c:if>/>男
            <input type="radio" name="gender" value="女" <c:if test="${user.gender eq '女'}">checked="checked"</c:if>/>女

        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age"   value="${user.age}"   name="age" placeholder="请输入年龄"/>
        </div>

        <div class="form-group">
            <label>籍贯：</label>
            <select name="address" class="form-control">
                <option value="${user.address}"> ${user.address}</option>
                <option value="广东">广东</option>
                <option value="广西">广西</option>
                <option value="湖南">湖南</option>
            </select>
        </div>

        <div class="form-group">
            <label>QQ：</label>
            <input type="text" class="form-control"   value="${user.qq}" name="qq" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label>Email：</label>
            <input type="text" class="form-control" value="${user.email}" name="email" placeholder="请输入邮箱地址"/>
        </div>

        <div class="form-group" style="text-align: center">
            <input class="btn btn-primary" type="submit" value="提交"/>
            <input class="btn btn-default" type="reset" value="重置"/>
            <input class="btn btn-default" type="button" value="返回"/>
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述
UpdateUserServlet

package com.neuedu.hebeigc_usercase.servlet;

import com.neuedu.hebeigc_usercase.domain.User;
import com.neuedu.hebeigc_usercase.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet(name = "updateUserServlet", value = "/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        Map<String, String[]> map = request.getParameterMap();

        User user = new User();
        try {
            BeanUtils.copyProperties(user, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        UserServiceImpl userService = new UserServiceImpl();
        userService.update(user);
        response.sendRedirect("/findUserByPageServlet");

    }
}

在这里插入图片描述

删除

在这里插入图片描述

 <script>
  function deleteUser(id) {
         if (confirm("确定删除此信息？")) {
             // 交给后端
             location.href = "/deleteUserServlet?id=" + id;
         }
     }
     }
</script>

编写DeleteUserServlet

package com.neuedu.hebeigc_usercase.servlet;

import com.neuedu.hebeigc_usercase.service.impl.UserServiceImpl;
import org.omg.PortableServer.THREAD_POLICY_ID;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "deleteUserServlet", value = "/deleteUserServlet")
public class DeleteUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String id = request.getParameter("id");
        UserServiceImpl userService = new UserServiceImpl();
        userService.deleteUser(id);
        response.sendRedirect("/findUserByPageServlet");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

上面实现了单个删除功能
下面实现了多选删除功能

在这里插入图片描述

 // 窗口打开会自动执行
window.onload = function () {
   // 给删除按钮添加单击事件
   document.getElementById("delSelected").onclick = function () {
       let flag = false;
       if (confirm("确定删除所选信息 ")) {
           var guids = document.getElementsByName("uid");

           console.log(guids)
           //
           for (var i = 0; i < guids.length; i++) {
               console.log(guids[i].checked)
               if (guids[i].checked) {
                   // 这个判断只要有一个选中就可以了
                   flag = true;
                   break;
               }
           }

           if (flag) {
               document.getElementById("form").submit();
           }
       }
   }
   // 全选和反选
   document.getElementById("firstCb").onclick = function () {
       var guids = document.getElementsByName("uid");
       for (var i = 0; i < guids.length; i++) {
           guids[i].checked = this.checked;
       }
   }
}

在这里插入图片描述

DeleteSelectedServletServlet

package com.neuedu.hebeigc_usercase.servlet;

import com.neuedu.hebeigc_usercase.service.impl.UserServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.Arrays;

@WebServlet(name = "deleteSelectedServlet", value = "/deleteSelectedServlet")
public class DeleteSelectedServletServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String[] uids = request.getParameterValues("uid");
        System.out.println("Arrays.toString(uids) = " + Arrays.toString(uids));
        UserServiceImpl userService = new UserServiceImpl();
        userService.deleteSelectedUser(uids);
        response.sendRedirect("/findUserByPageServlet");

    }
}

在这里插入图片描述
####上面完成了对web的基本操作, 希望大家能够熟练掌握

__Miracle__

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Java-Servlet-用户登录案例(二)

用户列表分页修改index.jsp<!DOCTYPE html><html><head> <title>用户首页</title></head><body><c:if test="${not empty user.name}"> <h1>${user.name}, 欢迎您登录</h1><%-- <a href="/userListServl
复制链接

扫一扫

专栏目录