如何实现日报填写前端页面只显示含当天的前三天数据的修改删除操作后端用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();
      }
    });
  }
}

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