Java Web综合项目实战 - 西蒙购物网（下）
文章目录
- 3. 项目实现
- 3.9 创建视图页面
- 3.9.1 配置错误页面
- 3.9.2 项目首页
- 3.9.3 登录页面
- 3.9.4 注册页面
- 3.9.5 前端 - 显示类别页面
- 3.9.6 前端 - 显示购物车页面
- 3.9.7 前端 - 显示商品页面
- 3.9.8 前端 - 生成订单页面
- 3.9.9 前端 - 显示订单页面
- 3.9.10 后端 - 管理页面
- 3.9.11 后端 - 查看全部用户页面
- 3.9.12 后端 - 编辑用户页面
- 3.9.13 后端 - 查看全部类别页面
- 3.9.14 后端 - 添加类别页面
- 3.9.15 后端 - 编辑类别页面
- 4. 项目测试
- 5. 实战小结
3. 项目实现
3.9 创建视图页面
3.9.1 配置错误页面
- 简单说明：可以在创建处理类之前配置错误页面，这样单元测试处理类时遇到页面尚未定义，就会统一跳转到错误页面~
- 创建错误页面
-
在
webapp\WEB-INF里创建error.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%@ page isErrorPage="true" %><!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>错误页面</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-light text-center"><div class="container pt-5"><div class="row justify-content-center"><div class="col-md-6"><div class="card shadow"><div class="card-body"><h1 class="display-1 text-danger">😵</h1><h5 class="card-title">抱歉，服务器开小差了~</h5><hr><p class="card-text text-muted"><p>错误代码：<span style="color: red">${pageContext.errorData.statusCode}</span></p><c:choose><c:when test="${pageContext.errorData.statusCode == 404}">页面不存在，请检查地址是否正确~</c:when><c:when test="${pageContext.errorData.statusCode == 500}">服务器内部错误，正在紧急修复中~</c:when><c:otherwise>发生了未知错误，请稍后再试~</c:otherwise></c:choose></p><hr><a href="javascript:history.back()" class="btn btn-primary">← 返回上页</a></div></div></div></div></div> </body> </html> -
代码说明：该JSP页面为统一错误处理页，通过JSTL根据
statusCode判断错误类型，显示对应的友好提示信息。页面美观简洁，区分404和500等常见错误，提升用户体验。所有异常由web.xml定向至此，实现集中化、标准化的错误展示与导航。
-
- 配置错误页面
-
修改Web部署描述文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaeehttps://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"version="6.0"><error-page><error-code>404</error-code><location>/WEB-INF/error.jsp</location></error-page><error-page><error-code>500</error-code><location>/WEB-INF/error.jsp</location></error-page><!-- 可选：捕获所有异常 --><error-page><exception-type>java.lang.Throwable</exception-type><location>/WEB-INF/error.jsp</location></error-page> </web-app> -
代码说明：该
web.xml配置文件定义了Web应用的错误处理机制。统一将404（未找到）和500（服务器错误）状态码，以及所有Throwable异常，定向到/WEB-INF/error.jsp错误页面，实现集中化错误展示与用户友好提示，提升系统健壮性与用户体验。
-
- 测试错误页面
- 重启服务器，访问一个不存在的页面，比如
http://localhost:8080/simonshop/testAddProduct.jsp
- 重启服务器，访问一个不存在的页面，比如
3.9.2 项目首页
- 修改项目首页
-
修改
index.jsp文件
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html> <html> <head><title>首页</title><link rel="stylesheet" href="css/index.css"> </head> <body class="bg"><div class="box"><h3>泸州职业技术学院</h3><hr><h1>综合项目开发 - 西蒙购物网</h1><jsp:useBean id="now" class="java.util.Date"/><h3><fmt:formatDate value="${now}" pattern="yyyy-MM-dd HH:mm:ss"/></h3><hr><a href="login.jsp">跳转到登录页面</a></div> </body> </html> -
代码说明：该JSP页面为西蒙购物网首页，显示学校名称、项目标题及当前系统时间。使用JSTL格式化日期，页面简洁直观，底部提供跳转登录页的链接。通过CSS设置背景样式，结构清晰，作为系统入口引导用户进入登录界面。
-
- 测试项目首页
- 重启服务器，显示首页
- 重启服务器，显示首页
3.9.3 登录页面
- 创建登录页面
-
在
webapp里创建login.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>西蒙商品网 - 用户登录</title><!-- Bootstrap CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css"> </head> <body><div class="container"><div class="row justify-content-center"><div class="col-md-6 col-lg-5"><div class="login-container"><div class="login-header"><i class="fas fa-book book-icon"></i><h2>西蒙购物网</h2><div class="subtitle">欢迎回来，请登录您的账户</div></div><div class="login-body"><%-- 显示登录出错信息或提示登录信息：纯JSTL --%><c:if test="${not empty requestScope.msg}"><div class="alert alert-warning alert-custom mt-1 mb-1" role="alert"><i class="fas fa-exclamation-triangle me-2"></i>${requestScope.msg}</div></c:if><form action="login" method="post"><div class="form-floating mb-1"><input type="text" class="form-control" id="username" name="username"placeholder="请输入用户名" required><label for="username"><i class="fas fa-user me-1"></i>用户名</label></div><div class="form-floating"><input type="password" class="form-control" id="password" name="password"placeholder="请输入密码" required><label for="password"><i class="fas fa-lock me-1"></i>密码</label></div><!-- 按钮行 --><div class="d-flex justify-content-center gap-1"><button type="submit" class="btn-login" style="height:42px;"><iclass="fas fa-sign-in-alt me-2"></i>登录</button><button type="reset" class="btn-reset" style="height:42px;"><i class="fas fa-redo me-2"></i>重置</button></div></form><div class="text-center mb-1"><a class="btn-register d-block w-100" style="height:42px; text-decoration: none"href="${pageContext.request.contextPath}/register.jsp"><i class="fas fa-sign-in-alt me-2"></i>新用户，单击此处去注册吧~</a></div><div class="text-center mt-1"><small class="text-muted"><i class="fas fa-shield-alt me-1"></i>您的信息将被安全保护</small></div></div></div></div></div></div><!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script> </body> </html> -
代码说明：该JSP页面实现用户登录功能，采用Bootstrap 5构建响应式界面，包含用户名和密码输入框，支持前端必填验证。通过JSTL显示登录提示或错误信息，提供登录、重置按钮及跳转注册链接，界面简洁美观，数据提交至
loginServlet处理，保障用户信息安全。
-
- 测试登录页面
- 重启服务器，显示首页
- 单击【跳转到登录页面】按钮，显示登录页面
- 演示普通用户登录成功的情况
- 输入用户名：
郑晓红，密码：11111
- 单击【登录】按钮，查看控制台的输出信息
- 输入用户名：
- 演示管理员登录成功的情况
- 输入用户名：
admin，密码：12345
- 单击【登录】按钮，查看控制台的输出信息
- 输入用户名：
- 演示登录失败的情况
- 输入错误的用户名或密码：
陈燕文:903213
- 输入错误的用户名或密码：
- 单击【登录】按钮，被打回登录页面，显示登录出错信息
- 重启服务器，显示首页
3.9.4 注册页面
- 创建注册页面
-
在
webapp里创建register.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>西蒙商品网 - 用户注册</title><!-- Bootstrap CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/register.css"> </head> <body><div class="container"><div class="row justify-content-center"><div class="col-md-6 col-lg-5"><div class="register-container"><div class="register-header"><i class="fas fa-book book-icon"></i><h2>西蒙购物网</h2><div class="subtitle">欢迎注册您的账户</div></div><div class="register-body"><%-- 显示注册出错信息：纯JSTL --%><c:if test="${not empty requestScope.msg}"><div class="alert alert-warning alert-custom mt-1 mb-1" role="alert"><i class="fas fa-exclamation-triangle me-2"></i>${requestScope.msg}</div></c:if><form action="register" method="post" class="needs-validation" novalidate><div class="form-floating mb-1"><input type="text" class="form-control" id="username" name="username"placeholder="请输入用户名" required><label for="username"><i class="fas fa-user me-1"></i>用户名</label></div><div class="form-floating mb-1"><input type="password" class="form-control" id="password" name="password"placeholder="请输入密码" required><label for="password"><i class="fas fa-lock me-1"></i>密码</label></div><div class="form-floating"><input type="tel"class="form-control"id="telephone"name="telephone"placeholder="请输入电话"pattern="^1[3-9]\d{9}$"maxlength="11"required><label for="telephone"><i class="fas fa-phone me-1"></i>电话</label><!-- 无效时提示 --><div class="invalid-feedback">请输入正确的11位手机号~</div></div><!-- 按钮行 --><div class="d-flex justify-content-center gap-1"><button type="submit" class="btn-register" style="height:42px;"><iclass="fas fa-sign-in-alt me-2"></i>注册</button><button type="reset" class="btn-reset" style="height:42px;"><i class="fas fa-redo me-2"></i>重置</button></div></form><div class="text-center mb-1"><a class="btn-to-login d-block w-100" style="height:42px; text-decoration: none"href="${pageContext.request.contextPath}/login.jsp"><i class="fas fa-sign-in-alt me-2"></i>跳转到登录页面</a></div><div class="text-center mt-1"><small class="text-muted"><i class="fas fa-shield-alt me-1"></i>您的信息将被安全保护</small></div></div></div></div></div></div><script>// Bootstrap 5 原生表单验证(function () {'use strict'const forms = document.querySelectorAll('.needs-validation')Array.from(forms).forEach(form => {form.addEventListener('submit', event => {if (!form.checkValidity()) {event.preventDefault()event.stopPropagation()}form.classList.add('was-validated')}, false)})})()</script><!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script> </body> </html> -
代码说明：该JSP页面实现用户注册功能，使用Bootstrap 5构建响应式界面，包含用户名、密码、手机号输入项，支持前端表单验证。通过JSTL显示错误消息，提供注册、重置按钮及跳转登录链接，界面美观且用户体验良好，数据提交至
registerServlet处理。
-
- 测试注册页面
- 启动服务器，显示首页
- 跳转到登录页面
- 单击【新用户，单击此处去注册吧】按钮，显示注册页面
- 输入用户名、密码和电话
- 单击【注册】按钮，注册成功后跳转到登录页面
- 在Navicat里查看用户表里添加的新用户
- 再以陈燕文注册一次，会提示注册失败
- 查看控制台的输出信息，会告知[陈燕文]已存在，所以注册失败
- 启动服务器，显示首页
3.9.5 前端 - 显示类别页面
- 在
webapp里创建frontend目录，用于保存前端页面
- 创建显示类别页面
-
在
frontend里创建showCategory.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示类别</title><!-- Bootstrap CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/category.css"> </head> <body><!-- 头部 --><div class="d-flex justify-content-between align-items-center px-3 py-2 bg-primary text-white"><!-- 左侧：站名 --><div class="fs-4 fw-bold">西蒙购物网</div><!-- 右侧：用户+注销 --><div class="d-flex align-items-center gap-2"><i class="fas fa-user-circle fs-5"></i><c:if test="${not empty sessionScope.user}"><span class="me-2">${sessionScope.user.username}</span></c:if><a href="${pageContext.request.contextPath}/logout"class="btn btn-outline-light btn-sm"><i class="fas fa-sign-out-alt me-1"></i>注销</a></div></div><%-- 显示类别页：未登录则转发到登录页并带提示 --%><c:if test="${empty sessionScope.user}"><c:set var="msg" value="温馨提示：查看类别需要登录~" scope="request"/><jsp:forward page="../login.jsp"/></c:if><div class="container mt-4"><h2 class="text-center mb-4 text-primary"><i class="fas fa-gift me-2"></i>商品类别</h2><div class="row g-2"> <!-- g-2 = 上下间距 --><c:forEach var="category" items="${sessionScope.categories}"><div class="col-12"> <!-- 12 列 = 整行 --><a href="${pageContext.request.contextPath}/showProduct?categoryId=${category.id}"class="btn btn-outline-primary btn-lg w-100"> <!-- w-100 = 撑满父级 --><i class="fas fa-tag"></i> ${category.name}</a></div></c:forEach></div></div><!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script><c:if test="${not empty sessionScope.msg}"><script type="text/javascript">alert("${sessionScope.msg}");</script><c:remove var="msg" scope="session" /></c:if> </body> </html> -
代码说明：该JSP页面展示商品类别，使用Bootstrap美化界面。用户需登录后方可访问，未登录则跳转至登录页。页面顶部显示用户名和注销按钮，主体为按ID排列的类别按钮，点击可查看对应商品。支持会话消息提示，交互友好。
-
- 测试显示类别页面
- 重启服务器，显示首页
- 跳转到登录页面，输入正确的用户名和密码：
郑晓红:11111
- 单击【登录】按钮，登录成功后，可以看到显示类别页面
- 重启服务器，显示首页
3.9.6 前端 - 显示购物车页面
- 创建显示购物车页面
-
在
frontend里创建showCart.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><c:if test="${empty sessionScope.user}"><c:set var="msg" value="温馨提示：查看购物车需要登录~" scope="request"/><jsp:forward page="../login.jsp"/> </c:if><div class="container mt-4"><h2 class="text-center mb-4 text-warning"><i class="fas fa-shopping-cart me-2"></i>${sessionScope.user.username}的购物车</h2><div class="card shadow-sm"><div class="card-header bg-info text-white"><h5 class="mb-0"><i class="fas fa-receipt me-2"></i>购物车数据</h5></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-hover table-striped align-middle mb-0"><thead class="table-light text-center"><tr><th style="width: 10%">编号</th><th style="width: 20%">商品名称</th><th style="width: 15%">价格</th><th style="width: 10%">数量</th><th style="width: 15%">小计</th><th style="width: 20%">操作</th></tr></thead><tbody class="text-center"><c:forEach var="item" items="${sessionScope.shoppingTable}"><tr><td>${item.id}</td><td>${item.name}</td><td class="text-danger fw-bold">¥${item.price}</td><td>${item.amount}</td><td class="text-danger fw-bold">¥${item.sum}</td><td><a href="${pageContext.request.contextPath}/operateCart?id=${item.id}&operation=delete"class="btn btn-sm btn-outline-danger"><i class="fas fa-trash me-1"></i>删除</a></td></tr></c:forEach><tr class="table-active"><th colspan="5" class="text-end">总金额：</th><th class="text-danger fw-bold fs-5">¥${empty totalPrice ? '0.00' : totalPrice}</th></tr></tbody></table></div></div></div><div class="d-flex justify-content-center mt-4 mb-5"><a href="${pageContext.request.contextPath}/frontend/makeOrder.jsp?totalPrice=${empty totalPrice ? '0.00' : totalPrice}"class="btn btn-success btn-lg"><i class="fas fa-file-invoice"></i> 生成订单</a></div> </div> -
代码说明：该JSP页面显示用户购物车信息，需登录后访问，未登录则跳转至登录页。页面以表格形式展示商品编号、名称、价格、数量及小计，支持删除操作，底部显示总金额并提供生成订单按钮，界面清晰，交互性强，便于用户管理购物车。
-
- 测试显示购物车页面
- 重启服务器，普通用户登录后，跳转到显示类别页面
- 访问购物车：
http://localhost:8080/simonshop/frontend/showCart.jsp
- 大家看到显示购物车页面样式没有起作用，因为显示购物车页面要嵌入显示商品页面，那时才会用Bootstrap框架来美化自己。
- 重启服务器，普通用户登录后，跳转到显示类别页面
3.9.7 前端 - 显示商品页面
- 创建显示商品页面
-
在
frontend里创建showProduct.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>西蒙商品网 - 商品展示</title><!-- Bootstrap CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/product.css"> </head> <body><!-- 头部 --><div class="d-flex justify-content-between align-items-center px-3 py-2 bg-primary text-white"><!-- 左侧：站名 --><div class="fs-4 fw-bold">西蒙购物网</div><!-- 右侧：用户+注销 --><div class="d-flex align-items-center gap-2"><i class="fas fa-user-circle fs-5"></i><c:if test="${not empty sessionScope.user}"><span class="me-2">${sessionScope.user.username}</span></c:if><a href="${pageContext.request.contextPath}/showCategory" class="btn btn-outline-light btn-sm"><i class="fas fa-sign-out-alt me-1"></i>返回商品类别</a><a href="${pageContext.request.contextPath}/logout"class="btn btn-outline-light btn-sm"><i class="fas fa-sign-out-alt me-1"></i>注销</a></div></div><%-- 显示商品页：未登录则转发到登录页并带提示 --%><c:if test="${empty sessionScope.user}"><c:set var="msg" value="温馨提示：查看商品需要登录~" scope="request"/><jsp:forward page="../login.jsp"/></c:if><div class="container mt-4"><h2 class="text-center mb-4 text-warning"><i class="fas fa-box-open me-2"></i>商品展示</h2><c:if test="${empty sessionScope.products}"><div class="alert alert-info text-center"><i class="fas fa-info-circle fa-2x mb-2"></i><h5>暂无商品</h5><p class="mb-0">请稍后再来查看~</p></div></c:if><c:if test="${not empty sessionScope.products}"><div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"><c:forEach var="p" items="${sessionScope.products}"><div class="col"><div class="card h-100 shadow-sm"><!-- 固定 4:3 比例 + 自动裁剪 --><div class="ratio ratio-4x3"><img src="${pageContext.request.contextPath}/${p.image}"alt="${p.name}"class="object-fit-cover rounded-top"></div><div class="card-body d-flex flex-column"><h5 class="card-title mb-1">${p.name}</h5><div class="small text-muted mb-2"><span class="me-3">#${p.id}</span><span><i class="far fa-calendar me-1"></i><fmt:formatDate value="${p.addTime}" pattern="yyyy-MM-dd"/></span></div><div class="mt-auto d-flex justify-content-between align-items-center"><span class="text-danger fw-bold fs-5">¥<fmt:formatNumber value="${p.price}" type="number" minFractionDigits="2"/></span><a href="${pageContext.request.contextPath}/operateCart?id=${p.id}&operation=add"class="btn btn-primary btn-sm"><i class="fas fa-cart-plus me-1"></i>加入购物车</a></div></div></div></div></c:forEach></div></c:if><%-- 包含显示购物车页面 --%><jsp:include page="showCart.jsp"/></div><!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script> </body> </html> -
代码说明：该JSP页面展示商品列表，需登录访问，未登录则跳转登录页。页面采用响应式网格布局，显示商品图片、名称、价格等信息，支持按类别查看，并可点击“加入购物车”。底部嵌入购物车显示，提升用户体验，界面美观且功能完整。
-
- 测试显示商品页面
- 重启服务器，显示首页，普通用户登录，显示类别页面
- 单击【家用电器】按钮，跳转到显示商品页面
- 演示购物车操作，添加商品到购物车，从购物车移除选购的商品
- 重启服务器，显示首页，普通用户登录，显示类别页面
3.9.8 前端 - 生成订单页面
- 创建生成订单页面
-
在
frontend里创建makeOrder.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>西蒙购物网 - 生成订单</title><!-- Bootstrap CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/make_order.css"> </head> <body><%-- 生成订单页：未登录则转发到登录页并带提示 --%><c:if test="${empty sessionScope.user}"><c:set var="msg" value="温馨提示：生成订单需要登录~" scope="request"/><jsp:forward page="../login.jsp"/></c:if><div class="container"><div class="row justify-content-center"><div class="col-md-6 col-lg-5"><div class="order-container"><!-- 头部 --><div class="order-header"><i class="fas fa-receipt fa-2x mb-2"></i><h1>西蒙购物网</h1><div class="subtitle">生成订单</div></div> <!-- 用户栏 --><div class="d-flex justify-content-between align-items-center px-3 py-2 bg-light border-bottom"><span>登录用户：<span class="text-danger fw-bold">${sessionScope.user.username}</span></span><a href="${pageContext.request.contextPath}/logout" class="btn btn-outline-danger btn-sm"><i class="fas fa-sign-out-alt me-1"></i>注销</a></div> <!-- 表单区 --><div class="order-body"><c:if test="${not empty msg}"><div class="alert alert-warning alert-dismissible fade show" role="alert"><i class="fas fa-exclamation-triangle me-2"></i>${msg}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div></c:if> <form action="${pageContext.request.contextPath}/makeOrder" method="post" class="needs-validation" novalidate><div class="form-floating mb-2"><input type="text" class="form-control" id="username" name="username"value="${sessionScope.user.username}"><label for="username"><i class="fas fa-user me-2"></i>用户名</label></div> <div class="form-floating"><input type="tel"class="form-control"id="telephone"name="telephone"placeholder="请输入电话"pattern="^1[3-9]\d{9}$"maxlength="11"required><label for="telephone"><i class="fas fa-phone me-1"></i>电话</label><!-- 无效时提示 --><div class="invalid-feedback">请输入正确的11位手机号~</div></div> <div class="form-floating mb-2"><input type="text" class="form-control" id="totalPrice" name="totalPrice"value="${totalPrice}" readonly><label for="totalPrice"><i class="fas fa-yen-sign me-2"></i>总金额</label></div><div class="form-floating mb-2"><input type="text" class="form-control" id="deliveryAddress" name="deliveryAddress"placeholder="送货地址" required><label for="deliveryAddress"><i class="fas fa-map-marker-alt me-2"></i>送货地址</label></div> <!-- 按钮行 --><div class="d-flex gap-2 mb-1 mt-3"><button type="submit" class="btn-order" style="height:42px;"><i class="fas fa-check-circle me-2"></i>确定</button><button type="reset" class="btn-reset" style="height:42px;"><i class="fas fa-redo me-2"></i>重置</button></div></form> <!-- 返回链接 --><div class="text-center mt-1 mb-1"><a href="${pageContext.request.contextPath}/showCategory" class="text-decoration-none"><i class="fas fa-arrow-left me-1"></i>返回商品类别页面</a></div></div></div></div></div></div><script>// Bootstrap 5 原生表单验证(function () {'use strict'const forms = document.querySelectorAll('.needs-validation')Array.from(forms).forEach(form => {form.addEventListener('submit', event => {if (!form.checkValidity()) {event.preventDefault()event.stopPropagation()}form.classList.add('was-validated')}, false)})})()</script><!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script> </body> </html> -
代码说明：该JSP页面用于生成订单，需用户登录后访问。表单包含用户名、电话、总金额和送货地址，支持前端验证。界面简洁，提供提交与重置按钮，并可返回商品类别页。数据提交至
makeOrderServlet处理，确保订单信息完整有效。
-
- 测试生成订单页面
- 重启服务器，显示首页，普通用户登录，选择【家用电器】类别，显示商品页面，选购商品
- 单击【生成订单】按钮，跳转到生成订单页面
- 输入电话和送货地址，当然用户名可以修该，但是总金额只读
- 重启服务器，显示首页，普通用户登录，选择【家用电器】类别，显示商品页面，选购商品
3.9.9 前端 - 显示订单页面
- 创建显示订单页面
-
在
frontend里创建showOrder.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>西蒙购物网 - 订单详情</title><!-- Bootstrap CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/show_order.css"> </head> <body><%-- 显示订单页：未登录则转发到登录页并带提示 --%><c:if test="${empty sessionScope.user}"><c:set var="msg" value="温馨提示：查看订单需要登录~" scope="request"/><jsp:forward page="../login.jsp"/></c:if><div class="container"><div class="row justify-content-center"><div class="col-md-6 col-lg-5"><div class="order-card"><!-- 头部 --><div class="order-header"><i class="fas fa-receipt fa-2x mb-2"></i><h1>西蒙购物网</h1><div class="subtitle">订单详情</div></div> <!-- 用户栏 --><div class="d-flex justify-content-between align-items-center px-3 py-2 bg-light border-bottom"><span>订单用户：<span class="text-danger fw-bold">${lastOrder.username}</span></span><a href="logout" class="btn btn-outline-danger btn-sm"><i class="fas fa-sign-out-alt me-1"></i>注销</a></div> <!-- 订单信息 --><div class="order-body"><h5 class="text-center mb-3 text-primary"><i class="fas fa-info-circle me-2"></i>订单信息</h5> <div class="table-responsive"><table class="table table-hover table-borderless align-middle mb-0"><tbody><tr><th class="text-nowrap">订单编号</th><td class="text-end">${lastOrder.id}</td></tr><tr><th class="text-nowrap">用户名</th><td class="text-end">${lastOrder.username}</td></tr><tr><th class="text-nowrap">联系电话</th><td class="text-end">${lastOrder.telephone}</td></tr><tr><th class="text-nowrap">总金额</th><td class="text-end text-danger fw-bold">¥<fmt:formatNumber value="${lastOrder.totalPrice}" type="number" minFractionDigits="2"/></td></tr><tr><th class="text-nowrap">送货地址</th><td class="text-end">${lastOrder.deliveryAddress}</td></tr></tbody></table></div> <!-- 支付按钮 --><div class="d-grid mt-4"><a href="${pageContext.request.contextPath}/pay?id=${lastOrder.id}" class="btn-pay"><i class="fas fa-credit-card me-2"></i>立即支付</a></div> <!-- 返回 --><div class="text-center mt-3"><a href="${pageContext.request.contextPath}/showCategory" class="text-decoration-none"><i class="fas fa-arrow-left me-1"></i>返回商品类别</a></div></div></div></div></div></div> <!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script> </body> </html> -
代码说明：该JSP页面展示用户最新订单详情，需登录访问，未登录则跳转登录页。页面清晰显示订单编号、用户信息、金额及地址，并提供“立即支付”按钮和返回链接。采用响应式布局，数据格式化显示，界面简洁，便于用户核对信息并完成支付操作。
-
- 测试显示订单页面
-
重启服务器，普通用户登录后，选择【家用电器】类别，选择商品加入购物车，生成订单
-
单击【确定】按钮，生成订单，跳转到显示订单页面
-
单击【立即支付】按钮，提示成功支付信息
-
在Navicat里查看订单表，看是否添加了新的订单记录
-
3.9.10 后端 - 管理页面
- 在
webapp里创建backend目录
- 创建管理页面
-
在
backend里创建management.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后台管理</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="${pageContext.request.contextPath}/css/management.css"> </head> <body class="pt-5"><!-- 固定顶栏 --><nav class="navbar navbar-dark bg-primary fixed-top px-3" style="z-index: 1050;"><span class="navbar-brand mb-0 h1">西蒙购物网后台管理</span><div class="d-flex align-items-center gap-2 text-white"><i class="fas fa-user-circle"></i><c:if test="${not empty sessionScope.user}"><span>${sessionScope.user.username}</span></c:if><a href="${pageContext.request.contextPath}/logout" class="btn btn-outline-light btn-sm"><i class="fas fa-sign-out-alt me-1"></i>注销</a></div></nav><div class="wrapper"><!-- 侧边栏 --><div class="sidebar"><div class="nav-tabs"><!-- 用户管理 --><a href="#userManagement" class="nav-link ${fn:startsWith(param.cur, 'viewAllUsers') ? 'active' : ''}"data-bs-toggle="collapse" data-bs-target="#userManagementContent"><i class="fas fa-users"></i> 用户管理</a><div class="collapse ${fn:startsWith(param.cur, 'viewAllUsers') ? 'show' : ''}" id="userManagementContent"><a href="javascript:void(0)" class="nav-link" onclick="loadContent('viewAllUsers')"> <i class="fas fa-list-ul me-1"></i>查看用户</a></div><!-- 类别管理 --><a href="#categoryManagement" class="nav-link ${fn:startsWith(param.cur, 'viewAllCategories') ? 'active' : ''}"data-bs-toggle="collapse" data-bs-target="#categoryManagementContent"><i class="fas fa-list"></i> 类别管理</a><div class="collapse ${fn:startsWith(param.cur, 'viewAllCategories') ? 'show' : ''}" id="categoryManagementContent"><a href="javascript:void(0)" class="nav-link" onclick="loadContent('viewAllCategories')"> <i class="fas fa-list-ul me-1"></i>查看类别</a><a href="javascript:void(0)" class="nav-link" onclick="loadAddCategory()"> <i class="fas fa-plus-circle me-1"></i>添加类别</a></div><!-- 商品管理 --><a href="#productManagement" class="nav-link ${fn:startsWith(param.cur, 'viewAllProducts') ? 'active' : ''}"data-bs-toggle="collapse" data-bs-target="#productManagementContent"><i class="fas fa-tags"></i> 商品管理</a><div class="collapse ${fn:startsWith(param.cur, 'viewAllProducts') ? 'show' : ''}" id="productManagementContent"><a href="javascript:void(0)" class="nav-link" onclick="loadContent('viewAllProducts')"> <i class="fas fa-list-ul me-1"></i>查看商品</a><a href="javascript:void(0)" class="nav-link" onclick="loadAddProduct()"> <i class="fas fa-plus-circle me-1"></i>添加商品</a></div><!-- 订单管理 --><a href="#orderManagement" class="nav-link ${fn:startsWith(param.cur, 'viewAllOrders') ? 'active' : ''}"data-bs-toggle="collapse" data-bs-target="#orderManagementContent"><i class="fas fa-shopping-cart"></i> 订单管理</a><div class="collapse ${fn:startsWith(param.cur, 'viewAllOrders') ? 'show' : ''}" id="orderManagementContent"><a href="javascript:void(0)" class="nav-link" onclick="loadContent('viewAllOrders')"> <i class="fas fa-list-ul me-1"></i>查看订单</a></div></div></div><!-- 主内容区 --><div class="content" id="mainContent"><div class="box"><h3>泸州职业技术学院</h3><hr><h1>西蒙购物网后台管理</h1><hr><jsp:useBean id="now" class="java.util.Date" /><h4><fmt:formatDate value="${now}" pattern="yyyy-MM-dd HH:mm:ss"/></h4></div></div><!-- JavaScript --><script>const contextPath = '${pageContext.request.contextPath}';const cur = '${param.cur}';// 根据参数加载内容if (cur === 'viewAllUsers') {loadContent('viewAllUsers');} else if (cur === 'viewAllCategories') {loadContent('viewAllCategories');} else if (cur === 'viewAllProducts') {loadContent('viewAllProducts');} else if (cur === 'viewAllOrders') {loadContent('viewAllOrders');}function loadContent(servlet) {history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=' + servlet);fetch(contextPath + '/' + servlet).then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;}).catch(err => console.error(err));}function loadEditUser(id) {fetch(contextPath + '/editUser?id=' + id).then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=viewAllUsers');}).catch(err => console.error(err));}function loadEditCategory(id) {fetch(contextPath + '/editCategory?id=' + id).then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=viewAllCategories');}).catch(err => console.error(err));}function loadAddCategory() {fetch(contextPath + '/addCategory').then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=viewAllCategories');}).catch(err => console.error(err));}function loadEditProduct(id) {fetch(contextPath + '/editProduct?id=' + id).then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=viewAllProducts');}).catch(err => console.error(err));}function loadAddProduct() {fetch(contextPath + '/addProduct').then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=viewAllProducts');}).catch(err => console.error(err));}function loadEditOrder(id) {fetch(contextPath + '/editOrder?id=' + id).then(resp => resp.text()).then(html => {document.getElementById('mainContent').innerHTML = html;history.replaceState(null, null, contextPath + '/backend/management.jsp?cur=viewAllOrders');}).catch(err => console.error(err));}</script></div><!-- 弹出提示信息 --><c:if test="${not empty sessionScope.msg}"><script>alert("${sessionScope.msg}");<c:remove var="msg" scope="session"/></script></c:if><!-- Bootstrap JS --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script> </body> </html> -
代码说明：该JSP页面为西蒙购物网后台管理系统主界面，采用JSTL替代JSP脚本。页面包含顶部导航栏、左侧菜单栏及主内容区，通过Ajax动态加载用户、类别、商品和订单管理模块。利用Bootstrap 5构建响应式布局，结合Font Awesome图标，实现简洁直观的后台管理界面。
-
- 测试管理页面
- 重启服务器，跳转到登录页面，输入管理员账号：
admin:12345
- 单击【登录】按钮，跳转到后台管理页面
- 单击【用户管理】，展开子菜单
- 单击【查看用户】菜单项，弹出错误消息框，因为查看全部用户页面尚未编写
- 重启服务器，跳转到登录页面，输入管理员账号：
3.9.11 后端 - 查看全部用户页面
- 创建查看全部用户页面
-
在
backend里创建viewAllUsers.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><div class="container mt-4"><div class="card shadow-sm"><div class="card-header bg-primary text-white"><h5 class="mb-0"><i class="fas fa-users me-2"></i>用户数据</h5></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-hover table-striped align-middle mb-0"><thead class="table-light text-center"><tr><th style="width: 5%">编号</th><th style="width: 10%">用户名</th><th style="width: 10%">密码</th><th style="width: 15%">电话</th><th style="width: 25%">注册时间</th><th style="width: 10%">角色</th><th style="width: 25%">操作</th></tr></thead><tbody class="text-center"><c:forEach var="user" items="${sessionScope.users}"><tr><td>${user.id}</td><td>${user.username}</td><td>${user.password}</td><td>${user.telephone}</td><td><fmt:formatDate value="${user.registerTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td><td>${user.role}</td><td><div class="d-flex gap-1 justify-content-center"><!-- 编辑按钮：所有人都有 --><button type="button" class="btn btn-sm btn-outline-primary"onclick="loadEditUser(${user.id})"><i class="fas fa-edit me-1"></i>编辑</button><!-- 删除按钮：仅非管理员显示 --><c:if test="${user.role ne '管理员'}"><a href="${pageContext.request.contextPath}/deleteUser?id=${user.id}"class="btn btn-sm btn-outline-danger"onclick="return confirm('确认删除用户[${user.username}]吗？');"><i class="fas fa-trash me-1"></i>删除</a></c:if></div></td></tr></c:forEach></tbody></table></div></div></div> </div> -
代码说明：该JSP代码使用JSTL和Bootstrap展示用户数据列表。通过
<c:forEach>遍历users集合，<fmt:formatDate>格式化时间。表格包含用户信息，操作列提供编辑和删除功能，其中删除按钮通过<c:if>判断用户角色，仅对非管理员用户显示，确保管理员账户不可被删除，实现基础的权限控制。
-
- 测试查看全部用户页面
- 重启服务器，以管理员身份登录后台
- 点开【用户管理】，单击【查看用户】菜单
- 单击第4号用户记录上的【删除】按钮，弹出询问消息框
- 单击【确定】按钮，弹出消息框提示用户删除成功
- 在Navicat里查看用户表，看用户记录是否删除成功
- 重启服务器，以管理员身份登录后台
3.9.12 后端 - 编辑用户页面
- 创建 编辑用户页面
-
在
backend里创建editUser.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><div class="container mt-4"><div class="row justify-content-center"><div class="col-md-6"><div class="card shadow"><form action="${pageContext.request.contextPath}/saveUser" method="post" class="needs-validation" novalidate><div class="card-header bg-primary text-white"><h5 class="mb-0"><i class="fas fa-edit me-2"></i>编辑用户</h5></div><div class="card-body"><!-- 编号只读 --><div class="form-floating mb-3"><input type="text" class="form-control" id="id" name="id" value="${editedUser.id}" readonly><label for="id"><i class="fas fa-hashtag me-1"></i>编号</label></div><!-- 用户名可改 --><div class="form-floating mb-3"><input type="text" class="form-control" id="username" name="username" value="${editedUser.username}" required><label for="username"><i class="fas fa-user me-1"></i>用户名</label></div><!-- 密码可改 --><div class="form-floating mb-3"><input type="password" class="form-control" id="password" name="password" placeholder="留空表示不修改"><label for="password"><i class="fas fa-lock me-1"></i>密码（留空表示不修改）</label></div><!-- 电话可改 --><div class="form-floating mb-3"><input type="tel" class="form-control" id="telephone" name="telephone" value="${editedUser.telephone}" required><label for="telephone"><i class="fas fa-phone me-1"></i>电话</label></div><!-- 角色只读 --><div class="form-floating mb-3"><input type="text" class="form-control" id="role" name="role" value="${editedUser.role}" readonly><label for="role"><i class="fas fa-user-tag me-1"></i>角色</label></div></div><div class="card-footer text-center"><button type="submit" class="btn btn-success btn-sm"><i class="fas fa-save me-1"></i>保存</button><a href="${pageContext.request.contextPath}/backend/management.jsp?cur=viewAllUsers" class="btn btn-secondary btn-sm ms-2"><i class="fas fa-arrow-left me-1"></i>返回</a></div></form></div></div></div> </div> -
代码说明：该JSP页面用于编辑用户信息，使用Bootstrap构建表单。包含用户ID、用户名、密码、电话和角色字段，其中ID和角色为只读。密码字段留空表示不修改原密码。表单提交至
/saveUser，使用POST方法。页面提供“保存”和“返回”按钮，采用响应式布局，确保在不同设备上良好显示，实现了用户信息的修改功能。
-
- 测试 编辑用户页面
- 重启服务器，以管理员身份登录后台，查看全部用户
- 单击第3号用户记录上的【编辑】按钮，跳转到编辑用户页面
- 编号和角色只读，修改用户名、密码和电话
- 单击【保存】按钮，弹出消息框提示用户更新成功
- 单击【确定】按钮，返回查看全部用户页面，可以看到第3号用户记录已成功更新
- 在Navicat里查看用户表，看第3号用户记录是否成功更新
- 重启服务器，以管理员身份登录后台，查看全部用户
3.9.13 后端 - 查看全部类别页面
- 创建查看全部类别页面
-
在
backend里创建viewAllCategories.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><div class="container mt-4"><div class="card shadow-sm"><div class="card-header bg-success text-white"><h5 class="mb-0"><i class="fas fa-tags me-2"></i>类别数据</h5></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-hover table-striped align-middle mb-0"><thead class="table-light text-center"><tr><th style="width: 20%">编号</th><th style="width: 50%">名称</th><th style="width: 30%">操作</th></tr></thead><tbody class="text-center"><c:forEach var="category" items="${sessionScope.categories}"><tr><td>${category.id}</td><td>${category.name}</td><td><div class="d-flex gap-1 justify-content-center"><button type="button" class="btn btn-sm btn-outline-primary"onclick="loadEditCategory(${category.id})"><i class="fas fa-edit me-1"></i>编辑</button><a href="${pageContext.request.contextPath}/deleteCategory?id=${category.id}"class="btn btn-sm btn-outline-danger"onclick="return confirm('确认删除类别[${category.name}]吗？');"><i class="fas fa-trash me-1"></i>删除</a></div></td></tr></c:forEach></tbody></table></div></div></div> </div> -
代码说明：该JSP代码展示商品类别数据列表，使用Bootstrap样式和JSTL标签遍历
categories集合。表格显示类别编号和名称，并提供“编辑”和“删除”操作按钮。删除操作带有确认提示，防止误删。整体采用响应式设计，界面简洁清晰，便于后台管理人员对商品类别进行维护和管理。
-
- 测试查看全部类别页面
- 重启服务器，以管理员身份登录后台，点击类别管理下的【查看类别】菜单项
- 单击第4号类别记录上的【删除】按钮，弹出消息框询问用户是否要删除
- 单击【确定】按钮，弹出消息框提示用户不能删除
- 重启服务器，以管理员身份登录后台，点击类别管理下的【查看类别】菜单项
3.9.14 后端 - 添加类别页面
- 创建添加类别页面
-
在
backend里创建addCategory.jsp文件
<!-- /backend/addCategory.jsp --> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><div class="container mt-4"><div class="row justify-content-center"><div class="col-md-6"><div class="card shadow"><form action="${pageContext.request.contextPath}/saveNewCategory" method="post" class="needs-validation" novalidate><div class="card-header bg-success text-white"><h5 class="mb-0"><i class="fas fa-plus-circle me-2"></i>添加类别</h5></div><div class="card-body"><!-- 名称必填 --><div class="form-floating mb-3"><input type="text" class="form-control" id="name" name="name" placeholder="类别名称" required><label for="name"><i class="fas fa-tag me-1"></i>类别名称</label></div></div><div class="card-footer text-center"><button type="submit" class="btn btn-success btn-sm"><i class="fas fa-save me-1"></i>保存</button><a href="${pageContext.request.contextPath}/backend/management.jsp?cur=viewAllCategories"class="btn btn-secondary btn-sm ms-2"><i class="fas fa-arrow-left me-1"></i>返回</a></div></form></div></div></div> </div> -
代码说明：该JSP页面用于添加新的商品类别，使用Bootstrap构建响应式表单。包含一个必填的“类别名称”输入框，提交至
/saveNewCategory。页面提供“保存”和“返回”按钮，界面简洁，支持表单验证。通过needs-validation和required属性确保数据完整性，提升用户体验，适用于后台管理系统中的类别新增功能。
-
- 测试添加类别页面
- 重启服务器，以管理员身份登录后台，查看全部类别
- 单击左边栏的【添加类别】菜单项，弹出添加类别窗口
- 输入类比名称：
深海产品
- 单击【保存】按钮，弹出消息框提示用户类别添加成功
- 单击【确定】按钮，返回查看全部类别页面，列表里有添加的新类别
- 在Navicat里查看类别表，确认类别添加是否成功
- 重启服务器，以管理员身份登录后台，查看全部类别
3.9.15 后端 - 编辑类别页面
- 创建编辑类别页面
-
在
backend里创建editCategory.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><div class="container mt-4"><div class="row justify-content-center"><div class="col-md-6"><div class="card shadow"><form action="${pageContext.request.contextPath}/saveCategory" method="post" class="needs-validation" novalidate><div class="card-header bg-success text-white"><h5 class="mb-0"><i class="fas fa-tags me-2"></i>编辑类别</h5></div><div class="card-body"><!-- 编号只读 --><div class="form-floating mb-3"><input type="text" class="form-control" id="id" name="id" value="${editedCategory.id}" readonly><label for="id"><i class="fas fa-hashtag me-1"></i>编号</label></div><!-- 名称可改 --><div class="form-floating mb-3"><input type="text" class="form-control" id="name" name="name" value="${editedCategory.name}" required><label for="name"><i class="fas fa-tag me-1"></i>名称</label></div></div><div class="card-footer text-center"><button type="submit" class="btn btn-success btn-sm"><i class="fas fa-save me-1"></i>保存</button><a href="${pageContext.request.contextPath}/backend/management.jsp?cur=viewAllCategories"class="btn btn-secondary btn-sm ms-2"><i class="fas fa-arrow-left me-1"></i>返回</a></div></form></div></div></div> </div> -
代码说明：该JSP页面用于编辑商品类别信息，采用Bootstrap构建响应式表单。包含只读的类别编号和可编辑的名称字段，表单提交至
/saveCategory。支持前端验证，确保名称不为空。提供“保存”和“返回”按钮，界面简洁，操作清晰，适用于后台管理系统中对商品类别的修改功能，提升数据维护的准确性与用户体验。
-
- 测试编辑类别页面
- 重启服务器，以管理员身份登录后台，显示全部类别
- 单击第5号类别记录上的【编辑】按钮，弹出编辑类别页面
- 编号只读，可以修改名称，比如改成
深海特产
- 单击【保存】按钮，弹出消息框提示用户类别更新成功
- 单击【确定】按钮，返回查看全部类别页面
- 【深海特产】类别目前尚无商品，因此可以删除，单击【删除】按钮，弹出消息框询问用户
- 单击【确定】按钮，弹出消息框提示用户类别删除成功
- 重启服务器，以管理员身份登录后台，显示全部类别