【Java】JDBC+Servlet+JSP实现搜索数据和页面数据呈现

news2024/11/27 11:30:12

目录

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1816340.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

服务架构的设计原则

服务架构的设计原则

墨菲定律与康威定律 在系统设计的时候&#xff0c;可以依据于墨菲定律 任何事情都没有表面上看起来那么简单所有的事情都会比你预计的时间长可能出错的事总会出错担心的某一个事情的发送&#xff0c;那么它就更有可能发生 在系统划分的时候&#xff0c;可以依据康威定律 系…
阅读更多...
0604 集成电路运算放大器

0604 集成电路运算放大器

6.4.1 集成电路运算放大器CMOS MC14573 6.4.2 集成运算放大器741
阅读更多...
搭建社区团购系统，广泛应用便捷高效新体验

搭建社区团购系统，广泛应用便捷高效新体验

前言 在数字化浪潮的推动下&#xff0c;社区团购系统如雨后春笋般崭露头角&#xff0c;为小区居民们带来了前所未有的便捷与实惠。如今&#xff0c;搭建社区团购系统已成为一种新趋势&#xff0c;其广泛应用正逐渐改变着人们的购物方式&#xff0c;让便捷高效的新体验深入人心…
阅读更多...
ADS基础教程19 - 电磁仿真（EM）基本概念和实操

ADS基础教程19 - 电磁仿真（EM）基本概念和实操

EM介绍 一、引言二、基本概念1.EM介绍2.Momentum介绍3.FEM介绍4.Substrate介绍 三、创建Layout并进行Momentum仿真1.创建Layout2.添加Microtrip&#xff08;微带线&#xff09;3.添加Substrate4.Momentum仿真 四、总结 一、引言 本章节开始介绍EM的基本概念、内容以及实现具体…
阅读更多...
简单脉冲动画效果实现

简单脉冲动画效果实现

简单脉冲动画效果实现 效果展示 CSS 知识点 CSS 变量的灵活使用CSS 动画使用 页面整体结构实现 <div class"pulse"><span style"--i: 1"></span><span style"--i: 2"></span><span style"--i: 3"…
阅读更多...
IntelliJ IDEA 2024.1最新安装 亲测有效2099年

IntelliJ IDEA 2024.1最新安装 亲测有效2099年

标题一&#xff1a;IDEA官方下载 ①如题&#xff0c;先到IDEA官方下载&#xff0c;简简单单 ②IDEA官方&#xff1a;IntelliJ IDEA – the Leading Java and Kotlin IDE 标题二&#xff1a;获取脚本 点这里获取 &#x1f31f;获取完后压缩&#xff0c;推荐与IDEA放在同一目…
阅读更多...
Spring框架是如何查找方法上的异步任务注解@Async

Spring框架是如何查找方法上的异步任务注解@Async

结论先行 Spring框架层面&#xff0c;查找方法上的注解的原理与机制是一样的。 在方法层面&#xff0c;Spring框架已经找到子类的Async注解&#xff0c;原因是查找注解会搜索整棵类型继承树&#xff0c;包括超类和实现的接口。 异步任务代码示例 Async注解&#xff0c;在父类…
阅读更多...
⌈ 传知代码 ⌋ ERA-CoT: 实体关系推理

⌈ 传知代码 ⌋ ERA-CoT: 实体关系推理

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…
阅读更多...
48【Aseprite 作图】荷塘月色——拆解

48【Aseprite 作图】荷塘月色——拆解

1 荷叶&#xff0c;不要完全对称&#xff0c;下面是深色的&#xff0c;上面是浅色的&#xff0c;加一点高光 2 鱼的轮廓 上色彩&#xff0c;主要用三种颜色&#xff0c;修改透明度&#xff0c;叠加颜色
阅读更多...
快捷键专栏 IDEA、Navicat、电脑、Excle、Word等

快捷键专栏 IDEA、Navicat、电脑、Excle、Word等

标题 电脑篇windowsR 配合以下常用命令连上公司网线WiFi速度变慢问题解决Windows10 设置鼠标右键在此处打开cmd和Powershell窗口、关机打开电脑诊断工具系统设置常用设置查看电脑出场日期 systeminfo删除文件显示已在另一个程序打开&#xff1f;找回回收站删除的文件WindowsR输…
阅读更多...
RUOYI集成手机短信登录

RUOYI集成手机短信登录

