备案控制台
探索云世界
开发者社区 数据库 文章 正文

购物车项目代码+页面+连接数据库

2022-11-10 108
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 购物车项目代码+页面+连接数据库

   主界面


个人中心界面

       


数据库表设计

就不多说，直接上代码

他们的顺序是register.jsp→login.jsp→index.jsp→dogwc.jsp→index.jsp

register.jsp和doregister.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
 #a {
    width:50%;
    height:200px;
    border: 1px dashed ;
    background-color:lightyellow;
    text-align:center;
}
body{
background-color:lightblue;
}
</style>
</head>
<body>
  <form action="doregister.jsp" method="post" align="center">
  用户名:<input type="text" name="uname"><br>
  密码:<input type="password" name="upwd"><br>
  备注:<textarea rows="" cols="" name="uinfo">
  </textarea><br>
  <input type="submit" value="注册">
  <input type="reset" value="重置">
  </form>
</body>
</html>
<%@page import="com.zking.biz.imp.Imp_UserBiz"%>
<%@page import="com.zking.biz.IUserBiz"%>
<%@page import="com.zking.entity.User"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  //设置编码-设置请求对象的编号
  request.setCharacterEncoding("utf-8");
  //接收注册页面传递的数据
  String uname = request.getParameter("textfield");
  String upwd = request.getParameter("textfield2");
  String uinfo = request.getParameter("uinfo");
  User ss=new User(uname,upwd,uinfo);
  IUserBiz df=new Imp_UserBiz();
  //执行sql语句
  if(df.register(ss)){
  out.print("<script>alert('注册成功');location.href='login.jsp'</script>");
  }else{
  out.print("<script>alert('注册失败');location.href='register.jsp'</script>");
  }
%>


login.jsp和dologin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<style>
 #a {
    width:50%;
    height:200px;
    border: 1px dashed ;
    background-color:lightyellow;
    text-align:center;
}
body{
background-color:lightblue;
}
</style>
<script type="text/javascript">
  var str = "qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKLZXCVBNM23456789";
  function yz() {
  //随机出4个0-字符串长度之间的数字 做为下标
  yzmStr="";
  for(var i=1;i<=4;i++){
    yzmStr+=str.substr(Math.round(Math.random()*(str.length-1)),1);
  }
  //把验证码赋值到页面
  document.getElementById("syzm").innerHTML=yzmStr;
  }
  function $(id) {
  return document.getElementById(id);
  }
  function login_yz() {
  //验证 用户名 和 密码不能为空 
  //获取用户名
  var uname = $("uname").value; 
  if(uname.length==0){
    alert("用户名不能为空");
    return false;
  }
  //获取密码
  var upwd = $("upwd").value;
  if(upwd.length==0){
    alert("密码不能为空");
    return false;
  }
  //获取验证码:判断和电脑的验证码是否相等
  //PS：自己实现-输入的验证码不区分大小写-大小写转换
  var yzm = $("uyzm").value;
  if(yzm!=yzmStr){
    alert("验证码输入错误，请重新输入");
    //清空输入的验证码
    $("uyzm").value="";
    //重新生成验证码
    yz();
    return false;
  }
  }
</script>
</head>
<body onload="yz()" >
  <div id="login" align="center">
  <div id="center">
    <div id="center_left"></div>
    <div id="center_middle">
    <form action="dologin.jsp" onsubmit="return login_yz()">
    <div id="user">
      用 户 <input type="text" id="uname" name="textfield" />
    </div>
    <div id="password">
      密 码 <input type="password" id="upwd" name="textfield2" />
    </div>
    <div id="yzm">
      验证码 <input id="uyzm" style="width: 50px;" type="text" name="textfield3" />
      <span id="syzm" onclick="yz()"></span>
    </div>
    <div id="btn">
      <input type="submit" value="登录">
      <input type="button" value="注册" onclick="javascript:location.href='register.jsp'">
    </div>
    </form>
    </div>
    <div id="center_right"></div>
  </div>
  </div>
