MVC购物车

目录

1.什么是MVC?

2.MVC购物车案例

2.1.数据库的设计

2.2.需要开发的界面

2.3.购物车样式设计

2.4.购物车具体实现代码

        第一步：进入购物首页页面绑定数据

        第二步：点击加入购物车进入我的购物车页面

        第三步：加入到我的购物车，对商品数量的更改以及商品总价的计算

        第四步：实现删除我的购物车商品的功能

1.什么是MVC?

        MVC全名是Model（模型） View（视图） Controller（控制器）。是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

        Model（模型）表示应用程序核心（比如数据库记录列表）。
        View（视图）显示数据（数据库记录）。
        Controller（控制器）处理输入（写入数据库记录）。

2.MVC购物车案例

购物车效果展示：

功能：

        购物首页：点击加入购物车，进入我的购物车页面（商品直接加到我的购物车），也可直接点击我的购物车进入（查看加入到购物车的商品）。

        我的购物车：可进行对商品数量的更改以及商品总价的计算、以及删除购物车商品的操作。

  • 2.1.数据库的设计

sp_user用户表
用户ID（uuid）用户名称（uuid）用户密码（uuid）用户地址（uuid）用户电话（uuid）
1admin123长沙888888
2sb321郴州999999

                         

sp_goods商品表
商品ID（gid）商品名称（gname）商品单价（gprice）
1可乐3
2方便面4.5
3饼干15

sp_cart购物车表
商品编号（cid）商品名称（gname）商品单价（gprice）商品数量（gcount）商品总价（cprice）购买用户ID（uuid）
1可乐313admin
2饼干15115sb

--sp_user用户表
create table sp_user(
       uuid number primary key,--用户ID
       uname varchar2(20) unique,--用户名称
       upwd varchar2(20),--用户密码
       uaddress varchar2(50),--用户地址
       utel varchar2(50)--用户电话
)

--sp_goods商品表
create table sp_goods(
       gid number primary key,--商品ID
       gname varchar2(20) not null，--商品名称
       gprice float not null--商品单价
)

--往sp_goods商品表里面插入的数据

insert into sp_goods(gname,gprice)
select 'mp31',100 from dual union
select 'mp32',1200 from dual union
select 'mp33',100 from dual union
select 'mp34',1600 from dual union
select 'mp35',1500 from dual union
select 'mp36',1400 from dual union
select 'mp37',1700 from dual union
select 'mp38',1300 from dual union
select 'mp39',1500 from dual union
select 'mp40',200 from dual

--sp_cart购物车表
create table sp_cart(
       cid number primary key,--商品编号
       gname varchar2(20),--商品名称
       gprice float,--商品单价
       gcount number,--商品数量
       cprice number,--商品总价
       uuid number--购买用户ID
)

注意：所有表都要有标识列（序列+触发器）。

例：为sp_cart购物车表创建序列和触发器

--序列

create sequence 序列名（例：s_pcart）;

--触发器

create or replace trigger 触发器名（例：t_pcart）
before insert
on 表名（例：sp_cart）
for each row
  begin
    :new. 要设置为标识列的字段（例：cid） :=  序列名（例：s_pcart）.nextval;
  end;

  • 2.2.需要开发的界面

        用户的登录 login.jsp、注册 register.jsp（觉得麻烦也可不写）页面；

        购物首页页面 shop.jsp；

        我的购物车页面 cart.jsp。

  • 2.3.购物车样式设计

        1.购物首页页面样式排版代码。（需要可自取）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物首页</title>
<style type="text/css">
    #border{
        border-collapse: collapse;
    }
    a{
        text-decoration: none;
    }
</style>
</head>
<body>
    <h2 align = "right">
            <a href="#">我的购物车</a>
    </h2>

    <div>
        <center>
            <font size="25px" style="font-weight: bold">购物首页</font>
        </center>
        <table id = "border" border = "1px" width = "100%" height="1000px">
        <tr align = "center" style = "font-size: 20px; font-weight: bold">
            <td>商品序号</td>
            <td>商品名称</td>
            <td>商品单价</td>
            <td>操作</td>
        </tr>
        
        <tr align = "center">
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a href = "#">加入购物车</a>
            </td>
        </tr>
    </table>
    <h2>
        <a href = "#">退出</a>
    </h2>
    </div>
