《WEB应用与开发》网上购物系统课程设计报告.docx

《WEB应用与开发》网上购物系统课程设计报告.docx

《《WEB应用与开发》网上购物系统课程设计报告.docx》由会员分享，可在线阅读，更多相关《《WEB应用与开发》网上购物系统课程设计报告.docx（19页珍藏版）》请在冰点文库上搜索。

《WEB应用与开发》网上购物系统课程设计报告

HUNANCITYUNIVERSITY

WEB应用与开发课程设计

报告

设计题目:

网上购物系统

专业：

信息管理与信息系统

学生姓名:

XXX

班级学号：

XXXX

分组成员：

XXXXXXXXXXXXXXXXXXX

指导教师：

XXXXXXXXXXXXXXXXX

2012年06月08日

《WEB应用与开发》课程设计报告

XXXXXXXXXXXXXXXXXXX

一、设计时间

2012年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、大类别显示

应用程序的首页只提供了一个EntertheStore的链接时,将导航到大类别页面，要完成这个过程，需要执行一下步骤：

（1）设置链接，为“EntertheStore”添加链接,代码如下:

〈ahref=“index.do”〉EntertheStore

（2）设置配置文件，在web。

xml中添加如下代码:

〈servlet〉

IndexServlet〈/servlet-name>

〈servlet—class>

org。

bzc。

jpetstore。

servlets.IndexServlet

〈/servlet—class>

〈url—pattern>/index.do

〈/servlet-mapping>

（3）在src目录的org\bzc\jpetstore\servlets文件夹中新建名为IndexServlet的类，Servlet本身并没有处理业务数据，而是调用CategoryBiz类的相关方法操作，具体代码如下：

publicclassIndexServletextendsHttpServlet｛

publicvoiddoGet（HttpServletRequestrequest，

HttpServletResponseresponse）

throwsServletException，IOException｛

doPost（request,response）;}

publicvoiddoPost（HttpServletRequestrequest，

HttpServletResponseresponse）

