简单的B/S架构的综合练习--用户管理练习

B端采用bootstrap前端框架（兼容显示屏==》由于这玩意有个栅栏）S端采用tomcat服务器

用到技术
mysql

1登录

1.1登录界面

1.2RootLoginServlet

2主页面

2.1主页面jsp

3添加功能

3.1页面效果图

3.2添加功能资源跳转图

3.3html==》jsp修改部分

3.4addUserServlet

4删除功能

4.1对单条记录的删除功能

4.1.1资源跳转图

4.1.2deleteUserServlet

4.2多选中一条或多条记录的删除功能

4.2.1删除选中资源跳转图

4.2.2jsp中修改部分

4.2.2.1 全选

4.2.2.1 全不选

4.2.3deleteSelectServlet

5修改功能

5.1修改前的用户回显

5.1.1 资源跳转图

5.1.2 echoUserServlet

5.2修改的用户信息

5.1.1 资源跳转图

5.1.2 修改的jsp对用户输入数据的校验

5.1.3 updateUserServlet

6查询功能

6.1 分页的查询

6.2 复杂条件的分页查询

1 登录

1.1登录界面

图片中验证码使用了一个servlet取随机生成验证码

1.2RootLoginServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RootService rootService = new RootServiceImpl();
        //1、登录编码设置
        request.setCharacterEncoding("utf-8");
        //2、获取浏览器发来的数据
        Map<String, String[]> rootMap = request.getParameterMap();
        String verifycode = request.getParameter("verifycode");
        //3、验证码校验
        HttpSession session = request.getSession();
        String check_code = (String) session.getAttribute("random_check_code");
        session.removeAttribute("random_check_code");
        if (check_code!=null) {
            if (!check_code.equalsIgnoreCase(verifycode)) {
                request.setAttribute("verifycode_error", "验证码错误！！");
                request.getRequestDispatcher("/login.jsp").forward(request, response);
            } else {
                //封装对象
                //new 一个新对象
                Root root = new Root();
                try {
                    BeanUtils.populate(root, rootMap);
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                } catch (InvocationTargetException e) {
                    e.printStackTrace();
                }
                //调用service
                Root returnRoot = rootService.findRoot(root);
                if (returnRoot != null) {
                    request.setAttribute("returnRoot",returnRoot);
                    request.getRequestDispatcher("/index.jsp").forward(request,response);
                    //response.sendRedirect(request.getContextPath() + "/index.jsp");
                } else {
                    request.setAttribute("root_error", "账户或密码错误！！");
                    request.getRequestDispatcher("/login.jsp").forward(request, response);

                }
            }
        }else {
            request.setAttribute("verifycode_error", "验证码错误！！");
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }

    }

2.主界面

2.1主页面 jsp

<h1>${requestScope.returnRoot.username},欢迎您！！</h1>
  <%
    Date date = new Date();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    request.setAttribute("time",sdf.format(date));
  %>
  <h1>当前时间 ${requestScope.time}</h1>
  <a
          href="${pageContext.request.contextPath}/findUserByPageServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
  </a>

3添加功能

3.1页面效果图

3.2添加功能资源跳转图

3.3html==》jsp修改部分

<script>
        window.onload=function () {
            //注册按钮绑定按钮点击事件
            document.getElementById("form").onsubmit=function () {
                return chackusername()&&chackage()&&chackemail()&&chackeqq();
            }

            document.getElementById("name").onmouseout=chackusername;
            document.getElementById("age").onmouseout=chackage;
            document.getElementById("email").onmouseout=chackemail;
            document.getElementById("qq").onmouseout=chackeqq;

            //用户名验证
            function chackusername() {

                var Reg=/^\w{12,20}$/;
                var username = document.getElementById("name").value;
                var b = Reg.test(username);
                var s_username = document.getElementById("s_name");
                if (b){
                    s_username.innerHTML="<img width='35' height='25' src='${pageContext.request.contextPath}/rightServlet'>";
                }else {
                    s_username.innerHTML="用户名错误";
                }
                return b

            }

            //年龄验证
            function chackage() {
                var regExp=/^\w[0-9]{1,2}$/;
                var age = document.getElementById("age").value;
                var b = regExp.test(age);
                var s_age = document.getElementById("s_age");
                if (b){
                    s_age.innerHTML="<img width='35' height='25' src='${pageContext.request.contextPath}/rightServlet'>";
                }else {
                    s_age.innerHTML="年龄错误";
                }
                return b
            }

            //邮箱验证
            function chackemail() {
                var regExp=/^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/;
                var email = document.getElementById("email").value;
                var b = regExp.test(email);
                var s_email = document.getElementById("s_email");
                if (b){
                    s_email.innerHTML="<img width='35' height='25' src='${pageContext.request.contextPath}/rightServlet'>";
                }else {
                    s_email.innerHTML="邮箱错误";
                }
                return b
            }

            //QQ的校验
            function chackeqq() {
                ///is$/g;
                var regExp=/\d{7,10}$/g;;
                var qq = document.getElementById("qq").value;
                var b = regExp.test(qq);
                var s_qq = document.getElementById("s_qq");
                if (b){
                    s_qq.innerHTML="<img width='35' height='25' src='${pageContext.request.contextPath}/rightServlet'>";
                }else {
                    s_qq.innerHTML="联系方式错误";
                }
                return b
            }


        }
    </script>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post" id="form">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
            <span id="s_name" class="error"></span>
        </div>

        <div class="form-group">
            <label>性别：</label>
            <input type="radio" name="gender" value="男" checked="checked"/>男
            <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="请输入年龄">
            <span id="s_age" class="error"></span>
        </div>

        <div class="form-group">
            <label for="jiguan">籍贯：</label>
            <select name="address" class="form-control" id="jiguan">
                <option value="陕西">陕西</option>
                <option value="广西">广西</option>
                <option value="北京">北京</option>
                <option value="重庆">重庆</option>
            </select>
        </div>

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

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/>
            <span id="s_email" class="error"></span>
        </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" id="back_btn" value="返回"  />
        </div>
    </form>

