HUNAN CITY UNIVERSITY
WEB应用与开发课程设计
报 告
设计题目： 网上购物系统
专 业： 信息管理与信息系统
学生姓名： XXX
班级学号： XXXX
分组成员： XXXXXXXXXXXXXXXXXXX
指导教师： XXXXXXXXXXXXXXXXX
2012 年 06 月 08 日
《WEB应用与开发》课程设计报告
XXXXXXXXXXXXXXXXXXX
一、设计时间
20##年6月 04日-----6月08日
总的设计时间为1周， 第17周。具体安排如下：
1、分析设计准备阶段（第17周周一至周二）
2、编程调试阶段（第17周周三至第17周周四）
3、书写设计报告和书写说明书阶段（第17周周五）
4、考核阶段（第17周周五）
二、设计地点
信息科学与工程学院机房（新校区510机房）
三、设计目的
通过对一些实际问题的软件设计，使学生能将课本的理论知识应用于实践，编制出较为实用的小系统，培养学生查阅资料的习惯，提高学生独立思考和解决问题的能力。
1、巩固学习WEB基础知识方面的基本算法,进一步熟悉基本概念。
2、熟练html标记语言、Java语言的应用、tomcat软件和SQL数据库的应用。
3、运用所学的WEB知识，能够实际做出较为实用的小项目，增进一些实际问题的软、硬件知识的掌握。
4、培养查阅资料,独立思考问题的能力。
四、设计小组成员
XXXXXXXXXXXXXXXXXXXXXXXXXXXX
五、指导老师
XXXXXXXXXXXXXXXXXXXXXX
六、设计课题
网上购物系统——JpetStore网上宠物商店
七、基本思路及关键问题的解决方法
1、购物系统的需求与分析：在正式开发之前，应先了解系统应实现的功能。为了解系统的需求，通过观察著名网站的电子商务界面淘宝网站等，可以发现共同拥有d饿选项有：商品的图片、商品的分类提供搜索商品的功能等、用户登录后方可goum 商品。用户选中的一些商品先存放与购物车中，在最后下订单时进行汇总。因此可初步了解到JpetStore购物系统的基本功能。普通用户可以浏览所以大类别商品，查看某一大类别商品下的所有小类别商品分类、小类别商品下的所有商品，搜索商品，将商品添加到购物车，更新购物车等。
2、数据库表的设计：数据库设计时系统开发过程的一个重要环节，它具体可以分为两部分：一个是概念模型设计，即E-R图的设计；二是物理模型设计，即数据库/表字段的设计。
3、购物车的理解、购物清单结算
4、运行工程
(本人有完整的项目需要的话发邮件给我491990141@qq.com)
八、算法及流程图
（一）功能模块的实现
系统功能模块的划分
前台系统顺序流程图
1、大类别显示
应用程序的首页只提供了一个Enter the Store的链接时，将导航到大类别页面，要完成这个过程，需要执行一下步骤：
(1)设置链接，为“Enter the Store”添加链接，代码如下：
<a href=“index.do”> Enter the Store </a>
(2)设置配置文件，在web.xml中添加如下代码：
<servlet>
<servlet-name>IndexServlet</servlet-name>
<servlet-class>
org.bzc.jpetstore.servlets.IndexServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>IndexServlet</servlet-name>
<url-pattern>/index.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
(3)在src目录的org\bzc\jpetstore\servlets文件夹中新建名为IndexServlet的类，Servlet本身并没有处理业务数据，而是调用CategoryBiz类的相关方法操作，具体代码如下：
public class IndexServlet extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);}
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
CategoryBiz categorybiz = new CategoryBiz();
String tourl = "";
//因为其他页面也需要获取大类别数据，所以存放于session中
HttpSession session = request.getSession();
//初始化一个List对象，用来存储大类别数据
List<Category> list = new ArrayList<Category>();
try {
//调用业务对象获取数据
list = categorybiz.searchById(0, "");
tourl = "/catalog/Main.jsp";}
catch (Exception e) {
tourl = "index.html";
e.printStackTrace();}
session.setAttribute("categroyList", list);
request.getRequestDispatcher(tourl).forward(request, response);
}
}
(4)在src目录的org\bzc\jpetstore\biz文件夹中新建名为CategoryBiz的类，CategoryBiz与数据库进行相互。此处需要查询的是所有的大类别数据，后面还需要根据大类别ID查询大类别数据，将这两部分整合，均由searchByld()方法提供这个功能。具体代码如下：
public class CategoryBiz {
ControlDB controlDB = null;
public CategoryBiz() {
controlDB = new ControlDB();
}
public List searchById(int flag, String catid) {
String sql = "";
List list = new ArrayList();
if (flag == 0) {
sql = "select * from category";
} else if (flag == 1) {
sql = "select * from category where catid='" + catid + "'";
}
System.out.println(sql);
try
{ list = controlDB.executeQueryCategory(sql);}
catch (Exception e)
{ e.printStackTrace();}
return list;
}
}
(5)编写封装与数据库操作的ControlDB类。
(6)编写main.jsp页面，它用来显示大类别数据。main.jsp页面的部分代码如下：
……
<c:forEach items="${categroyList}" var="category">
<tr>
<td>
<a href="${pageContext.request.contextPath}/category.do?
path=show&categoryId=${category.catid}">
<c:out value="${category.descn}" escapeXml="false"/>
</a>
<br>
<font size="2"><i>${category.name}</i> </font>
</td>
</tr>
</c:forEach>
运行Tomcat,执行此部分操作，最终效果如图所示：
2、小类别显示,完成步骤同大类别显示
运行Tomcat,执行此部分操作，最终效果如图所示：
3、商品显示,完成步骤同大类别显示
运行Tomcat,执行此部分操作，最终效果如图所示：
4、添加商品到购物车
在商品的列表页面提供了添加到购物车的链接。单击Add to Cart链接可以把与之对应的商品添加入购物车中。要完成这个过程，需要执行一下步骤：
(1)设置链接，为商品添加链接，在商品上创建链接的代码如下：
<a href=”${pageContext.request.contextPath}/item.do? path=addItemToCart&itemId=${item.itemid}&product”>
(2)设置配置文件，在web.xml中添加如下代码：
<servlet>
<servlet-name>ItemServlet</servlet-name>
<servlet-class>
org.bzc.jpetstore.servlets.ItemServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ItemServlet</servlet-name>
<url-pattern>/item.do</url-pattern>
</servlet-mapping>
(3)在src目录的org\bzc\jpetstore\servlets文件夹中新建名为ProductServlet的类，Servlet本身并没有处理业务数据，而是调用ItemBiz类的相关方法操作，具体代码如下：
public class ProductServlet extends HttpServlet {
public void init() throws ServletException { }
public void destroy() { }
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String path = request.getParameter("path");
HttpSession session = request.getSession();
List listProduct = new ArrayList();
ProductBiz productbiz = new ProductBiz();
ItemBiz itembiz = new ItemBiz();
String tourl = "";
if ("show".equals(path)) {
String productId = request.getParameter("productId");
try {
List<Item> itemList = itembiz.searchByproductId(productId);
Product product = (Product) productbiz.searchById(1, productId)
.get(0);
session.setAttribute("itemList", itemList);
session.setAttribute("product", product);
} catch (Exception e) {
e.printStackTrace();}
tourl = "/catalog/Product.jsp";
} else {
listProduct = productbiz.searchById(0, "");
tourl = "index.html";
session.setAttribute("listProduct", listProduct);
}
request.getRequestDispatcher(tourl).forward(request, response);
}
}
(4)编写Cart.jsp页面，来显示购物车中的商品项数据，Cart.jsp页面的部分代码如下：
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td valign="top" width="20%" align="left">
<table align="left" bgcolor="#008800" border="0" cellspacing="2" cellpadding="2">
<tr><td bgcolor="#FFFF88">
<a href="index.do">
<b><font color="BLACK" size="2"><< Main Menu</font></b></a>
</td></tr>
</table>
</td><td valign="top" align="center">
<h2 align="center">Shopping Cart</h2>
<form method="post" action="${pageContext.request.contextPath}/item.do?path=updateCartQuantities">
<table align="center" bgcolor="#008800" border="0" cellspacing="2" cellpadding="5">
<tr bgcolor="#cccccc">
<td><b>Item ID</b></td> <td><b>Product ID</b></td> <td><b>Description</b></td> <td><b>In Stock?</b></td> <td><b>Quantity</b></td> <td><b>List Price</b></td> <td><b>Total Cost</b></td> <td> </td>
</tr>
<c:if test="${cart.numberOfItems==0}">
<tr bgcolor="#FFFF88"><td colspan="8"><b>Your cart is empty.</b></td></tr>
</c:if>
<c:forEach items="${cartItems}" var="cartitem">
<tr bgcolor="#FFFF88">
<td><b>
<a href="${pageContext.request.contextPath}/item.do?path=show&itemId=${cartitem.item.itemid}">
${cartitem.item.itemid}</a></b></td>
<td>${cartitem.item.productid}</td>
<td>
${cartitem.item.attr1}
${cartitem.item.attr2}
${cartitem.item.attr3}
${cartitem.item.attr4}
${cartitem.item.attr5}
${product.name} </td>
<td align="center">${cartitem.inStock}</td>
<td align="center">
<input type="text" size="3" name="quantity${cartitem.item.itemid}" value="${cartitem.quantity}" />
<td align="right">${cartitem.item.listprice}</td>
<td align="right">${cartitem.total}</td>
<td><a href="${pageContext.request.contextPath}/item.do?path=removeItemFromCart&workingItemId=${cartitem.item.itemid}">
<img border="0" src="${pageContext.request.contextPath}/images/button_remove.gif" /></a></td>
</tr>
</c:forEach>
<tr bgcolor="#FFFF88">
<td colspan="7" align="right">
<b>Sub Total: ${cart.subTotal} </b><br />
<input type="image" border="0" src="${pageContext.request.contextPath}/images/button_update_cart.gif" name="update" /></td>
<td> </td>
</tr>
</table>
<center>
运行Tomcat,执行此部分操作，最终效果如图所示：
5、购物车中商品的管理
在商品的列表页面提供了更改商品数量的输入框，用户可以更改数量，然后单击updatecart链接，完成更新购物车的操作，当操作执行完成后，返回本页面。单击remove链接可以把与之对应的商品从购物车中删除。
(1)设置链接。如果用户执行“删除”操作，代码设置为：
<a href=”${pageContext.request.contextPath}/item.do? path=addItemToCart&itemId=${item.itemid}&product”>
如果用户执行“修改”操作，将提交表单代码设置为：
<from method=”post” action=”${pageContext.request.contextPath}
/item.do?path=updateCartQuantities”>
(2)设置配置文件。
(3)在ItemServlet类中添加处理修改和删除功能的代码，具体如下：
//获取商品标号
String workingItemId = request.getParameter("itemId");
Cart cart = null;
CartItem cartitem = null;
//应该有个错误信息页跳转
if (session.getAttribute("cartItems") == null) {
cart = new Cart();
} else {
cart = (Cart) session.getAttribute("cart");
}
//如果购物车中存在此商品，删除
if (cart.containsItemId(workingItemId)) {
cart.incrementQuantityByItemId(workingItemId);
} else {
Item item = (Item) itembiz.searchById(1, workingItemId).get(0);
cart.addItem(item, true);
}
List cartItems = cart.getCartItemList();
session.setAttribute("cartItems", cartItems);
session.setAttribute("cart", cart);
tourl = "/cart/Cart.jsp";
} else if ("removeItemFromCart".equals(path)) {
String workingItemId = request.getParameter("workingItemId");
Cart cart = null;
CartItem cartitem = null;
// 应该有个错误信息页跳转
if (session.getAttribute("cartItems") == null) {
tourl = "/cart/Cart.jsp";
request.getRequestDispatcher(tourl).forward(request, response);}
List cartItems = cart.getCartItemList();
session.setAttribute("cartItems", cartItems);
session.setAttribute("cart", cart);
tourl = "/cart/Cart.jsp";
} else if ("updateCartQuantities".equals(path)) {
Cart cart = null;
CartItem cartitem = null;
if (session.getAttribute("cartItems") == null) {
tourl = "/cart/Cart.jsp";
request.getRequestDispatcher(tourl).forward(request, response);
} else {cart = (Cart) session.getAttribute("cart");}
List<CartItem> cartItem = cart.getCartItemList();
// 定义一个map来接收页面上传来的所有值
Map<String, String> parameterMap = new HashMap<String, String>();
for (int i = 0; i < cartItem.size(); i++) {
String key = cartItem.get(i).getItem().getItemid();
String value = request.getParameter("quantity" + key);
System.out.println(value + "**********************");
parameterMap.put(key, value);
}
// 调用修改数量的方法
cart.updateCartQuantities(parameterMap);
List<CartItem> cartItems = cart.getCartItemList();
session.setAttribute("cartItems", cartItems);
session.setAttribute("cart", cart);
tourl = "/cart/Cart.jsp";
} else if ("checkout".equals(path)) {
tourl = "/cart/Checkout.jsp";
} else if ("viewCart".equals(path)) {
tourl = "/cart/Cart.jsp";
} else {
listItem = itembiz.searchById(0, "");
tourl = "index.html";
session.setAttribute("listItem", listItem);}
request.getRequestDispatcher(tourl).forward(request, response);
}
}
（二）运行工程
1、使用工具：JDK：6.0、Web服务器：Tomcat 6.0、数据库服务器：SQL 20##、开发平台：MyEclipse 6.0
2、运行程序：Tomcat启动后，在地址栏中输入http://localhost:8080/jpetstore ，进入宠物商店的欢迎页面。
九、调试过程中出现的问题及相应解决办法
1、数据库与JSP连接不上，导致只出现设置的界面而没有数据显示。解决方法：在org\bzc\jpetstore\db\ConnectionFactory.java中加载数据库驱动如下：
driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
dbURL = "jdbc:sqlserver://localhost:1433;databaseName=wpet";
2、在设置系统界面时，由于对代码的不熟悉，导致走了很多弯路。解决方法：参考了其它系统的界面进行设计，以符合要求。
十、课程设计心得体会
课程设计，我明白了要想学习好一门课程，一定要理论与实践相结合，Web技术更是如此。要在不同的浏览器上做调试试验，解决兼容性问题。在很多的时候总是感觉捉襟见肘。这种感觉总有一种让人想重新来过的冲动。Web技术是计算机方面的重点实践应用课程，书到用时方恨晚。以后的这种体会会更加明显，所以课程设计在我看来不仅仅是一个知识的巩固，还是一个让人醒悟的良药。
这次课程设计我们小组选做的是基于WEB的网上购物系统，主要是用于动态网页实现购物的功能。系统分为用SQL实现的数据库和用JSP设置的界面以及两者的相互连接。
在整个设计过程中，我们始终保持着严谨、认真的治学态度。从设计最初的构思到最后的实现都花费了大量的心血，没有半点马虎。虽然界面的设置已经完成，但对功能的设置还不够完善，还有待进一步的熟悉与加强。所以在准备工作中要正确分析社会需求了解现实应用，画出流程图，把大体框架做好，然后再逐一细化。我们没能做到面面俱到，但一定要做到步步扎实，作为一个程序编程人员，要保持清醒的头脑，以现实为依据，需求为导向，让自己的每一行代码都能实现自己的意义。
通过这次课程设计，我收获的不仅仅是课程上的知识得到实际应用，还有编程的基本操作。使我对所学专业知识得到了充分的应用，锻炼了我发现问题，分析、思考问题、解决问题的能力，使我的实际动手操作能力有所提高，而不仅仅是局限于书本上的知识，对今后的工作学习都大有益处。
十一、参考文献
[1]郭真，王国辉.《JSP程序设计教程》. ——北京：人民邮电出版社,2008.5
[2]张孝祥，徐明华.《JSP基础与案例开发详解》. ——北京：清华大学出版社,2009.8