山大软院创新实训之前端篇（一）——显示病人对应病历

山大软院创新实训之前端篇（一）——显示病人对应病历

如何显示病人对应病历？

考虑用 Thymeleaf 模板引擎将后端传递的病历信息数据显示在前端页面的表格中，如下面代码所示：

1. 最外层的 <div> 定义了一个 Bootstrap 栅格系统的列，适用于不同大小的屏幕。
2. 内部的多个 <div> 元素用于布局和样式设置，包含标题和病历信息表格。
3. 标题部分通过 [[${patientHistoryList != null ? patientHistoryList.size() : 0}]] 表达式显示病历数量，[[${session.loginUser.id}]] 显示当前登录用户的 ID。
4. 表格的 <thead> 定义了表头，<tbody> 部分通过 th:each 属性迭代显示病历列表，每个病历的具体信息（首次问诊、年龄、症状、发作详情、诊断结果）通过 th:text 属性进行绑定显示。

<div class="col-lg-12 col-md-12 col-xs-12">
    <div class="dashboard-content">
        <div class="row mb-4">
            <div class="col-lg-12 col-md-12 col-xs-12">
                <div class="dashboard-list-box with-icons">
                    <div class="dashboard-title">
                        <h4 class="mb-0">病历信息</h4>
                        <p class="mb-0">
                            共收集 [[${patientHistoryList != null ? patientHistoryList.size() : 0}]] 条病历信息。
                            [[${session.loginUser.id}]]
                        </p>
                    </div>
                    <div class="table-responsive table-desi">
                        <table class="basic-table table table-hover">
                            <thead>
                                <tr>
                                    <th>首次问诊</th>
                                    <th>年龄</th>
                                    <th>症状</th>
                                    <th>发作详情</th>
                                    <th>诊断结果</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="history : ${patientHistoryList}">
                                    <td th:text="${history.firstQuery}"></td>
                                    <td th:text="${history.userAge}"></td>
                                    <td th:text="${history.symptoms}"></td>
                                    <td th:text="${history.episodeDetails}"></td>
                                    <td th:text="${history.diagnosticResult}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

SystemController的部分也进行了相应的修改：

    @GetMapping("/patient-history")
    public String patientHistory(Map<String, Object> map, Integer userId) {
        // 如果未登录用户访问所有反馈页面，则重定向到首页
        if (Assert.isEmpty(loginUser)) {
            return "redirect:/index.html";
        }
        // 获取所有病历
        List<PatientHistory> patientHistoryList = patientHistoryService.findByUserIdAll(userId);
        // 将反馈列表放入 map 中，传递给视图
        map.put("patientHistoryList", patientHistoryList);
        System.out.println(map);
        // System.out.println(patientHistoryList);
        // 返回 "patient-history" 字符串，表示将会渲染名为 "patient-history" 的视图
        return "patient-history";
    }

代码中先检查 loginUser 是否为空，如果为空，表示用户未登录，将用户重定向到首页 (if (Assert.isEmpty(loginUser)) { return "redirect:/index.html"; })。

通过调用 patientHistoryService 的 findByUserIdAll(userId) 方法，根据 userId 获取该用户的所有病历数据，并存储在 patientHistoryList 列表中 (List<PatientHistory> patientHistoryList = patientHistoryService.findByUserIdAll(userId);)。接着，将获取到的病历列表存入 map 中，键为 "patientHistoryList"，以便在视图中访问 (map.put("patientHistoryList", patientHistoryList);)。

为了便于调试，使用 System.out.println(map); 打印 map 内容到控制台。最后，返回 “patient-history” 字符串，表示将会渲染名为 “patient-history” 的视图 (return "patient-history";)。然后出现了一些bug，发现显示不出来。

对于PatienHistoryService，调用其用ID寻找病历的方法即可，代码如下。

    public List<PatientHistory> findByUserId(Integer userId) {
        if (Assert.notEmpty(userId)) {
            QueryWrapper<PatientHistory> wrapper = new QueryWrapper<>();
            wrapper.eq("user_id", userId);
            return patientHistoryDao.selectList(wrapper);
        }
        return null;
    }

用于根据用户 ID 查询并返回该用户的病历记录。方法的签名 public List<PatientHistory> findByUserId(Integer userId) 表示该方法接受一个整数类型的用户 ID 作为参数，并返回一个 PatientHistory 对象的列表。

使用 Assert.notEmpty(userId) 检查传入的 userId 是否不为空，这是一个工具方法，用于验证 userId 是否有效（即不为空或非空值）。如果 userId 不为空，则创建一个 QueryWrapper 对象，这是 MyBatis-Plus 提供的一个用于构建动态查询条件的类。

使用 eq 方法设置查询条件，表示查询 user_id 等于传入的 userId 的记录。接着，使用 patientHistoryDao 执行查询，将构建的查询条件传递给 selectList 方法，返回符合条件的 PatientHistory 列表。如果 userId 为空或无效，则返回 null。

最终实现效果如下。