SpringBoot工程下活動(Activity)模塊設計及實現?
業務描述
基於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
第二步：建立項目時指定項目核心依賴。
jquery
第三步：項目建立之後分析其結構。web
項目配置文件內容初始化
#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架構設計，如圖所示：
ajax
活動模塊查詢業務實現
業務描述
從數據庫查詢全部活動(Activity)信息，而後呈如今頁面上(基於JS方式進行呈現)正則表達式
業務時序分析
在瀏覽器地址欄輸入查詢活動信息的url獲取活動信息，其時序過程如圖所示：
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("/activity/doFindActivitys")
public String doFindActivitys(Model model) {
List<Activity> list=activityService.findActivitys();
model.addAttribute("list", list);
return "activity";
}
}
Activity 列表頁面設計及實現
本次頁面樣式基於bootstrap(一個前端框架，官網爲bootcss.com)進行實現，首先在項目工程中添加靜態資源，如圖所示：
設計activity.html頁面，引入bootstrap,jquery等相關資源，如圖所示：
在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配置錯誤，如圖所示：
- 空指針異常，如圖所示：
項目啓動及運行過程當中的BUG分析
活動模塊添加業務實現
業務描述
在活動列表頁面，設計添加按鈕，點擊添加按鈕時彈出模態框，在模態框中呈現活動添加表單元素，其添加表單原型設計，
如圖所示：
業務時序分析
活動添加業務，其時序分析，如圖所示：
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>
相關屬性的應用說明，如圖所示：
固然，也能夠以註解的方式進行SQL映射，如圖所示：
當活動建立好之後，假如到告終束時間，動態更新活動的狀態，代碼以下：
@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">×</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 ，訪問活動列表頁面，如圖所示：
在活動列表頁面，點擊添加按鈕，而後啓動活動添加模塊框，執行添加操做如圖所示:
日曆控件拓展實現(開始時間和結束時間經過選擇實現)，效果展現，如圖所示:
Bootstrap-datapicker控件的實現過程，如圖所示:
項目啓動及運行過程當中的BUG分析
- JS 語法問題，如圖所示：
總結(Summary)
本模塊中講解了活動模塊中類的設計，映射設計，交互設計以及實現，而後能夠基於此模塊的練習增強對業務和技術上的設計及是實現。
相關文章
- 1. SpringBoot工程下活動（Activity）模塊設計及實現
- 2. SpringBoot工程下活動模塊設計及實現(添加)
- 3. 12-SpringBoot 工程中的響應標準設計及實現
- 4. SpringBoot 工程中的響應標準設計及實現
- 5. 架構設計-商品模塊的領域驅動設計思路及實現
- 6. 軟件工程—設計模式 詳解及代碼實現
- 7. 《linux內核設計與實現》實踐之模塊及深刻
- 8. Android活動（Activity）
- 9. Activity（活動）
- 10. Android 活動(Activity)
- 更多相關文章...
- • 移動設備 統計 - 瀏覽器信息
- • 現實生活中的 XML - XML 教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
