Springboot + Thymelear + layui项目 (分离式)前后端交互数据 并渲染RENDER

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

本文要记录的大概内容:
随着技术的发展,我们通常需要,将后台从数据库中查询出来的List数据,通过JSON形式返回给前端。从而,前端拿到对应的数据进行下一步的数据显示!


以下是本篇文章正文内容

一、前端需要的数据是什么?

通过LayUI官网,我们可以看到:
在这里插入图片描述
其中,划线部分是我们的“JSON”数据具体需要的属性:
1.code :可以理解为状态码,也许前端需要根据不同的状态码,进行下一步操作。
2.msg:可以理解为Message信息,即后台根据操作对前端返回的信息!比如,登陆成功,请求失败等等…
3.count:可以理解为返回的数据的长度。
4.data: 这个属性尤为重要,指的是,后台传给前端的具体数据。


二、使用步骤

1.后台创建JSON模板类

代码如下(示例):

public class ApiResponse<T> {
     //传给前端的JSON模板类

    private Integer code; //状态码

    private Integer count;  //代表数据数量

    private String msg; //发送的消息

    private T data;  //具体的数据

    public ApiResponse(){
   }
    
    public Integer getCode() {
   
        return code;
    }

    public void setCode(Integer code) {
   
        this.code = code;
    }

    public Integer getCount() {
   
        return count;
    }

    public void setCount(Integer count) {
   
        this.count = count;
    }

    public String getMsg() {
   
        return msg;
    }

    public void setMsg(Stri
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是基于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,即可看到一个包含日历和表单的页面。 现在,你可以添加、编辑和删除日历事件了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值