JDBC+Servlet+JSP实现简单的数据遍历和查找功能

时间:2022-09-20 20:40:45

一、目标效果

1、能实现对数据库中的数据进行打印

JDBC+Servlet+JSP实现简单的数据遍历和查找功能

这里的数据来自于数据库手动添加,暂时没有数据添加页面。隔行换色需要实现。

2、输入框能够实现查询工作

JDBC+Servlet+JSP实现简单的数据遍历和查找功能

两个输入框都能单一和配合查询,描述支持模糊查询。

 

可以直接跳到末尾查看动图效果

二、工作准备

1、涉及的知识点

2、jar 包准备

  • mysql-connector-java-5.1.41-bin.jar
  • jstl.jar
  • standard.jar
  • servlet-api.jar

3、开发工具

  • IntelliJ IDEA
  • Navicat Premium

 

三、代码实现

1、新建数据库,micro_message。再建一个表,message。表的结构如下

JDBC+Servlet+JSP实现简单的数据遍历和查找功能

 

2、新建 Web 项目 MicroMessage

3、新建包

com.liuyanzhao.bean,存放实体类

com.liuyanzhao.servlet,存放Servlet类,实现控制,要调用 service 类

com.liuyanzhao.dao,存放数据库操作类,增查改查等方法

com.liuyanzhao.service,存放业务功能类,调用 dao 类,返回一个数据集合

 

4、在 WEB-INF 下新建一个 lib 文件夹,放 jar 包,然后将 jar 包添加到环境(path)中

注意:Eclipse只需要右键 Build path;

IntelliJ IDEA 可以快捷键 Ctrl+Alt+Shift+S 打开下图,选择指定项目点击右边的绿色的 + ,添加 jar包到环境中

JDBC+Servlet+JSP实现简单的数据遍历和查找功能

 

5、依次按顺序新建下面文件

① com.liuyanzhao.bean 下新建 Message.java

  1. package com.liuyanzhao.bean;
  2. /**
  3.  * 与消息对应的实体类
  4.  */
  5. public class Message {
  6.     private int id;
  7.     private String command;
  8.     private String description;
  9.     private String content;
  10.     public Message() {
  11.     }
  12.     public int getId() {
  13.         return id;
  14.     }
  15.     public void setId(int id) {
  16.         this.id = id;
  17.     }
  18.     public String getCommand() {
  19.         return command;
  20.     }
  21.     public void setCommand(String command) {
  22.         this.command = command;
  23.     }
  24.     public String getDescription() {
  25.         return description;
  26.     }
  27.     public void setDescription(String description) {
  28.         this.description = description;
  29.     }
  30.     public String getContent() {
  31.         return content;
  32.     }
  33.     public void setContent(String content) {
  34.         this.content = content;
  35.     }
  36. }

 

② com.liuyanzhao.servlet 下新建 ListServlet.java

  1. package com.liuyanzhao.servlet;
  2. import com.liuyanzhao.service.ListService;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. /**
  9.  * 列表页面初始化控制
  10.  */
  11. public class ListServlet extends HttpServlet {
  12.     @Override
  13.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         //解决乱码
  15.         request.setCharacterEncoding("utf-8");
  16.         //接受表单内容
  17.         String command = request.getParameter("command");
  18.         String description = request.getParameter("description");
  19.         //向页面传值
  20.         request.setAttribute("command",command);
  21.         request.setAttribute("description",description);
  22.         //业务需要
  23.         ListService listService = new ListService();
  24.         //查询消息列表并传给页面
  25.         request.setAttribute("messageList",listService.queryMessageList(command,description));
  26.         //向页面跳转
  27.         request.getRequestDispatcher("/WEB-INF/jsp/back/list.jsp").forward(request,response);
  28.     }
  29.     @Override
  30.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  31.         this.doGet(req, resp);
  32.     }
  33. }

 

③ 在WEB-INF 下 新建 web.xml,给 Listservlet 类添加映射

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  5.          version="3.1">
  6.     <servlet>
  7.         <servlet-name>ListServlet</servlet-name>
  8.         <servlet-class>com.liuyanzhao.servlet.ListServlet</servlet-class>
  9.     </servlet>
  10.     <servlet-mapping>
  11.         <servlet-name>ListServlet</servlet-name>
  12.         <url-pattern>/List.action</url-pattern>
  13.     </servlet-mapping>
  14. </web-app>

 

