尚筹网项目笔记-后台管理系统-管理员信息维护

1 分页显示管理员信息部分

1.1 目标 以分页的形式把管理员信息显示到页面上。特殊需求：兼顾关键词查询，让后端代 码不管有没有查询条件都能够以分页形式显示数据。

1.2 思路

1.2.1 流程图

1.2.2 技术点

 让 SQL 语句针对 keyword 时有时无的情况进行适配
使用 SQL 中做字符串连接的函数：CONCAT("%",#{keyword},"%")
keyword 有值：“like %tom%”
keyword 无值：“like %%”
 PageHelper 使用
 引入依赖
 在 SqlSessionFactoryBean 中配置 PageHelper
 在 Java 代码中使用 PageHelper.startPage(pageNum, pageSize) PageInfo pageInfo = new PageInfo(adminList );
 显示页码
 使用 jQuery 插件：Pagination

1.3 后端代码

1.3.1 AdminMapper.xml写入sql

	<select id="selectAdminByKeyword" resultMap="BaseResultMap">
	select id, login_acct, user_pswd, user_name, email, create_time 
	from t_admin
	where 
	login_acct like concat("%",#{keyword},"%") or
	user_name like concat("%",#{keyword},"%") or
	email like concat("%",#{keyword},"%") 
	</select>

1.3.2 AdminMapper 中的抽象方法在mapper接口上写入方法

    List<Admin> selectAdminByKeyword(String keyword);

1.3.3 加入mybatis分页插件**

<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> </dependency>

1.3.4 1.3.3 准备 PageHelper 环境在spring-persist-mybatis.xml

<bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<!-- 指定 MyBatis 全局配置文件位置 -->
		<property name="configLocation" value="classpath:mybatis-config.xml" />
		<!-- 指定 Mapper 配置文件位置 -->
		<property name="mapperLocations" value="classpath:mybatis/mapper/*Mapper.xml" />
		<!-- 配置 MyBatis 的插件 -->
		<property name="plugins">
			<array>
				<bean class="com.github.pagehelper.PageHelper">
					<property name="properties">
						<props>
							<!-- 配置数据库方言，告诉 PageHelper 当前使用的具体数据库， -->
							<!-- 让 PageHelper 可以根据当前数据库生成对应的分页 SQL 语 句 -->
							<prop key="dialect">mysql</prop>
							<!-- 配置页码的合理化修正 -->
							<!-- 让 PageHelper 自动把浏览器传来的 PageNum 修正到 0~总页 数范围 -->
							<prop key="reasonable">true</prop>
						</props>
					</property>
				</bean>
			</array>
		</property>
	</bean>

1.3.5 AdminService 方法

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

1.3.5 AdminServiceimp 方法

	public PageInfo<Admin> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
		//调用pageHelder的静态方法的分页功能、
		//这里充分体验到了PageHelper的“非侵式” 设计，原本要做的查询不必要修改
		PageHelper.startPage(pageNum, pageSize);
		List<Admin> list=adminMapper.selectAdminByKeyword(keyword);
		//封装到PageInfo对象中
		return new PageInfo<Admin>(list);
	}

1.3.56 AdminHandler.java 方法

	@RequestMapping("/admin/get/page/html")
	public String getPageInfo(@RequestParam(value = "keyword", defaultValue = "") String keyword,
			@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
			@RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize, ModelMap modelMap) {
		PageInfo<Admin> pageInfo = adminService.getPageInfo(keyword, pageNum, pageSize);
		modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO, pageInfo);
		return "admin-page";
	}

1.4前端代码

尚硅谷页面模板

在 admin-page 页面显示真实数据

<tbody>
									<c:if test="${empty requestScope.pageInfo.list }">
										<tr>
											<td>抱歉！没有查询到你要的数据！</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>
										<tr>
										</tr>
									</c:if>


								</tbody>

1.4.5 加入 Pagination 插件环境

 解压 pagination_zh.zip 包
 把相关文件加入到工程
引入相关js，css

在页面上引入样式文件和 JavaScript 文件

<link rel="stylesheet" href="css/pagination.css"> 
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>

1.4.6 编写 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, // 用户点击“翻页”按钮之后 执行翻页操作的回调函数
			current_page: ${requestScope.pageInfo.pageNum-1}, // 当前页，pageNum 从 1 开始， 必须-1 后才可以赋值
			prev_text: "上一页",
			next_text: "下一页",
			items_per_page:${requestScope.pageInfo.pageSize} // 每页显示 1 项
	};
	// 调用分页导航条对应的 jQuery 对象的 pagination()方法生成导航条
	$("#Pagination").pagination(totalRecord, properties);
	// 翻页过程中执行的回调函数 
	// 点击“上一页”、“下一页”或“数字页码”都会触发翻页动作，从而导致当前函数被调 用
	// pageIndex 是用户在页面上点击的页码数值
	//回调函数的意思：声明出来不是给自己调用而是给系统或者框架调用
	function pageSelectCallback(pageIndex, jQuery){
		// pageIndex 是当前页页码的索引，相对于 pageNum 来说，pageIndex 比 pageNum 小 1
		var pageNum = pageIndex + 1;
		// 执行页面跳转也就是实现“翻页“
		window.location.href = "admin/get/page.html?pageNum="+pageNum;
		// 取消当前超链接的默认行为
		return false;
	}
}