</body>
</html>
<%@page import="com.zking.entity.User"%>
<%@page import="com.zking.biz.imp.Imp_UserBiz"%>
<%@page import="com.zking.biz.IUserBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String uname = request.getParameter("textfield");
String upwd = request.getParameter("textfield2");
//调用登录方法-实例化业务逻辑层对象
IUserBiz iub = new Imp_UserBiz();
User a= iub.login(uname, upwd);
  if(a!=null){//成功就跳转到主页面
  //转发
    session.setAttribute("a", a);
    request.getRequestDispatcher("index.jsp").forward(request, response);
  }else{//错误就回到登录页面
    out.print("<script>alert('用户名或密码错误,请重新登录');location.href='login.jsp'</script>");
  }
%>


index.jsp

<%@page import="java.util.ArrayList"%>
<%@page import="com.zking.entity.Goods"%>
<%@page import="com.zking.biz.imp.Imp_GoodsBiz"%>
<%@page import="com.zking.biz.IGoodsBiz"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "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>
<!-- 引用jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">
  function gm(bid) {
  //跳转到dogwc页面
  //alert(bid);
  location.href="dogwc.jsp?bid="+bid;
  }
</script>
</head>
<body>
  <%
  //判断用户是不是为空
  Object obj = session.getAttribute("a");
  if(obj==null){
    out.print("<script>alert('你没有登录,请先登录');location.href='login.jsp'</script>");
  }
  %>
  <table class="table table-hover">
  <tr>
    <td>商品编号</td>
    <td>商品名称</td>
    <td>商品价格</td>
    <td>商品简介</td>
    <td>商品图片</td>
    <td><span class="glyphicon glyphicon-cog"></span></td>
  </tr>
  <%
    //视图层调用业务逻辑层
    IGoodsBiz igb = new Imp_GoodsBiz();
    ArrayList<Goods> glist = igb.getAll();
    for(Goods g:glist){
  %>
  <tr>
    <td><%=g.getBid() %></td>
    <td><%=g.getBname() %></td> 
    <td><%=g.getBprice() %></td>
    <td><%=g.getBinfo() %></td>
    <td><img alt="" src="<%=g.getBface() %>"> </td>
    <td><button onclick="gm(<%=g.getBid() %>)" class="btn btn-success">加入购物车</button></td>
  </tr>
  <%} %>
  </table>
</body>
</html>


dogwc.jsp

<%@page import="com.zking.entity.Goods"%>
<%@page import="javax.swing.JOptionPane"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.zking.entity.OrderItem"%>
<%@page import="com.zking.entity.User"%>
<%@page import="com.zking.biz.IGoodsBiz"%>
<%@page import="com.zking.biz.imp.Imp_GoodsBiz"%>
<%@page import="com.zking.biz.imp.Imp_OrderItemBiz"%>
<%@page import="com.zking.biz.IOrderItemBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
//判断用户是不是为空
Object obj = session.getAttribute("a");
if(obj==null){
  out.print("<script>alert('你没有登录,请先登录');location.href='login.jsp'</script>");
}
//获取商品订单的数量
String number =request.getParameter("gn");
int count=1;
if(number!=null){
  count=Integer.valueOf(number);
}
//接受商品的编号
int bid=Integer.valueOf(request.getParameter("bid"));
IOrderItemBiz ss=new Imp_OrderItemBiz();
IGoodsBiz se=new Imp_GoodsBiz();
double jg= se.getByBid(bid).getBprice();
//给属性赋值
User sf=(User)session.getAttribute("a");
OrderItem oi=new OrderItem(sf.getUuid(),bid,1,1.0,"下单成功");
//获取OrderItem中的订单集合
ArrayList<OrderItem> olist=ss.getAll(sf.getUuid());
boolean b=true;//表示默认 没有相同的订单
double SumPrice=0;
//遍历订单集合，判断是否已存在相同商品订单
for(int i=0;i<olist.size();i++){
  if(bid==olist.get(i).getBid()){
  //number为空说明是从index页面过来的
  if(number==null){
    //修改数量:原来的数量+1
    boolean bb=ss.updateByOid(olist.get(i).getOid(),olist.get(i).getGnumber()+1,jg);
  if(bb){
    JOptionPane.showMessageDialog(null, "商品添加成功");
  }else{
    JOptionPane.showMessageDialog(null, "商品修改成功");
  }
  }else{//number为空说明是从spcar页面过来的
    //修改数量:原来的数量修改为count
    boolean bb=ss.updateByOid(olist.get(i).getOid(),count,jg);
    if(bb){
    JOptionPane.showMessageDialog(null, "商品添加成功");
    }else{
    JOptionPane.showMessageDialog(null, "商品修改成功");
    }
  }
  b=false;
  }
}
if(b){
  //把订单放到orderitem表中
  IGoodsBiz gd=new Imp_GoodsBiz();
  Goods s=gd.getByBid(bid);
  boolean sfc=ss.taddId(oi,s.getBprice());
  if(sfc){
  JOptionPane.showMessageDialog(null, "商品添加成功");
  }else{
  JOptionPane.showConfirmDialog(null, "商品修改成功");
  }
}
//跳转页面
response.sendRedirect("spcar.jsp");
%>


