SSM整合(二)
一、SSM+BootStrap简单查询
1.0素材准备
BootStrap
- css:
bootstrap.css
- js:
bootstrap.js
、jquery-1.12.4.js
、WdatePicker.js
index.jsp 素材
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户列表信息页面</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.css"> </head> <body> <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="keyword">——关键字——</label> <input type="text" class="form-control" id="keyword" placeholder="请输入搜索关键字"> </div> <div class="form-group"> <label class="sr-only" for="role">Role</label> <select class="form-control" id="role"> <option>——请选择——</option> <option>店长</option> <option>收银员</option> </select> </div> <button type="submit" class="btn btn-primary">查询</button> <a class="btn btn-success" href="${pageContext.request.contextPath}/user/insert">新增用户</a> </form> </div> <div class="table-responsive"> <table class="table table-bordered table-hover"> <tr> <td class="active">用户编号</td> <td>用户姓名</td> <td>用户账号</td> <td>用户角色</td> <td>用户性别</td> <td>出生日期</td> <td>用户手机</td> <td>操作</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <a class="btn btn-default btn-xs" href="${pageContext.request.contextPath}/user/details">详情</a> <a class="btn btn-primary btn-xs" href="${pageContext.request.contextPath}/user/update">编辑</a> <a class="btn btn-danger btn-xs" href="${pageContext.request.contextPath}/user/delete">删除</a> </td> </tr> </table> </div> </div> <script src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js"></script> <script src="${pageContext.request.contextPath}/statics/js/bootstrap.js"></script> </div> </body> </html>
1.1JSTL+EL表达式
maven依赖包
<!--JSTL标准标签库--> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!--分页查询依赖包--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.3.0</version> </dependency> .....
页面引用关键指令
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
index.jsp视图页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %> <html> <head> <title>用户列表信息页面</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.css"> </head> <body> <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <form class="form-inline" role="form" action="${pageContext.request.contextPath}/user/index" method="get"> <div class="form-group"> <input type="text" class="form-control" value="${keyWord}" name="keyWord" placeholder="请输入搜索关键字"> </div> <div class="form-group"> <c:choose> <c:when test="${roleId==1}"> <select class="form-control" name="roleId"> <option value="">——请选择——</option> <option value="1" selected>管理员</option> <option value="2">店长</option> <option value="3">收银员</option> </select> </c:when> <c:when test="${roleId==2}"> <select class="form-control" name="roleId"> <option value="">——请选择——</option> <option value="1">管理员</option> <option value="2" selected>店长</option> <option value="3">收银员</option> </select> </c:when> <c:when test="${roleId==3}"> <select class="form-control" name="roleId"> <option value="">——请选择——</option> <option value="1">管理员</option> <option value="2">店长</option> <option value="3" selected>收银员</option> </select> </c:when> <c:otherwise> <select class="form-control" name="roleId"> <option value="" selected>——请选择——</option> <option value="1">管理员</option> <option value="2">店长</option> <option value="3">收银员</option> </select> </c:otherwise> </c:choose> </div> <button type="submit" class="btn btn-primary">查询</button> <a class="btn btn-success" href="${pageContext.request.contextPath}/user/insert">新增用户</a> </form> </div> <div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <td class="active">用户编号</td> <td>用户姓名</td> <td>用户账号</td> <td>用户角色</td> <td>用户性别</td> <td>出生日期</td> <td>用户手机</td> <td>操作</td> </tr> </thead> <tbody> <c:forEach items="${pageInfo.dataList}" var="u"> <tr> <td>${u.userId}</td> <td>${u.realName}</td> <td>${u.userName}</td> <td>${u.role.roleName}</td> <td> <c:if test="${u.userSex == 1}">男</c:if> <c:if test="${u.userSex == 0}">女</c:if> </td> <td><f:formatDate value="${u.birthday}" pattern="yyyy-MM-dd"></f:formatDate></td> <td>${u.phone}</td> <td> <a class="btn btn-default btn-xs" href="${pageContext.request.contextPath}/user/details/${u.userId}">详情</a> <a class="btn btn-primary btn-xs" href="${pageContext.request.contextPath}/user/update/${u.userId}">编辑</a> <a class="btn btn-danger btn-xs" href="${pageContext.request.contextPath}/user/delete/${u.userId}">删除</a> </td> </tr> </c:forEach> </tbody> <tfoot> <tr align="center"> <td colspan="8"> <c:if test="${pageInfo.pageIndex>1}"> <a href="${pageContext.request.contextPath}/user/index?keyWord=${keyWord}&roleId=${roleId}&pageIndex=1" class="btn btn-info btn-xs">首页</a> <a href="${pageContext.request.contextPath}/user/index?keyWord=${keyWord}&roleId=${roleId}&pageIndex=${pageInfo.pageIndex-1}" class="btn btn-info btn-xs">上一页</a> </c:if> <c:if test="${pageInfo.pageIndex<pageInfo.totalPage}"> <a href="${pageContext.request.contextPath}/user/index?keyWord=${keyWord}&roleId=${roleId}&pageIndex=${pageInfo.pageIndex+1}" class="btn btn-info btn-xs">下一页</a> <a href="${pageContext.request.contextPath}/user/index?keyWord=${keyWord}&roleId=${roleId}&pageIndex=${pageInfo.totalPage}" class="btn btn-info btn-xs">尾页</a> </c:if> <span class="info" id="pageInfo">第${pageInfo.pageIndex}页|共${pageInfo.totalPage}页|共${pageInfo.totalCount}条</span> </td> </tr> </tfoot> </table> </div> </div> </div> </body> </html>
UserController控制器关键代码
package com.aiden.ssm.controller; import com.aiden.ssm.pojo.User; import com.aiden.ssm.service.UserService; import com.aiden.ssm.utils.PageInfo; import com.github.pagehelper.Page; import com.github.pagehelper.PageHelper; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.util.List; /** * @author Aiden */ @Controller @RequestMapping("user") public class UserController extends BaseController { @Resource private UserService userService; //显示首页 @GetMapping("/index") public String index(@RequestParam(defaultValue = "1") Integer pageIndex, @RequestParam(defaultValue = "3") Integer pageSize, String keyWord, Integer roleId, Model model) { Page<User> page = PageHelper.startPage(pageIndex, pageSize); userService.findByPage(keyWord, roleId); PageInfo<User> pageInfo = new PageInfo<User>(page.getPageNum(), page.getPageSize(), page.getPages(), page.getTotal(), page.getResult()); model.addAttribute("pageInfo", pageInfo); model.addAttribute("keyWord", keyWord); model.addAttribute("roleId", roleId); return "user/index"; } }
PageInfo<E>
分页辅助类关键代码package com.aiden.ssm.utils; import java.util.List; /** * 分页信息封装类 * @author Aiden */ public class PageInfo<E> { private int pageIndex; private int pageSize; private int totalPage; private long totalCount; private List<E> dataList; public PageInfo() { } public PageInfo(int pageIndex, int pageSize, int totalPage, long totalCount, List<E> dataList) { this.pageIndex = pageIndex; this.pageSize = pageSize; this.totalPage = totalPage; this.totalCount = totalCount; this.dataList = dataList; } //省略 getter/setter... }
UserService关键代码
List<User> findByPage(String keyWord, Integer roleId);
UserServiceImpl关键代码
@Override public List<User> findByPage(String keyWord, Integer roleId) { List<User> list=null; try { list=userMapper.findByWhere(keyWord,roleId); } catch (SQLException e) { e.printStackTrace(); } return list; }
UserMapper关键代码
List<User> findByWhere(@Param("keyWord") String keyWord, @Param("roleId") Integer roleId) throws SQLException;
UserMapper.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"> <!--namespace 绑定一个对应的dao/mapper接口--> <mapper namespace="com.aiden.ssm.mapper.UserMapper"> <resultMap id="userWithRole" type="com.aiden.ssm.pojo.User"> <id property="userId" column="userId"></id> <association property="role" javaType="com.aiden.ssm.pojo.Role"> <id property="roleId" column="rId"></id> <id property="roleName" column="roleName"></id> </association> </resultMap> <select id="findByWhere" resultMap="userWithRole"> select u.userId,u.roleId,u.realName,u.userName,u.userPwd,u.userSex,u.birthday,u.phone,r.roleId as rId,r.roleName from `user`u inner join role r on u.roleId=r.roleId <trim prefix="where" prefixOverrides="and|or"> <if test="keyWord != null and keyWord != ''"> and u.realName like concat('%',#{keyWord},'%') or u.userName like concat('%',#{keyWord},'%') or u.phone like concat('%',#{keyWord},'%') </if> <if test="roleId != null"> and u.roleId=#{roleId} </if> </trim> </select> </mapper>
二、自定义转换器
关键配置
<bean id="myConversionService" class="org.springframework.context.support.ConversionServiceFactoryBean"> <property name="converters"> <list> <bean class="com.aiden.ssm.web.converter.String2DateConverter"> <constructor-arg type="java.lang.String" value="yyyy-MM-dd"/> </bean> </list> </property> </bean>
关键代码:
package com.aiden.ssm.web.converter; import org.apache.log4j.Logger; import org.springframework.core.convert.converter.Converter; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; /** * 自定义的字符串转日期转换器 */ public class String2DateConverter implements Converter<String, Date> { //日期格式属性 private String datePattern; /** * 一个日期格式参数的构造函数 * @param datePattern 日期格式 */ public String2DateConverter(String datePattern){ this.datePattern = datePattern; } /** * 具体的字符串转日期功能方法 * @param s * @return */ @Override public Date convert(String rsource) { Date date = null; try { date = new SimpleDateFormat(datePattern).parse(rsource); } catch (ParseException e) { e.printStackTrace(); } return date; } }
三、自定义编辑器
BaseController
package com.aiden.ssm.controller; import org.springframework.beans.propertyeditors.CustomDateEditor; import org.springframework.web.bind.WebDataBinder; import org.springframework.web.bind.annotation.InitBinder; import java.text.SimpleDateFormat; import java.util.Date; /** * @author Aiden */ public class BaseController { @InitBinder public void initBinder(WebDataBinder dataBinder){ dataBinder.registerCustomEditor(Date.class,new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"),true)); } }
UserController
@Controller @RequestMapping("/user") public class UserController extends BaseController { @Resource private UserService userService; @GetMapping("/index") public String index() { return "user/index"; } //..... }
四、分页查询
关键依赖:
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.3.0</version> </dependency>
关键配置:
<bean class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 配置数据源dataSource--> <property name="dataSource" ref="druidDataSource"></property> <!--分页拦截器--> <property name="plugins"> <array> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties"> <!--使用下面的方式配置参数,一行配置一个 --> <value> params=value1 </value> </property> </bean> </array> </property> </bean>
关键代码:
UserMapper
List<User> findListByWhere(@Param("keyWord") String keyWord, @Param("roleId") Integer roleId) throws SQLException;
UserMapper.xml
<resultMap id="userWithRole" type="com.aiden.ssm.pojo.User"> <id property="userId" column="userId"></id> <association property="role" javaType="com.aiden.ssm.pojo.Role"> <id property="roleId" column="rId"></id> <id property="roleName" column="roleName"></id> </association> </resultMap> <select id="findListByWhere" resultMap="userWithRole"> select u.userId,u.realName,u.userName,u.userPwd,u.userSex,u.birthday,u.roleId,phone,r.roleId as rId,r.roleName from `user` u inner join role r on u.roleId=r.roleId <trim prefix="where" prefixOverrides="and|or" > <if test="keyWord != null and keyWord != ''"> or u.realName like concat('%',#{keyWord},'%') or u.userName like concat('%',#{keyWord},'%') or u.phone like concat('%',#{keyWord},'%') </if> <if test="roleId != null"> and u.roleId=#{roleId} </if> </trim> </select>
UserService
List<User> findListByWhere(String keyWord, Integer roleId);
UserServiceImpl
@Override public List<User> findByPage(String keyWord, Integer roleId) { List<User> list=null; try { list=userMapper.findByWhere(keyWord,roleId); } catch (SQLException e) { e.printStackTrace(); } return list; }
UserController
@GetMapping("/index") public String index(@RequestParam(defaultValue = "1") Integer pageIndex, @RequestParam(defaultValue = "10") Integer pageSize,Model model) { //关键代码: Page<User> page = PageHelper.startPage(pageIndex, pageSize); //调用业务方法 userService.findByPage(keyWord, roleId); //信息封装至PageInfo<User> PageInfo<User> pageInfo = new PageInfo<User>(page.getPageNum(), page.getPageSize(), page.getPages(), page.getTotal(), page.getResult()); //存储至Model model.addAttribute("pageInfo", pageInfo); return "user/index"; }
具体使用可查阅链接: mybatis-pagehelper使用与配置说明
五、增、删、改
insert.jsp视图
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>新增用户页面</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.css"> </head> <body> <div class="container"> <h4>新增用户信息 <small>ssm</small></h4> <hr> <form action="${pageContext.request.contextPath}/user/doInsert" method="post" name="fromBook" class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">用户账号</label> <div class="col-sm-4"> <input type="text" name="userName" class="form-control input-sm" required="required" placeholder="请输入用户账号" value="test"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">用户密码</label> <div class="col-sm-4"> <input type="password" name="userPwd" class="form-control input-sm" value="123456" required="required" placeholder="请输入用户密码"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">用户姓名</label> <div class="col-sm-4"> <input type="text" name="realName" class="form-control input-sm" value="测试" required="required" placeholder="请输入用户姓名"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">手机号码</label> <div class="col-sm-4"> <input type="text" name="phone" class="form-control input-sm" placeholder="请输入手机号码" value="13512345678"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">角色类型</label> <div class="col-sm-4"> <select class="form-control input-sm" name="roleId"> <option value="1">管理员</option> <option value="2">店长</option> <option value="3" selected>收营员</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">用户性别</label> <div class="col-sm-4"> <div class="radio"> <label><input type="radio" name="userSex" value="1" checked>男</label> <label><input type="radio" name="userSex" value="0">女</label> </div> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">出生日期</label> <div class="col-sm-4"> <input type="text" name="birthday" onfocus="WdatePicker()" value="2000-01-01" class="form-control input-sm" required="required" placeholder="请选择日期 格式为:yyyy-MM-dd"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-info">提交</button> <a href="javascript:history.go(-1)" class="btn btn-default">返回</a> </div> </div> </form> </div> <script src="${pageContext.request.contextPath}/statics/js/calendar/WdatePicker.js"></script> </body> </html>
UserController
//显示新增用户页面 @GetMapping("/insert") public String insert() { return "user/insert"; } //处理添加用户请求 @PostMapping("/doInsert") public String insert(User user) { int result = userService.insert(user); if (result > 0) { System.out.println("==========>操作成功!"); } else { System.out.println("==========>操作失败!"); } return "user/insert"; }
UserService
int insert(User user);
UserServiceImpl
@Override public int insert(User user) { int result=0; try { result=userMapper.insert(user); } catch (SQLException e) { e.printStackTrace(); } return result; }
UserMapper
int insert(User user) throws SQLException;
UserMapper.xml
<insert id="insert"> INSERT INTO `user`(`roleId`, `realName`, `userName`, `userPwd`, `userSex`, `birthday`, `phone`) VALUES (#{roleId},#{realName},#{userName},#{userPwd},#{userSex},#{birthday},#{phone}); </insert>
六、事务
<!--配置事务管理器--> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="druidDataSource"></property> </bean> <tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx:attributes> <tx:method name="insert*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="update*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="delete*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> </tx:attributes> </tx:advice> <!--配置aop事务处理--> <aop:config> <aop:pointcut id="serviceMethod" expression="execution(* com.aiden.ssm.service..*(..)))"/> <aop:advisor advice-ref="txAdvice" pointcut-ref="serviceMethod"></aop:advisor> </aop:config>
关键代码:
@Service @Transactional public class UserServiceImpl implements UserService { @Resource private UserMapper userMapper; //省略 接口定义方法... //注意事项接口名要遵循 insertXXX、updateXXX、deleteXXX //例如: int insert(User user); int delete(int id); int update(User user); }
七、拦截器
关键配置:
<mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/user/**" /> <bean class="com.aiden.ssm.web.interceptor.UserInterceptor"></bean> </mvc:interceptor> </mvc:interceptors>
关键代码:
package com.aiden.ssm.web.interceptor; import com.aiden.ssm.pojo.User; import org.springframework.web.servlet.handler.HandlerInterceptorAdapter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; /** * @author Aiden */ public class UserInterceptor extends HandlerInterceptorAdapter { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //获取请求的路径,如果路径中包含/user/login/则放行通过 String requestURI = request.getRequestURI(); if (requestURI.contains("user/login")) return true;//放行 HttpSession session = request.getSession(); User user = (User)session.getAttribute("loginUser"); if(user!=null){ return true;//放行 }else{ response.sendRedirect(request.getContextPath()+"/401.jsp"); } return false; } }
401视图页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>访问拦截</title> </head> <body> <h3>您的访问权限不足!等 <a href="${pageContext.request.contextPath}/user/login">登录</a> 后再访问</h3> </body> </html>