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;
// 构建查询URL
let 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();
}
}
}
上述代码创建了一个 HTTP 连接，发送 GET 请求到 http://localhost:8080/bookstore/productQuery?keyword=java，其中 keyword 参数指定了查询关键字。
2. 运行测试脚本
接下来，我们需要运行测试脚本以验证商品查询功能的正确性。请按照以下步骤进行：
-
将 ProductQueryTest.java 编译为 ProductQueryTest.class。
-
启动 Tomcat 服务器。
-
在命令行中执行以下命令运行测试脚本：
java ProductQueryTest
注意，确保已经进入到包含 ProductQueryTest.class 的目录中。
3. 检查测试结果
运行测试脚本后，将会得到查询结果。请检查以下几个方面来验证查询结果的正确性：
-
响应代码 Response Code 是否为 200，表示请求成功。
-
响应体 Response Body 是否包含预期的商品信息，可以与预期结果进行比对。