spcar.jsp

<%@page import="com.zking.entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.zking.entity.User"%>
<%@page import="com.zking.biz.IGoodsBiz"%>
<%@page import="com.zking.entity.Goods"%>
<%@page import="com.zking.biz.imp.Imp_GoodsBiz"%>
<%@page import="com.zking.biz.imp.Imp_OrderItemBiz"%>
<%@page import="com.zking.biz.IOrderItemBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引用jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">
function xg(obj,bjd) {
  var gnumber=obj.value;
  if(gnumber>0){
  location.href="dogwc.jsp?bid="+bjd+"&gn="+gnumber;
  }else if(gnumber<=0 ){
  alert("商品数量不能<=0：");
  location.href="dodele.jsp?bid="+bid;
  }
}
function sc(bid) {
  if(confirm("确定删除吗？")){
  location.href="dodele.jsp?bid="+bid;
  }
}
function ff(bid,i) {
  var gnumber=document.getElementById(bid).value;
  if(gnumber>0){
  if(i==1){
  gnumber--;
  location.href="dogwc.jsp?bid="+bid+"&gn="+gnumber;
  }else if(i==2) {
  gnumber++;
  location.href="dogwc.jsp?bid="+bid+"&gn="+gnumber;
  }
  }else if(gnumber<=0 ){
  alert("商品数量不能<=0：");
  location.href="dodele.jsp?bid="+bid;
  }
}
</script>
</head>
<body>
  <%
  //判断用户是不是为空
  Object obj = session.getAttribute("a");
  if(obj==null){
    out.print("<script>alert('你没有登录,请先登录');location.href='login.jsp'</script>");
  }
  %>
  <h1 align="center">
  <a href="index.jsp"> <span class="glyphicon glyphicon-home"></span>
  </a>
  </h1>
  <table class="table table-hover">
  <tr>
    <td>商品图片</td>
    <td>商品名称</td>
    <td>商品价格</td>
    <td>商品介绍</td>
    <td>商品数量</td>
    <td>订单总价</td>
    <td>订单时间</td>
    <td>订单状态</td>
    <td>操作一下</td>
  </tr>
  <%
  // 获取到session中的订单集合
  IOrderItemBiz ss=new Imp_OrderItemBiz();
  IGoodsBiz kj=new Imp_GoodsBiz();
  Goods dd=null;
  User sf=(User)session.getAttribute("a");
    ArrayList<OrderItem> olist = ss.getAll(sf.getUuid());
    //把订单绑定到页面
    for (int i = 0; i < olist.size(); i++) {
    dd=kj.getByBid(olist.get(i).getBid());
  %>
  <tr>
    <td><img alt="" src="<%=dd.getBface()%>">
    </td>
    <td><%=dd.getBname()%></td>
    <td><%=dd.getBprice()%></td>
    <td><%=dd.getBinfo()%></td>
    <td>
    <button onclick="ff(<%=dd.getBid()%>,1)">-</button>
    <input
    onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"
    onblur="xg(this,<%=dd.getBid()%>)"
    id="<%=dd.getBid()%>"
    style='width: 40px; text-align: center;' type="text"
    value="<%=olist.get(i).getGnumber()%>">
    <button onclick="ff(<%=dd.getBid()%>,2)">+</button>
    </td>
    <td><%=olist.get(i).getGsumprice()%></td>
    <td><%=olist.get(i).getOdate() %></td>
    <td><%=olist.get(i).getOzt() %></td>
    <td><button onclick="sc(<%=dd.getBid()%>)" class="glyphicon glyphicon-trash" >
    </button></td>
  </tr>
  <%
    }
  %>
  </table>
  <p align="right" style="margin-rigth: 40px">
  <button class="btn btn-success">
    总价格：<%=ss.getsum() %></button>
  </p>
