关于springboot:第七天代码

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