如何使用jsp编写一个浏览商品、加入购物车、购买商品、结算订单的页面

实现一个完整的购物流程需要多个页面和后端处理逻辑，这里提供一个简单的示例，包含以下页面：

- `index.jsp`：显示所有商品的列表页面
- `product.jsp`：显示单个商品的详细信息页面，包括商品名称、价格、描述等信息，以及加入购物车的按钮
- `cart.jsp`：显示购物车中的商品列表和总价，可以修改或删除购物车中的商品
- `checkout.jsp`：显示订单详情和支付方式等信息，以及提交订单的按钮
- `order.jsp`：显示订单提交成功的页面，包括订单号和总价等信息

以下是示例代码：

在 `index.jsp` 页面中，我们可以从数据库中获取所有商品的信息，然后展示在页面上。代码示例：

<%
  List<Product> productList = productService.getAllProducts();
%>
<h1>All Products</h1>
<ul>
  <% for (Product product : productList) { %>
    <li>
      <a href="product.jsp?id=<%=product.getId()%>"><%=product.getName()%></a>
      <span><%=product.getPrice()%></span>
    </li>
  <% } %>
</ul>

在 `product.jsp` 页面中，我们可以从请求参数中获取要显示的商品的ID，然后从数据库中获取该商品的详细信息，展示在页面上。同时，还需要一个表单，用于用户输入购买的数量和加入购物车的操作。代码示例：

<%
  String productId = request.getParameter("id");
  Product product = productService.getProductById(productId);
%>
<h1><%=product.getName()%></h1>
<p><%=product.getDescription()%></p>
<p>Price: <%=product.getPrice()%></p>
<form action="addToCart.jsp" method="post">
  <input type="hidden" name="productId" value="<%=productId%>">
  <label for="quantity">Quantity:</label>
  <input type="number" name="quantity" id="quantity" value="1">
  <input type="submit" value="Add to Cart">
</form>

在 `addToCart.jsp` 页面中，我们可以从请求中获取商品ID和数量等信息，然后将这些信息添加到购物车中。代码示例：

<%
  String productId = request.getParameter("productId");
  int quantity = Integer.parseInt(request.getParameter("quantity"));
  
  // 将商品添加到购物车中
  ShoppingCart cart = (ShoppingCart) session.getAttribute("cart");
  if (cart == null) {
    cart = new ShoppingCart();
    session.setAttribute("cart", cart);
  }
  Product product = productService.getProductById(productId);
  cart.addItem(product, quantity);
%>

<p>Item added to cart. <a href="cart.jsp">View Cart</a></p>

在 `cart.jsp` 页面中，我们可以从购物车中获取所有商品和总价等信息，展示在页面上。同时，还需要一个表单，用于用户修改购物车中的商品数量或删除商品。代码示例：

<%
  ShoppingCart cart = (ShoppingCart) session.getAttribute("cart");
  if (cart == null || cart.isEmpty()) {
    out.println("Your cart is empty.");
  } else {
    List<CartItem> cartItems = cart.getItems();
    double total = cart.getTotal();
%>
<h1>Shopping Cart</h1>
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Subtotal</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% for (CartItem cartItem : cartItems) { %>
      <tr>
        <td><%=cartItem.getProduct().getName()%></td>
        <td><%=cartItem.getProduct().getPrice()%></td>
        <td>
          <form action="updateCart.jsp" method="post">
            <input type="hidden" name="productId" value="<%=cartItem.getProduct().getId()%>">
            <input type="number" name="quantity" value="<%=cartItem.getQuantity()%>">
            <input type="submit" value="Update">
          </form>
        </td>
        <td><%=cartItem.getSubtotal()%></td>
        <td>
          <form action="removeFromCart.jsp" method="post">
            <input type="hidden" name="productId" value="<%=cartItem.getProduct().getId()%>">
            <input type="submit" value="Remove">
          </form>
        </td>
      </tr>
    <% } %>
    <tr>
      <td colspan="3"><strong>Total:</strong></td>
      <td><%=total%></td>
      <td></td>
    </tr>
  </tbody>
</table>
<form action="checkout.jsp" method="post">
  <input type="submit" value="Checkout">
</form>
<% } %>

在 `updateCart.jsp` 页面中，我们可以从请求中获取商品ID和新的数量等信息，然后更新购物车中的商品数量。代码示例：

<%
  String productId = request.getParameter("productId");
  int quantity = Integer.parseInt(request.getParameter("quantity"));
  
  // 更新购物车中的商品数量
  ShoppingCart cart = (ShoppingCart) session.getAttribute("cart");
  if (cart != null) {
    cart.updateItem(productId, quantity);
  }
%>

<p>Cart updated. <a href="cart.jsp">View Cart</a></p>

在 `removeFromCart.jsp` 页面中，我们可以从请求中获取要删除的商品的ID，然后从购物车中删除该商品。代码示例：

<%
  String productId = request.getParameter("productId");
  
  // 从购物车中删除商品
  ShoppingCart cart = (ShoppingCart) session.getAttribute("cart");
  if (cart != null) {
    cart.removeItem(productId);
  }
%>

<p>Item removed from cart. <a href="cart.jsp">View Cart</a></p>

在 `checkout.jsp` 页面中，我们可以展示订单详情和支付方式等信息，以及一个提交订单的表单。代码示例：

<%
  ShoppingCart cart = (ShoppingCart) session.getAttribute("cart");
  if (cart == null || cart.isEmpty()) {
    out.println("Your cart is empty.");
  } else {
    double total = cart.getTotal();
%>
<h1>Order Summary</h1>
<table>
  <tr>
    <td>Subtotal:</td>
    <td><%=total%></td>
  </tr>
  <tr>
    <td>Tax:</td>
    <td><%=total * 0.1%></td>
  </tr>
  <tr>
    <td>Total:</td>
    <td><%=total * 1.1%></td>
  </tr>
</table>
<form action="placeOrder.jsp" method="post">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name"><br>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email"><br>
  <label for="address">Address:</label>
  <textarea name="address" id="address"></textarea><br>
  <label for="payment">Payment:</label>
  <select name="payment" id="payment">
    <option value="credit_card">Credit Card</option>
    <option value="paypal">PayPal</option>
  </select><br>
  <input type="submit" value="Place Order">
</form>
<% } %>

在 `placeOrder.jsp` 页面中，我们可以从请求中获取订单的详细信息，然后生成一个订单号，将订单和购物车保存到数据库中。最后，跳转到 `order.jsp` 页面，展示订单提交成功的信息。代码示例：

<%
  String name = request.getParameter("name");
  String email = request.getParameter("email");
  String address = request.getParameter("address");
  String payment = request.getParameter("payment");
  
  // 生成订单号
  String orderId = UUID.randomUUID().toString();
  
  // 保存订单和购物车到数据库中
  Order order = new Order(orderId, name, email, address, payment, cart);
  orderService.saveOrder(order);
  session.removeAttribute("cart");
%>

<h1>Order Placed</h1>
<p>Your order has been placed.</p>
<p>Order Number: <%=orderId%></p>
<p>Total Amount: <%=order.getTotal()%></p>