基于JSP、java、Tomcat三者的项目实战--校园交易网(3)主页

技术支持:JAVA、JSP

服务器:TOMCAT 7.0.86

编程软件:IntelliJ IDEA 2021.1.3 x64


前文三篇登录和注册功能的实现

基于JSP、java、Tomcat、mysql三层交互的项目实战--校园交易网(1)-项目搭建(前期准备工作)icon-default.png?t=N7T8https://blog.csdn.net/m0_64056556/article/details/140684858?spm=1001.2014.3001.5502

基于JSP、java、Tomcat、mysql三层交互的项目实战--校园交易网(2)登录功能实现icon-default.png?t=N7T8https://blog.csdn.net/m0_64056556/article/details/140708897?spm=1001.2014.3001.5502

基于JSP、java、Tomcat三者的项目实战--校园交易网(2)注册功能实现icon-default.png?t=N7T8https://blog.csdn.net/m0_64056556/article/details/140710605?spm=1001.2014.3001.5502


下面我展示主页

在我们的网址上加上denglu.jsp跳转到登陆页面,同时昵称,账号和密码都是注册过,存放到数据库中的,假设是都是2(我已注册过的),点击登录之后,就会跳转到我们的l主页面。

主页如下

上面几个功能我们就要注意到,都是我们要做的,有些逻辑功能我们写了一个服务,而有些逻辑功能的实现我们是直接在jsp页面实现了。

我们放上主页的代码

网页层

shopping.jsp

<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="entiy.Product" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>购物车</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        body {
            background-color: #f0f0f0; /* 设置整个页面的背景颜色 */
            background-image: url('img/f2.png'); /* 设置背景图片 */
            background-size: cover; /* 图片铺满整个页面 */
            background-repeat: no-repeat; /* 不重复显示背景图片 */
            background-attachment: fixed; /* 固定背景图片,不随页面滚动 */
            font-family: Arial, sans-serif; /* 设置页面字体 */
            margin: 0; /* 去除页面默认的边距 */
            padding: 0; /* 去除页面默认的内边距 */
        }
        h1 {
            text-align: center;
            margin-top: 20px;
            color: #555;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .user-info {
            text-align: right;
            margin-top: 10px;
            margin-right: 10px;
        }
        table {
            width: 100%;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
            margin-top: 20px;
        }
        table th, table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        td img {
            max-width: 50px;
            display: block;
            margin: 0 auto;
        }
        .button {
            padding: 12px 24px;
            font-size: 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #0056b3;
        }
        .checkout {
            text-align: center;
            margin-top: 20px;
        }
        input[type="submit"] {
            padding: 14px 28px;
            font-size: 18px;
            background-color: #28a745;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        input[type="submit"]:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
<h1>交易平台</h1>
<!-- 用户信息 -->
<div style="text-align: right; margin-top: 10px; margin-right: 10px;">
    <form action="Shopping" method="post">
        <input type="hidden" name="action" value="getUsername">
        <%
            String username = (String) session.getAttribute("username");
            if (username == null) {
                username = "游客";
            }
        %>
        <span>您好,<%= session.getAttribute("username") %></span>
        <span> | 现在时间:  <%
            Date date = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        %>
        <%=sdf.format(date )%>
        </span>
    </form>
</div>

<table>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>操作</th>
    </tr>
    <%
        List<Product> products = (List<Product>) request.getAttribute("goods");
        if (products == null) {
            System.out.println("Products list is null!");
            // 可以根据实际情况做进一步处理,如返回到上一页或者显示错误信息。
        } else {
            for (int i=0; i<products.size(); i++) {
                Product e = products.get(i);
    %>
    <tr>
        <td><%=e.getName()%></td>
        <td><%=e.getPrice()%></td>
        <td>
            <a href="load?id=<%=e.getId()%>">修改</a>
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);">
        </td>
    </tr>
    <%
            }
        }
    %>

</table>
<p>
    <input type="button" class="button" value="添加商品" onclick="location='AddShopping.jsp'"/>
</p>
<h1>购物车</h1>
<form action="total" method="post">
<table>
    <thead>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>数量</th>
        <th>金额(元)</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="goods">
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="right">总计</td>
        <td><input type="text" name="total" id="total" value="" /> </td>
        <td></td>
    </tr>
    </tfoot>
</table>
<!-- 去支付按钮 -->
<div style="text-align: center; margin-top: 20px;">
        <input type="submit" value="去支付" onclick="f1();" />
</div>
    </form>
<p>
   <input type="button"value="历史清单" onclick="location='LSQD'"/>