④ 在 WEB-INF 下新建一个文件夹 名 jsp,在 jsp内新建一个文件夹 名back,在 back 下新建 list.jsp

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <%
  5.     String path = request.getContextPath();
  6.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  7. %>
  8. <html xmlns="http://www.w3.org/1999/xhtml">
  9. <head>
  10.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  11.     <meta http-equiv="X-UA-Compatible"content="IE=9IE=8IE=7IE=EDGE/>
  12.     <title>内容列表页面</title>
  13.     <link href="<%=basePath%>resources/css/all.css" rel="stylesheet" type="text/css" />
  14. </head>
  15. <body style="background: #e1e9eb;">
  16. <form action="<%=basePath%>List.action" id="mainForm" method="post">
  17.     <div class="right">
  18.         <div class="current">当前位置:<a href="javascript:void(0)" style="color:#6E6E6E;">内容管理</a> &gt; 内容列表</div>
  19.         <div class="rightCont">
  20.             <p class="g_title fix">内容列表 <a class="btn03" href="#">新 增</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn03" href="#">删 除</a></p>
  21.             <table class="tab1">
  22.                 <tbody>
  23.                 <tr>
  24.                     <td width="90" align="right">指令名称:</td>
  25.                     <td>
  26.                         <input name="command" type="text" class="allInput" value="${command}"/>
  27.                     </td>
  28.                     <td width="90" align="right">描述:</td>
  29.                     <td>
  30.                         <input name="description" type="text" class="allInput" value="${description}"/>
  31.                     </td>
  32.                     <td width="85" align="right"><input type="submit" class="tabSub" value="查 询" /></td>
  33.                 </tr>
  34.                 </tbody>
  35.             </table>
  36.             <div class="zixun fix">
  37.                 <table class="tab2" width="100%">
  38.                     <tbody>
  39.                     <tr>
  40.                         <th><input type="checkbox" id="all" onclick="#"/></th>
  41.                         <th>序号</th>
  42.                         <th>指令名称</th>
  43.                         <th>描述</th>
  44.                     </tr>
  45.                     <c:forEach items="${messageList}" var="message" varStatus="status">
  46.                         <tr <c:if test="${status.index % 2!= 0}">style="background-color:#ECF6EE;"</c:if>>
  47.                             <td><input type="checkbox" /></td>
  48.                             <td>${status.index+1}</td>
  49.                             <td>${message.command}</td>
  50.                             <td>${message.description}</td>
  51.                         </tr>
  52.                     </c:forEach>
  53.                     </tbody>
  54.                 </table>
  55.             </div>
  56.         </div>
  57.     </div>
  58. </form>
  59. </body>
  60. </html>

注意:

  • jsp 中的css样式和图片这里就不添加了,这里主要还是学习 JavaWeb,主要还是 看 form 标签之前的内容
  • 第四行的 jstl 核心库
  • bathPath 是获得 根目录的路径,即 index.php的路径
  • ${command} 和 ${description} 是 EL 表达式,通过 Servlet 传值
  • <c:forEach> 和 <c:if> 都是 jstl 的内容

 

⑤ com.liuyanzhao.dao 下新建 MessageDao.java

  1. package com.liuyanzhao.dao;
  2. import com.liuyanzhao.bean.Message;
  3. import java.sql.*;
  4. import java.util.ArrayList;
  5. import java.util.List;
  6. /**
  7.  * 和message表相关的操作
  8.  */
  9. public class MessageDao {
  10.     /**
  11.      * 根据查询条件查询消息列表
  12.      */
  13.     public List<Message> queryMessageList(String command,String description) {
  14.         List<Message> messageList = new ArrayList<Message>();
  15.         //数据库连接
  16.         try {
  17.             Class.forName("com.mysql.jdbc.Driver");
  18.             Connection conn = null;
  19.             conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/micro_message" +
  20.                 "?useUnicode=true&characterEncoding=utf8","root","");
  21.             StringBuilder sql = new StringBuilder(" SELECT id,command,description,content FROM message where 1=1 ");
  22.             List<String> paramList = new ArrayList<String>();
  23.             if(command != null && !"".equals(command.trim())) {
  24.                 sql.append(" and command=? ");
  25.                 paramList.add(command);
  26.             }
  27.             if(description != null && !"".equals(description.trim())) {
  28.                 sql.append(" and description like '%' ? '%' ");
  29.                 paramList.add(description);
  30.             }
  31.             PreparedStatement ptmt = conn.prepareStatement(sql.toString());
  32.             for (int i=0;i<paramList.size();i++) {
  33.                 ptmt.setString(i+1,paramList.get(i));
  34.             }
  35.             ResultSet rs =  ptmt.executeQuery();
  36.             while (rs.next()) {
  37.                 Message message = new Message();
  38.                 messageList.add(message);
  39.                 message.setId(rs.getInt("id"));
  40.                 message.setCommand(rs.getString("command"));
  41.                 message.setDescription(rs.getString("description"));
  42.                 message.setContent(rs.getString("content"));
  43.             }
  44.         } catch (ClassNotFoundException e) {
  45.             e.printStackTrace();
  46.         } catch (SQLException e) {
  47.             e.printStackTrace();
  48.         }
  49.         return messageList;
  50.     }
  51. }

注意:

  • 第 27 行,SELECT 所有要查询的字段,不要用 SELECT *
  • sql 语句最好前后都加个 空格,因为空格是分隔符
  • 第 35 行,模糊查询处,问号的两边别忘了加空格
  • messageList 定义在 try 外面,防止异常出现,空指针
  • 因为我们查询的是不是单条语句,是多条的,所以用集合,而不用对象

 

⑥ com.liuyanzhao.service 下新建 ListService.java

  1. package com.liuyanzhao.service;
  2. import com.liuyanzhao.bean.Message;
  3. import com.liuyanzhao.dao.MessageDao;
  4. import java.util.List;
  5. /**
  6.  *列表相关的业务功能
  7.  */
  8. public class ListService {
  9.     public List<Message> queryMessageList(String command, String description) {
  10.         MessageDao messageDao = new MessageDao();
  11.         return messageDao.queryMessageList(command,description);
  12.     }
  13. }

 

四、运行程序

1、配置 Tomcat 服务器,并启动

2、运行结果如下

JDBC+Servlet+JSP实现简单的数据遍历和查找功能

 

 

本文地址:https://liuyanzhao.com/5502.html