1 创建实体

1.1 数据库建表

CREATE TABLE `gather_stars`.`t_role`(`id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR(100), PRIMARY KEY (`id`) ) CHARSET=utf8 COLLATE=utf8_general_ci;

Role.java 文件中生成全参和无参构造方法、生成toString方法
文件归位参照聚星Note01 - 后台管理环境搭建(1)

1.2 创建角色视图

修改跳转链接 WEB-INF/include-sidebar.jsp

<a href="role/to/page.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a>

spring-web-mvc.xml 关联视图

<mvc:view-controller path="/role/to/page.html" view-name="role-page"/>

创建角色视图 WEB-INF/role-page.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"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></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 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 id="keywordInput" class="form-control has-success" type="text"placeholder="请输入查询条件"></div></div><button id="searchBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button></form><button id="batchRemoveBtn" type="button" class="btn btn-danger"style="float: right; margin-left: 10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button><buttontype="button"id="showAddModalBtn" class="btn btn-primary"style="float: right;"><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 id="summaryBox" type="checkbox"></th><th>名称</th><th width="100">操作</th></tr></thead><tbody id="rolePageBody"></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>

2 分页

2.1 初始化数据, 引入自定义 js 文件

WEB-INF/role-page.jsp 添加

<script type="text/javascript" src="my-js/my-role.js"></script>
<script type="text/javascript">$(function(){// 1.为分页操作准备初始化数据window.pageNum = 1;window.pageSize = 5;window.keyword = "";// 2.调用执行分页的函数，显示分页效果generatePage();});
</script>

2.2 自定义 js 文件

新建 my-js/my-role.js

// 执行分页，生成页面效果，任何时候调用这个函数都会重新加载页面
function generatePage() {// 1.获取分页数据var pageInfo = getPageInfoRemote();// 2.填充表格fillTableBody(pageInfo);
}// 远程访问服务器端程序获取pageInfo数据
function getPageInfoRemote() {// 调用 $.ajax() 函数发送请求var ajaxResult = $.ajax({"url": "role/get/page/info.json","type":"post","data": {"pageNum": window.pageNum,"pageSize": window.pageSize,"keyword": window.keyword},"async":false,"dataType":"json"});// 响应状态码var statusCode = ajaxResult.status;// 如果响应状态码不是200，则显示提示消息，停止执行函数if(statusCode != 200) {layer.msg("失败！响应状态码 = "+statusCode+" 说明信息 = "+ajaxResult.statusText);return null;}// 请求处理成功，获取pageInfovar resultEntity = ajaxResult.responseJSON;// 从 resultEntity 中获取 result 属性var result = resultEntity.operationResult;// 判断 result 是否成功if(result == "FAILED") {layer.msg(resultEntity.perationMessage);return null;}// 确认 result 为成功后获取 pageInfovar pageInfo = resultEntity.queryData;// 返回 pageInforeturn pageInfo;
}// 填充表格
function fillTableBody(pageInfo) {// 清除 tbody 中的旧的内容$("#rolePageBody").empty();// 这里清空是为了让没有搜索结果时不显示页码导航条$("#Pagination").empty();// 判断pageInfo对象是否有效if(pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0) {$("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您搜索的数据！</td></tr>");return ;}// 使用 pageInfo 的 list 属性填充 tbodyfor(var i = 0; i < pageInfo.list.length; i++) {var role = pageInfo.list[i];var roleId = role.id;var roleName = role.name;var numberTd = "<td>"+(i+1)+"</td>";var checkboxTd = "<td><input id='"+roleId+"' class='itemBox' type='checkbox'></td>";var roleNameTd = "<td>"+roleName+"</td>";var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";// 通过 button 标签的 id 属性，把 roleId 传递到 button 按钮的单击响应函数中，在单击响应函数中使用 this.idvar pencilBtn = "<button id='" + roleId +"' type='button' class='btn btn-primary btn-xs pencilBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";var removeBtn = "<button id='" + roleId +"' type='button' class='btn btn-danger btn-xs removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>";var buttonTd = "<td>" + checkBtn+" " + pencilBtn + " " + removeBtn + "</td>";var tr = "<tr>" + numberTd + checkboxTd + roleNameTd + buttonTd + "</tr>";$("#rolePageBody").append(tr);}// 生成分页导航条generateNavigator(pageInfo);
}// 生成分页页码导航条
function generateNavigator(pageInfo) {// 获取总记录数var totalRecord = pageInfo.total;// 声明相关属性var properties = {"num_edge_entries": 3,"num_display_entries": 5,"callback": paginationCallBack,"items_per_page": pageInfo.pageSize,"current_page": pageInfo.pageNum - 1,"prev_text": "上一页","next_text": "下一页"}// 调用 pagination() 函数$("#Pagination").pagination(totalRecord, properties);
}// 翻页时的回调函数
function paginationCallBack(pageIndex, jQuery) {// 修改 window 对象的 pageNum 属性window.pageNum = pageIndex + 1;// 调用分页函数generatePage();// 取消页码超链接的默认行为return false;
}

2.3 实现后台业务逻辑

com.turling.gatherStars.mvc.handler.RoleHandler 添加

@ResponseBody
@RequestMapping("/role/get/page/info.json")
public ResultEntity<PageInfo<Role>> getPageInfo(@RequestParam(value="pageNum", defaultValue="1") Integer pageNum,@RequestParam(value="pageSize", defaultValue="5") Integer pageSize,@RequestParam(value="keyword", defaultValue="") String keyword ){// 调用 Service 方法获取分页数据PageInfo<Role> pageInfo = roleService.getPageInfo(pageNum, pageSize, keyword);// 封装到 ResultEntity 对象中返回(操作抛出异常，交给异常映射机制处理)return ResultEntity.successWithData(pageInfo);
}

com.turling.gatherStars.service.api.RoleService 添加

PageInfo<Role> getPageInfo(Integer pageNum, Integer pageSize, String keyword);

com.turling.gatherStars.service.impl.RoleServiceImpl 添加

public PageInfo<Role> getPageInfo(Integer pageNum, Integer pageSize, String keyword) {// 1.开启分页功能PageHelper.startPage(pageNum, pageSize);// 2.执行查询List<Role> roleList = roleMapper.selectRoleByKeyWord(keyword);// 3.封装为 PageInfo 对象返回return new PageInfo<Role>(roleList);
}

com.turling.gatherStars.mapper.RoleMapper 添加

List<Role> selectRoleByKeyword(String keyword);

mybatis/mapper/RoleMapper.xml 添加

<select id="selectRoleByKeyWord" resultMap="BaseResultMap" >select<include refid="Base_Column_List" />from t_rolewhere name like concat("%",#{keyword},"%")
</select>

2.4 关键字查询

WEB-INF/role-page.jsp 添加

$("#searchBtn").click(function(){// 获取关键字，并赋予全局变量window.keyword = $("#keywordInput").val();// 调用分页函数，刷新页面generatePage();
});

聚星Note06 - 角色维护(1)相关推荐

聚星Note08 - 角色维护(3)
聚星Note08 - 角色维护3 1 单条删除 2 批量删除 3 代码托管 1 单条删除无论是单条删除, 还是批量删除, 后台处理代码一致 my-js/my-role.js 的 fillTableB ...
day04【后台】角色维护
day04[后台]角色维护 1.权限控制 1.1.为什么需要权限控制如果没有权限控制, 系统的功能完全不设防, 全部暴露在所有用户面前. 用户登录以后可以使用系统中的所有功能. 这是实际运行中不能接 ...
尚筹网 —— 5、角色维护
目录 1.角色分页操作 1.1.目标 1.2.思路 1.3.代码 1.3.1.创建数据库表 1.3.2.逆向生成相关资源 1.3.3.准备查询的 SQL 语句 1.3.4.添加 mapper 方法 1 ...
众筹网角色维护【异步请求】
思维导图前端 controller 消息转换器@RespondBody 前端拼接数据加上清空,不然数据会堆积在框里不是更新
聚星Note04 - 管理员登录
聚星Note04 - 管理员登录 1 整合静态资源 1.1 关联登录请求地址和视图 1.2 维护项目所需常量类 1.3 小技巧 - idea 正常显示子包 1.4 修饰 system-error.js ...
day05【后台】菜单维护
day05[后台]菜单维护 1.数据库中存储树形结构 1.1.节点类型 1.2.创建菜单表执行SQL语句创建数据库表 USE project_crowd CREATE TABLE t_menu (i ...
iMatrix平台的权限管理系统是一个基于角色的访问控制系统
iMatrix平台的权限管理系统(ACS)是一个基于角色的访问控制(Role-Based Access Control)系统.熟悉RBAC的朋友应该知道,在RBAC中,权限和角色是相关的,用户通过成 ...
众筹网站项目第七天之用户角色分配(1)
打开原教程视频注:本人是渣渣,有错请谅解. 实现用户角色分配功能 1.数据准备 insert into `t_role` (`id`, `name`) values('1','PM - 项目经理') ...
后台管理系统中的CRUD【以用户维护为例】
1.前端页面展示后台管理主要具有三大功能,分别为权限管理.业务审核和业务管理,其中权限管理又分为用户维护.角色维护和菜单维护,这三个维护功能在后端实现上来说,大同小异,都是CRUD,因此这边以用户维 ...

聚星Note06 - 角色维护(1)

聚星Note06 - 角色维护1

1 创建实体

1.1 数据库建表

1.2 创建角色视图

2 分页

2.1 初始化数据, 引入自定义 js 文件

2.2 自定义 js 文件

2.3 实现后台业务逻辑

2.4 关键字查询

聚星Note06 - 角色维护(1)相关推荐

最新文章

热门文章