</p>
<script type="text/javascript">
   function f1(){
       alert("支付成功!");
   }
    function del(btn){
        //获取当前点击的删除按钮所在的tr
        var tr = btn.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
        var tds = tr.getElementsByTagName("td");
        total();

    }
    function add(btn){
        var td = btn.parentNode;
        var inputs = td.getElementsByTagName("input");
        var text = inputs[1];
        var amount = parseInt(text.value)+1;
        text.value = amount;
        var tr = btn.parentNode.parentNode;
        var tds = tr.getElementsByTagName("td");
        var pr = parseFloat(tds[1].innerText);
        mny1 = pr*amount;
        //alert(mny1)
        tds[3].innerText = mny1;
        total();
    }
    function minu(btn){
        var td = btn.parentNode;
        var tr = td.parentNode;
        var inputs = td.getElementsByTagName("input");
        var text = inputs[1];
        if (text.value>1){
            var amount = parseInt(text.value)-1;
            text.value = amount;
            var tds = tr.getElementsByTagName("td");
            var pr = parseInt(tds[1].innerText);
            mny2 = pr*amount;
            tds[3].innerText = mny2;

        }else{
            tr.parentNode.removeChild(tr);
        }
        total();

    }
    function total(){
        //1.获取购物车中所有的商品行
        var tbody = document.getElementById("goods");
        var trs = tbody.getElementsByTagName("tr");
        //2.遍历这些行,获取每一行的金额
        var sum = 0;
        for(var i=0;i<trs.length;i++){
            var tr = trs[i];
            //取当前行的金额
            var tds = tr.getElementsByTagName("td");
            var mny = parseFloat(tds[3].innerText);
            sum = sum+mny;
        }
        document.getElementById("total").value=sum;

    }

    function add_shoppingcart(btn){
        var tbody = document.getElementById("goods");
        var tr = btn.parentNode.parentNode;
        var tds = tr.getElementsByTagName("td");
        var trs = tbody.getElementsByTagName("tr")
        var name = tds[0].innerText;
        var price = tds[1].innerText;
        for (var i=0;i<trs.length;i++) {
            var tr1 = trs[i];
            var tds1 = tr1.getElementsByTagName("td");
            var name1 = tds1[0].innerText;
        }

        if(name==name1) {
            var TD = tds1[2];
            var inputs = TD.getElementsByTagName("input");
            var text = inputs[1];
            var amount = parseInt(text.value) + 1;
            mny1 = pr * amount;
            tds1[3].innerText = mny1;
            total();
        }

        else {
            var ntr = tbody.insertRow();
            ntr.innerHTML =
                '<td>'+name+'</td>'+
                '<td>'+price+'</td>'+
                '<td align="center">'+
                '<input  type="button" value="-" onclick="minu(this);"/>'+
                '<input   type="text" size="3" readonly value="1"/>'+
                '<input  type="button" value="+" onclick="add(this);"/>'+
                '</td>'+
                '<td>'+price+'</td>'+
                '<td align="center"><input type="button" value="x" onclick="del(this);"/></td></tr>';

            total();}
    }
</script>
</body>
</html>

        这段代码实现了一个简单的购物车系统,允许用户添加商品、调整数量、删除商品,并计算总金额。同时,还包括一个历史清单按钮,点击后会跳转到历史清单页面。

  1. JSP 页面结构

    • 使用了 JSP(JavaServer Pages)作为页面技术,可以在 HTML 中嵌入 Java 代码片段,方便地与后端 Java 代码进行交互和数据处理。
  2. 用户信息显示

    • 在页面顶部右侧显示用户的登录状态和当前时间。
    • 使用了会话(Session)来存储和获取用户信息,例如用户名,如果用户未登录,则默认显示为游客。
  3. 数据展示和交互

    • 使用了一个表格来展示购物车中的商品列表。
    • 通过从请求中获取商品列表数据(List<Product> products),然后遍历显示每个商品的名称、价格,并提供修改和加入购物车的链接或按钮。
  4. 动态数据处理

    • 使用了 Java 的 Date 类和 SimpleDateFormat 类来获取和格式化当前的日期时间,显示在页面上。
  5. 交互性功能

    • 页面中包含了添加商品和修改商品的链接或按钮,这些通过超链接和 JavaScript 函数实现,通过 URL 参数来传递商品的唯一标识符(ID)。
  6. 后端数据处理

    • 在 Java 后端,需要有相应的 Servlet 或 Controller 处理请求,从数据库或其他数据源获取商品信息,并将其存储在请求属性中以便在 JSP 页面中使用。
  7. HTML结构

    • 使用<table>标签展示购物车内容,每行显示商品信息、单价、数量、金额以及删除按钮。
    • 使用表单<form>包裹整个购物车,设置action="total"表示在提交表单时将数据发送到名为total的后端服务。
  8. JavaScript函数

    • add_shoppingcart(btn):用于将商品添加到购物车。

      • 获取所点击按钮的父元素,并从中获取商品信息(名称和价格)。
      • 检查购物车中是否已有相同商品,若有则增加其数量,更新金额;若无则创建新行添加商品信息。
      • 调用total()函数重新计算总金额。
    • del(btn):用于删除购物车中的商品行。

      • 获取点击按钮的父元素,并从中获取其所在的行(<tr>元素)。
      • 从DOM中移除该行,并调用total()函数重新计算总金额。
    • add(btn)minu(btn):分别用于增加和减少商品数量。

      • 通过操作DOM来增加或减少商品数量,并根据数量重新计算商品行的金额,然后调用total()更新总金额。
    • total():计算购物车中所有商品的总金额。

      • 获取所有商品行的金额并累加,最后将总金额显示在页面相应的输入框中。

