1效果图展示
这里我主要实现了这几个功能，所有的功能不一样实现：
1日程的拖拽
2日程的添加和删除
接下来我会详细介绍这些功能发的实现方式和相应的代码。
2引入fullcalendar相关包信息
导入上述的js包里面主要是关于页面的css和js代码。
3创建jsp页面主页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="js/fullcalendar.min.css" rel="stylesheet" />
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>
<script type="text/javascript" src="js/zh-cn.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<link href="layui/css/layui.css" rel="stylesheet" />
<title>日程管理</title>
<style type="text/css">
.mytitle{
width:350px;
}
.settitiletime{
}
.detailConent{
width:350px;
}
</style>
</head>
<body>
<div id="calendar" style="width:850px;height:350px;margin:0 auto;"></div>
<!-- 添加日程管理框 -->
<div id="addCalendar" style="display: none;">
<form class="layui-form" action="addplan.do">
<!-- 日程标题 -->
<div class="layui-form-item">
<label class="layui-form-label">日程标题</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input mytitle">
</div>
</div>
<!-- 时间选择 -->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">选择时间</label>
<div class="layui-input-inline" style="width: 162px;">
<input type="text" name="beginDate" id="startTime1" placeholder="开始时间" autocomplete="off" class="layui-input settitiletime">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 162px;">
<input type="text" name="endDate" id="endTime1" placeholder="结束时间" autocomplete="off" class="layui-input settitiletime">
</div>
</div>
</div>
<!-- 文本域 -->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">具体内容</label>
<div class="layui-input-block detailConent">
<textarea name="planContent" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<!-- 按钮控件 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn">添加日程</button>
<button type="reset" class="layui-btn layui-btn-primary">重置日程</button>
</div>
</div>
</form>
</div><!-- 日程总体div结束 -->
<script type="text/javascript">
layui.use(['element', 'layer', 'util','laydate'], function(){
var element = layui.element;
var laydate=layui.laydate;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
var laydate = layui.laydate;
laydate.render({
elem: '#startTime1'
,type: 'datetime'
,position:'abolute'
,lang: 'cn'
,theme: '#393D49'
,calendar: true
});
laydate.render({
elem: '#endTime1'
,type: 'datetime'
,position:'abolute'
,lang: 'cn'
,theme: '#393D49'
,calendar: true
});
});
</script>
<script>
$('#calendar').fullCalendar({
/*设置日历头部信息，如果设置为false，则不显示头部信息。
* 包括left,center,right左中右三个位置都可以对应一下配置
* title:显示当前月份/周、日信息
* prev:用于切换到上一月/周/日视图的按钮
* next:用于切换到下一月/周/日视图的按钮
* prevYear：用于切换到上一年视图的按钮
* nextYear：用于切换到下一年视图的按钮
* */
header:{
left: 'today',
center: 'prevYear prev title next nextYear',
right:'month,basicWeek,basicDay,agendaWeek,agendaDay '
},
theme:false,//如果设置为true，则需要加载jquery ui相关css和js文件,默认值为false
firstDay:1,//设置一周中显示的第一天是哪天，周日是0，周一是1，类推
isRTL:false,//设置为ture时则日历从右往左显示
weekends:true,//是否显示周末，设为false则不显示周六和周日。默认值为true
hiddenDays:[],//隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
weekMode:'fixed',//在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
weekNumbers:false,//是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
weekNumberCalculation:'iso',//周次的显示格式。
//height:600,//设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。
//contentHeight://设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。
aspectRatio:2,//设置日历单元格宽度与高度的比例。
handleWindowResize:true,//是否随浏览器窗口大小变化而自动变化。
render:function(view){
console.log('render',view)
},//method,绑定日历到id上。$('#id').fullCalendar('render');
destroy:function(){
},
weekNumbers : true, //是否在视图左边显示这是第多少周，默认false
eventLimit: true, //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
viewRender : function(view,element){//在视图被渲染时触发（切换视图也触发） 参数view为视图对象，参数element为Jquery的视图Dom
},
dayRender : function(date, cell){//日期格式Render钩子函数（我没理解清楚）
console.log("↓↓↓dayRender↓↓↓");
console.log(date);
console.log(cell);
},
windowResize : function(){//浏览器窗体变化时触发
console.log("---windowResize---");
},
allDayText : "全天", //自定义全天视图的名称
slotDuration : "01:00:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）
slotLabelFormat : "H(:mm)a", //日期视图左边那一列显示的每一格日期时间格式
slotLabelInterval : "02:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)
snapDuration : "05:00:00", //其实就是动态创建一个日程时，默认创建多长的时间块
slotEventOverlap : false, //相同时间段的多个日程视觉上是否允许重叠，默认true允许
noEventsMessage : "L没数据啊", //listview视图下，无数据时显示提示
defaultDate : '2023-08-23', //默认显示那一天的日期视图getDates(true)
nowIndicator : true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
monthNames : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份自定义命名
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNames
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNamesShort
weekNumberTitle : "周", //周的国际化,默认为"W"
eventLimitText : "更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）
dayPopoverFormat : "YYYY年M月d日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用
navLinks : true, // “xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。本地测试：没什么效果
editable:true,
dayClick: function(date, jsEvent, view) {//空白的日期区，单击时触发
//alert("↓↓↓dayClick↓↓↓"+date.format()+""+view.name+jsEvent.pageX+""+jsEvent.pageY);
//$(this).css('background-color', 'red');
},
//点击设置的日程信息，触发的事件。
eventClick: function(calEvent, jsEvent, view) {//日程区块，单击时触发
//常用参数jsEvent.target.innerHTML/calEvent.title/jsEvent.pageX/jsEvent.pageY/view.name/calEvent.start._i/calEvent.time
},
eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发
//alert("===鼠标移动到设置的日程信息上====");
console.log(jsEvent);
console.log(calEvent.start._i);
$('.hover-dateStr').html(calEvent.start._i);
console.log(jsEvent.pageY,jsEvent.pageX);
$('.hover-container').removeClass('none').animate({'top':jsEvent.pageY,'left':jsEvent.pageX});
//if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
// return;
//}
},
//鼠标从日程区块上离开。
eventMouseout: function(calEvent, jsEvent, view){
$('.hover-container').addClass('none');
},
selectable: true, //允许用户可以长按鼠标选择多个区域(比如月视图，可以选中多天；日视图可以选中多个小时)，默认false不能选择多区域的
selectHelper: true, //接selectable，周/日视图在选择时是否预先画出“日程区块”的样式出来
unselectAuto : false, //是否点击页面上的其他地方会导致当前的选择被清除，默认true
unselectCancel : "", //一种方法来指定元素，会忽略unselectauto选项，默认''
selectOverlap : true, //确定用户是否被允许选择被事件占用的时间段，默认true可占用时间段
selectAllow : function(selectInfo){ //精确的编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
//alert("====selectAllow====");
return true;
},
select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发
//alert("====select===="+view.name);
var clickTime=new Date(start);
var y=clickTime.getFullYear();//年
var m=(clickTime.getMonth()+1)<10?'0'+(clickTime.getMonth()+1):(clickTime.getMonth()+1);
var d=clickTime.getDate()<10?'0'+clickTime.getDate():clickTime.getDate();
var currentTime=y+"-"+m+"-"+d+" "+"00:00:00";
var endTime=y+"-"+m+"-"+d+" "+"23:59:59";
document.getElementById("startTime1").value=currentTime;
document.getElementById("endTime1").value=endTime;
//弹出添加窗口
layer.open({
type: 1,
title:"添加日程",
area: ['500px', '330px'],
content: $("#addCalendar") //这里content是一个普通的String
});
},
unselect : function(view, jsEvent){//选择操作取消时触发
//alert("====unselect====");
},
lazyFetching : true, //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
defaultTimedEventDuration : "02:00:00", //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00
defaultAllDayEventDuration : { days: 1 }, //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）
loading : function(isLoading, view){ //视图数据加载中、加载完成触发
console.log("↓↓↓loading↓↓↓");
if(isLoading == true){
console.log("view:"+view+",开始加载");
}else if(isLoading == false){
console.log("view:"+view+",加载完成");
}else{
console.log("view:"+view+",除非天塌下来否则不会进这个分支");
}
},
eventOrder : "title", //多个相同的日程数据排序方式，String / Array / Function, 默认值: "title"
eventRender : function(event, element, view) { //当Event对象开始渲染时触发
console.log("eventRender():"+event.title);
},
eventAfterAllRender : function(view){
console.log("eventAfterAllRender();");
}, //当所有Event对象渲染完成时触发
editable: true, //支持Event日程拖动修改，默认false
eventStartEditable : true, //Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
eventDurationEditable : false, //Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
dragOpacity:0.2, //拖拽时不透明度，0.0~1.0之间，数字越小越透明
dragScroll : true, //是否在拖拽时自动移动容器，默认true
eventOverlap : true, //拖拽时是否重叠
eventConstraint : { //限制拖拽拖放的位置（即限制有些地方拖不进去）：an event ID, "businessHours", object
/* start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 4 ] */ // days of week. an array of zero-based day of week integers (0=Sunday) (Monday-Thursday in this example)
},
longPressDelay : 1000, //面向可touch设备（如移动设备），长按多少毫秒即可拖动,默认1000毫秒（1S）
eventDragStart : function(event, jsEvent, ui, view){ //日程开始拖拽时触发
console.log("eventDragStart():"+event.title);
},
eventDragStop : function(event, jsEvent, ui, view){ //日程拖拽停止时触发
console.log("eventDragStop():");
var classId=event.time;
console.log(classId+"=="+event.start._i+"=="+jsEvent);
event.start='2019-09-08';
},
eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){ //日程拖拽停止并且已经拖拽到其它位置了
console.log("eventDrop():");
var clickTime=new Date(event.start);
var y=clickTime.getFullYear();//年
var m=(clickTime.getMonth()+1)<10?'0'+(clickTime.getMonth()+1):(clickTime.getMonth()+1);
var d=clickTime.getDate()<10?'0'+clickTime.getDate():clickTime.getDate();
var currentTime=y+"-"+m+"-"+d+" "+"00:00:00";
alert(currentTime);
alert(event.id);
var id = event.id
$.get("upd.do",{"begindate":currentTime,"id":id},function(msg){
window.location.href = 'fullcalendar.jsp';
});
},
eventResizeStart : function( event, jsEvent, ui, view ) { //日程大小调整开始时触发
console.log("eventResizeStart():"+event.title);
},
eventResizeStop : function(event, jsEvent, ui, view){ //日程大小调整停止时触发
console.log("eventResizeStop():"+event.title);
},
eventResize : function(event, delta, revertFunc, jsEvent, ui, view){ //日程大小调整完成并已经执行更新时触发
console.log("eventResize():"+event.title);
},
events:function(start,end,timezone,callback){
$.get("showplan.do",function(msg){
var events1=[];//定义日历组件需要的数据类型
eval("plan="+msg);
for(var i=0;i<plan.length;i++){
/* alert(plan[i].id);
alert(plan[i].title);
alert(plan[i].detailtime);
alert(plan[i].begindate);
alert(plan[i].endDate);
alert(plan[i].plancontent);
alert(plan[i].color); */
events1.push({
id:plan[i].id,
time:plan[i].detailtime,
title:plan[i].title,
start:plan[i].begindate,
end:plan[i].endDate,
color:plan[i].color,
planContent:plan[i].plancontent
});
}
callback(events1);
});
}
/* [
{
"title":"喝酒",
"time": "9:20--18:20",
"antualTime":"9:40--18:40",
"start": "2023-08-23",
"end":"2023-08-25",
color:"green",
}
] */
});
</script>
</body>
</html>
代码上述都有相应的注释：
这里我解释一下
select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发
//alert("====select===="+view.name);
var clickTime=new Date(start);
var y=clickTime.getFullYear();//年
var m=(clickTime.getMonth()+1)<10?'0'+(clickTime.getMonth()+1):(clickTime.getMonth()+1);
var d=clickTime.getDate()<10?'0'+clickTime.getDate():clickTime.getDate();
var currentTime=y+"-"+m+"-"+d+" "+"00:00:00";
var endTime=y+"-"+m+"-"+d+" "+"23:59:59";
document.getElementById("startTime1").value=currentTime;
document.getElementById("endTime1").value=endTime;
//弹出添加窗口
layer.open({
type: 1,
title:"添加日程",
area: ['500px', '330px'],
content: $("#addCalendar") //这里content是一个普通的String
});
},这里的select里的function主要的作用是获得点击空白的时间，并通过一些列操作拼接成字符串
然后赋值给id为startTime1和endTime1的input。
最后通过layui的layui。open弹出一个id为addCalendar的div。
eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){ //日程拖拽停止并且已经拖拽到其它位置了
console.log("eventDrop():");
var clickTime=new Date(event.start);
var y=clickTime.getFullYear();//年
var m=(clickTime.getMonth()+1)<10?'0'+(clickTime.getMonth()+1):(clickTime.getMonth()+1);
var d=clickTime.getDate()<10?'0'+clickTime.getDate():clickTime.getDate();
var currentTime=y+"-"+m+"-"+d+" "+"00:00:00";
alert(currentTime);
alert(event.id);
var id = event.id
$.get("upd.do",{"begindate":currentTime,"id":id},function(msg){
window.location.href = 'fullcalendar.jsp';
});
},这里的eventDrop函数的主要操作是实现日程的更改和拖拽：
这里的event对应的就是每一个小的空白处，所以可以用event.start时间，获得时间后的处理方式和上面的处理方式一样，id同理，让后通过异步请求发送到后端servlet，servlet获取数据后调佣dao里的方法对数据库里的数据进行更改。
4连接数据库使用jdbc和建立相应的bean和dao
这里我们使用了重新封装的jdbc对数据库进行连接，重新封装的原因是为了应对事务控制：
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
public class Base<e> {
public static String class1 = "com.mysql.jdbc.Driver";
public static String url = "jdbc:mysql://localhost:3306/rili?characterEncoding=utf8";
public static String username = "root";
public static String userpwd = "123456";
private static Connection conn = null;
private static Statement stmt = null;
protected static ResultSet rs= null;
private String flag="1";
//用于事务控制
public Base(Connection conn){
this.conn=conn;
flag="2";
}
//用于非事务控制
public Base(){
try {
lianjie();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
flag="3";
}
static {
try{
Class.forName(class1);
} catch (ClassNotFoundException e) {
throw new RuntimeException(e);
}
}
public void lianjie() throws SQLException {
conn = DriverManager.getConnection(url,username,userpwd);
System.out.println("====连接成功====");
}
public void chuangjian() throws SQLException {
stmt = conn.createStatement();
System.out.println("====创捷成功====");
}
// 更新
public void zhexing(String sql) throws SQLException {
// lianjie();
chuangjian();
System.out.println("=====sql===="+sql);
stmt.executeUpdate(sql);
System.out.println("=====sql===="+sql);
qingchu();
}
public List<e> chaxun(String sql) throws SQLException {
// lianjie();
chuangjian();
rs = stmt.executeQuery(sql);
System.out.println("===============chaxun111=========="+sql);
List<e> list = new ArrayList<e>();
System.out.println("===============chaxun222==========");
yunxing(list);
System.out.println(list.size());
System.out.println("===============yunxing==========");
qingchu();
System.out.println("======查询我完毕=====");
System.out.println("======listsize111111====="+list.size());
return list;
}
public void qingchu (){
if (rs!=null) {
try {
rs.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
rs=null;
}
if (stmt!=null) {
try {
stmt.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
stmt=null;
}
if(flag=="3") {
if (conn!=null){
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
conn=null;
}
}
}
public void yunxing(List<e> list) throws SQLException {
}
}
然后建立对应的bean：
package com.baen;
public class plan {
String id;
String title;
String plancontent;
String begindate;
String endDate;
String createTime;
String url;
String color;
String textColor;
String editable;
String detailtime;
String alldAY;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getPlancontent() {
return plancontent;
}
public void setPlancontent(String plancontent) {
this.plancontent = plancontent;
}
public String getBegindate() {
return begindate;
}
public void setBegindate(String begindate) {
this.begindate = begindate;
}
public String getEndDate() {
return endDate;
}
public void setEndDate(String endDate) {
this.endDate = endDate;
}
public String getCreateTime() {
return createTime;
}
public void setCreateTime(String createTime) {
this.createTime = createTime;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public String getTextColor() {
return textColor;
}
public void setTextColor(String textColor) {
this.textColor = textColor;
}
public String getEditable() {
return editable;
}
public void setEditable(String editable) {
this.editable = editable;
}
public String getDetailtime() {
return detailtime;
}
public void setDetailtime(String detailtime) {
this.detailtime = detailtime;
}
public String getAlldAY() {
return alldAY;
}
public void setAlldAY(String alldAY) {
this.alldAY = alldAY;
}
public plan(String id, String title, String plancontent, String begindate, String endDate, String createTime,
String url, String color, String textColor, String editable, String detailtime, String alldAY) {
super();
this.id = id;
this.title = title;
this.plancontent = plancontent;
this.begindate = begindate;
this.endDate = endDate;
this.createTime = createTime;
this.url = url;
this.color = color;
this.textColor = textColor;
this.editable = editable;
this.detailtime = detailtime;
this.alldAY = alldAY;
}
public plan(String id, String title, String plancontent, String begindate, String endDate, String createTime) {
super();
this.id = id;
this.title = title;
this.plancontent = plancontent;
this.begindate = begindate;
this.endDate = endDate;
this.createTime = createTime;
}
}
j建立dao层和对应的方法：
package com.dao;
import java.sql.SQLException;
import java.util.List;
import com.baen.plan;
public class planDAO extends Base<plan>{
// 查找全部
public List<plan> fandall() throws SQLException{
String sql = "SELECT * FROM syscalendarplan";
return super.chaxun(sql);
}
// 添加
public void addone(plan plan) throws SQLException{
String sql="insert into `syscalendarplan`(`id`,`title`,`plancontent`,`begindate`,`EndDate`,`createTime`,`url`,`color`,`textColor`,`editable`,`detailtime`,`alldAY`) values ('"+plan.getId()+"','"+plan.getTitle()+"','"+plan.getPlancontent()+"','"+plan.getBegindate()+"','"+plan.getEndDate()+"','"+plan.getCreateTime()+"',NULL,'red','white','true','20:00:00','true')";
super.zhexing(sql);
}
// 更新初始时间
public void updone(String id ,String begindate) throws SQLException{
String sql="UPDATE syscalendarplan SET begindate='"+begindate+"' where id='"+id+"'";
super.zhexing(sql);
}
public void yunxing(List<plan> list) throws SQLException {
while(rs.next()){
String id=rs.getString("id");//编号
String title=rs.getString("title");//标题
String planContent=rs.getString("plancontent");//任务详细内容
String beginDate=rs.getString("begindate");//开始时间
String endDate=rs.getString("EndDate");//结束时间
String createTime=rs.getString("createTime");//创建时间
String url=rs.getString("url");//
String color=rs.getString("color");//事件颜色
String textColor=rs.getString("textColor");//文本颜色
String editable=rs.getString("editable");//是否支持拖拽
String detailtime=rs.getString("detailtime");//时分秒时间
String allDay=rs.getString("allDAY");//是否为全天
plan calendar=new plan(id, title, planContent, beginDate, endDate, createTime, url, color, textColor, editable, detailtime, allDay);
list.add(calendar);
}
}
}
这里没有使用映射的方法对bean做处理。
5servlet的建立用来获取前端传来的数据和跟后端数据库进行交互
5.1添加查询功能的servlet：
package com.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.catalina.tribes.transport.nio.ParallelNioSender;
import com.baen.plan;
import com.dao.planDAO;
import until.SnowFlakeUtils;
/**
* Servlet implementation class addplan
*/
@WebServlet("/addplan.do")
public class addplan extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public addplan() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String title = request.getParameter("title");
String begindate = request.getParameter("beginDate");
String endDate = request.getParameter("endDate");
System.out.println("====endDate======"+endDate);
String plancontent = request.getParameter("planContent");
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
String createTime=sdf.format(new Date());
System.out.println("====createTime======"+createTime);
String id = title+"zhoujiajun";
plan plan = new plan(id,title, plancontent, begindate, endDate, createTime);
try {
new planDAO().addone(plan);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
RequestDispatcher dispatcher = request.getRequestDispatcher("fullcalendar.jsp");
dispatcher.forward(request, response);
}
}
因为我们使用的String类型的数据使用没有进行复杂的数据类型转换。
但是其中SimpleDateFormat 类来格式化当前日期时间，并将结果赋值给 createTime 变量。格式化的模式是 "yyyy-MM-dd hh:mm:ss"，其中：
yyyy表示年份，例如 2023；MM表示月份，例如 08；dd表示日期，例如 23；hh表示小时（12 小时制），例如 12；mm表示分钟，例如 39；ss表示秒钟，例如 35。
你的代码通过调用 SimpleDateFormat 类的 format() 方法来将当前日期时间按照指定的模式格式化为字符串，并将结果赋值给 createTime 变量。
需要注意的是，hh 表示使用 12 小时制，而不是 24 小时制。如果你想要使用 24 小时制，可以将模式中的 hh 改为 HH。
5.2拖拽功能的servlet：
这里的拖拽主要是因为前端进行了拖拽但是数据库里的数据没有进行相应的更改，使用本质是对数据库进行更新操作。
package com.servlet;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.planDAO;
/**
* Servlet implementation class upd
*/
@WebServlet("/upd.do")
public class upd extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public upd() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String begindate =request.getParameter("begindate");
String id =request.getParameter("id");
System.out.println("=====id===="+id+"=====begindate===="+begindate);
try {
new planDAO().updone(id, begindate);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
最后再把项目加入到tomcat中，启动tomcat。就可以了，代码全部包含再上述所展示的代码中，除了一些包，如果有需要请联系作者。
好了今天的分享就到这里！！！！！！！！！！！！！！！！！
2456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
