MVC购物车01

原创于 2022-04-26 21:00:18 发布

· 549 阅读

2 ·

版权

文章标签：

#java #eclipse #web

本文详细介绍了JavaWeb中的MVC架构模式，解释了Model、View、Controller各自的职责，探讨了MVC与三层架构的区别和联系，强调了其在软件设计中的优点如低耦合和高重用性，同时也指出其可能增加项目复杂性的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JSP的发展

早期只有Servlet，只能使用response输出标签数据，非常麻烦后来。JSP的出现，简化了 Servlet的开发。但是过度的使用JSP，在JSP中写大量的java代码，又前端的页面，造成难以维护，难于分工协作的窘境。再后来，随着java的web开发的逐步完善，公司的开发需要形成一种规范，来更好的管理和维护代码，借鉴MVC的开发模式，使得程序的设计更性。

2.MVC

MVC（Model View Controller）是软件工程中的一种软件架构模式，它把软件系统分为模型、视图和控制器三个基本部分。用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

2.1 MVC每层之间的逻辑关系

M：Model，模型
   JavaBean 完成具体的业务操作，如：查询数据库，封装对象
V：view视图
   JSP、HTML等来进行数据展示
C：Controller控制器
   Servlet获取View的请求，调用模型将数据交给视图进行展示

MVC架构模式就是通过三层架构演变过来的，
M和V其实就是三层架构中的web显示层将显示层一分为二。

2.2 优缺点

> 【优点】
>
> 1. 耦合性低，方便维护，可以利于分工协作
> 2. 重用性高
>
> 【缺点】
>
> 1. 使得项目架构变得复杂，对开发人员要求高

3.三层架构

三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为：界面层[表示层]（User Interface layer）、业务逻辑层（Business Logic Layer）、数据访问层（Data access layer）。

区分层次的目的即为了“高内聚低耦合” 的思想。在软件体系架构设计中，分层式结构是最常见，也是最重要的一种结构。

4.MVC与三层架构的区别

1.MVC架构中的"显示层"和"控制层"——》三层架构中的表现层。
2.MVC架构中的"模型层JavaBean"——》三层架构中的业务逻辑层和数据访问层
总结：MVC架构模式是一个大的概念，而三层架构你可以把它理解为对MVC模式架构的设计的思想，将来在编写代码时要遵循三层架构模式来编写。

三层架构是指软件系统的整体设计分层：业务逻辑层、数据持久化层和表现层。而MVC设计模式只体现在表现层中，即将表现层又分为模型、视图和控制器。

JavaWeb的经历了JSP Model1、JSP Model1二代、JSP Model2三个时期。

MVC模式最早为Trygve Reenskaug提出，为施乐帕罗奥多研究中心（Xerox PARC）的Smalltalk语言发明的一种软件设计模式。

MVC可对程序的后期维护和扩展提供了方便，并且使程序某些部分的重用提供了方便。而且MVC也使程序简化，更加直观。

注意：MVC不是Java的东西，几乎现在所有B/S结构的软件都采用了MVC设计模式。但是要注意，MVC在B/S结构软件并没有完全实现，例如在我们今后的B/S软件中并不会有事件驱动！

===========================总而言之言而总之============================

无论是MVC还是三层架构，都是一种规范，都是奔着"高内聚，低耦合"的思想来设计的。三层中的UI和Servlet来分别对应MVC中的View和Controller，业务逻辑层是来组合数据访问层的原子性功能的。