</body>
</html>

  

         2.我的购物车页面样式排版代码。  （需要可自取）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的购物车</title>
<style type="text/css">
	#border{
		border-collapse: collapse;
	}
	a{
		text-decoration: none;
	}
</style>
</head>
<body>
	<h2 align = "right">
		<a href="#">返回购物首页</a>
	</h2>
	<center>
			<font size="25px" style="font-weight: bold">我的购物车</font>
	</center>
	<table id = "border" border = "1px" width = "100%" height = "350px">
		<tr align = "center" style = "font-size: 20px; font-weight: bold">
			<td>商品序号</td>
			<td>用户名</td>
			<td>商品名称</td>
			<td>商品单价</td>
			<td>商品数量</td>
			<td>商品总价</td>
			<td>操作</td>
		</tr>
		
		<tr align = "center">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>
				<input type="number"style="width: 50px;text-align: center;"/>
			</td>
			<td></td>
			<td>
				<a onclick="return confirm('你确定要删除该商品？')" href = "#">删除</a>
			</td>
		</tr>
	</table>
</body>
</html>

        3.用户的登录（登录后才可以进入购物首页）及注册，可在网上找模板或自行设计。

  • 2.4.购物车具体实现代码

        第一步：进入购物首页页面绑定数据

        Servlet包：LoadDataServlet；

作用：用来绑定数据库里商品表的数据（绑定到购物首页页面）。

@WebServlet("/loadDataServlet.do")
public class LoadDataServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
		// 获取out和session内置对象
		PrintWriter out = resp.getWriter();
		HttpSession session = req.getSession();
		
		// 调用业务逻辑层
		IGoodsBiz igb = new GoodsBiz();
		
		// 调用查看所有商品的方法
		List<Goods> listGoods = igb.query();
		
		// 将集合保存在session里面
		session.setAttribute("listGoods", listGoods);
		
        // 跳到购物首页
		resp.sendRedirect(req.getContextPath()+"/home/shop.jsp");
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
}

LoadDataServlet需要的方法：（商品表）GoodsDao包：

/**
	 * 查看所有商品的方法
	 * @return
	 * @throws SQLException
	 */
	public List<Goods> query() throws SQLException {
		listGoods = new ArrayList<Goods>();
		con = DBhelper.getCon();
		sql = "select gid,gname,gprice from sp_goods";
		ps = con.prepareStatement(sql);
		rs = ps.executeQuery();
		while(rs.next()) {
			goods = new Goods(rs.getInt("gid"), rs.getString("gname"), rs.getDouble("gprice"));
			listGoods.add(goods);
		}
		return listGoods;
	}

然后回到购物首页（shop.jsp页面）绑定数据

1.引用C标签的标签库；

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

2.写在body标签的里面，判断listGoods集合是不是空；

<c:if test="${empty listGoods }">
        <jsp:forward page="/loadDataServlet.do"></jsp:forward>
</c:if>

3.绑定listGoods集合里面商品的数据；

<c:forEach var = "g" items="${listGoods }">
        <tr align = "center">
            <td>${g.gid }</td>
            <td>${g.gname }</td>
            <td>${g.gprice }</td>
            <td>
                <%-- 传入一个要加入到购物车的商品编号gid = ${g.gid} --%>
                <a href = "${pageContext.request.contextPath }/addCartServlet.do?gid=${g.gid}">加入购物车</a>
            </td>
        </tr>
 </c:forEach>

第二步：点击加入购物车进入我的购物车页面

绑定数据成功之后，点击加入购物车超链接；

<a href = "${pageContext.request.contextPath }/addCartServlet.do?gid=${g.gid}">加入购物车</a>

        跳到Servlet包：LoadCartDataServlet；

作用：用来绑定加入到购物车页面里面商品的数据。

@WebServlet("/loadCartDataServlet.do")
public class LoadCartDataServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {	
		// 获取out和session内置对象
		PrintWriter out = resp.getWriter();
		HttpSession session = req.getSession();
		
		ICartBiz icb = new CartBiz();
		
		// 从session里面获取当前登录的用户对象
		User user = (User)session.getAttribute("user");
		
		// 通过用户ID从购物表里面获取该用户加入到购物车里面所有商品
		List<Cart> listCart = icb.query(user);
		
