技术：bootstarp+jquery+ajax+thymeleaf（了解程度）
功能描述：单击修改密码 => 弹出模态框 =>模态框内容有原密码、新密码、确认密码是三行 + 确认与取消按钮
效果展示：
文字有点多，建议Ctrl+F 搜索关键词 ： 修改密码 modal-body
代码思路：
先进行修改密码的页面设计
导航栏设计（页面部分核心代码展示）：
modal-body 配合模态框，下一步讲模态框的大概使用方法
<div th:fragment="header" class="header-box">
<div class="logo-box">
<span>Gan教育在线考试系统</span>
</div>
<div class="welcome-box">
<span>欢迎 </span>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
[[${session.loginTeacher.tname}]] <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0);">
<span class="glyphicon glyphicon-user"></span> 个人信息
</a>
</li>
<li>
<a href="javascript:void(0);" onclick="main.update()">
<span class="glyphicon glyphicon-lock"></span> 修改密码
</a>
</li>
<li>
<a href="javascript:void(0);" onclick="main.exit();">
<span class="glyphicon glyphicon-log-out"></span> 退出系统
</a>
</li>
</ul>
</div>
</div>
<!-- Modal-->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ><span >×</span></button>
<h4 class="modal-title" id="modal-title">修改密码</h4>
</div>
<div class="modal-body" id="modal-body">
<!--注意 这边是空的，配合模态框-->
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="main.updatePwd()">提交</button>
</div>
</div>
</div>
</div>
</div>
首先，模态框要配合js点击事件的使用，单击 修改密码 按钮，弹出模态框，这里给出js代码
代码逻辑：1.单击 修改密码按钮 onclick=main.update() ,触发js函数，发送/common/update请求(这里mvc配置了相关路径)，后端返回一个视图，前端再展示这个视图view。
2.在弹出的模态框里单击确认按钮 onclick=main.updatePwd(),触发js函数，方/common/updatePwd请求(这里mvc配置了相关路径),返回Json数据（ture或false），前端负责判断 new-pass和 re-pass 是否相同，后端判断old-pass数据库中是否存在。
var main={}
main.exit = function(){
if(!confirm('是否确认退出'))
return ;
location.href='common/exit' ;
}
main.update = function (){
$.post('common/update',{},function (view) {
//不传参，返回网页内容view，这个view就是下面的updatePwdTemplate.html
$('#modal-body').html(view);
//展示模态框
$('#myModal').modal('show');
});
}
main.updatePwd = function(){
var new_pass = $('#new-pass').val();
var re_pass = $('#re-pass').val();
var old_pass = $('#old-pass').val();
if(new_pass != re_pass){
alert('两次密码不一致') ;
return ;
}
var param = {
old_pass:old_pass,
new_pass:new_pass
}
$.post('common/updatePwd',param,function(f) {
if (f == true) {
alert('密码修改成功') ;
$('#myModal').modal('hide') ;
return ;
}
alert('原密码不正确') ;
});
}
新建文件 updatePwdTemplate.html，配合 $('#modal-body').html(view) 使用
将实例稍微改动一下，变成这样：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<form>
<div class="form-group">
<h2 align="center" th:text="#{login_label}"></h2></div>
<div id="msg"></div>
<div class="form-group">
<label for="old-pass" > 原密码</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" class="form-control" id="old-pass">
</div>
</div>
<div class="form-group">
<label for="new-pass">新密码</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" class="form-control" id="new-pass">
</div>
</div>
<div class="form-group">
<label for="re-pass"> 确认密码</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" class="form-control" id="re-pass">
</div>
</div>
</form>
</html>
至此，修改密码界面设计（前端部分）大致完成，下面分别从controller,service,dao层说下后端的实现
controller层：展示部分代码，登录等功能模块代码此处不展示
@Controller
public class CommonController {
@Autowired
private TeacherService teacherService;
Logger log = LoggerFactory.getLogger(CommonController.class);
@RequestMapping("/common/update")
public String update(){
return "common/updatePwdTemplate";
}
@RequestMapping("/common/updatePwd")
@ResponseBody
public boolean updatePwd(String old_pass , String new_pass,HttpSession session){
log.debug("old_pass ["+old_pass+"]");
log.debug("new_pass [{}]",new_pass);
Teacher teacher = (Teacher) session.getAttribute("loginTeacher");
log.debug("[{}]",teacher);
old_pass = DigestUtil.md5Hex(old_pass) ;
if(!teacher.getPass().equals(old_pass)){
log.debug("update fail");
return false ;
}
new_pass = DigestUtil.md5Hex(new_pass);
Long tid = teacher.getId();
teacherService.updatePwd(tid,new_pass);
log.debug("update success");
return true ;
}
}
service层：在实现类里注解@Service
public interface TeacherService {
void updatePwd( Long id, String pass);
}
@Service
public class TeacherServiceImpl implements TeacherService {
private Logger logger = LoggerFactory.getLogger(TeacherServiceImpl.class);
@Autowired
private TeacherMapper teacherMapper;
@Override
public void updatePwd(Long id, String pass) {
teacherMapper.updatePwd(id,pass);
}
}
dao层：
public interface TeacherMapper {
void updatePwd(@Param("id") Long id,@Param("pass") String pass);
}
用接口方式进行传参的时候，它不支持两个的，必须用@Param注解指定它的名字，否则在mybatis框架底层它会把这两个参数编程数组
mapper配置，namespace是TeacherMapper的全类名
<?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">
<mapper namespace="com.gan.examonline.dao.TeacherMapper">
<update id="updatePwd" parameterType="com.gan.examonline.domain.Teacher">
update t_teacher
set pass = #{pass}
where id = #{id}
</update>
</mapper>