业务描述
基于Spring,MyBatis,SpringBoot,Thymeleaf,Ajax技术实现活动模块的查询,添加等操作。
项目环境初始化
准备工作
1. MySQL(5.7)
2. JDK (1.8)
3. Maven (3.6.3)
4. STS(4.7.1)数据库初始化
打开mysql控制台,然后按如下步骤执行goods.sql文件。
第一步:登录mysql。
mysql –uroot –proot第二步:设置控制台编码方式。
set names utf8;第三步:执行activity.sql文件（切记不要打开文件复制到mysql客户端运行）。
source d:/activity.sql其中activity.sql文件内容如下：
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 创建项目并设置基本信息。
第二步：创建项目时指定项目核心依赖。
第三步：项目创建以后分析其结构。
项目配置文件内容初始化
#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架构设计，如图所示：
活动模块查询业务实现
业务描述
从数据库查询所有活动(Activity)信息，然后呈现在页面上(基于JS方式进行呈现),如图所示：
业务时序分析
在浏览器地址栏输入查询活动信息的url获取活动信息，其时序过程如图所示：
POJO类设计及实现
创建Activity类,基于此类对象封装从数据库获取的活动信息,代码如下:
package com.cy.pj.activity.pojo;
import java.util.Date;
import lombok.Data;
@Data
public class Activity {
private Integer id;
private String title;
private String category;
private Date startTime;
private Date endTime;
private String remark;
private Integer state;
private Date createdTime;
private String createdUser;
}其中,@Data注解为Lombok注解,需要在IDE环境中已经安装lombok插件,项目中添加lombok依赖,假如没有也可以自己添加set/get相关方法
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 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 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 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/doActivityUI")
public String doActivityUI(){
return "activity";
}
/**查询所有活动信息*/
@RequestMapping("/activity/doFindActivitys")
@ResponseBody
public List doFindActivitys() {
List list=activityService.findActivitys();
return list;
}
}
Activity 列表页面设计及实现
本次页面样式基于bootstrap(一个前端框架，官网为bootcss.com)进行实现，首先在项目工程中添加静态资源，如图所示：
设计activity.html页面，引入bootstrap,jquery等相关资源，如图所示：
在activity.html页面中添加呈现Activity数据的html元素：
title
Category
StartTime
EndTime
State
Operation
数据正在加载中.......
基于Ajax异步加载服务端活动数据并进行局部刷新
启动tomcat服务器进行访问测试分析
启动项目，在浏览器中输入activity页面的访问地址，呈现活动信息，如图所示：
客户端断点调试分析,如图所示:
运行时断点设置,如图所示:
进入断点方法内部,如图所示:
检查响应数据在客户端的呈现,如图所示:
项目启动及运行过程中的BUG分析
- 数据库链接的url配置错误，如图所示：
- 空指针异常，如图所示：
- JS 引入错误，如图所示：
- JS 语法错误，如图所示：
活动模块添加业务实现
业务描述
在活动列表页面，设计添加按钮，点击添加按钮时弹出模态框，在模态框中呈现活动添加表单元素，其添加表单原型设计，
如图所示：
业务时序分析
活动添加业务，其时序分析，如图所示：
Dao接口方法及映射定义
在ActivityDao接口中添加持久化活动信息的方法，代码如下：
int insertObject(Activity activity);在ActivityMapper映射文件中添加映射元素，代码如下：
insert into tb_activity
(title,category,startTime,endTime,remark,state,createdUser,createdTime)
values
(#{title},#{category},#{startTime},#{endTime},
#{remark},#{state},#{createdUser},now())
"#{}"表达式数据获取分析,如图所示:
执行insert操作时获取数据库主键id值，如图所示：
当然，也可以以注解的方式进行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")
@ResponseBody
public String doSaveActivity(Activity activity) {
activityService.saveActivity(activity);
return "save ok";
}
Activity 页面添加表单设计及实现
在activity.html页面中添加表单元素，用于实现与用户交互，首先在activity页面上添加一个添加按钮，代码如下：
在指定位置添加模态框（可参考bootcss.com），代码如下：
在模态框”modal-body”位置，添加form表单，代码如下：
添加JS代码，处理模态框Save按钮事件，代码如下：
function doSaveObject(){
//1.定义url
let url="/activity/doSaveObject";
//2.定义请求参数
var params=
$("#saveFormId").serialize();//serialize()为jquery中直接获取表单数据方法
console.log("params",params);
//3.发送异步请求
$.ajax({
type:"post",
url:url,
data:params,
success:function(result){
alert(result);
//隐藏模态框
$('#myModal').modal('hide');
//重新执行查询，局部刷新
findActivitys();
}
});
}启动tomcat服务器进行访问测试分析
启动tomcat ，访问活动列表页面，如图所示：
在活动列表页面，点击添加按钮，然后启动活动添加模块框，执行添加操作如图所示:
Spring MVC 为方法参数赋值分析,如图所示:
日历控件拓展实现(开始时间和结束时间通过选择实现)，效果展示，如图所示:
Bootstrap-datapicker控件的实现过程，如图所示:
项目启动及运行过程中的BUG分析
- BindingException，如图所示：
- 400 异常，如图所示：
- 服务端日期格式设计，如图所示：
- 完整性约束异常,如图所示:
总结(Summary)
本模块中讲解了活动模块中类的设计，映射设计，交互设计以及实现，然后可以基于此模块的练习加强对业务和技术上的设计及是实现。