流动模块增加业务实现
在流动列表页面，利用bootstrap技术增加按钮，点击增加按钮时弹出模态框，在模态框中出现流动增加表单元素，其增加表单原型设计，
如图所示：
流动增加业务，其时序剖析：
（数据层）Dao接口办法及映射定义
在ActivityDao接口中增加办法：
//因为这里的sql语句比较复杂，所以将sql写到xml文件中int insertObject(Activity entity);在ActivityMapper映射文件中增加映射元素：
在resources目录下创立mapper目录，在mapper目录下创立xml映射文件；在xml映射文件中写sql语句：
<?xml version="1.0" encoding="UTF-8"?><!-- 这里的头文件从官网:mybatis.org/mybatis-3 中拿 --><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!-- 在mapper标签中加上namespace属性并指向数据层接口（dao）类全名 --> <mapper namespace="com.cy.pj.activity.dao.ActivityDao"> <!-- insert设置id获取数据层增加办法名（insertObject） --> <insert id="insertObject"> insert into tb_activity (title,category,startTime,endTime,remark,state,createdTime,createdUser) values <!-- 上面属性在pojo类中必须要有get办法或者用@Data注解 --> (#{title},#{category},#{startTime},#{endTime},#{remark},1,now(),#{createdUser}) </insert> </mapper>（业务层）Service接口办法定义及实现
在ActivityService接口中，增加保留流动信息的办法：
int saveActivity(Activity entity);在ActivityServiceImpl实现类中增加，接口办法的实现：
@Override public int insertObject(Activity entity) { return activityDao.insertObject(entity); }（管制层）Controller办法定义及实现
在ActivityController中增加，解决增加申请的办法：
@RequestMapping("doSaveObject") @ResponseBody public String doSaveObject(Activity entity) { activityService.insertObject(entity); //return "activity";//这种形式返回的间接是整个页面 return "save ok"; }Activity 页面增加表单设计及实现
在activity.html页面中增加表单元素，用于实现与用户交互，用bootstrap技术设置增加按钮（可参考bootcss.com）；首先引入bootstrap：
在jquery.min.js上面增加boootstrap的js文件：
设置增加按钮：
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">创立新流动</button>成果出现：
在指定地位增加模态框并在指定地位增加form表单：
留神：form表单中name的属性值要和pojo中get办法的name属性值雷同
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">增加流动</h4> </div> <div class="modal-body"> <form <!-- 用传统形式将获取到的数据提交到管制层 --> action="/activity/doSaveObject" method="post"> <div class="form-group"> <label for="titleId">title</label> <input type="text" class="form-control" name="title" id="titleId" placeholder="please input title"> </div> <div class="form-group"> <label for="categoryId">Category</label> <select class="form-control" name="category" id="categoryId"> <option value="training">教育培训</option> <option value="Playing">企业流动</option> </select> </div> <div class="form-group"> <label for="startTimeId">startTime</label> <input type="text" class="form-control" name="startTime" id="startTimeId" placeholder="please input startTime"> </div> <div class="form-group"> <label for="endTimeId">endtTime</label> <input type="text" class="form-control" name="endTime" id="endTimeId" placeholder="please input endTime"> </div> <div class="form-group"> <label for="remarkId">remark</label> <textarea rows="3" cols="10" type="text" class="form-control" name="remark" id="remarkId" placeholder="please input remark"> </textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onclick="doSave()">Save changes</button> </div> </div> </div> </div>增加JS代码，解决模态框Save按钮事件：
function doSave(){ //$("form").submit();//这种形式其实就是同步提交 //======================================= //1、定义url let url="/activity/doSaveObject"; //2、定义参数 var params={//留神：这里的 # titleId...要和form中id属性值雷同 title:$("#titleId").val(), category:$("#categoryId").val(), startTime:$("#startTimeId").val(), endTime:$("#endTimeId").val(), remark:$("#remarkId").val() } //3、发送异步申请 $.ajax({ type:"post", url:url, data:params, success:function(result){ alert(result); //1、敞开(暗藏)模态框 $('#myModal').modal('hide'); //2、从新执行查问，部分刷新 findActivitys(); } }); }启动tomcat服务器进行拜访测试剖析
启动tomcat ，拜访流动列表页面：
在流动列表页面，点击增加按钮，而后启动流动增加模块框，执行增加操作：