当前位置：首页 > news >正文

Servlet+JDBC实战开发书店项目讲解第三篇：商品查询实现

news 2025/8/3 2:56:08

Servlet+JDBC实战开发书店项目讲解第三篇：商品查询实现

本篇博客将介绍如何在Servlet+JDBC实战开发书店项目中实现商品查询功能。我们将从设计数据库表结构和实体类开始，一步一步详细讲解代码实现过程，包括前端页面的设计和后端Servlet代码的编写。通过本文的学习，您将能够理解并实践商品查询功能的开发。

第一步：数据库表设计和实体类创建

首先，我们需要设计数据库表结构来存储商品信息，并创建相应的实体类。

在数据库中创建一个名为products的表，包含以下字段：

id：商品ID，类型为整型，主键
name：商品名称，类型为字符串
price：商品价格，类型为浮点数
description：商品描述，类型为字符串

接下来，创建一个Java类Product作为商品的实体类。该类需要包含与数据库表中字段对应的属性，并提供相应的getter和setter方法。

public class Product {private int id;private String name;private double price;private String description;// Constructor, getters and setters
}

第二步：创建商品查询页面的HTML和CSS

在这一步，我们将创建一个商品查询页面，让用户可以输入查询条件并点击按钮进行查询。

<!DOCTYPE html>
<html>
<head><title>商品查询</title><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><h1>商品查询</h1><form action="ProductSearchServlet" method="get"><label for="productName">商品名称：</label><input type="text" id="productName" name="name" required><br><br><label for="productPrice">商品价格：</label><input type="number" id="productPrice" name="price"><br><br><input type="submit" value="查询"></form>
</body>
</html>

在上述示例中，我们创建了一个简单的HTML表单，用户可以输入商品名称和价格来进行查询。我们还引入了一个样式表styles.css来美化页面的外观。

第三步：实现后端Servlet代码

接下来，我们将编写后端的Servlet代码，来处理用户的查询请求，并返回查询结果。

首先，创建一个名为ProductSearchServlet的Java类，继承HttpServlet类，并覆盖doGet()方法。

@WebServlet("/ProductSearchServlet")
public class ProductSearchServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 获取用户输入的查询条件String name = request.getParameter("name");double price = Double.parseDouble(request.getParameter("price"));// 构建SQL查询语句String sql = "SELECT * FROM products WHERE name LIKE ? AND price <= ?";try {// 执行查询并获取结果集Connection conn = DBUtil.getConnection();PreparedStatement statement = conn.prepareStatement(sql);statement.setString(1, "%" + name + "%");statement.setDouble(2, price);ResultSet resultSet = statement.executeQuery();// 将结果集转化为商品对象列表List<Product> productList = new ArrayList<>();while (resultSet.next()) {Product product = new Product();product.setId(resultSet.getInt("id"));product.setName(resultSet.getString("name"));product.setPrice(resultSet.getDouble("price"));product.setDescription(resultSet.getString("description"));productList.add(product);}// 将商品列表传递给前端页面request.setAttribute("products", productList);request.getRequestDispatcher("productlist.jsp").forward(request, response);conn.close();} catch (SQLException e) {e.printStackTrace();}}
}

在上述代码中，我们首先从HttpServletRequest中获取用户输入的查询条件，然后构建SQL查询语句。接下来，我们通过执行SQL查询操作，并将结果集转化为商品对象列表。最后，我们将商品列表存储到请求属性中，并转发到名为productlist.jsp的JSP页面以进行展示。

第四步：创建商品列表展创建HTML页面

首先，在项目中创建一个名为 product_query.html 的 HTML 页面。在页面中添加以下代码：

<!DOCTYPE html>
<html>
<head><title>商品查询</title><style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black;padding: 8px;}th {background-color: #f2f2f2;}input[type="text"] {width: 200px;}input[type="submit"] {padding: 5px 10px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}</style>
</head>
<body><h2>商品查询</h2><form action="ProductQueryServlet" method="post"><label for="query">查询关键字：</label><input type="text" id="query" name="query" required><input type="submit" value="查询"></form><hr><h3>查询结果</h3><table><tr><th>商品ID</th><th>商品名称</th><th>价格</th></tr><!-- 查询结果会通过JavaScript动态填充到这里 --></table>
</body>
</html>

本示例中创建了一个简单的页面，包括一个查询表单和用于展示查询结果的表格。

4.2 JavaScript处理查询请求和响应

为了能够发送查询请求并展示查询结果，我们使用JavaScript来处理表单的提交事件。在页面底部的 </body> 标签之前添加以下代码：

<script>// 在页面加载完毕后，为表单添加提交事件处理程序document.addEventListener('DOMContentLoaded', function() {document.querySelector('form').addEventListener('submit', function(e) {e.preventDefault(); // 防止表单自动提交// 获取查询关键字let query = document.getElementById('query').value;// 构建查询URLlet url = 'ProductQueryServlet?query=' + encodeURIComponent(query);// 发送异步GET请求let xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 处理响应，将查询结果填充到表格中let response = JSON.parse(xhr.responseText);let table = document.querySelector('table');table.innerHTML = `<tr><th>商品ID</th><th>商品名称</th><th>价格</th></tr>`;response.forEach(function(product) {let row = table.insertRow(-1);row.insertCell(0).textContent = product.productId;row.insertCell(1).textContent = product.productName;row.insertCell(2).textContent = product.price;});}};xhr.send();});});
</script>

此段JavaScript代码负责监听表单的提交事件，并通过异步GET请求向 ProductQueryServlet 发送查询参数。查询结果以JSON格式返回，并动态填充到表格中。

到目前为止，我们已经完成了前端列表展示页面的编写。接下来我们将在Servlet中处理查询请求并返回合适的结果。

第五步：测试和部署

在测试和部署商品查询功能之前，请确保已经完成以下准备工作：

已经搭建好开发环境，包括安装好 JDK、Tomcat 和 MySQL 数据库。
已经创建好数据库表，并插入了测试数据。

现在，我们开始测试和部署商品查询功能。

1. 编写测试脚本

首先，让我们编写一个简单的测试脚本 ProductQueryTest.java，用于自动化测试商品查询功能。

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;public class ProductQueryTest {public static void main(String[] args) {try {// 创建连接URL url = new URL("http://localhost:8080/bookstore/productQuery?keyword=java");HttpURLConnection connection = (HttpURLConnection) url.openConnection();// 设置请求方法connection.setRequestMethod("GET");// 发起请求int responseCode = connection.getResponseCode();// 读取响应结果BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));String line;StringBuilder response = new StringBuilder();while ((line = reader.readLine()) != null) {response.append(line);}reader.close();// 打印响应结果System.out.println("Response Code: " + responseCode);System.out.println("Response Body: " + response.toString());} catch (Exception e) {e.printStackTrace();}}
}