Spring Boot新手结合HTML实现搜索数值查询数据库并展示数据求助

整体逻辑 #

整个流程完全匹配你已有的Controller结构，无额外复杂依赖：

1. 前端页面放置可提交的搜索框，用户输入数值后点击查询
2. 请求直接路由到你写的后端接口，传入用户输入的数值
3. 后端调用已有的Service层方法查询关联数据库表，拿到匹配的记录
4. 后端将查询结果传入前端页面模型，直接渲染展示内容

后端代码调整（完全基于你现有Controller修改） #

• 第一步：放开你之前注释的Service注入代码，放在Controller类的成员变量位置即可：

@Autowired
private tbl_voicechatservice voiceservice;

• 第二步：替换你之前注释的路径变量查询方法。注意：你之前注释的方法是直接返回实体对象的，会被Spring MVC序列化成JSON返回给浏览器，不会渲染成带样式的页面，所以我们调整成和你现有其他路由逻辑完全一致的、返回模板路径的写法，直接加到Controller类里：

/**
 * 接收搜索框提交的查询请求
 * @param searchInput 前端搜索框传入的数值
 * @param model 用于传递结果给前端页面
 */
@GetMapping("/search")
public String handleSearch(
        @RequestParam("searchInput") String searchInput,
        Model model
) {
    // 调用你已有的Service方法查数据库
    tbl_voicechat matchedRecord = voiceservice.getDataByANI(searchInput);
    // 把结果放到Model里传给页面
    model.addAttribute("record", matchedRecord);
    // 回到带搜索框的首页展示结果
    return "home";
}

• 注意：你原有的Service里的getDataByANI方法只要实现基础数据库查询逻辑即可——如果用Spring Data JPA，只要在对应Repository接口里写tbl_voicechat findByAni(String ani)，Service层调用这个Repository方法返回就行，不需要额外复杂逻辑。

前端页面实现（纯HTML+CSS，基于你的home.html模板） #

因为你现在的Controller返回的都是模板名，项目默认使用Thymeleaf模板引擎，直接在resources/templates/home.html里加下面的代码即可，不需要额外前端框架：

• 首先加搜索框和结果展示区域的结构：

<!-- 搜索表单，提交路径和后端接口完全对应 -->
<form action="/search" method="get" class="search-bar">
    <input 
        type="number" 
        name="searchInput" 
        placeholder="输入要查询的数值" 
        required
    >
    <button type="submit">查询</button>
</form>

<!-- 结果展示区域 -->
<div class="result-card">
    <!-- 如果查到了匹配记录，就展示对应内容 -->
    <div th:if="${record != null}">
        <h4>匹配到的数据库记录</h4>
        <p>记录编号：<span th:text="${record.id}"></span></p>
        <p>关联查询值：<span th:text="${record.ani}"></span></p>
        <p>记录详情：<span th:text="${record.remark}"></span></p>
        <!-- 上面的th:text值，替换成你自己tbl_voicechat实体的实际字段名即可 -->
    </div>
    <!-- 如果提交了查询但没匹配到，就给提示；刚打开首页时不会显示这个提示 -->
    <div th:if="${record == null and param.searchInput != null}">
        <p>当前输入的数值没有匹配到对应的数据库内容</p>
    </div>
</div>

• 然后配简单的CSS样式，直接写在HTML的<style>标签里就行，不用单独拆分CSS文件：

.search-bar {
    width: 600px;
    margin: 30px auto;
    display: flex;
    gap: 8px;
}
.search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.search-bar button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    background-color: #165DFF;
    color: #fff;
    cursor: pointer;
}
.result-card {
    width: 600px;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 4px;
}

新手必看注意事项 #

• 要保证pom.xml里已经引入了Thymeleaf的starter依赖，否则模板无法正常渲染
• 前端搜索框的name属性值必须和后端@RequestParam里的参数名完全一致，否则后端收不到输入的内容
• 实体类tbl_voicechat的字段名要和数据库表的列名一一对应，否则查出来的结果会是空值
• 你之前写的其他路由（/home、/complaint这些）不需要改动，直接保留就行
• 本地测试的时候先把项目的权限拦截、跨域限制暂时关掉，避免请求被拦截拿不到结果

内容的提问来源于stack exchange，提问作者Arundhati 99