SpringBoot工程下活動（Activity）模塊設計及實現

時間  2020-09-29
標籤 springboot 工程 活動 activity 模塊 設計 實現 欄目 Spring 简体版
原文   原文鏈接

業務描述

基於Spring,MyBatis,SpringBoot,Thymeleaf,Ajax技術實現活動模塊的查詢,添加等操做。javascript

項目環境初始化

準備工做

1. MySQL(5.7)
2. JDK (1.8)
3. Maven (3.6.3)
4. STS(4.7.1)

數據庫初始化

打開mysql控制檯,而後按以下步驟執行goods.sql文件。
第一步:登陸mysql。css

mysql –uroot –proot

第二步:設置控制檯編碼方式。html

set names utf8;

第三步:執行activity.sql文件（切記不要打開文件複製到mysql客戶端運行）。前端

source d:/activity.sql

其中activity.sql文件內容以下：java

drop database if exists dbactivity;
create database dbactivity default character set utf8;
use dbactivity;
create table tb_activity(
     id bigint primary key auto_increment,
     title varchar(100) not null,
     category varchar(100) not null,
     startTime datetime not null,
     endTime datetime not null,
     remark text,
     state tinyint,
     createdTime datetime not null,
     createdUser varchar(100)
)engine=InnoDB;
insert into tb_activity values (null,'ABS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
insert into tb_activity values (null,'VALIDATE','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
insert into tb_activity values (null,'VALIDATE','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
insert into tb_activity values (null,'ABS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
insert into tb_activity values (null,'ACCESS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');

建立項目並添加依賴

第一步：基於start.spring.io 建立項目並設置基本信息。mysql

image.png

第二步：建立項目時指定項目核心依賴。
image.pngjquery

第三步：項目建立之後分析其結構。web

image.png

項目配置文件內容初始化

#server
server.port=80
#server.servlet.context-path=/
#spring datasource
spring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root

#spring mybatis
mybatis.mapper-locations=classpath:/mapper/*/*.xml

#spring logging
logging.level.com.cy=debug

#spring thymeleaf
spring.thymeleaf.prefix=classpath:/templates/modules/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

項目API架構設計

其API架構設計，如圖所示：
image.pngajax

活動模塊查詢業務實現

業務描述

從數據庫查詢全部活動(Activity)信息，而後呈如今頁面上(基於JS方式進行呈現)正則表達式

業務時序分析

在瀏覽器地址欄輸入查詢活動信息的url獲取活動信息，其時序過程如圖所示：
image.png

Dao接口方法及映射定義

定義活動模塊數據層接口及查詢方法，代碼以下：

package com.cy.pj.activity.dao;
import com.cy.pj.activity.pojo.Activity;

@Mapper
public interface ActivityDao {
    
     @Select("select * from tb_activity order by createdTime desc")
     List<Activity> findActivitys();
}

Service接口方法定義及實現

定義service接口以及獲取活動信息的方法，代碼以下：

package com.cy.pj.activity.service;
import java.util.List;
import com.cy.pj.activity.pojo.Activity;
//引入包中的類:ctrl+shift+o

public interface ActivityService {
    List<Activity> findActivitys();
}

定義service接口實現類，並重寫接口方法，代碼以下：

package com.cy.pj.activity.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cy.pj.activity.dao.ActivityDao;
import com.cy.pj.activity.pojo.Activity;
import com.cy.pj.activity.service.ActivityService;

@Service
public class ActivityServiceImpl implements ActivityService {
    @Autowired
    private ActivityDao activityDao;
    @Override
    public List<Activity> findActivitys() {
         return  activityDao.findActivitys();
    }
}

Controller方法定義及實現

package com.cy.pj.activity.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.cy.pj.activity.pojo.Activity;
import com.cy.pj.activity.service.ActivityService;

@Controller
public class ActivityController {
     @Autowired
     private ActivityService activityService;
     
     @RequestMapping("doActivityUI")
     public String doActivityUI(){
          return "activity";
     }
     
     /**查詢全部活動信息*/
     @RequestMapping("/activity/doFindActivitys")
     public List<Activity> doFindActivitys() {
         List<Activity>  list=activityService.findActivitys();
         return list;
     }
}

Activity 列表頁面設計及實現

本次頁面樣式基於bootstrap(一個前端框架，官網爲bootcss.com)進行實現，首先在項目工程中添加靜態資源，如圖所示：

image.png
設計activity.html頁面，引入bootstrap,jquery等相關資源，如圖所示：

image.png

在activity.html頁面中添加呈現Activity數據的html元素：

<table class="table">
    <thead>
        <tr>
            <th>title</th>
            <th>Category</th>
            <th>StartTime</th>
            <th>EndTime</th>
            <th>State</th>
            <th>Operation</th>
        </tr>
    </thead>
    <tbody id="tbodyId">
        <tr><td colspan="6">數據正在加載中.......</td></tr>
    </tbody>
</table>

基於Ajax異步加載服務端活動數據並進行局部刷新

<script type="text/javascript">
      function doFindActivitys(){
          var url="/activity/doFindActivitys"
          //啓動ajax技術,基於GET請求方式獲取服務端json數據
          //getJSON函數默認會將服務端返回的json串轉換爲js對象
          $.getJSON(url,function(result){
              var tBody=$("#tbodyId");
              tBody.empty();//清空原有body內容
              for(var i=0;i<result.length;i++){//循環一次,迭代一行
                  //構建當前行對象
                  var tr=`<tr>
                          <td>${result[i].title}</td>
                          <td>${result[i].category}</td>
                          <td>${result[i].startTime}</td>
                          <td>${result[i].endTime}</td>
                          <td>${result[i].state==1?'有效':'無效'}</td>
                          <td><button type='button' class='btn btn-danger btn-sm'>delete</button></td>
                         </tr>`
                  //將每一行的內容都追加tbody中
                  tBody.append(tr);
              }
          });
      };
      doFindActivitys();
    </script>

啓動tomcat服務器進行訪問測試分析

  • 數據庫連接的url配置錯誤，如圖所示：

image.png

  • 空指針異常，如圖所示：

image.png

項目啓動及運行過程當中的BUG分析

活動模塊添加業務實現

業務描述

在活動列表頁面，設計添加按鈕，點擊添加按鈕時彈出模態框，在模態框中呈現活動添加表單元素，其添加表單原型設計，
如圖所示：
image.png

業務時序分析

活動添加業務，其時序分析，如圖所示：
image.png

Dao接口方法及映射定義

在ActivityDao接口中添加持久化活動信息的方法，代碼以下：

int insertObject(Activity activity);

在ActivityMapper映射文件中添加映射元素，代碼以下：

<insert id="insertObject" parameterType="com.cy.pj.activity.pojo.Activity"
             useGeneratedKeys="true" keyProperty="id">
          insert into tb_activity
          (title,category,startTime,endTime,remark,state,createdUser,createdTime) 
          values    
          (#{title},#{category},#{startTime},#{endTime},
          #{remark},#{state},#{createdUser},now())
 </insert>

相關屬性的應用說明，如圖所示：
image.png
固然，也能夠以註解的方式進行SQL映射，如圖所示：
image.png
當活動建立好之後，假如到告終束時間，動態更新活動的狀態，代碼以下：

@Update("update tb_activity set state=0 where id=#{id}")
int updateState(Long id);

Service接口方法定義及實現

在ActivityService接口中，添加保存活動信息的方法，代碼以下：

int saveActivity(Activity entity);

在ActivityServiceImpl實現類中添加，接口方法的實現，代碼以下：

@Override
public int saveActivity(Activity entity) {
        int rows=activityDao.insertObject(entity);
        Timer timer=new Timer();
         //此對象能夠負責去執行一些任務(這個對象內置一個線程和一個任務隊列)
         //啓動線程執行任務調度
        timer.schedule(new TimerTask() {//TimerTask爲任務
            @Override
            public void run() {
                //一旦調用此任務的線程得到了CPU就會執行這個任務的run方法
                activityDao.updateState(entity.getId());
                timer.cancel();//退出任務調度(後續線程也會銷燬)
            }
        }, entity.getEndTime());//按指定時間執行任務.
        return rows;
}

Controller方法定義及實現

在ActivityController中添加，處理添加請求的方法，代碼以下：

@RequestMapping("/activity/doSaveActivity")
public String doSaveActivity(Activity activity) {
 activityService.saveActivity(activity);
 return "redirect:/activity/doFindActivitys";
}

Activity 頁面添加表單設計及實現

在activity.html頁面中添加表單元素，用於實現與用戶交互，首先在activity頁面上添加一個添加按鈕，代碼以下：

<button type="button" class="btn btn-primary btn-sm"
            data-toggle="modal" data-target="#myModal">建立活動
</button>

在指定位置添加模態框（可參考bootcss.com），代碼以下：

<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">    
                    </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="doSaveObject()">
                        Save Changes</button>
                    </div>
                </div>
            </div>
</div>

在模態框」modal-body」位置，添加form表單，代碼以下：

<form class="form-horizontal" th:action="@{/activity/doSaveActivity}" method="post">
<div class="form-group">
    <label for="titleId" class="col-sm-2 control-label">標題</label>
        <div class="col-sm-10">
         <input type="text" class="form-control"  name="title" id="titleId" placeholder="title">
        </div>
</div>
<div class="form-group">
<label for="categoryId" class="col-sm-2 control-label">類型</label>
    <div class="col-sm-10">
        <select id="categoryId" name="category" class="form-control">
            <option value="教育培訓">教育培訓</option>
            <option value="企業活動">企業活動</option>
            <option value="交友活動">交友活動</option>
        </select>
    </div>
</div>
<div class="form-group" >
<label for="startTimeId" class="col-sm-2 control-label">開始時間</label>
    <div class="col-sm-10">
       <input type="text" class="form-control form_datetime"
         name="startTime" id="startTimeId" placeholder="start time">
    </div>
</div>
<div class="form-group">
    <label for="endTimeId" class="col-sm-2 control-label">結束時間</label>
    <div class="col-sm-10">
           <input type="text" class="form-control form_datetime" 
            name="endTime" id="endTimeId" placeholder="end time">
    </div>
</div>
<div class="form-group">
    <label for="remarkId" class="col-sm-2 control-label">備註</label>
        <div class="col-sm-10">
           <textarea type="text" class="form-control"  rows="5" name="remark" id="remarkId">
            </textarea>
    </div>
</div>
</form>

添加JS代碼，處理模態框Save按鈕事件，代碼以下：

<script type="text/javascript">
       function doSaveObject(){
         //表單校驗(可考慮使用正則表達式)
         //提交表單
         //$(form)基於標籤名(例如這裏的標籤名form)稱獲取表單對象
         //submit爲jquery中的一個對象函數,經過此函數能夠提交表單.
          $("form").submit();//提交表單
       }
    </script>

啓動tomcat服務器進行訪問測試分析

啓動tomcat ，訪問活動列表頁面，如圖所示：
image.png

在活動列表頁面，點擊添加按鈕，而後啓動活動添加模塊框，執行添加操做如圖所示:
image.png
日曆控件拓展實現(開始時間和結束時間經過選擇實現)，效果展現，如圖所示:
image.png
Bootstrap-datapicker控件的實現過程，如圖所示:
image.png

項目啓動及運行過程當中的BUG分析

  • JS 語法問題，如圖所示：

image.png

總結(Summary)

本模塊中講解了活動模塊中類的設計，映射設計，交互設計以及實現，而後能夠基於此模塊的練習增強對業務和技術上的設計及是實現。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程