</body>
</html>


dodele.jsp

<%@page import="javax.swing.JOptionPane"%>
<%@page import="com.zking.biz.imp.Imp_OrderItemBiz"%>
<%@page import="com.zking.biz.IOrderItemBiz"%>
<%@page import="com.zking.entity.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
//接受商品的编号
int bid=Integer.valueOf(request.getParameter("bid"));
User s=(User)session.getAttribute("a");
//获取session中的订单集合
IOrderItemBiz ss=new Imp_OrderItemBiz();
boolean sd=ss.deleteById(bid,s.getUuid());
if(sd){
  JOptionPane.showMessageDialog(null, "删除成功");
}else{
  JOptionPane.showMessageDialog(null, "删除失败");
}
//跳转页面
response.sendRedirect("spcar.jsp");
%>
文章标签：
数据库
关键词：
页面数据库
代码数据库
代码连接数据库
项目连接数据库
天蝎座的程序媛
目录
相关文章
cuicuicuic
|
1月前
|
Devops API 项目管理
云效常见问题之页面提示数据库保存不进去如何解决
云效（CloudEfficiency）是阿里云提供的一套软件研发效能平台，旨在通过工程效能、项目管理、质量保障等工具与服务，帮助企业提高软件研发的效率和质量。本合集是云效使用中可能遇到的一些常见问题及其答案的汇总。
cuicuicuic
22 0
游客b26rakuy63q5s
|
1月前
|
SQL 关系型数据库 MySQL
2024年阿里云数据库创建_数据库账号密码和连接教程
阿里云数据库怎么使用？阿里云百科整理阿里云数据库从购买到使用全流程，阿里云支持MySQL、SQL Server、PostgreSQL和MariaDB等数据库引擎，阿里云数据库具有高可用、高容灾特性，阿里云提供数据库备份、恢复、迁移全套解决方案。详细阿里云数据库购买和使用流程方法如下
游客b26rakuy63q5s
87 3
上云百科
|
1月前
|
SQL 关系型数据库 MySQL
阿里云MySQL数据库价格、购买、创建账号密码和连接数据库教程
阿里云数据库使用指南：购买MySQL、SQL Server等RDS实例，选择配置和地区，完成支付。创建数据库和账号，设置权限。通过DMS登录数据库，使用账号密码访问。同地域VPC内的ECS需将IP加入白名单以实现内网连接。参考链接提供详细步骤。
上云百科
369 3
一百减一是零
|
6天前
|
SQL 监控 druid
Druid数据库连接池简介及应用推广(老项目翻出来做下记录)
Druid数据库连接池简介及应用推广(老项目翻出来做下记录)
一百减一是零
23 2
林太白
|
9天前
|
JavaScript 关系型数据库 MySQL
❤Nodejs 第二章（Node连接本地数据库）
【4月更文挑战第2天】本文介绍了如何使用Node.js连接本地MySQL数据库。首先，提到了在MySQL官网下载安装数据库和使用Navicat for MySQL进行数据库管理。接着，通过`yarn add mysql`在项目中安装数据库依赖。然后，创建`app.js`文件，设置数据库连接参数，并建立连接进行查询操作。遇到导入模块的错误后，修改导入方式为CommonJS语法。
林太白
26 1
薛伟同学
|
12天前
|
SQL 监控 关系型数据库
PG数据库释放闲置连接
PG数据库释放闲置连接
薛伟同学
19 0
coder一枚
|
22天前
|
弹性计算 关系型数据库 MySQL
阿里云数据库服务器价格表，数据库创建、连接和使用教程
阿里云数据库使用流程包括购买和管理。选择所需数据库类型如MySQL，完成实名认证后购买，配置CPU、内存和存储。确保数据库地域与ECS相同以允许内网连接。创建数据库和账号，设置权限。通过DMS登录数据库，使用账号密码连接。同一VPC内的ECS需添加至白名单以进行内网通信。参考官方文档进行详细操作。
coder一枚
123 3
风水道人
|
23天前
|
网络协议 数据库连接 网络安全
DM数据库连接数据库时报：创建sokect连接失败
DM数据库连接数据库时报：创建sokect连接失败
风水道人
13 0
穆雄雄.
|
1月前
|
SQL Oracle 关系型数据库
干货！sqlserver数据库所有知识点总结整理，含代码（挺全的）
干货！sqlserver数据库所有知识点总结整理，含代码（挺全的）
穆雄雄.
11 0
江帅帅
|
5天前
|
关系型数据库 MySQL 分布式数据库
《MySQL 简易速速上手小册》第6章：MySQL 复制和分布式数据库（2024 最新版）
《MySQL 简易速速上手小册》第6章：MySQL 复制和分布式数据库（2024 最新版）
江帅帅
35 2

