Day84.尚好房 — 功能提取、页面封装、jquery-validate表单校验、完成角色 | 用户管理模块
目录
角色管理模块
一、角色管理代码封装 ★
1、封装BaseDao
2、封装BaseDao
3、封装BaseServiceImpl
4、封装Controller层
二、前端页面封装
1、封装头部css与js引用
2、提取分页信息
三、前端数据校验 (jQuery Validate 插件 )
代码引入
用户管理模块
一、AdminDao层
二、AdminService层
三、AdminController层
四、用户管理列表页面 (layerDate)
五、用户管理新增页面
六、用户管理修改页面
角色管理模块
前面我做了角色管理，其实就是一个基本的针对单表的增删改查，后续可能还有很多针对单表的增删改查，因此我们把上面的增删改查做一个全面的封装，方便后续复用。
服务器端：dao层、service层与controller层对应的增删改查我可以提取封装为base类，后续直接继承，方便后续复用
前端：页面头部css与js、分页等，可以通过Thymeleaf代码片段 (th:fragment) 提取出来，页面包含进去 (th:insert) 即可
一、角色管理代码封装 ★
1、封装BaseDao
在common-util模块添加：BaseDao
//通用的Base接口
public interface BaseDao {
Integer insert(T t);
//Serializable 基本数据类型都继承了
T selectById(Serializable id);
Integer update(T t);
void delete(Serializable id);
Page findPage(Map filters);
} RoleDao 只保留独有的方法
@Repository
public interface RoleDao extends BaseDao {
//模块特有的方法，声明到子接口中，共用的方法声明在父接口中
List findAll();
//通用的增伤改查，分页封装到了基础BaseDao
} 2、封装BaseDao
在common-util模块添加接口：BaseService
public interface BaseService {
Integer insert(T t);
void delete(Serializable id);
void update(T t);
T getById(Serializable id);
PageInfo findPage(Map filters);
} RuleService只保留独有功能
public interface RoleService extends BaseService {
List findAll();
} 3、封装BaseServiceImpl
public abstract class BaseServiceImpl implements BaseService{
//用于获取真实的Dao
public abstract BaseDao getEntityDao();
@Override
public Integer insert(T t) {
return getEntityDao().insert(t);
}
@Override
public T getById(Serializable id) {
return getEntityDao().selectById(id);
}
@Override
public void update(T t) {
getEntityDao().update(t);
}
@Override
public void delete(Serializable id) {
getEntityDao().delete(id);
}
//分页
@Override
public PageInfo findPage(Map filters) {
//使用工具类进行类型装换，设置默认值，解决空指针(访问首页时没有pageNum参数)
int pageNum = CastUtil.castInt(filters.get("pageNum"),1);
int pageSize = CastUtil.castInt(filters.get("pageSize"),1);
//开启分页功能 (注意检查是否进行依赖、mybatis.xml是否配置)
//将这两个参数，与当前线程(ThreadLocal)进行绑定，传递给dao层
PageHelper.startPage(pageNum,pageSize);
// select 语句，会自动追加limit ?,? (limit startIndex,pageSize)
// 公式: startIndex = (pageNum-1)*pageSize
Page page = getEntityDao().findPage(filters); //传递查询条件参数
return new PageInfo(page,5); //5: 显示的导航页数
}
} RuleService 只保留独有方法，将RuleDao传入 gitEntityDao() 方法
@Service
@Transactional
public class RoleServiceImpl extends BaseServiceImpl implements RoleService {
@Autowired //Spring框架提供的依赖注入 先进性byType再进行byName
//@Resource //jdk提供的依赖注入注解 先进行byName在进行byType
RoleDao roleDao;
@Override
public List findAll() {
return roleDao.findAll();
}
@Override
public BaseDao getEntityDao() {
return roleDao;
}
}
4、封装Controller层
在common-util模块添加：BaseController
封装了转发成功页，和获取提交的分页参数及搜索条件
public class BaseController {
private final static String PAGE_SUCCESS = "common/successPage";
//提示信息
public final static String MESSAGE_SUCCESS = "操作成功！";
/**
* 成功页
* @param message
* @param request
*/
protected String successPage(String message, HttpServletRequest request) {
request.setAttribute("messagePage", StringUtil.isEmpty(message) ? MESSAGE_SUCCESS : message);
return PAGE_SUCCESS;
}
/**
* 封装页面提交的分页参数及搜索条件
* @param request
* @return
*
* http://localhost:/role?age=22&age=23&roleName=管理员
*/
protected Map getFilters(HttpServletRequest request) {
Enumeration paramNames = request.getParameterNames();
Map filters = new TreeMap();
while(paramNames != null && paramNames.hasMoreElements()) {
String paramName = (String)paramNames.nextElement();
String[] values = request.getParameterValues(paramName);
if (values != null && values.length != 0) {
if (values.length > 1) {
filters.put(paramName, values);
} else {
filters.put(paramName, values[0]);
}
}
}
//如果没有提交请求参数，给就这两个参数赋予默认值。
if(!filters.containsKey("pageNum")) {
filters.put("pageNum", 1);
}
if(!filters.containsKey("pageSize")) {
filters.put("pageSize", 2);
}
return filters;
}
RoleController，因为各模块跳转的页面不同，所以变化表不大
@Controller
@RequestMapping("/role")
public class RoleController extends BaseController {
private final static String PAGE_INDEX = "role/index";
private static final String PAGE_CREATE = "role/create";
private static final String ACTION_LIST = "redirect:/role"; //重定向
//private static final String PAGE_SUCCESS = "common/successPage";
private static final String PAGE_EDIT = "role/edit";
@Autowired
RoleService roleService;
//删除
@RequestMapping("/delete/{id}")
public String delete(@PathVariable Long id,ModelMap model){
roleService.delete(id);
return ACTION_LIST;
}
//修改
@RequestMapping(value="/update")
public String update(Map map,Role role,HttpServletRequest request) {
roleService.update(role);
return this.successPage("修改成功",request);
}
//前往修改页面
@RequestMapping("/edit/{id}")
public String edit(@PathVariable Long id,ModelMap model){
Role role = roleService.getById(id);
model.addAttribute("role",role);
return PAGE_EDIT;
}
@RequestMapping("/save")
public String save(Role role, Map map,HttpServletRequest request){ //springMVC根据反射创建Bean,调用参数名称的set方法,将参数注入到对象
roleService.insert(role);
//Map 和 ModelMap 本质相同，map调用put即可
return this.successPage("添加成功",request);
}
//前往新增页面
@RequestMapping("/create")
public String create(){
return PAGE_CREATE;
}
/*
* 分页查询角色列表
* 根据条件进行查询
* roleName = ''
* pageNum = 1 隐藏域
* pageSize = 10 y隐藏域
*/
@RequestMapping
public String index(HttpServletRequest request,Map map) {
Map filters = getFilters(request);
//分页对象，将集合数据，pageNum、pageSize、total、pages等
PageInfo pageInfo = roleService.findPage(filters);
//用于数据回显
map.put("page",pageInfo);
map.put("filters",filters);
return PAGE_INDEX;
}
} 二、前端页面封装
1、封装头部css与js引用
在common下新建：head.html
权限管理系统
Rule 其他页面头部改为
2、提取分页信息
在common下新建：pagination.html
Title
RuleIndex 改为
三、前端数据校验 (jQuery Validate 插件 )
前端校验我们选择：jQuery Validate 插件
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
参考文档：jQuery Validate | 菜鸟教程
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7 | number:true | 必须输入合法的数字（负数，小数）。 |
| 8 | digits:true | 必须输入整数。 |
| 9 | creditcard: | 必须输入合法的信用卡号。 |
| 10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
| 11 | accept: | 输入拥有合法后缀名的字符串（上传文件的后缀）。 |
| 12 | maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| 13 | minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| 15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| 16 | max:5 | 输入值不能大于 5。 |
| 17 | min:10 | 输入值不能小于 10。 |
代码引入
1、在common/head.html 导入 js 库
2、新增create.html 添加校验代码
3、修改edit.html 和 create.html一致
用户管理模块
由于封装了通用代码，代码得到完全复用，将大大提高效率。
一、AdminDao层
由于上文中封装了通用代码，我们只需要继承，然后xml 文件实现Sql语句即可
@Repository
public interface AdminDao extends BaseDao {
}
AdminDao.xml
id,username,password,name,phone,head_url,
description,create_time,update_time,is_deleted
insert into acl_admin(username,password,name,phone,head_url,description)
values (#{username},#{password},#{name},#{phone},#{headUrl},#{description})
update acl_admin
username = #{username},
password = #{password},
phone = #{phone},
name = #{name},
head_url = #{headUrl},
description = #{description},
update_time = now()
where id = #{id}
update acl_admin set is_deleted = 1 ,update_time = now() where id = #{id}
and name = #{name}
and username = #{username}
and phone = #{phone}
and create_time >= #{createTimeBegin}
and create_time <= #{createTimeEnd}
and is_deleted = 0
二、AdminService层
public interface AdminService extends BaseService {
} @Service
@Transactional
public class AdminServiceImpl extends BaseServiceImpl implements AdminService {
@Autowired
AdminDao adminDao;
@Override
public BaseDao getEntityDao() {
return adminDao;
}
}
三、AdminController层
复制 RuleController，ctrl + r 查找替换，将Rule，rule替换为Admin、admin即可
package com.atguigu.controller;
import com.atguigu.base.BaseController;
import com.atguigu.entity.Admin;
import com.atguigu.service.AdminService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
// ctrl + r 查找替换
@Controller
@RequestMapping("/admin")
public class AdminController extends BaseController {
private static final String PAGE_INDEX = "admin/index";
private static final String PAGE_CREATE = "admin/create";
private static final String ACTION_LIST = "redirect:/admin";
private static final String PAGE_EDIT = "admin/edit";
@Autowired
AdminService adminService;
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Long id){
adminService.delete(id); //返回结果表示sql语句对数据库起作用的行数
return ACTION_LIST;
}
@RequestMapping("/update")
public String update(Admin admin,Map map,HttpServletRequest request){ //springMVC框架根据反射创建bean对象，并调用参数名称的set方法，将参数封装到bean对象中。
adminService.update(admin);
return this.successPage("修改成功",request);
}
@RequestMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id, Map map){
Admin admin = adminService.getById(id);
map.put("admin",admin);
return PAGE_EDIT;
}
@RequestMapping("/save")
public String save(Admin admin,Map map,HttpServletRequest request){
admin.setHeadUrl("http://47.93.148.192:8080/group1/M00/03/F0/rBHu8mHqbpSAU0jVAAAgiJmKg0o148.jpg");
adminService.insert(admin);
return this.successPage("添加成功",request);
}
@RequestMapping("/create")
public String create(){
return PAGE_CREATE;
}
/**
* 分页查询
* 根据查询条件进行查询
* adminName = ''
* pageNum = 1 隐藏域
* pageSize = 10 隐藏域
* @param map
* @return
*/
@RequestMapping
public String index(HttpServletRequest request,Map map){
Map filters = getFilters(request);
//分页对象，将集合数据，pageNum,pageSize,pages,total等
PageInfo pageInfo = adminService.findPage(filters);
map.put("page",pageInfo);
map.put("filters",filters);
return PAGE_INDEX;
}
}
批量替换时，匹配大小写
这里出错 批量替换时注意匹配条件，注解映射路径可能不会被替换
四、用户管理列表页面 (layerDate)
需用到日期选择器layerDate，需引入laydate.js文件 (Hplus，参考 hplus-master/index.html )
创建admin文件夹，用户管理相关的页面都放在该文件夹下面。
直接复制角色管理的列表、新增和修改页面，调整页面属性即可
index.html
五、用户管理新增页面
六、用户管理修改页面