计算机网站设计.doc

20 购物网站设计和实现购物网站设计和实现 目 录第一章：绪论11设计思想12开发工具的选用及介绍13实现的关键技术第二章：网站总体分析与设计21网站系统分析22主页设计23数据字典第三章：详细设计31购物系统 311功能 312组成结构 313界面设计与重点难点代码设计32产品介绍系统321功能介绍 322组成结构 323界面设计与重点难点代码设计第四章：结束语 夏 勇 2005年4月15日第一章 绪论近年来，随着internet的迅速崛起，互联网已日益成为收集提供信息的最佳渠道并逐步进入传统的流通领域。于是电子商务开始流行起来，越来越多的商家在网上建起在线商店，向消费者展示出一种新颖的购物理念。网上订购系统作为B2S,B2C(Business to customer,即企业对消费者)，C2C(Customer to customer,即消费者对消费者)电子商务的前端商务平台，在其商务活动全过程中起着举足轻重的作用。本文旨在商讨如何建设B2C的网上购物系统。1.1设计思想通过网站，全面宣传展示企业的形象和进行网上销售产品，打破传统的销售模式，提高企业的办事效率。1.2JSP的优势：JAVA server pages:“JAVA服务器网页”,一般简称为“JSP”,JSP产生的执行结果都是标准的HTML格式,而且这些程序师在网络服务端中执行,使用一般的浏览器(如IE或Netscape)都可以正确的获得JSPDE “执行”结果，并且将这JSP执行的结果直接在浏览器中“浏览”，不像Javascrlpt是在客户端（client）的浏览器上执行。JSP的特点：任何开发工具皆可开发JSP只要使用一般的文书编辑程序，如Windwos记事本，就可以编辑。当然，其他网页发展工具，例如，Frontpage Express,Frontpage等也可以；不过还是建议你用记事本来写，既省钱又方便，如实使用那些所见即所得的网页编辑来写JSP，可能会发生一些意想不到的离奇状态。JSP直接内嵌在HTML中，非常简单易用，大大降低了程序设计开发的难度。JSP程序中可以直接嵌入Java代码，也可以直接运用Java所提供各类包，这样就大大加强了JSP程序本身的功能。JSP程序在被请求执行时，服务器端相关软件产生Servlet的执行文件，存储于服务器内存中，并将结果返回到客户端，HDBC提供了与数据库产品无关的数据库连接方式，因此JSP程序与客户端系统无关，可以非常方便地跨平台使用。语言相容性高由于JSP采用的是JAVA虚拟机，所以在把程序编译成JAVA虚拟机能够处理的信息后，再由JSVA虚拟机解释执行，这样它就可以运行在不同的平台下，又由于JSP是SUN公司J2EE的两大主流开发系统之一，所以JSP是一种面向对象得编程语言。隐秘安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到HTML文件，原始的JSP程序代码是看不到的！JSP是一种面向对象的编程语言，它的很多实现方法都可以进行封装，这样即使有人下载了JSP的原代码，但是它并不知道类的具体位置，也就不知道他的实现方法。易于操控数据库JSP可以轻易地通过JDBC-ODBC驱动程序连接各种不同的数据库，例如：Acess,Foxpro,dBase,Oracle,Sqlserver等等，另外，JSP亦可将“文本文件”或是“Excel”文件当成数据库用。基于以上原因，所以我选择了JSP结合Frontpage构架电脑网站。1.3实现的关键技术1.3.1Serviet介绍Serviet是使用java servlet应用程序设计接口及相关类和方法的java程序。它在web服务器上或应用服务器上运行并扩展了该服务器的能力。Jaca serclet对于web服务器就好像jaca applet对于web浏览器。Applet装入web浏览器并在web浏览器内执行，而servlet则是装入web服务器并在web服务器内执行。Jaea serclet apl定义了servlet服务器之间的一个标准接口，这使得servlet具有跨服务器平台的特征。1.3.2TOMCAT介绍Tomcat是一个免费的开源的servlet容器，它是apsche基金会的jakarta项目中的一个核心项目，由于apache,sun和其他一些公司及个人共同开发而成。由于有了sun的参与和支持，最新的servlet和jsp规范总能在tomcat中得到体现。与传统的左面应用程序不同，tomcat中的应用程序师一个WAR(web archive)文件。WAR是sun提出的一种web应用程序格式，与JAR类似，也是许多文件的一个压缩包。这个包中的文件按一定目录结构来组织：通常其根目录下包含有html和jsp文件或者包含着两种文件的目录，另外还会有一个WEB-INF目录，这个目录很重要。通常在WEB-INF目录下有一个web.xml文件和一个classes目录，web.xml是这个应用的配置文件，而classes目录下则包含编译好的servlet累和jsp或servlet所依赖的其它内（如javabean）。通常这些所依赖的类也可以打包成JAR方到WEB-TNF下得lib目录下，当然也可以当道系统的CLASSPATH中，但那样移植和管理起来不方便。1.3.3 JDK介绍JDK是整个java的核心，包括了java运行环境（java runtime envirnment）,一堆java工具和java基础的类库（rt.jar）。不论什么java应用服务器实质都是内置了某个版本的JDK。因此掌握JDK是学好java的第一步。1.3.4 JDBC-ODBC技术JDBC是java的开发者sun的javasoft公司制定的java数据库连接（java data base cnnectivity）技术的简称，是为各种常用数据库提供无缝连接的技术。JDBC在web和internet应用程序中的作用和ODBC在windows系列平台应用程序中的作用类似。ODBC（opendata base connectivity），称为开放式数据库互联技术，是由microsort公司倡导并得到世界普遍响应的一门数据库连接技术，如果读者有使用ODBC编程的经验，就会发现JDBC与ODBC很类似。DIBC现在可以连接的数据库包括：xbase ，oracle ，sybase， aceess ，SQLSERVER以及paradox等。1.3.5 JDBC APLJDBC APL使开发者不必不断重写程序而可以建立数据库前台。尽管ANSL委员会有个标准组，但每个数据库系统厂家的系统连接和通讯方法仍然五花八门。为了建立健全独立于平台的应用程序和基于web的小程序，开发人员应考虑用java开发前台连接办法，从外部看，第三方软件开发者通过专用办法，通过本地方法集成客户机方库或通过建立第三层和新协议来满足这种需求。Javasoft是sun公司负责开发java产品的业务单位，和数据库与数据工具厂家一起建立独立于DBMS的机制，使开发人员不必考虑所用的特定数据而编写客户机方应用程序。产生的JDBC APL第一版是核心JDK2的一部分。JDBC向应用程序开发者提供了独立于数据库的统一的APL。这个APL提供了编写的标准和考虑所有不同应用程序设计的标准。其奥秘是一组由驱动程序实现的java接口。驱动程序负责标准JDBC调用向支持的数据库所要的集团调用转变。应用程序编写一次并移植到各种驱动程序上。应用程序不变，驱动程序则各不相同。驱动程序可以用于开发多层数据库设计的中间层，也称中间件（middleware）。除了向开发者提供统一的独立于DBMS的框架外，JDBC还提供了让开发者保持数据库厂家提供的特定功能和方法。JDBC驱动程序必须支持ANSI AQL-2项目层，但JDBC允许开发者直接将查询字符串递到连接的驱动程序。这些字段可能是ANSL SQL也可能不是，或者根本不是AQL。这些字符串的使用时基础驱动程序的事。JDBC不是mincrosoft的ODBC（开放式数据库连接）规范派生的，JDBC完全是用java编写的，而ODBC是个C接口。但是，JDBC和ODBC都是基于X开放SQL命令接口（CLI），相同的概念性基础使API工作进展更快，使APL得接受更加容易。Javasoft提供了JDBC变成ODBC的JDBC-ODBC桥。这个用本地方法完成的版本很小很有效。一般来说，JDBC APL中有两层接口：应用程序层，开发人员用API通过SQL调用数据库和取得结果，驱动程序层，处理与具体驱动程序版本的所有通讯。每个JDBC应用程序（或小程序）至少要有一个JDBC程序，每个驱动程序是针对一种DBMS的。但驱动程序不必直接联到数据库。第二章网站总体分析与设计2.1 网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：1 公司简介 通过文字和图片来展现。1 企业荣誉 通过文字来展现。1 产品介绍 通过商城动态，最新商品，特价商品，购物车，我的账户等栏目来实现。1 联系我们 通过公司地址，邮政编码，电话，电子邮箱来展现。2.2主页设计网站主页采用文字和图片相结合，体现公司的主营方向，静态主页方式介绍公司和公司的荣誉，对于产品介绍，留言，购物车，就得用于JSP与数据库结合的技术建立书籍库查询管网站流程图如下：公司简介商商企业荣誉产品介绍客户留言联系我们首页商城动态商商最新商品商商特价商品商商排行榜商商我要留言商商购物车商商我的帐户商商2.3 数据字典采用的数据库是microsoft sqlservet2000，拟建立nclxyc库文件，包含如下几个表文件。字段名数据类型描述IDInt自动编号Sia-usernvarchar用户名Passwordnvarchar密码Namenvarchar真实姓名Zipcodenvarchar邮编Telnvarchar电话号码Mailnvarchar电子邮件InfoBit是否订阅产品快讯Tacticbit统计发送邮件列表Procincenvarchar会员省份Addressnvarchar详细地址Sexnvarchar会员姓名Pricemoney购物总额IpnvarcharIP地址Gradenvarchar会员级别nowdatetime注册日期以上为sia-user用户登录信息和购物信息表Aia-class产品小类字段名数据类型描述IDInt自动编号ClnameNcarchar小类别名称clidint归大类别Sia-category产品大类字段名数据类型描述ClidInt自动编号clnamenarchar类别名称sia-config网站设置字段名数据类型描述Titlenvarchar浏览器标题栏Pronamenvarchar公司名称Addressnvarchar公司地址urlnvarchar公司网址Zipcodenvarchar公司邮编Mailnamenvarchar公司邮件前缀Mailservernvarchar公司邮件后缀Te11nvarchar电话1Te12nvarchar电话2Faxnvarchar传真Logonvarchar公司或网站logoBannernvarcharBanner图片BannerurlnvarcharBanner图片链接Cssurlnvarchar网站颜色样式Tabcolornvarchar表格颜色Infonvarchar网站介绍Banner2nvarchar公司图片sendmobenvarchar订单说明（显示在购物结算）Sia_discount产品优惠表字段名数据类型描述IDInt自动编号GradeInt会员级别DiscountInt级别拆扣prinemoney会员级别自动升级所需消费金额Sia_guestbook留言表字段名数据类型描述IDInt自动编号Namenvarchar留言者姓名emailnvarchar留言者EmailIPnvarchar留言者IP地址Telnvarchar留言者电话Contentnvarchar留言内容dateandtimedatetime留言日期Sia_news新闻表字段名数据类型描述IDInt自动编号Titlenvarchar新闻标题Contentnvarchar新闻内容Visitsint访问次数datenvarchar日期sia-product产口信息表字段名数据类型描述ProidInt自动编号Codenvarchar产口编号Pronamenvarchar产品名称PropriceMoney产口原价DispriceMoney优惠价格Infonvarchar产品介绍Smallpicnvarchar产品缩图Bigpicnvarchar产品图片HitsInt浏览次数StockInt产品库存量Companynvarchar产品生产厂家Company1nvarchar产品生产厂家网址ClidNit产品归类ClaidNit产品归小类HideBit是否隐藏该产品，以防缺货AdddataDatetime加入日期V!int投票选项“很好”V2int投票选项“好”V3int投票选项“一般”V4int投票选项“差”V5int投票选项“很差”Sia_product1购买产品信息表字段名数据类型描述IDInt自动编号Pronamenvarchar产品名称DispriceNvarchar产品单价PriceInt产品数量Proidint购买产品的ID号usernamenvarchar购买者姓名Sia_payment字段名数据类型描述IDInt自动编号Paymodenvarchar付款方法sendmmodenvarchar付款说明Sia_order保存购买信息字段名数据类型描述OrderidInt自动编号Ordernumbernvarchar购物车编号Sia_userNvarchar购物人会员代号PriceFloat该订单购物金额VipdiscountFloat会员折扣paymentnvarchar购物人付款方式Remarknvarchar购物人备注附言Ipnvarchar购物人IP地址NowDatetime购物人提交订单时间drderstatenvarchar订单处理状态第三章详细设计31购物车系统311功能： 购买者首先在最新商品或者物价商品或者排行榜选择自己喜欢的产品，然后点击购买，将此商品放入购物车，管理人员可以通过此购物车查看相关信息，给购物者提货，并且购物人员可以通过此购物车查看到自己购买的商品，此购物车除管理人员可以全部查看外，其它人员者只能看到自己的购物车。312组成构造1购物车网页add.jsp:用来显示你当前所购的商品2放入购物车网页addmycar.jsp:将商品放入购物车3去结算中心网页check-out.jsp:jsp:显示购物清单和你的个人信息及付款方式，当你的个人信息确认无误后，点击提交4保存个人信息check.jsp：将你的购物清单和个人信息及付款方式通过jsp程序放入数据库中保存，这个jsp程序将产生一个随机的订单号，以便以后查询。这几个等程序用到了sia_usr、sia_order、sia_list、sia_product1下图为购物系统的流程图：点击购买最新商品、物价商品、排行榜是否登陆否是点击购买点击购买点击购买点击购买点击购买313界面设计与重点、难点代码的设计 购物车和我的帐户的数据全部储存在数据库中，要在网页中显示目前的购物产品，必须先进行数据库的链接和打开，要链接数据库我们必须使用%page import=“java.sql.*”%包中的connection、statement、class类程序：td width=”10”height=”20”align=”center”checked onfocus=this.blur()aHref=”add.jsp?add=&disprice=&proname=$price=”=disprice.00td” 如果用户需要对购买产品的数量进行修改，代码如下： aHref=”add.jsp?add=&disprice=&proname=&price=”此模块中用到了session.getattribute()方法来获取用户名的用户的级别，如果获取的用户名和级别为空，将显示“请登录”信息并且不用在执行以下的程序。代码如下：Rs.beforefirst()方法标示将游标指向第一条记录之前。而rs.next标示找到此条记录，！rs.next标示在表中未找到相关信息。当你对购物车中的不满意，可以点击清空购物车，代码为onclick=”javascript:confirmdel()”,此语句是一个javascript,它会去调用confirmdel函数，此函数执行的代码为：Function confirmdel()If(confirm(“你确定清空购物车的全部产品？！”)Window.location.href=”cart-clear.jsp”点了以后，会提示“你确定清空购物车中选购的全部产品”，点击确定以后，将去调用car-clear.jsp页面，此页面的代码如下：%page contenttype=”text/html;charset=gbk”%inglube file=”header.jsp”%String sqldel=”DELETE fom sia-productl”;Stm.executeupdate(sqldel);Out.print(“你的购物车已清空，如果你有什么问题欢迎与我们联系。谢谢！”)；%brbr此代码中用到了spl语句的delete，它是用于删除数据表中的数据，executeupdate方法是用于更新数据表。Out.print表示打印一条语句到终端。如果你对所购买的产品满意，请点击结算中心。此页中将从数据表中读出产品信息和个人信息及付款方式。在此页中用到了byte r=remark.getbytes(“ISO-8859-1”)Remark=new string(r)此语句表示在终端上显示的是中文，而不显示乱码。Rs.getint表示获取数据表中的字段为int型，并且返回的值为int。由于产生的订单编号采取的是日期加时间的方法，所以要用到JAVA的DATE类和CALENDAR,DATE类中的构造函数用于获取系统日期，写法为:date tday=new date(),而gethour获取的系统时间中的小时数，getminutes获取系统时间中的分钟数，getseconds()获取系统时间中的秒钟数。用calendar类用于获取系统日期，用get(calendat.year)方法获取系统年份，用get(calendar.month)方法获取系统月份，用get(calendar.date)获取系统日期，这几个方法返回值为整型。String.valueof将整型转换为字符型。具体代码如下：%Date tday=new date();Calendar tday1=calendar.getinstance(0;String yy=string.calueof(tday1.get(calendar.year);Int mm=tday1.get(calendar.month)+1;If(mm10)Month=”0”+string.calueof(mm);ElseMonth=string.calueof(mm);Int dd=tday1.get(calendar.date);If(dd10)Dd1=”0”+string.valueof(dd);ElseDd1=string.calueof(dd);String riqi=year+minth+dd1;/生成订单所有所需要的元素，格式为：小时，分钟，秒Int xiaoshi=tday.gethours();If(xiaoshi10)Hour=”0”+string.calueof(xiaoshi);ElseHuur=string.calueof(xiaoshi);Int fenzhong=tday.getminutes();If(fenzhong10)Zenzhong1=”0”+string.calueof(fenzhong);ElseFenzhong1=string.calueof(fenzhong);Int miao=tday.getseconds();If(miao 3.2产品介绍系统3.2.1功能介绍此系统式对产品的介绍，包括最新商品，特价商品，排行榜。商城动态。这个系统主要是用于宣传公司销售的商品，公司最新的消息和公司获取用户的意见和建议。3.2.2组成结构图此系统共有七个模板组成1， 首页index.jsp：此页显示最新商品，推荐商品，特价商品等部分产品。2， 商城动态news.jsp：此页显示公司的最新消息。3， 最新商品new.jsp:此页介绍公司的最新商品。4， 特价商品prontion.jsp：此页显示商品的原有价格和现有价格，并且原有价格用了一根线删除线。5， 排行榜hot.jsp:此页按人气从高到底显示商品。6， 留言回馈guestbook.jsp:此页是公司为了获取用户的意见和建议而设的。7， 显示商品的具体信息product.jsp:此页显示商品的编码，厂商，产品人气，加入日期和商品的说明。产品介绍系统流程图如下：产品介绍主页商城动态商商最新商品特价商品排行榜我要留言商品具体信息3.2.3界面设计与重点，难点代码的设计。最新商品，特价商品，排行榜，商城动态都是从数据表中读出来的，这就需要与数据库建立最新链接和打开数据库，要连接数据库我们必须使用包中的connection,statement,class类程序：此代码保存为conn.jsp,以后要访问数据库就用语句来调用。此语句的说明见3.1.3首页主要显示最新商品，特价商品，推荐商品。此模块一开头就用到了，这句表示调用公共模块进行数据库连接。由于首页只是显示部分商品的信息，所以用到了SQL语句“select top4*from sia-product where hide=0 order by proid desc”表示打开数据表sia-product,where hide=0表示满足条件为hide=0的记录，order by prodi desc 表示按照proid从高到底进行排序，top 4 *表示只显示4条记录的所以字段。在此模块中用到了switch多分支语句结构，用判断登录的用户名的级别，为了得到用户的级别，用到了session.getattibute()方法，代码如下：     欢迎font color=”#FF3333”的光临！商城动态代码如下：第一句表示已中文编辑码GBK来显示中文，第二句表示调用header.jsp，此文件是一个公共模块，表示网页的顶部。此模块用到了分页，jap的分页与ASP分页完全不一样，首先打开数据表，然后将游标指向最后一条记录，然后用getrow()方法获取结果集中最后一行的行号，再用最后一行行号与每页显示的记录数相除，看所得余数是否为0，如果为0，表示这一页能够显示完，否则加1，最后用absolute()方法将游标移到指定位置处，具体代码如下：String spll=”select*from sia-news order by id DESC”;Resultset rs=stm.executequery(spll);If(!rs.next()Out.print(“暂无新闻”);Int pagesize=18;Int pagecount=0;Rs,last();Int lastrow=rs.getrow();Pagecount=(lastrow%pagesize=0)?(lastrow/pagesize):(lastrow/pagesize+1);Int showpage=1;%共有页每页显示条记录%String integer=request.getarametre(“showpage”);If(integer=null)Integer=”1”;TryShowpage=integer.parseint(integer);Catch(numberformatexceprion e)Showpage=1;If(showpage=pagecount)Showpage=pagecount;Int position=(showpage-1)*pagesize+1;Rs.absolute(position);%然后显示每一条记录，为了每一页只显示规定得记录数，用到了for循环语句，为了能够很好的控制游标，防止超出数据表的记录数，用到了isafterlast()方法，具体代码如下：For(int i=1;i aHref=news/index.jsp?id= onclick=”return openadminwindow(this.href);”function openadminwindow(url) Popupwin=window.open(url,”new-page”,”scrollbars=yes,width=350,height=400”);Return false; 最新商品用于发布公司最新的产品，方便用户了解公司最新的产品走向。由于JSP与SQLSERVER2000结合，在操作过程中，容易出现无效的描述符，防止此错误的一种方法是将数据表里的数据按字段顺序先读出来存放在一个变量里，在以