中软国际暑期实习day05(2020.08.14)-整合SSM项目(分页查询)

前一天实现了“登录”和“注册”功能,今天实现“分页查询”“修改或删除用户信息”以及有关过滤器的有关功能。

参考文章:

1.准备工作

(1)新建分页实体类(PageInfo.java)

package com.example.bean;

import java.util.List;

/**
 * @className: PageInfo
 * @description: 分页实体类
 * @author:
 * @date: 14/08/2020 09:46
 */
public class PageInfo<T> {
    /**
     * 每一页数据
     */
    private List<T> list;

    /**
     * 总页数
     */
    private int totalPage;

    /**
     * 总数据量
     */
    private int totalCount;

    /**
     * 每页数据量
     */
    private int size;

    /**
     * 当前页数
     */
    private int currentPage;


    public PageInfo() {
    }

    public PageInfo(List<T> list, int totalPage, int totalCount, int size, int currentPage) {
        this.list = list;
        this.totalPage = totalPage;
        this.totalCount = totalCount;
        this.size = size;
        this.currentPage = currentPage;
    }

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

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

    public int getTotalPage() {
        return totalPage;
    }

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

    public int getTotalCount() {
        return totalCount;
    }

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

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public int getCurrentPage() {
        return currentPage;
    }

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

    @Override
    public String toString() {
        return "PageInfo{" +
                "list=" + list +
                ", totalPage=" + totalPage +
                ", totalCount=" + totalCount +
                ", size=" + size +
                ", currentPage=" + currentPage +
                '}';
    }
}

(2)完善实体类数据访问对象接口(IUserDao.java)

package com.example.dao;

import com.example.bean.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface IUserDao {
    /**
     * 检查用户名及密码
     * @param username
     * @param password
     * @return
     */
    User checkUser(@Param("username") String username, @Param("password") String password);

    /**
     * 保存用户名及密码
     * @param username
     * @param password
     * @return
     */
    int saveUser(@Param("username") String username, @Param("password") String password,@Param("age") int age);

    int deleteById(int id);

    User findById(int id);

    int update(User user);

    int getTotal(String username);

    List<User> findAllByPage(@Param("start") int start, @Param("size") int size,
                             @Param("username") String username);
}