</script>

1.4.7 修改 jquery.pagination.js 文件源码

问题的解决：不让 Pagination 在页码导航条初始化完成时就调用回调函数！
位置如下

// 所有初始化完成，绘制链接 
drawLinks(); 
// 回调函数 // opts.callback(current_page, this); }); }

2 关键词查询

2.1 页面调整待提交的表单

admin-page.jsp

<form action="admin/get/page.html" 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>

2.2修改js 翻页时保持 keyword 值

EL 表达式中的 param 也是一个隐含对象，可以用来获取请求参数！
相当于request.getParameter(“id”)

window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";		// 取消当前超链接的默认行为

3 删除信息

3.1调整页面的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>

3.2Handler方法

@RequestMapping("/admin/remove/{adminId}/{pageNum}/{keyword}.html")
	public String remove(
			@PathVariable("adminId") Integer adminId,
			@PathVariable("pageNum") Integer pageNum,
			@PathVariable("keyword") Integer keyword,
			HttpServletRequest request){
		HttpSession session = request.getSession();
		Admin admin = (Admin) session.getAttribute(CrowdConstant.ATTR_NAME_LOGIN_ADMIN);
		if(adminId==admin.getId()){
			throw new DeleteErrorException(CrowdConstant.Message_Delete_admin);
		}else {
		adminService.remove(adminId);
		if(keyword!=null){
		return "redirect:/admin/get/page.html?pageNum="+pageNum+"&keyword="+keyword;}else{
			
			return "redirect:/admin/get/page.html?pageNum="+pageNum;
		}
		}
	}

删除无关键词加个判断是否有keyword重定向到一个位置携带不同的参数
写个异常映射让他不能删除自己现在登录的账号

4 添加用户信息

4.1目标

创建新的管理员信息，通过表单提交给后端程序并保存到数据库。

4.2 思路

4.3代码

4.31设置唯一约束

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

AdminServiceImpl.java.class

	public void saveAdmin(Admin admin) {
		String 	userPswd=admin.getUserPswd();
		userPswd=CrowdUtil.md5(userPswd);
		admin.setUserPswd(userPswd);
		//2.生产创建时间
		Date date=new Date();
		SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String createtime=format.format(date);
		admin.setCreateTime(createtime);
		adminMapper.insert(admin);
		
	}

4.3.2 业务逻辑层

AdminServiceImpl.java

public void saveAdmin(Admin admin) {
		String 	userPswd=admin.getUserPswd();
		userPswd=CrowdUtil.md5(userPswd);
		admin.setUserPswd(userPswd);
		//2.生产创建时间
		Date date=new Date();
		SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String createtime=format.format(date);
		admin.setCreateTime(createtime);
		try {
			adminMapper.insert(admin);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			logger.info("报错全类名"+e.getClass().getName());
			if(e instanceof DuplicateKeyException){
				throw new LoginAcctAlreadyInUserException(CrowdConstant.MESSAGE_LOGIN_ACCT_ALREADY_IN_USE);
			}
		}
		
	}