		// 将购物车集合保存到request里面
		req.setAttribute("listCart", listCart);
		
		//跳转到我的购物车界面
		req.getRequestDispatcher("/home/cart.jsp").forward(req, resp);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
}

LoadCartDataServlet需要的方法：（购物车表）CartDao包：

	/**
	 * 通过用户id从购物车里面查询该用户的所有商品的方法
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public List<Cart> query(User user) throws Exception{
		listCart = new ArrayList<>();
		con = DBhelper.getCon();
		sql = "select * from sp_cart where uuid = "+user.getUuid()+" order by cid";
		ps = con.prepareStatement(sql);
		rs = ps.executeQuery();
		while(rs.next()) {
			//获取rs里面的商品名称
			String gname = rs.getString("gname");
			//调用通过商品名称获取商品对象的方法
			Goods goods = igb.querydg(gname);
			cart = new Cart(rs.getInt("cid"), goods, rs.getInt("gcount"), rs.getDouble("cprice"), rs.getInt("uuid"));
			listCart.add(cart);
		}
		return listCart;
	}

第三步：加入到我的购物车，对商品数量的更改以及商品总价的计算

        加入购物车的Servlet：AddCartServlet；

@WebServlet("/addCartServlet.do")
public class AddCartServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
		// 获取out和session内置对象
		PrintWriter out = resp.getWriter();
		HttpSession session = req.getSession();
		
		IGoodsBiz igb = new GoodsBiz();
		ICartBiz icb = new CartBiz();
		
		// 从session里面获取登录的用户对象
		User user = (User)session.getAttribute("user");
		
		// 获取前端要加入到购物车的商品编号
		Integer gid = Integer.parseInt(req.getParameter("gid"));
		
		Goods goods = igb.querydg(gid);
		
		// 先通过用户ID和商品名在购物车里面查询该商品是否已经存在购物车
		Cart cart = icb.query(goods.getGname(), user);
		if(null == cart) {// 当前用户没有在购物车里面添加过商品
			// 创建一个购物车对象
			cart = new Cart();
			cart.setGoods(goods);
			cart.setGcount(1);
			cart.calcPrice();// 计算购物车里面商品总价
			cart.setUuid(user.getUuid());
			
			// 调用往购物车表里面增加数据的方法
			int n = icb.insert(cart);
			
			if(n > 0) {// 加入购物车成功
				resp.sendRedirect(req.getContextPath()+"/loadCartDataServlet.do");
			}else {// 加入购物车失败
				out.println("<script>alert('加入购物车失败！');location.href = '"+req.getContextPath()+"/home/shop.jsp';</script>");
			}
		}else {// 该商品已经存在购物车里面，只需要修改商品数量即可
			// 调用通过用户ID和商品名修改购物车里面商品数量的方法
			// 计算修改后的商品的价格
			Double cprice = (cart.getGcount() + 1) * goods.getGprice();
			int i = icb.update(goods.getGname(), user, cart.getGcount() + 1, cprice);
			
			if(i > 0) {
				resp.sendRedirect(req.getContextPath()+"/loadCartDataServlet.do");
			}else {
				out.println("<script>alert('加入购物车失败！');location.href = '"+req.getContextPath()+"/home/shop.jsp';</script>");
			}
			
		}
		
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
}

AddCartServlet需要的方法：1.（商品表）GoodsDao包：

/**
	 * 查看所有商品的方法
	 * @return
	 * @throws SQLException
     */
public List<Goods> query() throws SQLException {
		listGoods = new ArrayList<Goods>();
		con = DBhelper.getCon();
		sql = "select gid,gname,gprice from sp_goods";
		ps = con.prepareStatement(sql);
		rs = ps.executeQuery();
		while(rs.next()) {
			goods = new Goods(rs.getInt("gid"), rs.getString("gname"), rs.getDouble("gprice"));
			listGoods.add(goods);
		}
		return listGoods;
	}
/**
	 * 通过查询单个商品的方法
	 * @param gid
	 * @return
	 * @throws SQLException
	 */
	public Goods querydg(Integer gid) throws SQLException{
		con = DBhelper.getCon();
		sql = "select gid,gname,gprice from sp_goods where gid = " + gid;
		ps = con.prepareStatement(sql);
		rs = ps.executeQuery();
		if(rs.next()) {
			goods = new Goods(rs.getInt("gid"),rs.getString("gname"),rs.getDouble("gprice"));
		}
		return goods;
	}