3.4addUserServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserServiceImpl userService = new UserServiceImpl();
        //1\设置编码格式
        request.setCharacterEncoding("utf-8");
        //2\获取数据
        Map<String, String[]> userMap = request.getParameterMap();
        if (userMap!=null) {
            //3\封装数据
            User user = new User();
            try {
                BeanUtils.populate(user, userMap);
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            }

            //4\调用service完成操作
            userService.insertUser(user);
            //5\转发到list
            response.setStatus(302);
            response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
        }
    }

4.删除功能

4.1对单条记录的删除功能

4.1.1资源跳转图

4.1.2deleteUserServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserService userService= new UserServiceImpl();
        //1、获取参数
        String id = request.getParameter("id");
        //2、调用service 删除
        userService.deleteUserByid(id);
        //3、重定向listservlet
        response.setStatus(302);
        response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}

4.2选中一条记录或多条记录的删除功能

4.2.1删除选中资源跳转图

4.2.2jsp中添加的部分

<table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th><input type="checkbox" name="firstcb" id="firstcb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${requestScope.pb.list}" var="user" varStatus="s">
        <tr>
            <td><input type="checkbox" name="somecb" id="somecb" 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="${pageContext.request.contextPath}/echoUserServlet?id=${user.id}">修改</a>
                <a class="btn btn-default btn-sm" id="delect" href="javascript:mitdelect(${user.id});">删除</a>
            </td>

        </tr>
        </c:forEach>
        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="login.jsp">退出</a></td>
        </tr>
    </table>

[^1]以上对每一行都增加了一个复选框

4.2.2.1 全选/全不选

            document.getElementById("delectSelect").onclick=function () {
                var flag=false;
                var somecb = document.getElementsByName("somecb");
                for (var i = 0; i <somecb.length ; i++) {
                    if (somecb[i].checked){
                        flag=true;
                        break;
                    }
                }
                if (flag==true) {
                    if (confirm("您确定要删除么?")) {
                        document.getElementById("form_select_del").submit();
                    }
                }else {
                    alert("您当前未选择任何一元素删除！！")
                }
            }
            document.getElementById("firstcb").onclick=function () {
                var somecb = document.getElementsByName("somecb");
                //全选
                for (var i = 0; i < somecb.length; i++) {
                    somecb[i].checked=document.getElementById("firstcb").checked;
                }
            }

4.2.3deleteSelectServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserService userService = new UserServiceImpl();
        //1、获取id的数组
        String[] ids = request.getParameterValues("somecb");
        //2、调用userService 进行删除操作
        userService.deleteSomeUser(ids);
        //3、没有数据要共享 指定重定向到列表servlet
        response.setStatus(302);
        response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
    }

5 修改功能

5.1修改功能主页面

5.2资源跳转图

5.2.1修改前的用户信息回显

<tr>
            <td><input type="checkbox" name="somecb" id="somecb" 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="${pageContext.request.contextPath}/echoUserServlet?id=${user.id}">修改</a>
                <a class="btn btn-default btn-sm" id="delect" href="javascript:mitdelect(${user.id});">删除</a>
            </td>

        </tr>

先将user.id作为参数值发送请求到服务器 服务器拿到值 去查询 得到一个user对象 将这个对象放在request域对象中 ，然后在jsp中用el表达式进行显示

5.2.1.1echoUserServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserService userService = new UserServiceImpl();
        //1、获取参数
        String id = request.getParameter("id");
        //2、调用service查询一条记录
         User user = userService.selectOneUser(id);
         //设置域属性
        request.setAttribute("user",user);
        //要共享数据 请求转发
        request.getRequestDispatcher("/update.jsp").forward(request,response);
    }