4.3.3自定义一个异常用来保存或者更新admin时检测到登录账号重复抛出这个异常

LoginAcctAlreadyInUserException.java

4.3.4 配置异常

	@ExceptionHandler(value = LoginAcctAlreadyInUserException.class)
	public ModelAndView resolveLoginAcctAlreadyInUserException(LoginAcctAlreadyInUserException exception,
			// 当前请求对象
			HttpServletRequest request, HttpServletResponse response) throws IOException {
		String viewName = "admin-add";
		return commonResolve(viewName, exception, request, response);
	}

4.3.4 Handler层

public String save(Admin admin){
		//密码加密
		adminService.saveAdmin(admin);
		// 重定向到分页页面，使用重定向是为了避免刷新浏览器重复提交表单
		return "redirect:/admin/get/page.html?pageNum="+Integer.MAX_VALUE;
	}

4.3.5跳到admin-add.jsp页面

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

4.3.6在jsp中显示错误信息

	<div class="panel panel-default">
			${requestScope.exception.message }
					<div class="panel-heading">
						表单数据
						<div style="float: right; cursor: pointer;" data-toggle="modal"
							data-target="#myModal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</div>

5修改用户信息

5.1目标

通过提交页面上的表单修改某个 Admin 的数据。

5.2思路

4.3 代码：前往更新页面

4.3.1admin-page.jsp

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

4.3.2 handler 代码

@RequestMapping("/admin/to/edit/page.html")
	public String toEditPage(
			 @RequestParam("adminId") Integer adminId,
			ModelMap modelMap
			){
		Admin admin=adminService.getAdminByid(adminId);
		modelMap.addAttribute("admin",admin);
		return "admin-edit";
	}

返回到admin-edit.jsp页面

4.3.3 admin-edit.jsp 代码

<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
									type="text" value="${requestScope.admin.loginAcct}" name="loginAcct" class="form-control" id="exampleInputPassword1"
									placeholder="请输入登录账号">
							</div>
		
							
							<div class="form-group">
								<label for="exampleInputPassword1">用户昵称</label> <input
									type="text" value="${requestScope.admin.userName}" name="userName" class="form-control" id="exampleInputPassword1"
									placeholder="请输入用户昵称">
							</div>
							<div class="form-group">
								<label for="exampleInputEmail1">邮箱地址</label> <input type="email"
									class="form-control" value="${requestScope.admin.email}" name="email" 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>

隐藏属性pageNum，id，keyword

4.3.4 handler 代码

获取参数用@RequestParam/result风格用@PathVariable（）

@RequestMapping("/admin/update.html")
	public String update(Admin admin,@RequestParam("pageNum")Integer pageNum,@RequestParam("keyword") String keyword){
		adminService.update(admin);
		return "redirect:/admin/get/page.html?pageNum="+pageNum+"&keyword="+keyword;
	}

4.3.5 serviceimp 代码

try catch自定义写了个异常专门针对于更新用户用户名重复

public void update(Admin admin) {
		//选择的更新对空值不进行更新
	try {
		adminMapper.updateByPrimaryKeySelective(admin);
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
		if(e instanceof DuplicateKeyException){
			throw new LoginAcctAlreadyInUseforupdaterException(CrowdConstant.MESSAGE_LOGIN_ACCT_ALREADY_IN_USE);
		}
	}
		
	}

4.3.6 自定义异常+配置配置 代码

LoginAcctAlreadyInUseforupdaterException.java自定义异常类
配置自定义异常

	@ExceptionHandler(value = LoginAcctAlreadyInUseforupdaterException.class)
	public ModelAndView resolveLoginFailedException(LoginAcctAlreadyInUseforupdaterException exception,
			// 当前请求对象
			HttpServletRequest request, HttpServletResponse response) throws IOException {

		String viewName = "system-error";
		return commonResolve(viewName, exception, request, response);
	}