throwsServletException,IOException{

CategoryBizcategorybiz=newCategoryBiz（）；

Stringtourl="”；

//因为其他页面也需要获取大类别数据，所以存放于session中

HttpSessionsession=request。

getSession（）;

//初始化一个List对象，用来存储大类别数据

Listlist=newArrayList（）；

try{

//调用业务对象获取数据

list=categorybiz.searchById（0,”"）；

tourl=”/catalog/Main.jsp”；｝

catch（Exceptione）{

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（）方法提供这个功能.具体代码如下:

publicclassCategoryBiz{

ControlDBcontrolDB=null；

publicCategoryBiz（）{

controlDB=newControlDB（）;

｝

publicListsearchById（intflag，Stringcatid）{

Stringsql=””;

Listlist=newArrayList（）；

if（flag==0）｛

sql="select*fromcategory";

｝elseif（flag==1）{

sql="select＊fromcategorywherecatid=’”+catid+”'";

｝

System.out。

println（sql）;

try

｛list=controlDB.executeQueryCategory（sql）;｝

catch（Exceptione）

{e.printStackTrace（）;｝

returnlist；

}

｝

（5）编写封装与数据库操作的ControlDB类。

（6）编写main。

jsp页面，它用来显示大类别数据。

main.jsp页面的部分代码如下：

……

〈c:

forEachitems="＄{categroyList}"var="category”>

〈tr>

〈ahref="＄｛pageContext。

request.contextPath}/category.do？

path=show&categoryId=${category.catid｝"〉

〈c：

outvalue=”＄{category.descn｝"escapeXml=”false"/>

〈br>

$｛category.name}〈/i>

〈/td〉

〈/c:

forEach>

运行Tomcat，执行此部分操作，最终效果如图所示：

2、小类别显示，完成步骤同大类别显示

运行Tomcat，执行此部分操作,最终效果如图所示:

3、商品显示,完成步骤同大类别显示

运行Tomcat，执行此部分操作,最终效果如图所示:

4、添加商品到购物车

在商品的列表页面提供了添加到购物车的链接.单击AddtoCart链接可以把与之对应的商品添加入购物车中。

要完成这个过程，需要执行一下步骤:

（1）设置链接，为商品添加链接，在商品上创建链接的代码如下：

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〉

〈servlet-name>ItemServlet〈/servlet-name〉

/item。

do〈/url-pattern〉

〈/servlet—mapping>

（3）在src目录的org\bzc\jpetstore\servlets文件夹中新建名为ProductServlet的类，Servlet本身并没有处理业务数据，而是调用ItemBiz类的相关方法操作，具体代码如下:

publicclassProductServletextendsHttpServlet｛

publicvoidinit（）throwsServletException{}

publicvoiddestroy（）｛｝

publicvoiddoGet（HttpServletRequestrequest，

HttpServletResponseresponse）

throwsServletException，IOException{

doPost（request，response）;

｝

publicvoiddoPost（HttpServletRequestrequest，

HttpServletResponseresponse）

throwsServletException，IOException｛

Stringpath=request.getParameter（"path"）；

HttpSessionsession=request。

getSession（）；

ListlistProduct=newArrayList（）;

ProductBizproductbiz=newProductBiz（）;

ItemBizitembiz=newItemBiz（）;

Stringtourl=”";

if（"show”。

equals（path））{

StringproductId=request。

getParameter（”productId"）;

try｛

List〈Item〉itemList=itembiz.searchByproductId（productId）;

Productproduct=（Product）productbiz.searchById（1,productId）

.get（0）;

session。

setAttribute（”itemList”,itemList）；

session.setAttribute（"product”,product）；

｝catch（Exceptione）{

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页面的部分代码如下：

〈tr〉〈tdbgcolor="＃FFFF88">

do">

〈b>〈fontcolor="BLACK"size=”2”〉<<MainMenu〈/font〉

〈/td〉

〈/td>〈tdvalign="top”align="center">

〈h2align=”center">ShoppingCart

request。

contextPath｝/item.do?

path=updateCartQuantities”>

〈trbgcolor=”＃cccccc”>

〈td>〈b〉ItemID〈/b>ProductIDDescription〈b>InStock？

Quantity〈/b〉〈td〉〈b>ListPrice〈/b>〈td〉〈b>TotalCost〈/b〉〈/td>〈td〉 ；

〈/tr>

〈c：

iftest="＄｛cart。

numberOfItems==0}">

〈trbgcolor=”＃FFFF88”〉〈b>Yourcartisempty.

〈/c：

if〉

forEachitems="$｛cartItems｝”var="cartitem”〉

request.contextPath｝/item.do?

path=show＆itemId=$｛cartitem.item.itemid}"〉

$｛cartitem。

item.itemid}〈/a>〈/b〉

〈td〉＄｛cartitem。

item.productid}

＄｛cartitem。

item。

attr1}

$｛cartitem。

item。

attr2｝

$｛cartitem.item.attr3｝

$｛cartitem。

item。

attr4｝

$｛cartitem.item。

attr5｝

${product。

name}

〈tdalign="center”〉$｛cartitem.inStock}〈/td>

〈tdalign=”center”>

item。

itemid}”value=”${cartitem。

quantity}"/>

〈tdalign=”right"〉＄{cartitem。

item.listprice}〈/td>

total}

〈td〉〈ahref=”${pageContext。

request.contextPath｝/item.do？

path=removeItemFromCart&workingItemId=＄｛cartitem。

item。

itemid}"〉

request.contextPath｝/images/button_remove。

gif”/>〈/a>〈/td〉

〈/tr〉

forEach〉

〈trbgcolor=”＃FFFF88">

〈tdcolspan=”7"align=”right”〉

〈b〉SubTotal：

＄{cart.subTotal｝〈/b〉〈br/〉

 〈/td〉

运行Tomcat，执行此部分操作，最终效果如图所示:

5、购物车中商品的管理

在商品的列表页面提供了更改商品数量的输入框，用户可以更改数量，然后单击updatecart链接，完成更新购物车的操作，当操作执行完成后，返回本页面。

单击remove链接可以把与之对应的商品从购物车中删除.

（1）设置链接。

如果用户执行“删除”操作，代码设置为：

〈ahref=”＄｛pageContext。

request.contextPath｝/item.do?

path=addItemToCart&itemId=${item.itemid｝&product”〉

如果用户执行“修改”操作，将提交表单代码设置为：

〈frommethod=”post”action="＄{pageContext.request.contextPath}

/item.do？

path=updateCartQuantities”>

（2）设置配置文件.

（3）在ItemServlet类中添加处理修改和删除功能的代码，具体如下:

//获取商品标号

StringworkingItemId=request.getParameter（"itemId”）；

Cartcart=null;

CartItemcartitem=null;

//应该有个错误信息页跳转

if（session.getAttribute（"cartItems”）==null）{

cart=newCart（）；

｝else{

cart=（Cart）session.getAttribute（"cart”）;

}

//如果购物车中存在此商品，删除

if（cart。

containsItemId（workingItemId））｛

cart.incrementQuantityByItemId（workingItemId）;

}else｛

Itemitem=（Item）itembiz。

searchById（1，workingItemId）。

get（0）;

cart.addItem（item，true）;

｝

ListcartItems=cart。

getCartItemList（）;

session。

setAttribute（”cartItems",cartItems）；

session。

setAttribute（”cart”,cart）；

tourl="/cart/Cart.jsp”；

｝elseif（”removeItemFromCart”。

equals（path））{

StringworkingItemId=request。

getParameter（"workingItemId"）；

Cartcart=null;

CartItemcartitem=null;

//应该有个错误信息页跳转

if（session。

getAttribute（”cartItems"）==null）｛

tourl=”/cart/Cart.jsp”;

request。

getRequestDispatcher（tourl）.forward（request，response）;｝

ListcartItems=cart。

getCartItemList（）；

session.setAttribute（"cartItems”,cartItems）；

session。

setAttribute（”cart"，cart）;

tourl="/cart/Cart。

jsp"；

}elseif（"updateCartQuantities".equals（path））{

Cartcart=null;

CartItemcartitem=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（）；

//定义一个ma