前端页面只显示当天及前三天日报数据的修改删除操作 - Spring Boot & Thymeleaf 实现

前端页面只显示当天及前三天日报数据的修改删除操作 - Spring Boot & Thymeleaf 实现

本文将详细介绍如何实现前端页面只显示含当天的前三天数据的修改删除操作，后端使用 Spring Boot，前端使用 Thymeleaf。

1. 后端实现

首先，需要在后端编写接口，用于获取前三天的数据。可以使用 JPA 或 MyBatis 等框架完成数据的查询和筛选。

接口代码：

@GetMapping("/api/daily")
public List<Daily> getDailyData() {
    LocalDate today = LocalDate.now();
    LocalDate threeDaysAgo = today.minusDays(3);
    List<Daily> dailyList = dailyRepository.findByDateBetween(threeDaysAgo, today);
    return dailyList;
}

其中，dailyRepository 是使用 JPA 或 MyBatis 等框架定义的数据访问接口。

接下来，编写修改和删除数据的接口，同样可以使用 JPA 或 MyBatis 等框架完成数据的更新和删除操作。

接口代码：

@PostMapping("/api/daily/{id}")
public Daily updateDaily(@PathVariable Long id, @RequestBody Daily daily) {
    Daily originalDaily = dailyRepository.findById(id).orElseThrow(() -> new NotFoundException("Daily not found"));
    originalDaily.setTitle(daily.getTitle());
    originalDaily.setContent(daily.getContent());
    Daily updatedDaily = dailyRepository.save(originalDaily);
    return updatedDaily;
}

@DeleteMapping("/api/daily/{id}")
public void deleteDaily(@PathVariable Long id) {
    Daily daily = dailyRepository.findById(id).orElseThrow(() -> new NotFoundException("Daily not found"));
    dailyRepository.delete(daily);
}

同样，dailyRepository 是使用 JPA 或 MyBatis 等框架定义的数据访问接口。

2. 前端实现

在前端页面中，使用 Ajax 技术调用后端接口获取前三天的数据，并使用 Thymeleaf 将数据展示在页面中。

页面代码：

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="daily : ${dailyList}">
      <td th:text="${daily.title}"></td>
      <td th:text="${daily.content}"></td>
      <td>
        <button th:onclick="'editDaily(' + ${daily.id} + ')'"
                th:if="${daily.date} == ${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}">Edit</button>
        <button th:onclick="'deleteDaily(' + ${daily.id} + ')'"
                th:if="${daily.date} == ${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

其中，${dailyList} 是通过 Ajax 调用后端接口获取的数据，并使用 Thymeleaf 渲染到页面中。使用 Thymeleaf 的条件判断功能，只在当天的数据上显示修改和删除按钮。

在页面中定义 JavaScript 函数 editDaily() 和 deleteDaily()，通过 Ajax 调用后端接口实现数据的修改和删除操作。

JavaScript 代码：

function editDaily(id) {
  // 根据id获取数据并显示在表单中
  $.get('/api/daily/' + id, function(data) {
    $('#title').val(data.title);
    $('#content').val(data.content);
    $('#id').val(data.id);
  });
}

function deleteDaily(id) {
  // 弹出确认框，确认后调用后端接口删除数据
  if (confirm('Are you sure to delete this daily?')) {
    $.ajax({
      url: '/api/daily/' + id,
      type: 'DELETE',
      success: function() {
        // 刷新页面
        location.reload();
      }
    });
  }
}

总结

以上便是实现日报填写前端页面只显示含当天的前三天数据的修改删除操作的步骤，希望能对你有所帮助。

注意：

• 实际开发中，需要根据具体需求修改代码。
• 代码仅供参考，可能需要进行调整和优化。
• 建议使用更安全的 CSRF 防护措施。
• 请根据实际情况选择合适的框架和技术。