SpringBoot工程下活动模块设计及实现(添加)

活动模块添加业务实现

在活动列表页面，利用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">&times;</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();//这种方式其实就是同步提交    
     
     //=======================================
         
         //一、定义url
         let url="/activity/doSaveObject";
         //二、定义参数
         var params={//注意：这里的    # titleId...要和form中id属性值相同    
                 title:$("#titleId").val(),
                 category:$("#categoryId").val(),
                 startTime:$("#startTimeId").val(),
                 endTime:$("#endTimeId").val(),
                 remark:$("#remarkId").val()
         }
         //三、发送异步请求    
            $.ajax({
                type:"post",
                url:url,
                data:params,
                success:function(result){
                    alert(result);
                    //一、关闭(隐藏)模态框        
                    $('#myModal').modal('hide');
                    //二、从新执行查询，局部刷新        
                    findActivitys();
                }
            });
             
    }

启动tomcat服务器进行访问测试分析

启动tomcat ，访问活动列表页面：

在活动列表页面，点击添加按钮，而后启动活动添加模块框，执行添加操做：