(3)完善实体类数据库映射文件(UserDao.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.example.dao.IUserDao">
    <select id="checkUser" resultType="com.example.bean.User">
        select *
        from whut02.t_user
        where username = #{username}
          and password = #{password}
    </select>

    <insert id="saveUser" parameterType="String">
        insert into whut02.t_user (username, password, age)
        values (#{username}, #{password}, ${age})
    </insert>


    <delete id="deleteById" parameterType="int">
        delete
        from whut02.t_user
        where id = #{id}
    </delete>

    <select id="findById" parameterType="int" resultType="com.example.bean.User">
        select *
        from whut02.t_user
        where id = #{id}
    </select>

    <update id="update" parameterType="com.example.bean.User">
        update whut02.t_user
        set username=#{username},
            password=#{password},
            age=#{age}
        where id = #{id}
    </update>

    <select id="getTotal" resultType="int">
        select count(*) from whut02.t_user
        <if test="username != null and username !=''">
            where username like concat('%', #{username}, '%')
        </if>
    </select>

    <select id="findAllByPage" parameterType="int" resultType="com.example.bean.User">
        select * from whut02.t_user
        <if test="username != null and username !=''">
            where username like concat('%', #{username}, '%')
        </if>
        limit #{start}, #{size}
    </select>

</mapper>

(4)完善业务层接口及其实现类

  • IUserService.java
package com.example.service;

import com.example.bean.PageInfo;
import com.example.bean.User;

import java.util.List;

/**
 * 用户业务层接口
 */
public interface IUserService {
    /**
     * 登录
     *
     * @param username
     * @param password
     * @return
     */
    User login(String username, String password);

    /**
     * 注册
     *
     * @param username
     * @param password
     * @param age
     * @return
     */
    int register(String username, String password, int age);

    int deleteById(int id);

    User findById(int id);

    int update(User user);

    /**
     * 条件查询 分页全查
     * @param page
     * @param size
     * @param username
     * @return
     */
    PageInfo<User> findAllByPage(int page, int size, String username);
}

  • UserServiceImpl.java
package com.example.service.impl;

import com.example.bean.PageInfo;
import com.example.bean.User;
import com.example.dao.IUserDao;
import com.example.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @className: UserServiceImpl
 * @description:
 * @author:
 * @date: 12/08/2020 16:19
 */
@Service
public class UserServiceImpl implements IUserService {
    /**
     * Autowired 自动注入  将类从IOC容器中取出
     */
    @Autowired
    IUserDao userDao;

    /**
     * 登录
     *
     * @param username
     * @param password
     * @return
     */
    @Override
    public User login(String username, String password) {
        return userDao.checkUser(username, password);
    }

    /**
     * 注册
     *
     * @param username
     * @param password
     * @param age
     * @return
     */
    @Override
    public int register(String username, String password, int age) {
        return userDao.saveUser(username, password, age);
        /*return userDao.saveUser2(new User(0,username,password,age));*/
    }

    @Override
    public int deleteById(int id) {
        return userDao.deleteById(id);
    }

    @Override
    public User findById(int id) {
        return userDao.findById(id);
    }

    @Override
    public int update(User user) {
        return userDao.update(user);
    }

    /**
     * 条件查询 分页全查
     *
     * @param page
     * @param size
     * @param username
     * @return
     */
    @Override
    public PageInfo<User> findAllByPage(int page, int size, String username) {
        PageInfo<User> pageInfo = new PageInfo<>();
        // 完善pageinfo 的属性值

        // 指定每页的数据量
        pageInfo.setSize(size);

        // 指定总数据量
        int totalCount = userDao.getTotal(username);
        pageInfo.setTotalCount(totalCount);

        // 指定总页数  Math java中的内置对象    ceil 向上取整   floor 向下取整  round 四舍五入
        int totalPage = (int) Math.ceil((totalCount / (double)size));
        pageInfo.setTotalPage(totalPage);

        // 判断当前页是否合理
        if (page < 1) {
            pageInfo.setCurrentPage(1);
        } else if (page > totalPage) {
            pageInfo.setCurrentPage(totalPage);
        } else {
            pageInfo.setCurrentPage(page);
        }

        // 指定当前页的数据    实质就是指定sql语句中的两个参数
        int start = (pageInfo.getCurrentPage() - 1) * pageInfo.getSize();
        List<User> list = userDao.findAllByPage(start, pageInfo.getSize(), username);
        pageInfo.setList(list);

        return pageInfo;
    }


}

(5)完善控制器类(Handler.java)

package com.example.controller;

import com.example.bean.PageInfo;
import com.example.bean.Role;
import com.example.bean.User;
import com.example.service.IRoleService;
import com.example.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;

/**
 * @className: Handler
 * @description: 控制器类
 * @author:
 * @date: 12/08/2020 16:23
 */
@Controller
@RequestMapping("/users")
public class Handler {
    @Autowired
    IUserService userService;

    @Autowired
    IRoleService roleService;

    @RequestMapping("/findAll") // 表示  当访问到 /users/findAll 就映射到 findAll方法上
    public ModelAndView findAll() {
        // ModelAndView  数据视图
        ModelAndView mv = new ModelAndView();
        // 指定视图
        mv.setViewName("index");
        mv.addObject("list", userService.findAll());
        return mv;
    }

    @PostMapping("/login.do")
    public String login(String username, String password, HttpSession session) {
        System.out.println(username + "     " + password);
        // 对用户名以及密码进行校验
        User user = userService.login(username, password);
        if (user == null) {
            System.out.println("登录失败");
            return "pages/failer";
        } else {
            System.out.println("登录成功");
            // 需求   将用户名回显到登录成功的页面上    Session
            // 将用户信息存储到session中
            session.setAttribute("username", username);
            return "pages/success";
        }
    }

    @PostMapping("/register.do")
    public String register(String username, String password, int age) {

        int registerFlag = userService.register(username, password, age);

        if (registerFlag == 0) {
            System.out.println("注册失败");
            return "pages/register_failure";
        } else {
            System.out.println("注册成功");

            return "pages/login";

        }

    }

    @GetMapping("/delete.do")
    public String delete(int id) {
        userService.deleteById(id);

        return "redirect:findAll02.do";
    }

    /**
     * 预更新操作  跳转到新页面  将当前用户数据进行展示
     *
     * @param id
     * @return ModelAndView
     */
    @GetMapping("/toUpdate.do")
    public ModelAndView toUpdate(int id) {

        User user = userService.findById(id);

        ModelAndView mv = new ModelAndView();
        mv.setViewName("/pages/user-update");
        mv.addObject("user", user);
        return mv;
    }


    /**
     * 更新操作
     *
     * @param user
     * @return
     */
    @PostMapping("/update.do")
    public String update(User user) {
        int flag = userService.update(user);
        System.out.println(flag);
        return "redirect:findAll02.do";
    }

    /**
     * 带查询条件的分页查询
     *
     * @param currentPage
     * @param flag
     * @param username
     * @param session
     * @return ModelAndView
     */
    @RequestMapping("/findAll02.do")
    public ModelAndView index02(@RequestParam(defaultValue = "1") int currentPage,
                                @RequestParam(defaultValue = "0") int flag,
                                String username, HttpSession session) {
        // 判断此次请求是否是条件查询
        if (flag == 1) {
            System.out.println("条件查询");
            session.setAttribute("keywords", username);
        } else {
            System.out.println("不是条件查询");
            session.setAttribute("keywords", null);
        }

        int size = 5;
        PageInfo<User> pageInfo = userService.findAllByPage(currentPage, size, username);
        System.out.println(pageInfo);
        ModelAndView mv = new ModelAndView();
        mv.setViewName("pages/datalist");
        mv.addObject("pageInfo", pageInfo);
        return mv;
    }

}

2.分页查看用户信息

(1)在webapp/pages新建用户信息查看页面(datalist.jsp)

<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>武汉理工</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- iCheck -->
    <!-- Morris chart -->
    <!-- jvectormap -->
    <!-- Date Picker -->
    <!-- Daterange picker -->
    <!-- Bootstrap time Picker -->
    <!--<link rel="stylesheet" href="${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.css">-->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--数据表格-->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- Bootstrap Color Picker -->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--bootstrap-markdown-->
    <!-- Theme style -->
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <!-- Ion Slider -->
    <!-- ion slider Nice -->
    <!-- bootstrap slider -->
    <!-- bootstrap-datetimepicker -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery 2.2.3 -->
    <!-- jQuery UI 1.11.4 -->
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <!-- Bootstrap 3.3.6 -->
    <!-- Morris.js charts -->
    <!-- Sparkline -->
    <!-- jvectormap -->
    <!-- jQuery Knob Chart -->
    <!-- daterangepicker -->
    <!-- datepicker -->
    <!-- Bootstrap WYSIHTML5 -->
    <!-- Slimscroll -->
    <!-- FastClick -->
    <!-- iCheck -->
    <!-- AdminLTE App -->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- bootstrap color picker -->
    <!-- bootstrap time picker -->
    <!--<script src="${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.js"></script>-->
    <!-- Bootstrap WYSIHTML5 -->
    <!--bootstrap-markdown-->
    <!-- CK Editor -->
    <!-- InputMask -->
    <!-- DataTables -->
    <!-- ChartJS 1.0.1 -->
    <!-- FLOT CHARTS -->
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <!-- jQuery Knob -->
    <!-- Sparkline -->
    <!-- Morris.js charts -->
    <!-- Ion Slider -->
    <!-- Bootstrap slider -->
    <!-- bootstrap-datetimepicker -->
    <!-- 页面meta /-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper">

    <!-- 页面头部 -->
    <jsp:include page="header.jsp"/>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <jsp:include page="aside.jsp"/>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <!-- @@master = admin-layout.html-->
    <!-- @@block = content -->

    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                数据管理
                <small>数据列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">数据管理</a></li>
                <li class="active">数据列表</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">列表</h3>
                </div>

                <div class="box-body">

                    <!-- 数据表格 -->
                    <div class="table-box">

                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建"><i
                                            class="fa fa-file-o"></i> 新建
                                    </button>
                                    <button type="button" class="btn btn-default" title="删除"><i
                                            class="fa fa-trash-o"></i> 删除
                                    </button>
                                    <button type="button" class="btn btn-default" title="开启"><i class="fa fa-check"></i>
                                        开启
                                    </button>
                                    <button type="button" class="btn btn-default" title="屏蔽"><i class="fa fa-ban"></i>
                                        屏蔽
                                    </button>
                                    <button type="button" class="btn btn-default" title="刷新"><i
                                            class="fa fa-refresh"></i> 刷新
                                    </button>
                                </div>
                            </div>
                        </div>

                        <form action="${pageContext.request.contextPath}/users/findAll02.do?flag=1" method="post">
                            <div class="col-md-3 data">
                                <label>
                                    <input type="text" class="form-control input-sm" placeholder="用户名" name="username"
                                           value="${sessionScope.keywords}">
                                </label>
                            </div>
                            <button type="submit" class="btn bg-maroon">搜索</button>

                        </form>

                        <!--工具栏/-->

                        <!--数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <label for="selall"></label><input id="selall" type="checkbox"
                                                                       class="icheckbox_square-blue">
                                </th>
                                <th class="sorting_asc">ID</th>
                                <th class="sorting_desc">用户名</th>
                                <th class="sorting_asc sorting_asc_disabled">密码</th>
                                <th class="sorting_desc sorting_desc_disabled">年龄</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <%-- 需要对 后台传递的 list集合进行遍历展示 --%>
                            <%-- c:foreach 遍历标签--%>
                            <c:forEach items="${pageInfo.list}" var="user">
                                <tr>
                                    <td><label>
                                        <input name="ids" type="checkbox">
                                    </label></td>
                                    <td>${user.id}</td>
                                    <td>${user.username}</td>
                                    <td>${user.password}</td>
                                    <td>${user.age}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn bg-olive btn-xs">详情</button>
                                        <a href="${pageContext.request.contextPath}/users/toUpdate.do?id=${user.id}"
                                           class="btn bg-olive btn-xs">编辑</a>
                                        <a href="${pageContext.request.contextPath}/users/delete.do?id=${user.id}"
                                           class="btn bg-olive btn-xs">删除</a>

                                            <%-- 判断 当前用户 是否为管理员 若是管理员 就增加权限选项 --%>
                                            <%-- 在<% %> 可以写java代码 --%>
                                        <% List<Integer> roleIds = (List<Integer>) session.getAttribute("roleIds"); %>
                                        <% if (roleIds.contains(1)) {%>
                                        <a href="${pageContext.request.contextPath}/users/toAddRole.do?username=${user.username}"
                                           class="btn bg-olive btn-xs">添加角色</a>
                                        <% }%>
                                    </td>
                                </tr>
                            </c:forEach>

                            </tbody>
                        </table>
                        <!--数据列表/-->


                    </div>
                    <!-- 数据表格 /-->


                </div>
                <!-- /.box-body -->

                <!-- .box-footer-->
                <div class="box-footer">
                    <div class="pull-left">
                        <div class="form-group form-inline">
                            总共${pageInfo.totalPage} 页,共${pageInfo.totalCount} 条数据。 每页
                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select> 条
                        </div>
                    </div>

                    <div class="box-tools pull-right">
                        <ul class="pagination">
                            <li>
                                <a href="${pageContext.request.contextPath}/users/findAll02.do?currentPage=1"
                                   aria-label="Previous">首页</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/users/findAll02.do?currentPage=${pageInfo.currentPage - 1}">上一页</a>
                            </li>

                            <c:forEach begin="1" end="${pageInfo.totalPage}" var="pageNum">
                                <li>
                                    <a href="${pageContext.request.contextPath}/users/findAll02.do?currentPage=${pageNum}">${pageNum}</a>
                                </li>
                            </c:forEach>

                            <li>
                                <a href="${pageContext.request.contextPath}/users/findAll02.do?currentPage=${pageInfo.currentPage + 1}">下一页</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/users/findAll02.do?currentPage=${pageInfo.totalPage}"
                                   aria-label="Next">尾页</a>
                            </li>
                        </ul>
                    </div>

                </div>
                <!-- /.box-footer-->


            </div>

        </section>
        <!-- 正文区域 /-->

    </div>
    <!-- @@close -->
    <!-- 内容区域 /-->


</div>


<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
<script src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
<script src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
<script src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
<script src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
<script src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    $(document).ready(function () {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });


    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }


    $(document).ready(function () {

        // 激活导航位置
        setSidebarActive("admin-datalist");

        // 列表按钮
        $("#dataList td input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
        // 全选操作
        $("#selall").click(function () {
            var clicks = $(this).is(':checked');
            if (!clicks) {
                $("#dataList td input[type='checkbox']").iCheck("uncheck");
            } else {
                $("#dataList td input[type='checkbox']").iCheck("check");
            }
            $(this).data("clicks", !clicks);
        });
    });
</script>
</body>

</html>

(2)验证分页查看用户信息

登录成功后,点击“数据管理”下的“用户管理”:

即可出现以下页面:

用户信息已被分页查询成功。

3.更新用户信息

(1)在webapp/pages新建用户更新用户信息页面(user-update.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">

    <!-- Tell the browser to be responsive to screen width -->
    <meta
            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
            name="viewport">


    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper">

    <!-- 页面头部 -->
    <jsp:include page="header.jsp"/>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <jsp:include page="aside.jsp"/>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                用户管理 <small>用户表单</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i
                        class="fa fa-dashboard"></i> 首页</a></li>
                <li><a
                        href="#">用户管理</a></li>
                <li class="active">用户表单</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <form action="${pageContext.request.contextPath}/users/update.do" method="post">
            <!-- 正文区域 -->
            <section class="content"> <!--产品信息-->

                <div class="panel panel-default">
                    <div class="panel-heading">用户信息</div>
                    <div class="row data-type">
                        <div class="col-md-2 title">id</div>
                        <div class="col-md-4 data">
                            <label>
                                <input type="text" class="form-control" name="id"
                                       placeholder="id" value="${user.id}">
                            </label>
                        </div>

                        <div class="col-md-2 title">用户名称</div>
                        <div class="col-md-4 data">
                            <label>
                                <input type="text" class="form-control" name="username"
                                       placeholder="用户名称" value="${user.username}">
                            </label>
                        </div>
                        <div class="col-md-2 title">密码</div>
                        <div class="col-md-4 data">
                            <label>
                                <input type="password" class="form-control" name="password"
                                       placeholder="密码" value="${user.password}">
                            </label>
                        </div>
                        <div class="col-md-2 title">年龄</div>
                        <div class="col-md-4 data">
                            <label>
                                <input type="text" class="form-control" name="age"
                                       placeholder="年龄" value="${user.age}">
                            </label>
                        </div>


                    </div>
                </div>
                <!--订单信息/--> <!--工具栏-->
                <div class="box-tools text-center">
                    <button type="submit" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default"
                            οnclick="history.back(-1);">返回
                    </button>
                </div>
                <!--工具栏/--> </section>
            <!-- 正文区域 /-->
        </form>
    </div>
    <!-- 内容区域 /-->


</div>


<script
        src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>

<script>
    $(document).ready(function () {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });

    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }
</script>


</body>

</html>

(2)验证更新用户信息

我们这里来修改“zhangsan01”这名用户的“用户名”“密码”“年龄”。

登录成功后在用户信息展示列表画面点击“编辑”:

弹出以下页面:

然后输入相应的数据,点击“保存”按钮即可。

然后会返回到用户列表界面,可以看到之前“zhangan01”用户的相关信息已经修改成功。

4.删除用户

我们这里选择删除“tom”用户。

登录成功后在用户信息展示列表画面点击“删除”:

便可发现已删除成功。

5.过滤器

(1)过滤器(filter)简介

过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改、判断等,把不符合规则的请求在中途拦截或修改。也可以对响应进行过滤,拦截或修改响应。

我们可以使用过滤器来处理一些请求,以达到控制访问权限的目的。

在这里,我们不希望用户不登录便可查看用户列表信息,因此我们可以新建一个过滤器来拦截一些未登录却想访问用户列表的信息。

(2)新建登录过滤器

com.example.filter.LoginFilter.java

package com.example.filter;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * @className: LoginFilter
 * @description:
 * @author:
 * @date: 16/08/2020 08:38
 */
public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("过滤器初始化");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse,
                         FilterChain filterChain) throws IOException, ServletException {

        System.out.println("过滤器执行");
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;

        // 登录成功后 会将用户信息存储到session中
        // 需求分析  判断session中是否存在用户信息   若存在 就执行下一环节  不存在则返回登录页面
        HttpSession session = request.getSession();
        String username = (String) session.getAttribute("username");

        // 获得请求路径 判断路径是否与登录相关
        // indexOf  字符串方法  判断当前字符串中是否包含子串 如果包含 就返回子串的索引 ,不包含则返回-1
        // 返回一个字符串  getURL返回一个StringBuffer
        String uri = request.getRequestURI();
        //StringBuffer url = request.getRequestURL();
        /*System.out.println("uri" + uri);
        System.out.println("url" + url);*/

        if (username == null && !uri.contains("login.do")) {
//            System.out.println("未登录");
            // getContextPath 返回项目路径
            response.sendRedirect(request.getContextPath()+ "/pages/login.jsp");
        } else {
//            System.out.println("登录信息存在");
            filterChain.doFilter(request, response);
        }

    }

    @Override
    public void destroy() {
        System.out.println("过滤器的销毁");
    }
}

(3)在web.xml文件中配置登录过滤器

<!-- 配置登录过滤器 -->
    <filter>
        <filter-name>loginFilter</filter-name>
        <filter-class>com.example.filter.LoginFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>loginFilter</filter-name>
        <url-pattern>*.do</url-pattern>
    </filter-mapping>

(4)验证登录过滤器功能

不登陆直接访问http://localhost:8090/ssm_demo01_war/users/findAll02.do会发现它会自动跳转到登录界面。

总结

  • 分页查询的本质是利用mysql的limit语法,在select语句中加入limit以来返回指定的几行的查询数据。
    • limit接受一个或两个数字参数。参数必须是一个整数常量。如果给定两个参数,第一个参数指定第一个返回记录行的偏移量,第二个参数指定返回记录行的最大数目。初始记录行的偏移量是 0(而不是 1)。
  • 过滤器可以拦截一些请求以达到控制访问权限的目的。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值