2.（购物车表）CartDao包：

/**
	 * 通过商品名字和用户编号从购物车里面查询商品对象，验证是否存在
	 * @param gname
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public Cart query(String gname,User user) throws Exception{
		con = DBhelper.getCon();
		sql = "select * from sp_cart where gname = '"+gname+"' and uuid = "+user.getUuid()+"";
		ps = con.prepareStatement(sql);
		rs = ps.executeQuery();
		if(rs.next()) {
			Goods goods = new Goods();
			goods.setGprice(rs.getDouble("gprice"));
			cart = new Cart();
			cart.setGcount(rs.getInt("gcount"));// 只需要商品数量
			cart.setGoods(goods);
		}
		DBhelper.closeObj(con, ps, rs);
		return cart;
	}
/**
	 * 增加商品的方法
	 * @param cart
	 * @return
	 * @throws Exception
	 */
	public int insert(Cart cart) throws Exception{
		con = DBhelper.getCon();
		sql = "insert into sp_cart(gname,gprice,gcount,cprice,uuid) values(?,?,?,?,?)";
		ps = con.prepareStatement(sql);
		ps.setString(1, cart.getGoods().getGname());
		ps.setDouble(2, cart.getGoods().getGprice());
		ps.setInt(3, cart.getGcount());
		ps.setDouble(4, cart.getCprice());
		ps.setInt(5, cart.getUuid());
		n = ps.executeUpdate();
		return n;
	}
/**
	 * 通过商品名字和用户编号修改购物车里面商品的数量
	 * @param gname 要修改的商品名字
	 * @param user 用户对象（用户的ID属性）
	 * @param gcount 修改后的商品数量
	 * @param cprice 修改后的商品价格
	 * @return
	 * @throws Exception
	 */
	public int update(String gname,User user,Integer gcount,Double cprice) throws Exception{
		con = DBhelper.getCon();
		sql = "update sp_cart set gcount = ?,cprice = ? where gname = '"+gname+"'"
				+ "and uuid = "+user.getUuid()+"";
		ps = con.prepareStatement(sql);
		ps.setInt(1, gcount);
		ps.setDouble(2, cprice);
		n = ps.executeUpdate();
		DBhelper.closeObj(con, ps, rs);
		return n;
	}

第四步：实现删除我的购物车商品的功能

        点击删除链接到删除购物车商品的Servlet：DeleteCartServlet；

<a onclick="return confirm('你确定要删除该商品？')" href = "${pageContext.request.contextPath}/deleteCartServlet.do?gname=${c.goods.gname}">删除</a>

DeleteCartServlet；

@WebServlet("/deleteCartServlet.do")
public class DeleteCartServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {			
			// 创建sessoin和out对象
			HttpSession session = req.getSession();
			PrintWriter out = resp.getWriter();
						
			ICartBiz icb = new CartBiz();
						
			// 从session里面获取用户对象
			User user = (User)session.getAttribute("user");
						
			// 获取前端传来的商品名字(购物车表里面没有商品编号字段)
			String gname = req.getParameter("gname");
						
			// 调用删除购物车商品的方法
			int n = icb.delete(gname, user);
						
			if(n>0) {// 删除成功
					// 跳转到购物车数据加载servlet
					resp.sendRedirect(req.getContextPath()+"/loadCartDataServlet.do");
			}else {// 删除失败
					// 也可以直接跳转到购物车首页(因为删除失败，数据没有发生改变，不用去数据加载servlet里面重新获取数据)
					out.print("<script>alert('删除失败！');location.href='"+req.getContextPath()+"/loadCartDataServlet.do'</script>");
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

DeleteCartServlet需要的方法：（购物车表）CartDao包：

/**
	 * 通过商品名字和用户编号从购物车删除商品对象
	 * @param gname
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int delete(String gname,User user) throws Exception{
		con = DBhelper.getCon();
		sql = "delete from sp_cart where gname = '"+gname+"' and uuid = "+user.getUuid();
		ps = con.prepareStatement(sql);
		n = ps.executeUpdate();
		DBhelper.closeObj(con, ps, rs);
		return n;
	}

完
 

功能完善中。。。