关于javascript: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();// 这种形式其实就是同步提交    
     
     //=======================================
         
         //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，拜访流动列表页面：

在流动列表页面，点击增加按钮，而后启动流动增加模块框，执行增加操作：