关于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 ，拜访流动列表页面：

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