背景&#xff1a; 工作过程中遇到需求&#xff0c;需要将短信验证码登录集成到RUOYI框架中。框架中使用的用户认证组件为Security&#xff0c;由于没有怎么研究过这个组件&#xff0c;这个功能不太会搞。所以这是一篇抄作业记录。参考文章如下 若依RuoYi整合短信验证码登录_若…
阅读更多...
C++和C语言到底有什么区别？

C++和C语言到底有什么区别？

引言&#xff1a;C和C语言是两种非常常见的编程语言&#xff0c;由于其广泛的应用和灵活性&#xff0c;它们在计算机科学领域内受到了广泛的关注。虽然C是从C语言发展而来的&#xff0c;但是这两种语言在许多方面都有所不同。本文将对C和C语言进行比较和分析&#xff0c;以便更…
阅读更多...
汇聚荣科技有限公司实力强吗？

汇聚荣科技有限公司实力强吗？

汇聚荣科技有限公司实力强吗?在当今快速发展的科技行业中&#xff0c;公司的实力往往决定了其市场竞争力和发展前景。对于汇聚荣科技有限公司而言&#xff0c;其是否具备强大的实力&#xff0c;不仅关系到自身的发展&#xff0c;也影响着投资者和合作伙伴的选择。因此&#xf…
阅读更多...
CAD2022下载与安装

CAD2022下载与安装

CAD2022下载与安装 安装包下载安装包解压缩软件安装安装完成 安装包下载 安装包下载链接&#xff1a; https://pan.xunlei.com/s/VNyyAVUev-7XHig_2VIGiTN1 提取码&#xff1a;mxt8 下载安装包&#xff0c;完成后&#xff0c;得到一个压缩文件 安装包解压缩 右键解压到当前…
阅读更多...
深圳建网站

深圳建网站

深圳是中国最具活力和创新力的城市之一&#xff0c;也是全球网站建设行业蓬勃发展的重要市场之一。随着信息科技的不断发展和互联网的普及&#xff0c;越来越多的企业和个人意识到了建立网站的重要性&#xff0c;通过网站可以为企业带来更多的业务机会和营销渠道。 建立一个优质…
阅读更多...
23种设计模式之组合模式

23种设计模式之组合模式

组合模式 1、定义 组合模式&#xff1a;组合多个对象形成树状结构以表示具有部分-整体关系的层次结构。组合模式让客户端可以统一对待单个对象和组合对象 2、组合模式结构 Component&#xff08;抽象构件&#xff09;&#xff1a;可以是接口或抽象类&#xff0c;为叶子构件…
阅读更多...
【Unity】RPG2D龙城纷争（二）关卡、地块

【Unity】RPG2D龙城纷争（二）关卡、地块

更新日期&#xff1a;2024年6月12日。 项目源码&#xff1a;在第四章发布 索引 简介地块&#xff08;Block&#xff09;一、定义地块类二、地块类型三、地块渲染四、地块索引 关卡&#xff08;Level&#xff09;一、定义关卡类二、关卡基础属性三、地块集合四、关卡初始化五、关…
阅读更多...
CorelDRAW 2024开启设计新纪元，终身永久版与中文破解版的全面解析及安装攻略

CorelDRAW 2024开启设计新纪元，终身永久版与中文破解版的全面解析及安装攻略

当我们谈论图形设计软件时&#xff0c;CorelDRAW无疑是一个响亮的名字。作为一款强大的矢量图形编辑工具&#xff0c;它以其丰富的功能和用户友好的界面赢得了全球设计师的喜爱。随着CorelDRAW 2024的发布&#xff0c;这个备受瞩目的版本带来了前所未有的创新特性&#xff0c;进…
阅读更多...
Linux基础IO【II】

Linux基础IO【II】

今天&#xff0c;我们接着在上一篇文章的基础上&#xff0c;继续学习基础IO。观看本文章之前&#xff0c;建议先看&#xff1a;Linux基础IO【I】&#xff0c;那&#xff0c;我们就开始吧&#xff01; 一.文件描述符 1.重新理解文件 文件操作的本质&#xff1a;进程和被打开文件…
阅读更多...
【网络编程】套接字类型与协议设置

【网络编程】套接字类型与协议设置

协议&#xff1a;计算机对话的通信规则&#xff0c;简而言之是为了完成数据交换而定好的约定。 #include<sys/socket.h> int socket(int domain, int type,int protocol); //domian使用的协议族信息&#xff0c;type传输类型&#xff0c;protocol计算机间通信使用的协议…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023