SpringBoot学习笔记五之管理员后台维护

注：图片如果损坏，点击文章链接：https://www.toutiao.com/i6803544440112677379/

首先完成分页

引入PageHelper(之前已经添加过了)

在spring-persist-mybatis.xml配置PageHelper插件

找到AdminMapper.xml完成代码

完成selectAdminByKeyword

AdminMapper接口中声明方法

AdminService接口中添加方法

具体实现

AdminHandler中添加的方法

准备admin-page.jsp

添加代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<body>
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="glyphicon glyphicon-th"></i> 数据列表
</h3>
</div>
<div class="panel-body">
<form class="form-inline" role="form" style="float: left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input class="form-control has-success" type="text"
placeholder="请输入查询条件">
</div>
</div>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
</form>
<button type="button" class="btn btn-danger"
style="float: right; margin-left: 10px;">
<i class=" glyphicon glyphicon-remove"></i> 删除
</button>
<button type="button" class="btn btn-primary"
style="float: right;" onclick="window.location.href='add.html'">
<i class="glyphicon glyphicon-plus"></i> 新增
</button>
<br>
<hr style="clear: both;">
<div class="table-responsive">
<table class="table  table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>账号</th>
<th>名称</th>
<th>邮箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${empty requestScope.pageInfo.list }">
<tr>
<td colspan="6" align="center">抱歉！没有查询到您要的数据！</td>
</tr>
</c:if>
<c:if test="${!empty requestScope.pageInfo.list }">
<c:forEach items="${requestScope.pageInfo.list }" var="admin" varStatus="myStatus">
<tr>
<td>${myStatus.count }</td>
<td><input type="checkbox"></td>
<td>${admin.loginAcct }</td>
<td>${admin.userName }</td>
<td>${admin.email }</td>
<td>
<button type="button" class="btn btn-success btn-xs">
<i class=" glyphicon glyphicon-check"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class=" glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-xs">
<i class=" glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<ul class="pagination">
<li class="disabled"><a href="#">上一页</a></li>
<li class="active"><a href="#">1 <span
class="sr-only">(current)</span></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="#">下一页</a></li>
</ul>
</td>
</tr>
 
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

运行查看下

分页导航条

加入pagination的环境

引入

<script type="text/javascript">
 
$(function(){
 
// 调用后面声明的函数对页码导航条进行初始化操作
initPagination();
 
});
 
// 生成页码导航条的函数
function initPagination() {
 
// 获取总记录数
var totalRecord = ${requestScope.pageInfo.total};
 
// 声明一个JSON对象存储Pagination要设置的属性
var properties = {
num_edge_entries: 3,                                                                 // 边缘页数
num_display_entries: 5,                                                              // 主体页数
callback: pageSelectCallback,                                                    // 指定用户点击“翻页”的按钮时跳转页面的回调函数
items_per_page: ${requestScope.pageInfo.pageSize},       // 每页要显示的数据的数量
current_page: ${requestScope.pageInfo.pageNum - 1},     // Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
prev_text: "上一页",                                                                            // 上一页按钮上显示的文本
next_text: "下一页"                                                                             // 下一页按钮上显示的文本
};
 
// 生成页码导航条
$("#Pagination").pagination(totalRecord, properties);
 
}
 
// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
// pageIndex是Pagination传给我们的那个“从0开始”的页码
function pageSelectCallback(pageIndex, jQuery) {
 
// 根据pageIndex计算得到pageNum
var pageNum = pageIndex + 1;
 
// 跳转页面
window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
 
// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
return false;
}
 
</script>

替换

有个地方我们注释一下jquery.pagination.js中

带上关键字进行查询，在admin-page.jsp中

翻页时保持查询条件

点击删除

调整删除按钮

代码

<a href="admin/remove/${admin.id }/${requestScope.pageInfo.pageNum }/${param.keyword }.html" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></a>

编辑handler

添加remove方法（service、serviceimpl）

测试成功

新增

跳转表单页面

之前数据库账户没有加唯一索引，修改下表

ALTER TABLE `t_admin` ADD UNIQUE INDEX(`login_acct`)

调整按钮admin-page.jsp

添加mvc:view-controller

添加页面admin-add.jsp

添加代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
 
<body>
 
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="/admin/to/main/page.html">首页</a></li>
<li><a href="/admin/get/page.html">数据列表</a></li>
<li class="active">新增</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
表单数据
<div style="float: right; cursor: pointer;" data-toggle="modal"
data-target="#myModal">
<i class="glyphicon glyphicon-question-sign"></i>
</div>
</div>
<div class="panel-body">
<form action="admin/save.html" method="post" role="form">
<p>${requestScope.exception.message }</p>
<div class="form-group">
<label for="exampleInputPassword1">登录账号</label>
<input
         name="loginAcct"
         type="text" class="form-control" id="exampleInputPassword1"
         placeholder="请输入登录账号">
</div>
<div class="form-group">
<label for="exampleInputPassword1">登录密码</label>
<input
         name="userPswd"
         type="text" class="form-control" id="exampleInputPassword1"
         placeholder="请输入登录密码">
