前端页面实现日报数据显示及修改删除操作（Spring Boot + JPA + Thymeleaf）

1. 前端页面设计

首先，我们需要设计一个页面来显示日报数据，并实现修改和删除操作。可以采用Bootstrap框架来设计页面，使用Thymeleaf模板引擎来渲染数据。

在页面上，我们需要显示当天的前三天的日报数据，可以使用日期选择器来选择日期，然后通过Ajax请求获取当天前三天的数据。

在表格中，我们需要显示日报的标题、内容和创建时间，并添加修改和删除按钮。当用户点击修改按钮时，会弹出一个对话框来编辑日报内容。

2. 后端实现

在后端，我们可以使用Spring Boot框架和JPA来实现数据的增删改查操作。首先，定义一个实体类来表示日报数据：

@Entity
public class DailyReport {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;

    private String content;

    private Date createTime;

    // getter and setter
}

然后，定义一个Repository来操作实体类：

public interface DailyReportRepository extends JpaRepository<DailyReport, Long> {
    List<DailyReport> findByCreateTimeBetween(Date start, Date end);
}

在Controller中，我们可以定义RESTful接口来处理前端的请求：

@RestController
@RequestMapping("/daily-report")
public class DailyReportController {
    @Autowired
    private DailyReportRepository repository;

    @GetMapping("")
    public List<DailyReport> listByCreateTime(@RequestParam("date") @DateTimeFormat(pattern = "yyyy-MM-dd") Date date) {
        Calendar cal = Calendar.getInstance();
        cal.setTime(date);
        cal.add(Calendar.DAY_OF_MONTH, -3);
        Date start = cal.getTime();
        return repository.findByCreateTimeBetween(start, date);
    }

    @PostMapping("")
    public DailyReport create(@RequestBody DailyReport report) {
        report.setCreateTime(new Date());
        return repository.save(report);
    }

    @PutMapping("/{id}")
    public DailyReport update(@PathVariable("id") Long id, @RequestBody DailyReport report) {
        DailyReport oldReport = repository.findById(id).orElseThrow(() -> new RuntimeException("日报不存在"));
        oldReport.setTitle(report.getTitle());
        oldReport.setContent(report.getContent());
        return repository.save(oldReport);
    }

    @DeleteMapping("/{id}")
    public void delete(@PathVariable("id") Long id) {
        repository.deleteById(id);
    }
}

3. 前后端联调

最后，我们需要将前端页面和后端接口联调起来。在页面上，可以使用jQuery来发送Ajax请求，获取数据并渲染到表格中。当用户点击修改或删除按钮时，也可以通过Ajax请求来调用后端接口，实现相应的操作。

在Thymeleaf模板中，可以使用th:each遍历日报数据，并使用th:data属性来绑定按钮的事件处理函数。例如：

<table class="table">
    <thead>
        <tr>
            <th>标题</th>
            <th>内容</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="report : ${reports}">
            <td th:text="${report.title}"></td>
            <td th:text="${report.content}"></td>
            <td th:text="${#dates.format(report.createTime, 'yyyy-MM-dd HH:mm')}"></td>
            <td>
                <button type="button" class="btn btn-primary" th:data-id="${report.id}" th:data-toggle="modal" th:data-target="#editModal">修改</button>
                <button type="button" class="btn btn-danger" th:data-id="${report.id}" onclick="deleteReport(this)">删除</button>
            </td>
        </tr>
    </tbody>
</table>

在JavaScript代码中，可以使用jQuery来发送Ajax请求，并在请求成功后更新表格数据。例如：

function listReports(date) {
    $.get("/daily-report", { "date": date }, function (data) {
        var tbody = $("table tbody");
        tbody.empty();
        for (var i = 0; i < data.length; i++) {
            var report = data[i];
            var tr = $("<tr></tr>");
            tr.append("<td>" + report.title + "</td>");
            tr.append("<td>" + report.content + "</td>");
            tr.append("<td>" + moment(report.createTime).format("YYYY-MM-DD HH:mm") + "</td>");
            tr.append('<button type="button" class="btn btn-primary" data-id="' + report.id + '" data-toggle="modal" data-target="#editModal">修改</button> <button type="button" class="btn btn-danger" onclick="deleteReport(this)" data-id="' + report.id + '">删除</button>');
            tbody.append(tr);
        }
    });
}

function saveReport(report, callback) {
    if (report.id) {
        $.ajax({
            url: "/daily-report/" + report.id,
            type: "PUT",
            contentType: "application/json",
            data: JSON.stringify(report),
            success: callback
        });
    } else {
        $.post("/daily-report", JSON.stringify(report), callback, "json");
    }
}

function deleteReport(button) {
    var id = $(button).data("id");
    if (confirm("确定要删除该日报吗？")) {
        $.ajax({
            url: "/daily-report/" + id,
            type: "DELETE",
            success: function () {
                $(button).closest("tr").remove();
            }
        });
    }
}

最终的效果如下图所示：

注意：以上代码仅供参考，具体实现可能会有所不同，需要根据实际情况进行调整。