共计 8160 个字符，预计需要花费 21 分钟才能阅读完成。
pojo 层 层 层 层 层 层
@Data
public class Activity {
private Integer id;
private String title;
private String category;
//@DateTimeFormat 作用于 set 办法示意为属性赋值，基于什么日期格局执行
@DateTimeFormat(pattern = "yyyy/MM/dd HH:mm")
//@JsonFormat 用于通知 spring mvc 转换 json 时, 将日期依照指定格局进行转换.
//@JsonFormat 作用于对象 get 办法，示意获取值时的一种格局
@JsonFormat(pattern = "yyyy/MM/dd HH:mm",timezone = "GMT+8")
private Date startTime;
@DateTimeFormat(pattern = "yyyy/MM/dd HH:mm")
@JsonFormat(pattern = "yyyy/MM/dd HH:mm",timezone = "GMT+8")
private Date endTime;
private String remark;
private Integer state=1;
@JsonFormat(pattern = "yyyy/MM/dd HH:mm",timezone = "GMT+8")
private Date createdTime;
private String createdUser;
}dao 层 层 层 层 层
@Mapper
public interface ActivityDao {
/**
* 批改流动信息状态, 将其设置为已完结状态 0;
* @param id
* @return
*/
@Update("update tb_activity set state=0 where id=#{id}")
int updateState(Integer id);
/**
* 增加流动信息
* @param entity
* @return
*/
int insertObject(Activity entity);
/**
* 获取所有流动信息, 一行记录映射为一个 Activity 对象(row map- 行映射)
* @return
*/
@Select("SELECT * FROM tb_activity order by createdTime desc")
List<Activity> findActivitys();}service 层 层 层 层 层
package com.cy.pj.activity.service;
import java.util.List;
import com.cy.pj.activity.pojo.Activity;
public interface ActivityService {int saveObject(Activity entity);
List<Activity> findActivitys();}service imp 实现层 实现层 实现层 实现层 实现层
@Service
public class ActivityServiceImpl implements ActivityService {
@Autowired
private ActivityDao activityDao;
@Override
public int saveObject(Activity entity) {// TODO Auto-generated method stub //System.out.println("entity.insert.before.id="+entity.getId());
int rows=activityDao.insertObject(entity);
//System.out.println("entity.insert.after.id="+entity.getId());
// 心愿工夫到了 (endTime) 主动批改活动状态
// 解决方案: 基于任务调度去实现(任务调度 - 基于工夫的设计主动执行工作)
// 代码计划:
//1)借助 Java 中的 Timer 对象去实现
Timer timer=new Timer();// 此对象创立时会在底层启动一个线程, 通过此线程对工夫进行监控
//2)执行工作(工作类型为 TimerTask 类型)
timer.schedule(new TimerTask() {
@Override
public void run() {
// 在此地位批改流动的状态信息
System.out.println("开始执行活动状态的批改操作"); activityDao.updateState(entity.getId());
timer.cancel();}
}, entity.getEndTime());
//2)借助 Java 线程池中的任务调度对象 (ScheduledExecutorService) 去实现
//3)借助第三方框架去实现(quartz)
return rows;
}
@Override
public List<Activity> findActivitys() {
// 未来要进行缓存设计, 记录日志,....
return activityDao.findActivitys();}
}Controller 层 层 层 层 层
@Controller
@RequestMapping("/activity/")
public class ActivityController {
@Autowired
private ActivityService activityService;
/**
* 基于此办法返回 activity 页面
* @return
*/
@RequestMapping("doActivityUI")
public String doActivityUI() {return "activity";}
@RequestMapping("doSaveObject")
@ResponseBody
public String doSaveObject(Activity entity) {System.out.println(entity);// 如果心愿这样查看对象内容, 则须要重写对象的 toString 办法
activityService.saveObject(entity);
//return "activity";// 这样返回，刷新的是整个页面
System.out.println("ABCD");
return "save ok";
}
@RequestMapping("doFindActivitys")
@ResponseBody // 通知 spring 框架将返回值对象转换为 json 格局字符串
public List<Activity> doFindActivitys()throws Exception{// Thread.sleep(5000);
List<Activity> list=activityService.findActivitys();
return list;
}
}xml 配置文件。。。<mapper namespace="com.cy.pj.activity.dao.ActivityDao">
<!--
1)useGeneratedKeys="true" 示意应用 insert 操作主动生成的主键值.
2)keyProperty="id" 将自增的主键值赋值给参数对象 activity 的 id 属性
-->
<insert id="insertObject" parameterType="com.cy.pj.activity.pojo.Activity"
useGeneratedKeys="true"
keyProperty="id">
insert into tb_activity (title,category,startTime,endTime,remark,state,createdTime,createdUser)
values
(#{title},#{category},#{startTime},#{endTime},#{remark},1,now(),#{createdUser})
</insert>
</mapper>html 文件配置代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>The Activity Page</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#myModal"> 创立新流动 </button>
<!-- 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">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"> 增加流动 </h4>
</div>
<div class="modal-body">
<form id="saveFormId" 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="cagegoryId">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">start time</label>
<input type="text"
class="form-control form_datetime" name="startTime" id="startTimeId"
placeholder="please input startTime" autocomplete="off">
</div>
<div class="form-group">
<label for="endTimeId">end time</label>
<input type="text"
class="form-control form_datetime" name="endTime" id="endTimeId"
placeholder="please input end time" autocomplete="off">
</div>
<div class="form-group">
<label for="remarkId">Remark</label>
<textarea
class="form-control" name="remark" id="remarkId"></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="doSaveObject()">Save
changes</button>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>category</th>
<th>start time</th>
<th>end time</th>
<th>state</th>
<th>createdTime</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="7"> 数据正在踊跃的加载中......</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也能够依据须要只加载单个插件。-->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
// 在指定地位初始化 datepicker 对象
$(".form_datetime").datetimepicker({
language:'zh-CN',
format:'yyyy/mm/dd hh:ii',
autoclose:true
})
// 提交 form 表单, 执行 save 操作
function doSaveObject(){
// 基于此形式提交表单，表单中的元素肯定要有 name 属性，// 并且 name 属性名的设计肯定要于服务端接管参数时的设计相匹配
//$("#saveFormId").submit();// 同步提交
//=======================================
//1. 定义 url
let url="/activity/doSaveObject";
//2. 定义申请参数
/*
var params={title:$("#titleId").val(),//val()为 jquery 中或指定表单元素的 value 值
category:$("#categoryId").val(),
startTime:$("#startTimeId").val(),
endTime:$("#endTimeId").val(),
remark:$("#remarkId").val()}
*/
//debugger
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();}
});
}
// 向服务端发送异步申请获取流动信息并更新到页面上
function findActivitys(){//debugger // 此单词写的地位很重要(这是入口), 你要对谁进行断点剖析.
let url="/activity/doFindActivitys";
let params={};
// 借助 jquery 中的 ajax 函数, 向服务端发送异步申请获取流动信息
$.ajax({// 具体格局官网有定义(如果不想看官网, 看现成第三方网站找 ajax)
url:url,
data:params,
dataType:"json",
success:function(result){doHandleQueryResult(result);
}
});
};
// 解决服务端返回的流动信息, 迭代 result, 并将 result 内容填充 tbody 地位
function doHandleQueryResult(result){
///debugger
console.log(result)
//1. 获取 tbody 对象, 并清空原有内容
var tBody=$("#tbodyId");// 原生写法 -document.querySelector("#tbodyId")
tBody.empty();// 清空 tbody 中原有内容
//2. 迭代 result, 将流动信息追加到 tbody 中
result.forEach((item)=>{// 这里的 item 为一个变量, 代表数组中某一个元素
//debugger
tBody.append(
`<tr>
<td>${item.id}</td>
<td>${item.title}</td>
<td>${item.category}</td>
<td>${item.startTime}</td>
<td>${item.endTime}</td>
<td>${item.state==1?'无效':'已完结'}</td>
<td>${item.createdTime}</td>
</tr>`
);
});
}
//jquery 中定义的页面加载残缺执行形式如下:
// $(function(){// 如果所有的 js 代码放到 html 页面的 head 标签, 倡议这样写
findActivitys();
//});// 页面加载实现当前执行
</script>
</body>
</html>配置文件 服务器
#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 thymleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/modules/
#spring.thymeleaf.suffix=.html
# log
logging.level.com.cy=debug正文完