pojo层 层 层 层 层 层@Datapublic 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 层 层 层 层 层@Mapperpublic 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实现层 实现层 实现层 实现层 实现层@Servicepublic 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>
配置文件 服务器#serverserver.port=80server.servlet.context-path=/# spring datasourcespring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8spring.datasource.username=rootspring.datasource.password=root# spring mybatismybatis.mapper-locations=classpath:/mapper/*/*.xml# spring thymleafspring.thymeleaf.cache=falsespring.thymeleaf.prefix=classpath:/templates/modules/#spring.thymeleaf.suffix=.html# loglogging.level.com.cy=debug