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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。