</div>
<div class="form-group">
<label for="exampleInputPassword1">用户昵称</label>
<input
         name="userName"
         type="text" class="form-control" id="exampleInputPassword1"
         placeholder="请输入用户名称">
</div>
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email"
         name="email"
         class="form-control" id="exampleInputEmail1"
         placeholder="请输入邮箱地址">
<p class="help-block label label-warning">请输入合法的邮箱地址, 格式为：
         xxxx@xxxx.com</p>
</div>
<button type="submit" class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i> 新增
</button>
<button type="reset" class="btn btn-danger">
<i class="glyphicon glyphicon-refresh"></i> 重置
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

编写handler方法

完成service方法

添加LoginAcctAlreadyInUseException

测试下

更新和新增的思路一致

修改按钮

<a href="admin/to/edit/page.html?adminId=${admin.id }&pageNum=${requestScope.pageInfo.pageNum }&keyword=${param.keyword }" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></a>

添加页面

页面内容

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
 
<body>
 
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="/admin/to/main/page.html">首页</a></li>
<li><a href="/admin/get/page.html">数据列表</a></li>
<li class="active">更新</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
表单数据
<div style="float: right; cursor: pointer;" data-toggle="modal"
data-target="#myModal">
<i class="glyphicon glyphicon-question-sign"></i>
</div>
</div>
<div class="panel-body">
<form action="admin/update.html" method="post" role="form">
<input type="hidden" name="id" value="${requestScope.admin.id }" />
<input type="hidden" name="pageNum" value="${param.pageNum }" />
<input type="hidden" name="keyword" value="${param.keyword }" />
<p>${requestScope.exception.message }</p>
<div class="form-group">
<label for="exampleInputPassword1">登录账号</label>
<input
name="loginAcct"
value="${requestScope.admin.loginAcct }"
type="text" class="form-control"
id="exampleInputPassword1" placeholder="请输入登录账号">
</div>
<div class="form-group">
<label for="exampleInputPassword1">用户昵称</label>
<input
name="userName"
value="${requestScope.admin.userName }"
type="text" class="form-control"
id="exampleInputPassword1" placeholder="请输入用户名称">
</div>
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email"
name="email"
value="${requestScope.admin.email }" class="form-control" id="exampleInputEmail1"
placeholder="请输入邮箱地址">
<p class="help-block label label-warning">请输入合法的邮箱地址, 格式为：
xxxx@xxxx.com</p>
</div>
<button type="submit" class="btn btn-success">
<i class="glyphicon glyphicon-edit"></i> 更新
</button>
<button type="reset" class="btn btn-danger">
<i class="glyphicon glyphicon-refresh"></i> 重置
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

编写handler方法

添加业务方法

同样添加LoginAcctAlreadyInUseForUpdateException

测试下

Admin-page.jsp所有代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
 
$(function(){
 
// 调用后面声明的函数对页码导航条进行初始化操作
initPagination();
 
});
 
// 生成页码导航条的函数
function initPagination() {
 
// 获取总记录数
var totalRecord = ${requestScope.pageInfo.total};
 
// 声明一个JSON对象存储Pagination要设置的属性
var properties = {
num_edge_entries: 3,                                                                 // 边缘页数
num_display_entries: 5,                                                              // 主体页数
callback: pageSelectCallback,                                                    // 指定用户点击“翻页”的按钮时跳转页面的回调函数
items_per_page: ${requestScope.pageInfo.pageSize},       // 每页要显示的数据的数量
current_page: ${requestScope.pageInfo.pageNum - 1},     // Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
prev_text: "上一页",                                                                            // 上一页按钮上显示的文本
next_text: "下一页"                                                                             // 下一页按钮上显示的文本
};
 
// 生成页码导航条
$("#Pagination").pagination(totalRecord, properties);
 
}
 
// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
// pageIndex是Pagination传给我们的那个“从0开始”的页码
function pageSelectCallback(pageIndex, jQuery) {
 
// 根据pageIndex计算得到pageNum
var pageNum = pageIndex + 1;
 
// 跳转页面
window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
 
// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
return false;
}
 
