山东大学软件学院创新实训（四）——页面与交互

本文链接：https://blog.csdn.net/m0_55518439/article/details/139583908

山东大学软件学院创新实训（四）——页面与交互

4.1 页面

Thymeleaf 是一个流行的 Java 模板引擎，常用于在 Spring 框架中生成动态网页。它允许在 HTML 文件中嵌入动态内容，并支持条件逻辑、循环等功能。以下是你提供的 HTML 代码中使用到的一些 Thymeleaf 功能及其解释：Thymeleaf 使用 ${} 语法来表示变量表达式。变量通常来自 Spring 的模型对象，可以是请求参数、会话属性等。

<div th:if="${session.loginUser != null}" class="register-login">
    <!-- 其他内容 -->
</div>
<div th:if="${session.loginUser == null}" class="header-btn" style="width: 170px;">
    <input id="loginAccount" type="text" placeholder="账号">
</div>

${session.loginUser != null} 和 ${session.loginUser == null}：根据 session 中是否存在 loginUser 对象来显示或隐藏相应的 HTML 元素。在我的界面中，我通过这一部分进行了一个分权的简单实现，使得登录用户和未登录用户看到不同的导航条。
在这里插入图片描述

这也方便其他组员的开发，我们将不同大模型API放入两个界面中，使得登录用户可以选择更高效的大模型。

Thymeleaf 支持条件渲染，可以根据条件来决定是否显示某个元素。

th:if="${session.loginUser.roleStatus eq 1}"：仅当 loginUser 的 roleStatus 属性等于 1 时，才渲染该 div 元素。

th:class="${cur == 'illness' ? 'active': ''}"：根据 cur 变量的值来动态设置 class 属性。如果 cur 等于 illness，则添加 active 类。

<img th:src="${session.loginUser.imgPath}" alt="author"/>
<h3 class="mb-1" th:text="${session.loginUser.userName}"></h3>
<p class="detail"><i class="fa fa-phone"></i> [[${session.loginUser.userTel}]]</p>
<p class="detail"><i class="fa fa-envelope-o"></i> [[${session.loginUser.userEmail}]]</p>

在别的界面中，也通过thymeleaf引入共通的界面，如在doctor.html中引入common-bar。

<div th:replace="common/common-bar::#header"></div>
<div th:replace="common/common-bar::#back"></div>
<div th:replace="common/common-bar::#footer"></div>
<div th:replace="common/common-bar::#search"></div>
<div th:replace="common/common-bar::#back-to-top"></div>

而动态消息区则模拟一个有来有回的沟通过程。我认为Chat-GPT的前端非常简单出色，在之后的开发中，考虑向着GPT的方向进行优化。

<div id="messages" style="height: 500px;overflow-y: auto">
    <div class="msg-received">
        <div class="msg-image">
            <img src="assets/images/team/doctor.png" alt="image">
        </div>
        <div class="msg-content">
            <p>现在</p>
            <p class="msg">
                [[${session.loginUser.userName}]]你好，我是您的智能专属医生，身体不舒服或者有任何需要咨询的问题，都可以向我提问，我会全心全意为您解答！
            </p>
        </div>
    </div>
</div>

<div class="msg-reply">
    <textarea id="message" placeholder="输入要咨询的内容..."></textarea>
    <button onclick="send()" class="btn btn-na mt-2 pull-right">发送</button>
</div>

4.2 交互

custom.js包含了项目的自定义JavaScript代码，负责处理前端的各种交互行为。它是前后端交互的重要部分，通过发送Ajax请求与后端控制器进行数据交换。custom.js包含了在医生交互页面调用的send函数，函数如下。

function send() {
    let message = $('#message').val();
    if (!message) {
        return;
    }
    $('#messages').append("<div class='msg-received msg-sent' style=\"margin-right: 20px\"><div class='msg-content'><p>现在</p><p class='msg'>" + message + "</p></div></div>");
    messageInit();
    $('#message').val('');
    $.ajax({
        type: "POST",
        url: "message/query",
        data: {
            content: message,
        },
        dataType: "json",
        success: function (data) {
            if (data['code'] === 'SUCCESS') {
                message = data['message'];
                $('#messages').append("<div class=\"msg-received\">\n" +
                    "                   <div class=\"msg-image\">\n" +
                    "                      <img src=\"assets/images/team/doctor.png\" alt=\"image\">\n" +
                    "                   </div>\n" +
                    "                   <div class=\"msg-content\">\n" +
                    "                      <p>现在</p>\n" +
                    "                      <p class=\"msg\">\n" + message +
                    "                      </p>\n" +
                    "                   </div>\n" +
                    "                  </div>");
                messageInit();
            }
        }
    });

}