《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〈/a〉

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

xml中添加如下代码:

〈servlet-name>IndexServlet

〈servlet-class>

org。

bzc.jpetstore。

servlets。

IndexServlet

〈/servlet-class〉

〈url—pattern>/index.do〈/url-pattern>

（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对象，用来存储大类别数据

List〈Category>list=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｝">

outvalue=”$｛category.descn｝"escapeXml="false"/>

〈br>

〈i>＄{category.name｝〈/i〉

〈/td〉

〈/tr〉

〈/c：

forEach〉

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

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

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

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

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

4、添加商品到购物车

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

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

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

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>

〈servlet—name>ItemServlet

/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〉

〈tablealign="left"bgcolor="#008800”border=”0”cellspacing="2”cellpadding="2"〉

〈tr〉〈tdbgcolor="#FFFF88”〉

〈ahref="index。

do”〉

〈b〉〈/b>

〈/table>

〈/td>

〈h2align="center">ShoppingCart

〈formmethod="post"action=”$｛pageContext。

request.contextPath}/item。

do？

path=updateCartQuantities"〉

〈trbgcolor=”＃cccccc">

ItemID〈/b〉〈td>〈b>Description〈td>

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

〈/tr>

〈c：

iftest=”＄{cart。

numberOfItems==0｝">

〈trbgcolor=”＃FFFF88">〈/td>〈/tr>

if〉

〈c:

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

〈trbgcolor="＃FFFF88">

〈b〉

do?

path=show&itemId=＄｛cartitem。

item.itemid}"〉

$｛cartitem.item。

itemid｝〈/b>

〈td〉

$｛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}”/〉

listprice}〈/td>

〈tdalign=”right"〉＄｛cartitem。

total}〈/td>

path=removeItemFromCart&workingItemId=＄{cartitem。

item.itemid｝">

〈imgborder=”0”src="＄｛pageContext。

request.contextPath｝/images/button_remove。

gif"/>〈/td>

forEach〉

〈b>SubTotal:

${cart。

subTotal｝〈br/>

request。

contextPath}/images/button_update_cart。

gif”name="update”/>〈/td〉

 ；

〈/tr>

〈center〉

运行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