</script>
<body>
 
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="glyphicon glyphicon-th"></i> 数据列表
</h3>
</div>
<div class="panel-body">
<form action="admin/get/page.html" method="post" class="form-inline" role="form" style="float: left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input name="keyword" class="form-control has-success" type="text"
placeholder="请输入查询条件">
</div>
</div>
<button type="submit" class="btn btn-warning">
<i class="glyphicon glyphicon-search"></i> 查询
</button>
</form>
<button type="button" class="btn btn-danger"
style="float: right; margin-left: 10px;">
<i class=" glyphicon glyphicon-remove"></i> 删除
</button>
<!--
旧代码
<button type="button" class="btn btn-primary"
style="float: right;" onclick="window.location.href='add.html'">
<i class="glyphicon glyphicon-plus"></i> 新增
</button> -->
<!-- 新代码 -->
<a style="float: right;" href="admin/to/add/page.html" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> 新增</a>
<br>
<hr style="clear: both;">
<div class="table-responsive">
<table class="table  table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>账号</th>
<th>名称</th>
<th>邮箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${empty requestScope.pageInfo.list }">
<tr>
<td colspan="6" align="center">抱歉！没有查询到您要的数据！</td>
</tr>
</c:if>
<c:if test="${!empty requestScope.pageInfo.list }">
<c:forEach items="${requestScope.pageInfo.list }" var="admin" varStatus="myStatus">
<tr>
<td>${myStatus.count }</td>
<td><input type="checkbox"></td>
<td>${admin.loginAcct }</td>
<td>${admin.userName }</td>
<td>${admin.email }</td>
<td>
<button type="button" class="btn btn-success btn-xs">
<i class=" glyphicon glyphicon-check"></i>
</button>
<!-- 旧代码 -->
<!-- <button type="button" class="btn btn-primary btn-xs">
<i class=" glyphicon glyphicon-pencil"></i>
</button> -->
<!-- 新代码 -->
<a href="admin/to/edit/page.html?adminId=${admin.id }&pageNum=${requestScope.pageInfo.pageNum }&keyword=${param.keyword }" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></a>
<a href="admin/remove/${admin.id }/${requestScope.pageInfo.pageNum }/${param.keyword }.html" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></a>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

SpringBoot学习笔记五之管理员后台维护的更多相关文章

SpringBoot学习笔记（十一：使用MongoDB存储文件）
@ 目录一.MongoDB存储文件 1.MongoDB存储小文件 2.MongoDB存储大文件 2.1.GridFS存储原理 2.2.GridFS使用 2.2.1.使用shell命令 2.2.2.使 ...
（转）Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类概念在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
Springboot学习笔记（六）-配置化注入
前言前面写过一个Springboot学习笔记(一)-线程池的简化及使用,发现有个缺陷,打个比方,我这个线程池写在一个公用服务中,各项参数都定死了,现在有两个服务要调用它,一个服务的线程数通常很多,而 ...
ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
Linux学习笔记(五) 账号管理
1.用户与组账号用户账号:包括实际人员和逻辑性对象(例如应用程序执行特定工作的账号) 每一个用户账号包含一个唯一的用户 ID 和组 ID 标准用户是系统安装过程中自动创建的用户账号,其中除 root ...
springboot学习笔记：9.springboot+mybatis+通用mapper+多数据源
本文承接上一篇文章:springboot学习笔记:8. springboot+druid+mysql+mybatis+通用mapper+pagehelper+mybatis-generator+fre ...
C#可扩展编程之MEF学习笔记(五)：MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
SpringBoot学习笔记
SpringBoot个人感觉比SpringMVC还要好用的一个框架,很多注解配置可以非常灵活的在代码中运用起来: springBoot学习笔记: .一.aop: 新建一个类HttpAspect,类上添 ...

随机推荐

C++内存管理：简易内存池的实现
什么是内存池? 在上一篇 C++内存管理:new / delete 和 cookie中谈到,频繁的调用 malloc 会影响运行效率以及产生额外的 cookie, 而内存池的思想是预先申请一大块内存, ...
pipeline groovy
目录一.变量一.变量 1.直接定义 def x="abc" 2.从脚本执行结果赋值变量 branch = "/jen_script/return-branch.sh ...
Docker 快速删除无用（none）镜像
Dockerfile 代码更新频繁,自然docker build构建同名镜像也频繁的很,产生了众多名为none的无用镜像. 分别执行以下三行可清除 docker ps -a | grep " ...
CF1006B Polycarp's Practice 题解
Content 给定一个长度为 \(n\) 的数列,试将其分成 \(k\) 段,使得每一段中的最大值的和最大. 数据范围:\(1\leqslant k,n,a_i\leqslant 2000\). S ...
CF1437A Marketing Scheme 题解
Content 有 \(t\) 组询问,每组询问给定两个整数 \(l,r\),问是否存在一个 \(a\),使得 \(\forall x\in[l,r]\),都有 \(x\mod a\geqslant\ ...
Tornado 异步浅解
7.1 认识异步 1. 同步我们用两个函数来模拟两个客户端请求,并依次进行处理: #!/usr/bin/env python3 # -*- coding:utf-8 -*- # @Time: 202 ...
SpringMVC的拦截器不起作用原因
SpringMVC的拦截器不起作用原因如下图: 这是因为过滤器没有加上这条语句chain.doFilter(request,response);,加上就能进入springMVC的拦截器了,调这个问题整 ...
python dumps和loads
dumps和loads的使用 import json dict = {'姓名': 'supermao','年龄': '19','爱好': '未知', '地区': '武汉'} string=json.d ...
AcWing1264. 动态求连续区间和 (树状数组做法)
1.题目给定 n 个数组成的一个数列,规定有两种操作,一是修改某个元素,二是求子数列 [a,b] 的连续和. 输入格式第一行包含两个整数 n 和 m,分别表示数的个数和操作次数. 第二行包含 n ...
【LeetCode】622. Design Circular Queue 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法用直的代替弯的数组循环利用日期题目地址:htt ...

SpringBoot学习笔记五之管理员后台维护

SpringBoot学习笔记五之管理员后台维护的更多相关文章

随机推荐

热门专题