目录

1 .功能介绍

2. 实现流程

3. 项目环境

4. 相关代码

4.1 Maven配置

4.2 SQL语句

4.3 Java代码

4.4 HTML代码

4.5 JSP代码

5. 结果展示

---

（原创文章，转载请注明出处）

博主是计算机专业大学生，不定期更新原创优质文章，感兴趣的小伙伴可以关注博主主页支持一下，您的每一个点赞、收藏和关注都是对博主最大的支持！

---

1 .功能介绍

在HTML页面输入学生姓名关键词可以进行关键词匹配并返回匹配到的数据呈现到另一个JSP页面，直接点击搜索可以返回数据表全部数据并在页面以表格的形式呈现数据表

2. 实现流程

在HTML页面表单中提交并发送关键词数据到Servlet，Servlet通过getParameter()方法获取参数，然后进行JDBC操作，查询数据并得到一个结果集（ResultSet），将结果集封装到List<Map<String, Object>>得到一个数据列表（dataList），数据列表存入请求属性并转发到JSP页面，最后在JSP页面通过JSTL的core标签库的循环标签<c:forEach>标签输出结果，完美呈现数据表数据

3. 项目环境

（1）IntelliJ IDEA 2024.1.1
（2）Oracle OpenJDK version 17.0.11
（3）apache-tomcat-8.5.45
（4）apache-maven-3.6.3
（5）mysql-connector-java-8.0.28
（6）javax.servlet-api-3.1.0

Tomcat应用程序上下文：/search

以下jar包添加为库，jar包可在原码获取下载（jar包目录：\web\WEB-INF\lib）

4. 相关代码

4.1 Maven配置

文件名：pom.xml（项目相关依赖）

<!--MySQL驱动-->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.28</version>
</dependency>
<!--单元测试-->
<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.13.1</version>
    <scope>compile</scope>
</dependency>
<!-- servlet -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
</dependency>
<!--JSP-->
<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.1</version>
    <scope>provided</scope>
</dependency>
<!--JSTL库-->
<dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

4.2 SQL语句

（1）数据库+数据表

# 数据库
create database mydb;
use mydb;

# 数据表
create table student
(
    SID    int unique primary key,
    name   varchar(100) not null,
    age    tinyint unsigned,
    gender enum ('男','女','其他') default '男',
    major  varchar(10)  not null
) default charset = utf8mb4;

（2）插入数据

# 以下数据是AI随机生成的，纯属虚构，仅练习使用
insert into student
values (10001, '梅戈心', 18, '女', '数据科学与技术'),
       (10002, '唐菲瑛', 19, '女', '数据科学与技术'),
       (10003, '谢鹭尤', 20, '男', '数据科学与技术'),
       (10004, '尚融任', 21, '男', '数据科学与技术'),
       (10005, '严寒孝', 22, '男', '数据科学与技术'),
       (10006, '王霞蓉', 19, '女', '软件工程'),
       (10007, '羿羽忱', 19, '男', '软件工程'),
       (10008, '高允栋', 22, '男', '软件工程'),
       (10009, '包博灿', 25, '女', '软件工程'),
       (10010, '邴学琰', 22, '男', '软件工程');

4.3 Java代码

文件名：SearchServlet.java

package pers.kenneth.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(name = "SearchServlet", urlPatterns = "/SearchServlet")
public class SearchServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 防止中文乱码
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        // 获取关键词
        String keyword = request.getParameter("keyword");
        // 初始化数据结构
        List<Map<String, Object>> dataList = new ArrayList<>();
        // JDBC操作
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/mydb";
            String user = "root";
            String pass = "123456";
            Connection connection = DriverManager.getConnection(url, user, pass);
            Statement statement = connection.createStatement();
            String sql = "select * from student where name like '%" + keyword + "%'";
            // 得到结果集
            ResultSet resultSet = statement.executeQuery(sql);
            while (resultSet.next()) {
                Map<String, Object> rowData = new HashMap<>();
                rowData.put("SID", resultSet.getInt("SID"));
                rowData.put("name", resultSet.getString("name"));
                rowData.put("age", resultSet.getInt("age"));
                rowData.put("gender", resultSet.getString("gender"));
                rowData.put("major", resultSet.getString("major"));
                dataList.add(rowData);
                System.out.println(rowData);
            }
            System.out.println(dataList);
            // 释放资源
            resultSet.close();
            statement.close();
            connection.close();
        } catch (ClassNotFoundException | SQLException e) {
            throw new RuntimeException(e);
        }
        // 存入请求属性
        request.setAttribute("keyword", keyword);
        request.setAttribute("dataList", dataList);
        // 转发
        request.getRequestDispatcher("/show.jsp").forward(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

4.4 HTML代码

（1）HTML代码

文件名：search.html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/search.css">
    <title>搜索</title>
</head>
<body>
<div class="container">
    <form class="search-form" action="/search/SearchServlet" method="post">
        <input type="text" class="search-input" placeholder="请输入姓名关键词" name="keyword">
        <button type="submit" class="search-button">搜索</button>
    </form>
</div>
</body>
</html>

（2）CSS代码

文件名：search.css

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
}

.search-form {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 16px;
}

.search-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #45a049;
}

4.5 JSP代码

（1）JSP代码

文件名：show.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/show.css">
    <title>搜索结果</title>
</head>
<body>
<h1>以下是关键词“${keyword}”的搜索结果</h1>
<table class="responsive-table">
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>专业</td>
    </tr>
    <c:forEach var="row" items="${dataList}">
        <tr>
            <td><c:out value="${row.SID}"/></td>
            <td><c:out value="${row.name}"/></td>
            <td><c:out value="${row.age}"/></td>
            <td><c:out value="${row.gender}"/></td>
            <td><c:out value="${row.major}"/></td>
        </tr>
    </c:forEach>
</table>
</body>
</html>

（2）CSS代码

文件名：show.css

.responsive-table {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
}

.responsive-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    background-color: #f2f2f2;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-table td {
        width: calc(100% / 6);
    }
}

@media (min-width: 1025px) {
    .responsive-table td {
        width: calc(100% / 6);
    }
}

5. 结果展示

（1）直接搜索

（2）关键词搜索

6. 原码获取

GitHub：https://github.com/KennethCreative/search-from-database.git

Gitee：search-from-database: JDBC+Servlet+JSP实现搜索数据和页面数据呈现

# GitHub
git clone https://github.com/KennethCreative/search-from-database.git
# Gitee
git clone https://gitee.com/KennethCreative/search-from-database.git

若有不妥之处，恳请读者批评指正