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">&times;</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

CV战士
7 声望1 粉丝