1. 全栈程序员必看首页

项目-Java Web购物车-JSP实现

全栈程序员-站长 • • 未分类 • 阅读 2

项目-Java Web购物车-JSP实现登录注册功能 login jsp lt pagelanguage java contentType text html charset UTF 8 pageEncoding UTF 8 gt html head amp a head html

文章目录

源码地址

界面演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述












介绍(旧)

浏览器打开http://localhost:8080/ShopCart/login.jsp,即可得到如下界面在这里插入图片描述
点击登录(用户名与密码已经在数据库中存在),直接跳到商品列表界面
在这里插入图片描述
点击商品,然后跳转到商品详情界面,这里有个放大图片的效果
在这里插入图片描述
点击加入购物车,跳转到购物车界面,如下图:
在这里插入图片描述












目录结构

在这里插入图片描述
src展开如下图:
在这里插入图片描述




准备工作

创建数据库shop,然后运行SQL文件,通过ShopCart.sql创建,完成后如下图,包含两个表user与product:
在这里插入图片描述
在这里插入图片描述
通过IDE导入项目,然后以tomcat运行






登录注册功能

前端登录页面 login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<html> <head> <title>login 
      title> <link href="css/semantic.css" rel="stylesheet">  
       head> <body>  
       <br> <br> <br> <div class="loginpage"> <br> <br> <br> <h2 align="center">欢迎登录         h2>          <form name=loginForm action="<%= request.getContextPath() %>/PostServlet" method=post> <table align="center"> <tr> <td>用户名：          td> <td><div class="ui input focus"> <input type="text" placeholder="" name=username>            div>            td>              tr> <tr> <td>密码：              td> <td><div class="ui input focus"> <input type="password" placeholder="" name=pwd>                div>                td> <tr /> <br>                  table> <div class="submit-p"> <div class="submit-button"> <input type="submit" value="login" class="ui primary button" />                   div> <div class="reset-button"> <input type="reset" value="reset" class="ui button" />                    div>                     div>                      form>                       div> <style> .loginpage {                        /*height: 300px;*/ /*padding-bottom: 64px;*/ /*height: 500px;*/ /*position: relative;*/ height: 400px; border: 1px solid #d7d7d7; box-shadow: 0 0 20px #d7d7d7; background-color: #fff; position: absolute; width: 382px; color: #; margin: 80px auto; position: absolute; left: 0; right: 0; } .submit-button {                        display: inline; } .reset-button {                        display: inline; } .submit-p {                        margin-left: 120px; margin-top:20px; }                        style>                         body>                          html>

登录逻辑处理代码: doLogin.jsp (用jsp实现,没有用servlet), 用户名与密码都正确后跳转到 list.jsp .

<%@ page language="java" import="dao.*,entity.*,java.util.*,java.sql.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String users = request.getParameter("username"); String pass = request.getParameter("pwd"); boolean flag = false; PreparedStatement sql = null; ResultSet rs = null; Connection conn = null; %> <% String driver = "com.mysql.jdbc.Driver"; String url = "jdbc:mysql://127.0.0.1:3306/shop"; String use = "root"; String password = "password"; Class.forName(driver); conn = DriverManager.getConnection(url, use, password); sql = conn.prepareStatement("select * from user where username=? and password=?"); sql.setString(1, users); sql.setString(2, pass); rs = sql.executeQuery(); if (rs.next()) { 
     flag = true; } rs.close(); sql.close(); conn.close(); %> <!-- 判断是否是正确的登录用户 --> <% if (flag == true) { 
     %> <jsp:forward page="list.jsp" /> <% } else if (flag == false) { 
     %> <script> alert("用户名或密码错误,请重新输入"); window.location = "login.jsp"; </script> <% } %>

