以下是基于Spring Boot、FullCalendar和
Layui的
增删改查完整案例。
1.
创建Spring Boot
项目
首先，我们需要
创建一个Spring Boot
项目。你可以使用Spring Initializr，也可以手动
创建项目。
2. 添加依赖
在pom.xml文件中添加以下依赖：
```
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>fullcalendar</artifactId>
<version>3.10.2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>
layui</artifactId>
<version>2.5.7</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
```
3.
创建实体类
创建一个实体类Event，用于表示日历事件：
```
@Entity
@Table(name = "event")
public class Event {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private Date start;
private Date end;
private String color;
private String description;
// getter and setter
}
```
4.
创建Repository
创建一个Repository类EventRepository，用于与数据库进行交互：
```
@Repository
public interface EventRepository extends JpaRepository<Event, Long> {
}
```
5.
创建Controller
创建一个Controller类EventController，用于处理HTTP请求：
```
@Controller
public class EventController {
@Autowired
private EventRepository eventRepository;
@GetMapping("/")
public String index() {
return "index";
}
@GetMapping("/events")
@ResponseBody
public List<Event> getEvents() {
return eventRepository.findAll();
}
@PostMapping("/events")
@ResponseBody
public Event addEvent(@RequestBody Event event) {
return eventRepository.save(event);
}
@PutMapping("/events/{id}")
@ResponseBody
public Event updateEvent(@PathVariable Long id, @RequestBody Event event) {
event.setId(id);
return eventRepository.save(event);
}
@DeleteMapping("/events/{id}")
@ResponseBody
public void deleteEvent(@PathVariable Long id) {
eventRepository.deleteById(id);
}
}
```
6.
创建Thymeleaf模板
创建一个Thymeleaf模板index.html，用于显示日历和表单：
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>FullCalendar +
Layui Demo</title>
<link href="/webjars/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet"/>
<link href="/webjars/
layui/2.5.7/css/
layui.css" rel="stylesheet"/>
<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="/webjars/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script src="/webjars/
layui/2.5.7/
layui.all.js"></script>
<script th:inline="javascript">
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
height: 600,
editable: true,
eventLimit: true,
events: {
url: '/events',
error: function () {
alert('there was an error while fetching events!');
}
},
eventDrop: function (event, delta, revertFunc) {
updateEvent(event);
},
eventResize: function (event, delta, revertFunc) {
updateEvent(event);
},
eventClick: function (event, jsEvent, view) {
layer.open({
type: 1,
area: ['500px', '400px'],
title: '编辑事件',
content: $('#eventForm'),
btn: ['保存', '取消'],
yes: function (index, layero) {
var title = $('#title').val();
var start = $('#start').val();
var end = $('#end').val();
var color = $('#color').val();
var description = $('#description').val();
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
color: color,
description: description
};
updateEvent(eventData, event.id);
calendar.fullCalendar('renderEvent', eventData, true);
} else {
alert('请填写标题');
return false;
}
layer.close(index);
}
});
$('#title').val(event.title);
$('#start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#end').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
$('#color').val(event.color);
$('#description').val(event.description);
}
});
$('#addEvent').on('click', function () {
layer.open({
type: 1,
area: ['500px', '400px'],
title: '添加事件',
content: $('#eventForm'),
btn: ['保存', '取消'],
yes: function (index, layero) {
var title = $('#title').val();
var start = $('#start').val();
var end = $('#end').val();
var color = $('#color').val();
var description = $('#description').val();
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
color: color,
description: description
};
$.ajax({
url: '/events',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(eventData),
success: function (event) {
eventData.id = event.id;
calendar.fullCalendar('renderEvent', eventData, true);
}
});
} else {
alert('请填写标题');
return false;
}
layer.close(index);
}
});
});
function updateEvent(eventData, eventId) {
if (eventId) {
$.ajax({
url: '/events/' + eventId,
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify(eventData),
success: function () {
calendar.fullCalendar('refetchEvents');
}
});
} else {
$.ajax({
url: '/events',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(eventData),
success: function (event) {
eventData.id = event.id;
calendar.fullCalendar('renderEvent', eventData, true);
}
});
}
}
});
</script>
</head>
<body>
<div id="calendar"></div>
<div id="eventForm" style="display: none;">
<div class="
layui-form-item">
<label class="
layui-form-label">标题</label>
<div class="
layui-input-inline">
<input type="text" id="title" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="
layui-input"/>
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">开始时间</label>
<div class="
layui-input-inline">
<input type="text" id="start" name="start" lay-verify="required" placeholder="请选择开始时间" autocomplete="off"
class="
layui-input"/>
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">结束时间</label>
<div class="
layui-input-inline">
<input type="text" id="end" name="end" lay-verify="required" placeholder="请选择结束时间" autocomplete="off"
class="
layui-input"/>
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">颜色</label>
<div class="
layui-input-inline">
<input type="color" id="color" name="color" value="#3788d8" class="
layui-input"/>
</div>
</div>
<div class="
layui-form-item
layui-form-text">
<label class="
layui-form-label">备注</label>
<div class="
layui-input-block">
<textarea id="description" name="description" placeholder="请输入备注" class="
layui-textarea"></textarea>
</div>
</div>
</div>
<div class="
layui-btn-group">
<button class="
layui-btn" id="addEvent">添加事件</button>
</div>
</body>
</html>
```
7. 运行
项目
运行
项目，访问http://localhost:8080，即可看到一个包含日历和表单的页面。
现在，你可以添加、编辑和删除日历事件了。
本文档介绍了如何创建一个SpringBoot项目，并详细讲述了从创建项目到实现使用layui进行前端展示及通过控制器、mapper、service和实体类完成CRUD操作的步骤。同时提到了可以使用postman进行接口测试。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