在三层中，业务逻辑层和数据访问层要遵循面型接口编程的。这种接口定义和具体实现逻辑的分开，非常有利于后续扩展和维护！

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<style type="text/css">
h1 {
	color: plum
}
</style>
</head>
<body>
	<c:if test="${empty goodsList }">
		<jsp:forward page="goodslist.do"></jsp:forward>
	</c:if>


	<h1>
		<small>MVC购物车首页</small>
	</h1>
	<hr>
	<p>欢迎回来！！！--<b style="color: red">$(sessionScope.users.uname)</p></b>
	<h1>
		<button class="btn btn-primary" onclick="location.href='myCart.jsp'">点我去购物车🛒</button>
	</h1>
	<table class="table table-bordered table-striped">
		<tr>
			<th>商品编号</th>
			<th>商品名称</th>
			<th>商品类型</th>
			<th>商品图片</th>
			<th>商品价格</th>
			<th>商品库存</th>
			<th>商品信息</th>
		</tr>

		<c:forEach items="${sessionScope.goodsList}" var="goods">
			<tr>
				<td>${ goods.gid }</td>
				<td>${ goods.gname }</td>
				<td>${ goods.gtype }</td>
				<td>
				<img src="${ goods.image }" width="85" height="75">
				</td>
				<td>${ goods.gprice }</td>
				<td>${ goods.gkc }</td>
				<td>${ goods.ginfo }</td>

				<td><button
						onclick="location.href='${pageContext.request.contextPath }/AddCartServlet?gid=${ goods.gid }'"
						class="btn btn-default">加入🛒</button></td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

<%@ 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>MVC的购物车</title>
</head>
<body>
	<h2>MVC的购物车</h2>
	<c:if test="${empty listCarts }">
		<jsp:forward page="cart.do"></jsp:forward>
	</c:if>
	<a href="index.jsp">返回主页</a>
	<table border="1" width="100%" cellpadding="0" cellspacing="0">
			<tr>
			<th>商品编号</th>
			<th>商品名称</th>
			<th>商品类型</th>
			<th>商品图片</th>
			<th>商品价格</th>
			<th>商品库存</th>
			<th>商品信息</th>
		</tr>

		<c:forEach items="${sessionScope.goodsList}" var="goods">
			<tr>
				<td>${ goods.gid }</td>
				<td>${ goods.gname }</td>
				<td>${ goods.gtype }</td>
				<td>
				<img src="${ goods.image }" width="85" height="75">
				</td>
				<td>${ goods.gprice }</td>
				<td>${ goods.gkc }</td>
				<td>${ goods.ginfo }</td>
				<td>
					<button onclick="edit('mius',${cart.getGoods().getGid()})">-</button>
					<input type="text" style="width: 40px" value="${cart.getCcount()}" />
					<button onclick="edit('add',${cart.getGoods().getGid()})">+</button>
				</td>
				<td>${cart.getCtotal()}</td>
				<td>
					<button onclick="delCart(${cart.getGoods().getGid()})">删除</button>
					<button onclick="updateCart(${cart.getGoods().getGid()})">修改</button>
				</td>

			</tr>
		</c:forEach>

	</table>
	<hr>
	<p align="right" style="font-size: 15px; font-weight: bold">
		[${pageIndex }/${pageMax }] <a href="cart.jsp?pageIndex=1">首页</a> <a
			href="cart.jsp?pageIndex=${pageIndex-1<0?1:pageIndex-1}">上一页</a> <a
			href="cart.jsp?pageIndex=${pageIndex+1>pageMax?pageMax:pageIndex+1}">下一页</a>
		<a href="cart.jsp?pageIndex=${pageMax}">尾页</a>
	</p>

	<script type="text/javascript">
	
		function delCart(id){
			if(window.confirm("您确定要删除吗?")){
				location.href="doDel.jsp?gid="+id;
			}
		}
		
		
		function edit(type,id){
			//根据参数id获取tr标签
			var tr = document.getElementById(id);
			//根据tr获取数量
			var ccount = tr.cells[4].children[1].value;
			console.log(ccount);
			if(type === 'add'){
				ccount++;
			}else if(type==='mius'){
				if(ccount>=1){
					ccount--;
				}
			}
			tr.cells[4].children[1].value = ccount;
		}
		
		function updateCart(id){
			//根据id获取到数量
			var tr = document.getElementById(id);
			var ccount = tr.cells[4].children[1].value;
			location.href="doUpdate.jsp?gid="+id+"&ccount="+ccount;
		}
	
	</script>

</body>
</html>