今天主讲 Ajax
**
02-CGB-Ajax 技术应用
**
复习回看 模态框的使用
js比较薄弱
如上 比如这部分
加粗样式
如下 是BOM窗口对象
**
js最薄弱 建议在浏览器练习
** confirm方法
跳转练习
新疑问:怎么分辨js,jQuery和jsp代码 与其实现应用
插入小点
**
延申说法 client客户端发送请求 (客户端层面)是client前端页面层
**
**
重要知识点补回来 提要:冒泡排序和正则表达式(可能需要用到js)
**
用于初始化
目的 为了规范日期
引入
自己学着加入一个新的js功能 下拉 日期datetimepicker
可能存在的问题
今晚学着自己去加入 失败了 再看码云上的源码 试试脱离老师写代码
新要求
结束
现在看Hi现场源码
新功能
错过了下 只能核对码云源码了
实现state状态超时变成0 变成失效
1.dao层
数据层
2.Service业务逻辑层
**
自己开始导包
**
添加state状态 过时变成0 失效
1.controller层 html 客户端层面
controller无改动
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<h1>The Activity Page</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">创建活动</button>
<table class="table">
<thead>
<tr>
<th>title</th>
<th>Category</th>
<th>StartTime</th>
<th>EndTime</th>
<th>State</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr th:each="aty:${list}">
<td th:text="${aty.title}"></td>
<td th:text="${aty.category}"></td>
<td th:text="${#dates.format(aty.startTime, 'yyyy/MM/dd HH:mm')}"></td>
<td th:text="${#dates.format(aty.endTime, 'yyyy/MM/dd HH:mm')}"></td>
<td th:text="${aty.state==1?'有效':'无效'}"></td>
<td><button type="button" class="btn btn-danger btn-sm" th:onclick="doDeleteObject([[${aty.id}]])">delete</button></td>
</tr>
</tbody>
</table>
</div>
<!-- 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>
<!-- Body部分 -->
<div class="modal-body">
<form class="form-horizontal" th:action="@{/activity/doSaveActivity}" method="post">
<div class="form-group">
<label for="titleId" class="col-sm-2 control-label">标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="title" id="titleId"
placeholder="title">
</div>
</div>
<div class="form-group">
<label for="categoryId" class="col-sm-2 control-label">类型</label>
<div class="col-sm-10">
<select id="categoryId" name="category" class="form-control">
<option value="教育培训">教育培训</option>
<option value="企业活动">企业活动</option>
<option value="交友活动">交友活动</option>
</select>
</div>
</div>
<div class="form-group" >
<label for="startTimeId" class="col-sm-2 control-label">开始时间</label>
<div class="col-sm-10">
<input type="text" class="form-control form_datetime" name="startTime" id="startTimeId"
placeholder="start time">
</div>
</div>
<div class="form-group">
<label for="endTimeId" class="col-sm-2 control-label">结束时间</label>
<div class="col-sm-10">
<input type="text" class="form-control form_datetime" name="endTime" id="endTimeId"
placeholder="end time">
</div>
</div>
<div class="form-group">
<label for="remarkId" class="col-sm-2 control-label">备注</label>
<div class="col-sm-10">
<textarea type="text" class="form-control" rows="5" name="remark" id="remarkId">
</textarea>
</div>
</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>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/datepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
//datetimepicker函数由bootstrap-datetimepicker.min.js定义,用于初始化日期控件
$('.form_datetime').datetimepicker({//这里的form_datetime为input标签中的class选择器
language: "zh-CN",
format: "yyyy/mm/dd hh:ii",
autoclose: true
})
function doDeleteObject(id){
if(!confirm("确定删除吗?"))return;
location.href="/activity/doDeleteObject/"+id;//restful
}
function doSaveObject(){
//表单校验(可考虑使用正则表达式)
//提交表单
//$(form)基于标签名(例如这里的标签名form)称获取表单对象
//submit为jquery中的一个对象函数,通过此函数可以提交表单.
$("form").submit();//提交表单
}
</script>
</body>
</html>
2.dao层与mapper
@Update("update tb_activity set state=0 where id=#{id}")
int updateState(Long 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,createdUser,createdTime)
values
(#{title},#{category},#{startTime},#{endTime},#{remark},#{state},#{createdUser},now())
</insert>
3.service层
接口无变动
doSaveActivity
@Override
public int saveActivity(Activity entity) {
int rows=activityDao.insertObject(entity);
System.out.println("saveActivity.threadName="+Thread.currentThread().getName());
//??????
//开启活动倒计时(活动到了结束时间应该将其状态修改为0)
//方案:(自己尝试)
//1)Java 官方:
//1.1)Timer
//1.2)ScheduledExecutorService
//2)借助第三方的任务调度框架(任务调度框架,quartz)
//方案1:Timer应用
//1.1构建Timer对象
Timer timer=new Timer();//此对象可以负责去执行一些任务(这个对象内置一个线程和一个任务队列)
//1.2启动线程执行任务
timer.schedule(new TimerTask() {//TimerTask为任务
@Override
public void run() {//一旦调用此任务的线程获得了CPU就会执行这个任务的run方法
System.out.println("updateState.threadName="+Thread.currentThread().getName());
System.out.println("执行任务...");
activityDao.updateState(entity.getId());
}
}, entity.getEndTime());//按指定时间执行任务.
return rows;
}
4.html页面看效果
pojo
activity.java
修正日期格式
@DateTimeFormat(pattern = "yyyy-MM-dd")
这里不对 先注释了
修改
//Spring MVC基于@DateTimeFormat指定的日期格式接收客户端提交数据,假如没有指定默认为yyyy/MM/dd
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
private Date startTime;
/** 活动结束时间 */
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
页面效果
如上两图 以实现 晚上自己对代码复刻一遍
自己操作一下
有注解后 由系统底层去赋予相应的东西
Ajax
Ajax入门案列
总结 自己回看
**
开始创建项目
**AJAX相关
加js函数
步骤
2.创建controller层
错误示范
对应回客户端层
3.页面 客户端层面实现
插入小点 span
4.再次深入拓展
原理
客户端层
controller层
第三步 建立连接处的同步与异步处理
实现了按钮与span框的异步更新
controller层的模拟休眠处理
3秒耗时操作
(1)异步处理 true
不同线程 看谁先打印 console在主线程
如上图 凸显了异步操作
(2)同步处理 false
结果
上面是同步和异步的点!!!
**
Activity项目的点 回归复习
**
自己得敲一遍
下拉时间表
如上 提到外面去 方便调用
明天准备讲
下节课讲0,1,2,3,4 对应
2112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