与服务的连接:

  • 这段代码通过 Servlet(可能是Shopping Servlet)处理用户请求,例如获取用户信息和商品数据。
  • 商品数据(List<Product>)可能是从数据库或其他数据存储中获取的,通过 Servlet 将其设置为请求属性,在 JSP 页面中通过 <%= ... %> 输出到 HTML 中
  • 表单提交:当用户点击"去支付"按钮时,会触发form标签的提交事件,数据将被发送到名为total的后端服务(假设是服务器上的一个处理请求的端点)。后端服务可以接收提交的数据,如总金额等,然后执行支付操作或者进一步处理。

服务层

Shopping.Servlet

package Servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.sql.*;

public class ShoppingServlet extends HttpServlet {
    // 数据库连接信息(这里假设你使用MySQL数据库)
    private String jdbcURL = "jdbc:mysql://localhost:3306/sdjyy";
    private String jdbcUsername = "root";
    private String jdbcPassword = "asd123";

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        HttpSession session = request.getSession();
        String idname = (String) session.getAttribute("idname");

        if (idname != null) {
            // 如果成功获取到 idname,可以继续处理逻辑
            // 在这里可以根据 idname 进行数据库查询或者其他业务逻辑

            Connection conn = null;
            PreparedStatement stmt = null;
            ResultSet rs = null;

            try {
                conn = DriverManager.getConnection(jdbcURL, jdbcUsername, jdbcPassword);

                String sql = "SELECT * FROM users WHERE idname = ?";
                stmt = conn.prepareStatement(sql);
                stmt.setString(1, idname);

                rs = stmt.executeQuery();

                if (rs.next()) {
                    // 从结果集中获取其他信息或者执行其他操作
                    String username = rs.getString("idname");
                    System.out.println("Username retrieved: " + username);

                    // 将用户名存储到 session 中(如果需要的话)
                    session.setAttribute("username", username);

                    // 转发到 shopping.jsp 页面或者其他需要的页面
                    RequestDispatcher dispatcher = request.getRequestDispatcher("/shopping.jsp");
                    dispatcher.forward(request, response);
                } else {
                    // 如果未能从数据库中找到对应的记录,处理逻辑(例如跳转到错误页面)
                    response.sendRedirect("/denglu.jsp");
                }

            } catch (SQLException se) {
                se.printStackTrace();
                response.getWriter().println("数据库连接错误");
            } finally {
                // 关闭资源
                try {
                    if (rs != null) rs.close();
                    if (stmt != null) stmt.close();
                    if (conn != null) conn.close();
                } catch (SQLException se) {
                    se.printStackTrace();
                }
            }
        } else {
            // 如果未能成功取 idname,处理逻辑(例如跳转到登录页面或者错误页面)
            response.sendRedirect("/denglu.jsp");
        }
    }
}
  1. Servlet基本信息

    • 这是一个名为 ShoppingServlet 的Servlet类,继承自 HttpServlet,用于处理POST请求。
  2. 数据库连接信息

    • 定义了三个私有变量 jdbcURLjdbcUsernamejdbcPassword,分别存储了MySQL数据库的URL、用户名和密码。这些信息用于与数据库建立连接。
  3. doPost方法

    • doPost 方法接收 HttpServletRequest 和 HttpServletResponse 对象作为参数,处理用户的POST请求。
    • 首先从会话中获取 idname,这通常是用户登录后存储在会话中的用户名或标识。
  4. 会话检查

    • 检查 idname 是否为null。如果成功获取到 idname,表示用户已经登录,可以继续处理业务逻辑;否则,重定向到登录页面(这里是 /denglu.jsp)。
  5. 数据库操作

    • 使用 DriverManager 建立数据库连接。
    • 准备SQL语句并执行查询,查询条件为 idname,以获取与之对应的用户信息。
    • 如果查询到结果,从结果集中获取用户名等信息,并将用户名存储到会话中(如果需要的话)。
    • 将请求转发到 shopping.jsp 页面或其他需要的页面,这里使用 RequestDispatcher 实现转发。
  6. 异常处理和资源释放

    • 在操作数据库过程中可能会发生 SQLException,在 catch 块中打印异常信息,并向响应中写入错误信息。
    • 在 finally 块中关闭数据库连接、语句和结果集,确保资源被正确释放。
  7. 未找到用户处理

    • 如果未从数据库中找到与 idname 对应的记录,可能是因为用户不存在或其他错误,将响应重定向到登录页面

更多的,这个服务层的代码是为了解决

将登陆成功的信息传到session中,如果在登录页面显示登录成功的话,就会把用户名存进去,然后再在这个地方拿出来,显示“你好,xxx”


web-xml

<servlet>
        <servlet-name>Shopping</servlet-name>
        <servlet-class>Servlet.ShoppingServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Shopping</servlet-name>
        <url-pattern>/Shopping</url-pattern>
    </servlet-mapping>

  • 11
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值