热门文章

最新文章

  • 1
    RocketMQ 流数据库解析：如何实现一体化流处理？
  • 2
    成都晨云信息技术完成阿里云PolarDB数据库产品生态集成认证
  • 3
    一文搞懂数据库中的“锁”（图文详解）
  • 4
    【软件设计师备考 专题 】数据仓库和分布式数据库基础知识
  • 5
    【C/C++ 数据库 sqlite3】SQLite C语言API返回值深入解析
  • 6
    Perl 教程 之 Perl 数据库连接 1
  • 7
    在业务处理分析一体化的背景下，开发者如何平衡OLTP和OLAP数据库的技术需求与选型？
  • 8
    阿里云数据库服务器价格表，数据库创建、连接和使用教程
  • 9
    在Python Web开发过程中：数据库与缓存，MySQL和NoSQL数据库的主要差异是什么？
  • 10
    轻松入门MySQL：深入探究MySQL的ER模型，数据库设计的利器与挑战（22）
  • 1
    Javaweb之数据库连接池以及lombok类库的详细解析
    15
  • 2
    数据库开发之图形化工具以及表操作的详细解析
    18
  • 3
    数据库恢复挂起之更换数据库
    14
  • 4
    数据库开发之mysql前言以及详细解析
    10
  • 5
    「杭州*康恩贝」4月26日PolarDB开源数据库沙龙，开启报名！
    13
  • 6
    Python与NoSQL数据库（MongoDB、Redis等）面试问答
    41
  • 7
    Python与MySQL数据库交互：面试实战
    25
  • 8
    《MySQL 简易速速上手小册》第6章：MySQL 复制和分布式数据库（2024 最新版）
    35
  • 9
    寻找最懂数据库的你，开启云端推广事业！丰厚收益，轻松赚取！
    29
  • 10
    ❤Nodejs 第六章（操作本地数据库前置知识优化）
    17

    • 相关课程

    更多
  • 数据库的前世今生
  • 数据库核心概念
  • 从传统数据库到云数据库演进
  • 数据库常见问题排查
  • 数据库及SQL/MySQL基础
  • 高校精品课-西安交通大学 -数据库理论与技术

    • 相关电子书

    更多
  • 2022 DTCC-阿里云一站式数据库上云最佳实践
  • 云时代的数据库技术趋势
  • 超大型金融机构国产数据库全面迁移成功实践

    • 相关实验场景

    更多
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • Excel文件转存到RDS数据库
  • 快速体验PolarDB开源数据库
  • 手把手教你把IoT传感器数据存储到数据库
  • WorkBench操作云上数据库
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）