注册界面与上面登录界面类似

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<html> <head> <title>注册 
      title> https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">  
       head> <body>  
       <br> <br> <br> <div class="loginpage"> <br> <br> <br> <h2 align="center">请注册         h2> <form name=loginForm action="doRegister.jsp" method=post> <table align="center"> <tr> <td>用户名：          td> <td><div class="ui input focus"> <input type="text" placeholder="" name=username>            div>            td>              tr> <tr> <td>密码：              td> <td><div class="ui input focus"> <input type="password" placeholder="" name=pwd>                div>                td> <tr /> <br>                  table> <div class="submit-p"> <div class="submit-button"> <input type="submit" value="register" class="ui primary button" />                   div> <div class="reset-button"> <input type="reset" value="reset" class="ui button" />                    div>                     div>                      form>                       div> <style> .loginpage {                        /*height: 300px;*/ /*padding-bottom: 64px;*/ /*height: 500px;*/ /*position: relative;*/ height: 400px; border: 1px solid #d7d7d7; box-shadow: 0 0 20px #d7d7d7; background-color: #fff; position: absolute; width: 382px; color: #; margin: 80px auto; position: absolute; left: 0; right: 0; } .submit-button {                        display: inline; } .reset-button {                        display: inline; } .submit-p {                        margin-left: 120px; margin-top:20px; }                        style>                         body>                          html>

注册逻辑处理代码: doRegister.jsp

<%@ page language="java" import="dao.*,entity.*,java.util.*,java.sql.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here 
      title>  
       head> <body> <% request.setCharacterEncoding("utf-8"); String users = request.getParameter("username"); String pass = request.getParameter("pwd"); %> <% String driver = "com.mysql.jdbc.Driver"; String url = "jdbc:mysql://127.0.0.1:3306/shop"; String use = "root"; String password = "password"; Class.forName(driver); Connection conn = DriverManager.getConnection(url, use, password); PreparedStatement sql = conn.prepareStatement("insert into user(username,password)values(?,?)"); sql.setString(1, users); sql.setString(2, pass); int rtn = sql.executeUpdate(); sql.close(); conn.close(); %> <script> alert("注册成功"); window.location = "login.jsp";  
        script>  
         body>  
          html>

定义Dao

BaseDao

dao下BaseDao.java 用于连接数据库

package dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import javax.security.auth.x500.X500Principal; //import com.mysql.jdbc.Statement; public class BaseDao { 
     Connection conn = null; Statement stmt = null; ResultSet rs = null; Connection con; public static Connection getConnection() throws SQLException { 
     Connection connection = null; try { 
     Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/shop"; connection = DriverManager.getConnection(url,"root","password"); } catch (ClassNotFoundException e) { 
     // TODO: handle exception e.printStackTrace(); } return connection; } public static void closeAll(Connection conn, Statement stmt, ResultSet rs) { 
     try { 
     if (rs != null) rs.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { 
     // TODO: handle exception e.printStackTrace(); } } }

ProductDaoImp

ProductDaoImp.java用于查询商品,实现了商品查询的两个方法,

  • 一种是findAll()用于商品列表页面 list.jsp
  • 一种是findById()用于商品详情页面 detail.jsp
package dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import org.apache.tomcat.jni.Proc; //import java.sql.*; import org.omg.CORBA.PUBLIC_MEMBER; import com.sun.org.apache.regexp.internal.recompile; import entity.Product; import jdk.internal.org.objectweb.asm.commons.StaticInitMerger; //操作产品的实现类 public class ProductDaoImp { 
     /* 作用,按照条件查询产品 */ public ArrayList findAll() { 
     ArrayList list = new ArrayList(); Connection conn = null; Statement stmt = null; ResultSet rs = null; try { 
     // 1.打开数据库连接 conn = BaseDao.getConnection(); // 2.创建执行sql语句对象 stmt = conn.createStatement(); // 3.发送sql语句到mysql String sql = "select * from product"; rs = stmt.executeQuery(sql); // rs结果集--->遍历--->封装product--->放入ArrayList while (rs.next())// 循环一次只代表一行 { 
     Product p = new Product(); p.setId(rs.getInt("id")); p.setName(rs.getString("name")); p.setImg(rs.getString("img")); p.setDesc(rs.getString("desc")); p.setNum(rs.getInt("num")); p.setPrice(rs.getDouble("price")); System.out.println(p.getName()); list.add(p); } // 4. } catch (Exception e) { 
     // TODO: handle exception e.printStackTrace(); } finally { 
     BaseDao.closeAll(conn, (com.mysql.jdbc.Statement) stmt, rs); } return list; } public Product findById(int id) { 
     //ArrayList list = new ArrayList(); Product p = new Product(); Connection conn = null; Statement stmt = null; ResultSet rs = null; try { 
     // 1.打开数据库连接 conn = BaseDao.getConnection(); // 2.创建执行sql语句对象 stmt = conn.createStatement(); // 3.发送sql语句到mysql String sql = "select * from product where id =" + id; rs = stmt.executeQuery(sql); // rs结果集--->遍历--->封装product--->放入ArrayList while (rs.next())// 循环一次只代表一行 { 
     //Product p = new Product(); p.setId(rs.getInt("id")); p.setName(rs.getString("name")); p.setImg(rs.getString("img")); p.setDesc(rs.getString("desc")); p.setNum(rs.getInt("num")); p.setPrice(rs.getDouble("price")); //System.out.println(p.getName()); //list.add(p); } // 4. } catch (Exception e) { 
     // TODO: handle exception e.printStackTrace(); } finally { 
     BaseDao.closeAll(conn, (com.mysql.jdbc.Statement) stmt, rs); } return p; } // public static void main(String[] args)throws Throwable{ 
     // new ProductDaoImp().findAll(); // } }

定义Entity

Product

实体类Product.java,定义商品的基本属性.

package entity; import sun.nio.cs.ext.DoubleByteEncoder; public class Product { 
     private int id; private String name; private double price; private String desc; private String img; private int num; public static void main(String[] args) { 
     // TODO Auto-generated method stub } public int getId() { 
     return id; } public void setId(int id) { 
     this.id = id; } public String getName() { 
     return name; } public void setName(String name) { 
     this.name = name; } public double getPrice() { 
     return price; } public void setPrice(double price) { 
     this.price = price; } public String getDesc() { 
     return desc; } public void setDesc(String desc) { 
     this.desc = desc; } public String getImg() { 
     return img; } public void setImg(String img) { 
     this.img = img; } public int getNum() { 
     return num; } public void setNum(int num) { 
     this.num = num; } }

CartItem

CartItem 定义购物车对象, 里面包括 商品对象 以及 商品数目;

package entity; public class CartItem { 
     private Product p; private int sum; public Product getP() { 
     return p; } public void setP(Product p) { 
     this.p = p; } public int getSum() { 
     return sum; } public void setSum(int sum) { 
     this.sum = sum; } }

商品列表与详情界面

商品列表界面核心代码 list.jsp

<% ProductDaoImp dao = new ProductDaoImp(); ArrayList list = dao.findAll(); for(int i=0;i<list.size();i++){ 
      Product p = (Product)list.get(i); %> <li> <a href="detail.jsp?id=<%= p.getId() %>"> <div class="i-pic limit"> <img src="images/small-<%= p.getImg() %>" /> <p class="title fl"><%= p.getName() %> 
      p> <p class="price fl"> <b>¥ 
       b> <strong><%= p.getPrice() %> 
        strong>  
         p> <p class="number fl"> 销量<span><%= p.getNum() %> 
          span>  
           p>  
            div>  
             a>  
              li> <% } %>

detail界面核心代码 detail.jsp

<% String idStr = request.getParameter("id"); if("".equals(idStr) || idStr == null){ 
     response.sendRedirect("login.jsp"); }else{ 
     int id = Integer.parseInt(request.getParameter("id")); ProductDaoImp dao = new ProductDaoImp(); Product p = dao.findById(id); %> ...... ......省略(用渲染p的各个属性) ...... <% } %>

★购物车页面

{ 
     "商品id":"cartItem" } 
<%@ page language="java" import="dao.*,entity.*,java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% // 1.获得购物车 Map // getAttribute的返回值类型是Object,需要向下转型, // 转成你的userName类型的,简单说就是存什么,取出来还是什么. HashMap map = (HashMap) session.getAttribute("cart"); // 2.判断购物车 Map是否存在,不存在则创建 if (map == null) { 
     map = new HashMap(); } // 3.把产品添加到购物车 // 3.1 根据 id 查询商品 String id = request.getParameter("id"); ProductDaoImp dao = new ProductDaoImp(); Product p = dao.findById(Integer.parseInt(id)); // 3.2判断 Map 中是否由此商品 , 注意这里id不加引号 CartItem cartItem = (CartItem) map.get(id); // 有--> 把数量+1 // 无--> 把商品放入购物车 数量设置为1 if (cartItem != null) { 
     cartItem.setSum(cartItem.getSum() + 1); } else { 
     cartItem = new CartItem(); cartItem.setP(p); // 关键步骤 cartItem.setSum(1); } // 3.3 将产品加入map集合,id+""拼接成字符串型 map.put(id, cartItem); // out.print(map.size()); // 4.把集合存储到session作用域 session.setAttribute("cart", map); response.sendRedirect("cart.jsp"); %>

遍历map, 前端显示购物车商品

<% HashMap map = (HashMap)session.getAttribute("cart"); Iterator it = map.keySet().iterator(); while(it.hasNext()){ 
     Object key = it.next(); CartItem cartItem = (CartItem)map.get(key); Product p = cartItem.getP(); int sum = cartItem.getSum(); %> ...... <% } %>

用于增删商品数量的js代码

<script> function fun1(id, price) { 
     var sum = parseInt(document.getElementById("sum" + id).value) + 1; var m = sum * parseFloat(price); document.getElementById("m" + id).innerHTML = m; document.getElementById("J_Total").innerHTML = m; var sum1 = parseInt(document.getElementsByClassName("text_box")[0].value) + 1; document.getElementById("J_SelectedItemsCount").innerHTML = sum1; } function fun2(id, price) { 
     var sum = parseInt(document.getElementById("sum" + id).value) - 1; var m = sum * parseFloat(price); document.getElementById("m" + id).innerHTML = m; document.getElementById("J_Total").innerHTML = m; document.getElementById("J_SelectedItemsCount").innerHTML = document.getElementsByClassName("text_box")[0].value; } </script>

更多

看参考

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/177499.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月26日 下午7:22
下一篇 2026年3月26日 下午7:22


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号