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 ，訪問活動列表頁面：

在活動列表頁面，點擊添加按鈕，而後啓動活動添加模塊框，執行添加操做：