首页 > 编程语言 >基于JSP、java、Tomcat三者的项目实战--校园交易网（3）主页

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

时间：2024-07-27 23:00:33浏览次数：14  
标签：java Tomcat tr idname 交易网 background var total 页面

技术支持：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. 数据库连接信息：

    • 定义了三个私有变量 jdbcURL, jdbcUsername, jdbcPassword，分别存储了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>

标签：java,Tomcat,tr,idname,交易网,background,var,total,页面
From： https://blog.csdn.net/m0_64056556/article/details/140730309

相关文章

  • 力扣90题：子集II的 Java 实现
    引言LeetCode是一个流行的在线编程平台，提供了大量的算法题目供开发者练习。第90题“子集II”是一个中等难度的题目，要求找出数组的所有子集，但是含重复数字的子集只计算一次。本文将介绍如何使用Java解决这个问题。题目描述给定一个可能包含重复数字的整数数组nums，返回......
  • 每周Java学习汇总
    字符串（String）：在Java中，字符串是一个非常重要的数据类型。它是不可变的，意味着一旦创建，就不能更改其内容。字符串可以用双引号（“”）表示。Java提供了许多处理字符串的方法，如拼接、截取、查找、替换等。自增自减运算符（++和--）：自增运算符（++）和自减运算符（–）用于对变量进行加1或减1的操......
  • 暑假java自学进度总结03
    一.今日所学：1.标识符命名规则：必须：1>由数字，字母，下划线，美元符组成；2>不能以数字开头；3>不能是关键字；4>区分大小写；建议：1>命名方法，变量时用小驼峰命名法：*1.标识符是一个单词时，全部小写*2.标识符是多个单词组合时，第一个单词小写，其余单词首字母大写2>命名类名时用大驼峰命名法：......
  • JavaWeb开发基础Servlet API
    Servlet版本Oracle将JavaEE（JavaSE还自己保留）交给开源组织，Eclipse基金会接手。但Oracle不允许开源组织使用Java名号，所以JakartaEE名称于2018.02.26应运而生。正是因为组织变化，Servlet被割裂为了2个版本，javax.servlet和jakarta.servlet。javax.servlet已经停止维护，但它仍然是......
  • java学习进程4
    在这一周的学习中，我主要集中在Java编程的基础知识及其核心概念的理解上。以下是我本周所做的一些具体活动：本周学习活动面向对象编程(OOP)基本概念：本周我深入学习了面向对象编程的基本概念，了解了类、对象、属性和方法的定义及其在Java中的应用。同时也理解了对象如何通过......
  • Java学习第四周
    /**测试条件（三元）连接符的用法*/publicclassTestOperator06{publicstaticvoidmain(String[]args){intscore=90;Stringa=score<60?"不及格":"及格";System.out.println(a); if(score<60){ a="不及格"; }else{ a="及格"; } i......
  • 在Windows配置java环境变量
    目录环境变量环境变量的介绍环境变量的作用设置环境变量方法一方法二方法三安装JDKJAVA_HOME变量设置JAVA_HOME变量PATH变量设置PATH变量CLASSSPATH变量设置CLASSSPATH变量总结环境变量环境变量的介绍环境变量是操作系统中用来指定运行环境信息的一种参数。它......
  • 基于SSM技术的珠宝销售系统的设计与实现/在线销售系统/在线购物平台/Java
    摘 要随着互联网技术和国内珠宝行业持续快速地发展，管理员为了可以更为便捷地管理珠宝销售线上服务，珠宝销售系统被开发出的目地是为了可以更为便捷管理珠宝销售线上服务。该系统介绍了珠宝销售系统的功能和特点。可以帮助珠宝在线商城管理销售、订单和客户信息等。它还可以......
  • 计算机Java项目｜基于SpringBoot的智能无人仓库管理的设计与实现
    作者主页：编程指南针作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验，被多个学校常年聘为校外企业导师，指导学生毕业设计并参与学生毕业答辩指导，有较为丰富的相关经验。期待与......
  • 邦布带你从零开始实现图书管理系统（java版）
    今天我们来从零开始实现图书管理系统。图书管理系统来看我们的具体的实现，上述视频。我们首先来实现框架，我们要实现图书管理系统，首先要搭框架。我们首先定义一个书包，在书包中定义一个书类和一个书架类，再定义一个用户包，其中包含用户类，管理者类，普通用户类，在定义一个工具包......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99