|
|
<%--
|
|
|
此文件的创建信息注释，表明是由 IntelliJ IDEA 创建，作者是 jhu，创建日期是 2020 年 10 月 5 日，时间是 15 时 44 分，并且提示修改此模板的相关设置路径。
|
|
|
--%>
|
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>书城首页</title>
|
|
|
<%-- 包含公共的头部页面（header.jsp），可能包含一些通用的样式、脚本或者页面头部结构相关的内容，方便复用。 --%>
|
|
|
<%@include file="/pages/common/header.jsp"%>
|
|
|
<script type="text/javascript">
|
|
|
// 当页面 DOM 加载完成后执行以下函数（这是 jQuery 的 $(function() {}) 语法的作用，相当于 DOMContentLoaded 事件的简写形式）
|
|
|
$(function () {
|
|
|
// 给所有 class 为 addToCart 的 button 元素绑定单击事件（通过 jQuery 的 click 方法实现事件绑定）
|
|
|
$("button.addToCart").click(function () {
|
|
|
// 获取当前被点击按钮的 bookId 属性值（通过 jQuery 的 attr 方法获取元素的自定义属性值），这个 bookId 应该是对应书籍的唯一标识，用于后续操作。
|
|
|
var bookId = $(this).attr("bookId");
|
|
|
// 使用 jQuery 的 $.getJSON 方法发送一个 AJAX 请求，请求的 URL 是 "http://localhost:8080/Book/cartServlet"，同时传递了参数 "action=ajaxAddItem&id=" 加上获取到的 bookId，期望服务器返回 JSON 格式的数据。
|
|
|
// 并且在请求成功后的回调函数中处理返回的数据（这里回调函数接收一个 data 参数，就是服务器返回的 JSON 数据解析后的对象）。
|
|
|
$.getJSON("http://localhost:8080/Book/cartServlet", "action=ajaxAddItem&id=" + bookId, function (data) {
|
|
|
// 更新购物车商品总数的显示内容，通过 jQuery 的 text 方法将指定元素（id 为 cartTotalCount 的元素）的文本内容更新为包含服务器返回的商品总数（data.totalCount）的提示信息。
|
|
|
$("#cartTotalCount").text("您的购物车中有" + data.totalCount + "件商品");
|
|
|
// 更新购物车中最新添加的商品名称的显示内容，通过 jQuery 的 html 方法将指定元素（id 为 cartLastName 的元素）的 HTML 内容更新为包含服务器返回的最新添加商品名称（data.lastName）的提示信息，这里使用双引号包裹文本，所以里面的文本可以包含 HTML 标签（如果有的话）。
|
|
|
$("#cartLastName").html("您刚刚将【" + data.lastName + "】加入到了购物车中");
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="header">
|
|
|
<img class="logo_img" alt="" src="static/img/logo1.jpg" >
|
|
|
<span class="wel_word">Bookstore</span>
|
|
|
<div>
|
|
|
<!-- 使用 JSTL 的 c:if 标签判断 sessionScope 中 user 对象是否为空，以此来区分用户是否登录，empty 关键字用于判断是否为空值（比如 null、空字符串等）。 -->
|
|
|
<c:if test="${empty sessionScope.user}">
|
|
|
<!-- 如果 user 对象为空，说明用户未登录，显示登录和注册链接，以及热榜链接，方便用户进行相应操作。 -->
|
|
|
<a href="pages/user/login.jsp">登录</a> |
|
|
|
<a href="pages/user/regist.jsp">注册</a>
|
|
|
<a href="client/bookServlet?action=pageOrder">热榜</a>
|
|
|
</c:if>
|
|
|
<c:if test="${not empty sessionScope.user}">
|
|
|
<!-- 如果 user 对象不为空，说明用户已登录，显示欢迎语以及包含用户用户名的个性化欢迎信息，同时提供我的订单、个人信息、注销等相关操作链接。 -->
|
|
|
<span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临书城</span>
|
|
|
<a href="client/orderServlet?action=myOrders">我的订单</a>
|
|
|
<a href="pages/user/userinfo.jsp">个人信息</a>
|
|
|
<a href="userServlet?action=logout">注销</a>
|
|
|
</c:if>
|
|
|
<!-- 始终显示购物车和后台管理的链接，方便用户进入购物车页面查看商品或者进入后台管理页面（可能需要相应权限）。 -->
|
|
|
<a href="pages/cart/cart.jsp">购物车</a>
|
|
|
<a href="pages/manager/manager.jsp">后台管理</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="main">
|
|
|
<!-- 图书搜索功能区域 -->
|
|
|
<div class="book_check">
|
|
|
<form action="client/bookServlet" method="get">
|
|
|
<!-- 隐藏域，用于传递特定的参数 action，其值为 pageByNameOrAuthor，用于告知服务器此次请求是按照书名或作者名进行页面查询相关操作。 -->
|
|
|
<input type="hidden" name="action" value="pageByNameOrAuthor">
|
|
|
图书搜索<input id="nameorauthor" type="text" placeholder="请输入书名或作者名" name="nameorauthor" value="${param.nameorauthor}">
|
|
|
<input type="submit" value="查询" />
|
|
|
</form>
|
|
|
</div>
|
|
|
<div id="book">
|
|
|
<!-- 价格区间筛选功能区域 -->
|
|
|
<div class="book_cond">
|
|
|
<form action="client/bookServlet" method="get">
|
|
|
<!-- 同样是隐藏域，传递 action 参数，值为 pageByPrice，用于告知服务器此次请求是按照价格区间进行页面查询相关操作。 -->
|
|
|
<input type="hidden" name="action" value="pageByPrice">
|
|
|
价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
|
|
|
<input id="max" type="text" name="max" value="${param.max}"> 元
|
|
|
<input type="submit" value="查询" />
|
|
|
</form>
|
|
|
</div>
|
|
|
<div style="text-align: center">
|
|
|
<!-- 再次使用 JSTL 的 c:if 标签判断 sessionScope 中 cart 对象的 items 属性是否为空，以此来判断购物车是否为空。 -->
|
|
|
<c:if test="${empty sessionScope.cart.items}">
|
|
|
<span id="cartTotalCount"></span>
|
|
|
<div>
|
|
|
<span style="color: red" id="cartLastName">当前购物车为空</span>
|
|
|
</div>
|
|
|
</c:if>
|
|
|
<c:if test="${not empty sessionScope.cart.items}">
|
|
|
<!-- 如果购物车不为空，显示购物车商品总数，通过 EL 表达式（${sessionScope.cart.totalCount}）获取购物车中商品的总数并展示出来。 -->
|
|
|
<span id="cartTotalCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
|
|
|
<div>
|
|
|
<!-- 显示最新加入购物车的商品名称，同样通过 EL 表达式获取最新加入商品的名称并展示，这里还设置了颜色为红色，用于突出显示。 -->
|
|
|
您刚刚将<span style="color: red" id="cartLastName">${sessionScope.lastName}</span>加入到了购物车中
|
|
|
</div>
|
|
|
</c:if>
|
|
|
</div>
|
|
|
|
|
|
<!-- 使用 JSTL 的 c:forEach 标签遍历 requestScope 中 page 对象的 items 属性（这里的 items 应该是一个集合，可能是书籍信息的列表），每次遍历将当前元素赋值给变量 book，然后在循环体中进行相应的页面展示操作。 -->
|
|
|
<c:forEach items="${requestScope.page.items}" var="book">
|
|
|
<div class="b_list">
|
|
|
<div class="img_div">
|
|
|
<img class="book_img" alt="" src="${book.imgPath}" />
|
|
|
</div>
|
|
|
<div class="book_info">
|
|
|
<div class="book_name">
|
|
|
<span class="sp1">书名:</span>
|
|
|
<span class="sp2">${book.name}</span>
|
|
|
</div>
|
|
|
<div class="book_author">
|
|
|
<span class="sp1">作者:</span>
|
|
|
<span class="sp2">${book.author}</span>
|
|
|
</div>
|
|
|
<div class="book_price">
|
|
|
<span class="sp1">价格:</span>
|
|
|
<span class="sp2">￥${book.price}</span>
|
|
|
</div>
|
|
|
<div class="book_sales">
|
|
|
<span class="sp1">销量:</span>
|
|
|
<span class="sp2">${book.sales}</span>
|
|
|
</div>
|
|
|
<div class="book_amount">
|
|
|
<span class="sp1">库存:</span>
|
|
|
<span class="sp2">${book.stock}</span>
|
|
|
</div>
|
|
|
<div class="book_add">
|
|
|
<!-- 加入购物车按钮，设置了自定义属性 bookId，其值为当前遍历的书籍的 id，方便前面的 JavaScript 代码获取并发送对应的添加到购物车的请求。 -->
|
|
|
<button bookId=${book.id} class="addToCart">加入购物车</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</c:forEach>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 包含公共的分页导航页面（page_nav.jsp），可能包含分页相关的链接、页码显示等功能，方便复用。 -->
|
|
|
<%@include file="/pages/common/page_nav.jsp"%>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 包含公共的页脚页面（footer.jsp），可能包含版权信息、联系方式等页面底部相关的通用内容，方便复用。 -->
|
|
|
<%@include file="/pages/common/footer.jsp"%>
|
|
|
</body>
|
|
|
</html> |