5.2.2修改用户信息

5.2.2.1修改的jsp对用户的校验（与添加用户时一直）

5.2.2.2updateUserServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserService userService = new UserServiceImpl();
        //response.getWriter().write("this is UpdateUserServlet");
        //1、设置编码格式
        request.setCharacterEncoding("utf-8");
        //2、获取map
        Map<String, String[]> upmap = request.getParameterMap();
        //3、封装数据
        User user = new User();
        try {
            BeanUtils.populate(user,upmap);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //4、调用service中修改的方法

        userService.modifyUser(user);


        //5、妹有数据要共享 重定向到listservlet
        response.setStatus(302);
        response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}

6查询功能 练习中难点重点操作

6.1关于分页查询

6.1.1分页查询客户端与服务器之间输入 输出的数据图

6.1.2分页查询的资源跳转图

分析：
大的思路：先得到数据库中的所有的数据，然后在使用sql中limit语句进行取数据（limit的限制条件？？），然后和返回给客户端进行相应的显示
细节：
1、首先服务器先得到所有的数据的总量 totalCount；
2、然后进行分页的查询，limti的限制条件咋写？
limti ？，？：
第一个？：开始查询的索引
第二个？：每页显示的条数
这两个由客户端提供给服务器–>如何提供–>通过添加属性一个当前页面值（currentPage），一个为每页显示的值（这个可以是个常量rows）
limti ?(开始索引y),?(偏移量 x)
关于y和x的取值的一个公式
（currentPage-0）*x = y；
3、limit查出来的表格通过一个list容器放起来
4、关于总共显示几页totalPage；
totalPage = totalCount/rows （向上取整）

5、总结 以上关于分页查询的数据忒多==》将以上的数据封装在一个Pagebean标准类中

6.1.3关于分页查询中客户端与服务器端所需要的大量数据的提供一个封装类

package com.project.entity;

import java.util.List;

/**
 * @description:
 * @author: Sw_Ljb
 * @PACKAGE_NAME:com.project.entity
 * @time: 2022/5/19 上午9:30
 * @version: 1.0
 */

public class PageBean<T> {
    private int totalCount;
    private  int totalPage;
    private List<T> list;
    private int currentPage;
    private int rows;

    public PageBean() {
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }
}

6.1.4findUserByPageServlet

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        UserService userService = new UserServiceImpl();
        //1、接受请求参数
        String currentPage = request.getParameter("currentPage");
        if (currentPage==null||"".equals(currentPage)){
            currentPage="1";
        }
        String rows = request.getParameter("rows");
        if (rows==null||"".equals(rows)){
            rows="5";
        }
        if (Integer.parseInt(currentPage)<=0){
            currentPage="1";
        }

        //1.2接受查询条件
        Map<String, String[]> parameterMap = request.getParameterMap();
        //System.out.println(parameterMap.size());
        //Set<String> keySet = parameterMap.keySet();
        //for (String key : keySet) {
        //    String[] strings = parameterMap.get(key);
        //    for (String value : strings) {
        //        System.out.println(value);
        //    }
        //}
        //2、嗲用service查询pageBean

        PageBean<User> pb = userService.findUserByPage(currentPage,rows,parameterMap);
        //3、设置域对象
        //System.out.println(pb);
        request.setAttribute("pb",pb);
        request.setAttribute("parameterMap",parameterMap);
        //4、有数据要共享 请求转发
        request.getRequestDispatcher("/list.jsp").forward(request,response);


    }

6.2关于复杂分页查询（关于查询的输入框 输入查询一个或多个条件的查询）

6.2关于复杂查询的资源跳转图

分析
1、3个筛选条件–>查询的时候–>莫些值可以不填，只查任意单个/或两个筛选条件–>sql的动态拼接
2、sql的动态拼接？？
1、三个筛选条件：先从客户端得到输入了啥（放到map中 然后根据key取判断值（如果有不需要的key就判断他有，然后用continue退出当前循环
eg：
if (“currentPage”.equals(key) || “rows”.equals(key)) {
continue;
}

） ），然后判NULL以及判是否为空字符串，是的话不添加到sql语句中，不是的话用个集合将不为空字符串的value装起来 ，然后在执行sql的时候 注意要执行条件添加后的，然后将那个集合转为数组，因为可变参数本质上就是一个数组
2、如何添加？
String sql=“select * from user where 1 = 1”；
StringBuilder sb = new StringBuilder(sql);
if (value != null && !“”.equals(value)) {
sb.append(" and " + key + " like ?“);
params.add(”%“+value+”%");
}
3、得到筛选后的list后 同样适用分页查询的方法 进行显示

文件包
https://gitee.com/sw-ljb/manage-user.git