山大软院创新实训之debug篇——反馈乱码、医院输出换行

山大软院创新实训之debug篇——反馈乱码、医院输出换行

1. 解决反馈乱码

反馈部分集中展示用户投给管理员的反馈，其数据库表格式如下（Entity）。

package com.SmartMed_Connect.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
@TableName("feedback")
public class Feedback {

    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String email;
    private String title;
    private String content;
    private Date createTime;
    private Date updateTime;

}

id: 反馈记录的唯一标识符，自动递增。name: 提供反馈的用户的名字。email: 提供反馈的用户的电子邮箱。title: 反馈的标题。content: 反馈的具体内容。createTime: 反馈记录的创建时间。updateTime: 反馈记录的最后更新时间。

反馈在前端显示一直有乱码的问题，调查后发现是前端代码标签不匹配导致的，经调整后前端核心部分如下。

<tbody>
<tr th:each="feedback:${feedbackList}">
    <td th:text="${feedback.id}"></td>
    <td th:text="${feedback.name}"></td>
    <td th:text="${feedback.email}"></td>
    <td th:text="${feedback.title}"></td>
    <td th:text="${feedback.content}"></td>
    <td th:text="${#dates.format(feedback.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
    <td><a th:onclick="deleteFeedback([[${feedback.id}]])" href="#">
    <span>class="label text-success">删除</span></a>
	</td>
</tr>
</tbody>

使用Thymeleaf模板引擎的语法，通过th:each遍历feedbackList集合，为每个feedback对象生成一行表格。每个表格单元格（<td>）中显示反馈的具体字段（如ID、用户名、邮箱、标题、内容、创建时间），并且提供一个删除链接，点击链接时调用deleteFeedback函数并传递对应的反馈ID。创建时间格式化为yyyy-MM-dd HH:mm:ss。

现在反馈功能可以正常显示，显示界面如下。

2. 医院输出换行

我们把基于IP把实现了查询周遭医院名称和地址的功能，并将其集成进了我们的对话系统中（在上一篇博客中已有提及）。然而这样输出在前端会糊成一片，显得过于难看。修改之前的效果如下图。

考虑对前端进行一些修改，对医院的输出进行换行。

像之前一样，在后端加入简单的\n\n被证明是没用的，修改前的后端关键部分代码如下。

                if (queryStep == 7) {
                    savePatientInfo(queryMessage); // 保存用户最后一次回答
                    isTriggering = false;
                    queryStep = 0;
                    messages.add(createMessage(Role.USER, patientInfo.toString() + "请你根据病人信息给出建议"));
                    GenerationParam param = createGenerationParam(messages);
                    GenerationResult result = callGenerationWithMessages(param);
                    messages.add(result.getOutput().getChoices().get(0).getMessage());
                    GenerationOutput output = result.getOutput();
                    printMessages();

                    // 调用 MapUtil 获取最近医院信息
                    String userIP = request.getRemoteAddr();
                    String hospitalInfo = MapUtil.getAddressByIP(userIP);

                    return output.getChoices().get(0).getMessage().getContent() + "\n\n" + hospitalInfo;
                }
                savePatientInfo(queryMessage); // 保存上一次提问的用户回答
                String response = getNextQueryMessage(); // 获得AI下一次的问题
                return response;
            }

考虑修改MapUtil，把地点和地点之间在后端先用<br>隔开。

    public static String getAddressByIP(String userIP){
        String url = "https://restapi.amap.com/v3/ip";

        Map params = new HashMap<String,Object>();
        if(userIP.equalsIgnoreCase("127.0.0.1")==false&&!userIP.equalsIgnoreCase("localhost")==false){
            params.put("ip",userIP);
        }
        params.put("key",amapKey);

        JSONObject result = sendGetRequest(url,params);
        Integer status = Integer.parseInt(result.getString("status"));
        String info = result.getString("info");
        if(status==0){
            return "获取位置信息失败,info:"+info+amapKey;
        }
        String province = result.getString("province");
        String city = result.getString("city");

        List<String> addresses = findHospitalPOI(city);

        StringBuilder sb = new StringBuilder(province);
        sb.append(city);
        sb.append("区域内的综合医院：<br>");
        if(addresses==null){
            return sb.toString();
        }
        for(String address:addresses){
            sb.append(address + "<br>");
        }
        return sb.toString();
    }

然后修改custom.js中的smart_send()方法。修改后的代码如下。

function smart_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/smart_query",
        data: {
            content: message,
        }, // 发起一个POST请求到服务器端点message/query，传递用户发送的消息作为数据。请求的数据类型设置为JSON。
        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();
            }
        }

    });

}

用于发送用户输入的消息并将响应显示在消息区域。首先，从文本区域获取用户输入的消息内容，如果输入为空，则直接返回。接着，将用户输入的消息显示在消息区域，样式为msg-received msg-sent，并调用messageInit函数，可能用于重新初始化或刷新消息显示区域。然后，清空消息输入框中的内容。使用$.ajax发送一个POST请求到message/smart_query端点，将用户输入的消息作为请求数据发送。请求成功后，如果响应的code为SUCCESS，则将服务器返回的消息显示在消息区域，并再次调用messageInit函数。通过这段代码，用户输入的消息会发送到服务器，服务器处理后返回的消息会显示在用户界面上。

改进后的效果如下图。