毕业论文 基于web的网上花店网站设计.doc

《毕业论文 基于web的网上花店网站设计.doc》由会员分享，可在线阅读，更多相关《毕业论文 基于web的网上花店网站设计.doc（36页珍藏版）》请在三一办公上搜索。

1、1 绪论1.1 开发背景 近年来，随着Internet的迅速崛起，互联网已日益成为收集提供信息的最佳渠道并逐步进入传统的流通领域。于是电子商务开始流行起来，越来越多的商家在网上建起在线商店，向消费者展示出一种新颖的购物理念1。促进Internet高速发展的原因之一就是Web技术。现如今的Web已经不再局限于仅仅提供大量的信息服务，Web技术的发展，使得那些具有交互式的动态页面，有条理的数据库查询，丰富信息内容的页面成为最吸引人的网页。浏览Web有着执行Windows程序一样的感觉和操作性。随着Internet技术的发展，已经成为一种操作平台，为用户提供强大的服务。网络的应用越来越广泛，单纯的提

2、供信息只是其中的一部分。未来的Web将是一套虚拟的信息平台，其中包括在线购物，远程医疗，视频点播，语音聊天等功能。功能的扩展意味着数据量的增加，如果仍然用静态页面的生成模式，则会生成过多的超文本文件，不仅降低了浏览速度，也给维护造成了不便。静态文档的Web技术无法满足人们进一步的要求。随着高版本HTML的出现和浏览器对Form表单的支持使Web技术进入了动态交互页面阶段2。作为计算机领域发展最迅速之一的数据库技术，已经完成了一套独有的理论，并广泛的应用于人们的生产和生活中。数据库技术与网站的结合是当今Web技术的一个热点。有了数据库的支持，可以扩展网页的功能，可以方便的设计出交互式页面，可以构

3、造功能强大的后台管理系统，为网站的更新，维护提供极大的方便3。因此作为网络开发者或者管理者，数据库是必不可少的。当前的页面正在向两个方向发展，一是多媒体，另一个是交互式。交互式的实现意味着网站个性化，意味着用户将有权决定要查看哪些内容4。所以网站必须提供一个给用户的界面，让用户对内容进行分类筛选，最后得到用户需要的内容。这点是传统静态网页无法实现的。天簌之心网上花店的设计解决了以上的弊端，将数据库和页面结合。利用HTML语言，JSP语言语法，SQL Server数据库知识和网络安全知识等制作。基于Web的天簌之心网上花店就是这样一个采用交互式动态网页的网站。网站主要使用了JSP技术，采用SOL

4、 Server 2000数据库。使用JDBC技术把数据库和动态网页相关联。天簌之心网上花店需要达到以下目标：1）支持用户注册和登录。2）用户登录后可以根据价格、类型和其他关键词进行查询。3）用户可以购买商品，但是可以在提交之前取消购买这些商品。4）支持用户在线留言。5）支持管理员通过后台登录，并对型同种的各种信息进行维护。系统流程及模块划分：1）用户登录模块：负责验证系统中用户的登录信息。2）商品查询模块:负责根据用户输入的各种查询条件快速查询符合用户要求的鲜花商品。3）购物车模块：负责记录并保存用户选购的商品信息，然后生成订单。4）用户留言模块：负责接受并记录用户的留言信息。5）管理员管理模

5、块：负责商品、订单、用户和厂商信息的查看、添加和删除等维护操作。1.2 使用工具和技术的介绍天簌之心网上花店使用到的技术有：JSP、SQL Server 2000和Dreamweaver。以下对各种工具做一个简单介绍。1.2.1 JSP简介1.2.1.1 JSP概述JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发

6、的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行5。JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易6。以下罗列了JSP所独具的一些特点：1）将内容的生成和显示进行分离 使用JSP技术，Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终页面。使用JSP标识或者小脚本来生成页面上的动态内容。生成内容的逻辑被封装在标识和

7、JavaBeans组件中，并且捆绑在小脚本中，所有的脚本在服务器端运行。如果核心逻辑被封装在标识和Beans中，那么其他人，如Web管理人员和页面设计者，能够编辑和使用JSP页面，而不影响内容的生成。 在服务器端，JSP引擎解释JSP标识和小脚本，生成所请求的内容（例如，通过访问JavaBeans组件，使用JDBCTM技术访问数据库，或者包含文件），并且将结果以HTML（或者XML）页面的形式发送回浏览器。这有助于作者保护自己的代码，而又保证任何基于HTML的Web浏览器的完全可用性。 2）强调可重用的组件 绝大多数JSP页面依赖于可重用的，跨平台的组件（JavaBeans或者Enterpri

8、se JavaBeansTM组件）来执行应用程序所要求的更为复杂的处理。开发人员能够共享和交换执 行普通操作的组件，或者使得这些组件为更多的使用者或者客户团体所使用。基于组件的方法加速了总体开发过程，并且使得各种组织在他们现有的技能和优化结果的开发努力中得到平衡。 3）采用标识简化页面开发 Web页面开发人员不会都是熟悉脚本语言的编程人员。JavaServer Page技术封装了许多功能，这些功能是在易用的、与JSP相关的XML标识中进行动态内容生成所需要的。 标准的JSP标识能够访问和实例化JavaBeans组件，设置或者检索组件属性，下载Applet，以及执行用其他方法更难于编码和耗时的功

9、能。通过开发定制化标识库，JSP技术是可以扩展的。今后，第三方开发人员和其他人员可以为常用功能创建自己的标识库。这使得Web页面开发人员能够使用熟悉的工具和如同标识一样的执行特定功能的构件来工作。 JSP技术很容易整合到多种应用体系结构中，以利用现存的工具和技巧，并且扩展到能够支持企业级的分布式应用。作为采用Java技术家族的一部分，以及Java 2（企业版体系结构）的一个组成部分，JSP技术能够支持高度复杂的基于Web的应用。 由于JSP页面的内置脚本语言是基于Java编程语言的，而且所有的JSP页面都被编译成为Java Servlet，JSP页面就具有Java技术的所有好处，包括健壮的存储

10、管理和安全性。 作为Java平台的一部分，JSP拥有Java编程语言“一次编写，各处运行”的特点。随着越来越多的供应商将JSP支持添加到他们的产品中，您可以使用自己所选择的服务器和工具，更改工具或服务器并不影响当前的应用7。合理的选择开发技术，对于网站开发的完成情况有着非常重要的影响。要开发一个网站，首先要选择一个动态网页开发技术。当前比较流行的动态网页开发技术有JSP、ASP、PHP。它们的特性比较如表1.1所示8：表1.1 asp/jsp/php比较表技术名称ASPJSPPHP对数据库的支持好好好开发难易度容易容易较难使用平台Windows9X/NTWindows/UNIXUNIX安全性不

11、好好不好对组件的支持支持支持不支持执行方式解释执行编译之后执行解释执行跨平台不好好好这三种都是在传统的HTML代码中，利用HTML标签的扩展，构成页面。不难看出，JSP的综合实力是最强的，尤其是在安全性和跨平台性两个方面，比其他的两种技术都要好，因此，最后选择基于Java的JSP技术作为动态网页的开发技术。1.2.1.2 JSP的工作原理 下面以ch2.jsp为例介绍访问过程：1）客户端通过浏览器发送请求；2）Web服务器接收这个请求，然后转给应用服务器；3）应用服务器会查找客户要访问的文件，假设访问的文件为ch2.jsp；分两种情况：第一次访问：应用服务器把JSP文件转换成Java文件；然后

12、编译成class文件；然后加载类；实例化对象并初始化；后续访问：JSP文件对应的页面对象已经存在，直接查找到这个对象；4）应用服务器封装请求信息，然后调用相应的方法；5）应用服务器把方法执行结果（响应客户的内容）传递给Web服务器；6）Web服务器把这个结果发给客户端；7）客户端浏览器把接收到的html代码解析成网页。这个就是我们看到的结果。1.2.2 Dreamweaver简介Macromedia Dreamweaver MX 2004是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而

13、无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加Macromedia Flash 对象，从而优化开发工作流程11。Dreamweaver还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色和标签完成）。有关 HTML、层叠样式表（CSS）、JavaScript、ColdFusion标记语言 （CFML）、Microsoft Active Server Pages（ASP）和JavaServer Pages（JSP）

14、的参考资料。Macromedia的可自由导入导出HTML技术，可导入手工编码的HTML文档而不会重新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码的格式12。Dreamweaver还可以使用服务器技术（例如 CFML、ASP.NET、ASP、JSP 和 PHP）生成由动态数据库支持的Web应用程序。Dreamweaver可以完全自定义。可以创建对象和命令，修改快捷键，甚至编写JavaScript代码，用新的行为、属性检查器和站点报告来扩展Dreamweaver的功能。Dreamweaver是在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fi

15、reworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形13。1.2.3 SQL Server简介SQL Server是设计用到的另一个工具，它由微软开发，是一个常见的客户/服务器关系数据库软件。在中小型软件开发中的应用尤为广泛。SQL Server 2000与Windows 2000紧密集成。SQL Server 2000不仅与Windows 2000 Server的活动目录集成，当运行于Wind

16、ows 2000之上时，SQL Server 2000还提供了增强的安全性、性能监视以及管理特性。SQL Server 2000能够利用Windows 2000中Kerberos安全的代理能力，把本地客户端的验证信息传递给远程服务器。数据库的性能监视能够在微软管理控制台（MMC）中和其它发监视任务一起运行。为了更进一步减少多语言环境下用户的拥有的成本以及简化管理任务，SQL Server 2000支持多语言特性，包括在Windows 2000多语言版下改变SQL Server用户界面语言环境的能力。Microsoft SQL Server 2000大大增进了现今流行的SQL产品的许多功能。在产

17、品的定义上已经做了许多变化，其中包括关系性引擎（Relational Engine）、管理和工具、复制、分析服务（OLAP服务和数据采集）、全文查找、与Windows 2000集成化等等。相对与SQL Server7.0而言，SQL Server 2000主要与Internet的集成、可伸缩性及易用性方面做了增强，同时SQL Server 2000还增加了一些新的特性，从而使其成为在大规模在线事物处理（OLPA）、数据仓库和电子商务应用程序方面极佳的数据平台。在与Internet的集成方面，SQL Server 2000通过对XML的支持、对数据的Web访问和支持Web的分析等方面增强了其作为

18、电子商务数据平台的竞争实力16。在可伸缩性方面，SQL Server 2000通过同一产品的跨平台使用、对64G大内存的访问、多达32个CPU的服务器的支持以及分布式视图和索引视图的使用充分保证了该产品的可伸缩性与执行性能。在易用性方面，SQL Server 2000在自动动态管理方面比前一版本又有了更大的进步，多种任务的向导工具使其使用起来得心应手，增强的数据转换服务（DTS）大大改善了可用性和可编程性，而集成的分析服务可以让用户对大量数据进行分析而花费很少的数据检索执行时间。总而言之，Microsoft SQL Server 2000是一个面向21世纪的高性能的数据库管理系统。作为Wind

19、ows家族中一个出类拔萃的成员，SQL Server 2000可以满足各种类型的企业客户和独立软件供应商构建商业应用程序的需要。2 系统需求分析这一章将对天簌之心网上花店做一个总体的需求分析，明确所要实现的功能，确定研究的深度。2.1 开发系统的基本情况介绍设计题目为“天簌之心网上花店的设计与实现”，其开发主要包括后台数据库的建立和维护以及前台界面的设计开发两个方面。后台数据库的建立要求数据一致性和完整性强、数据安全性好；前端应用程序的建立要求界面合理、美观，功能完备，吸引用户。注册用户登录前台后，可以浏览和购买网上花店的所有商品，并且可以在网站中留言。管理员通过后台登录后可以对系统中的商品以

20、及注册的用户和用户的留言进行管理。该系统的用户模块和管理员模块是分离的，即用户通过用户模块登录到自己的模块，管理员通过管理员模块登录到自己的模块。用户和管理员不在一起登录。2.2 功能需求天簌之心网上花店主要满足两个功能需求：用户需求、管理员需求。分析其需求主要完成的功能如下。2.2.1 用户功能需求a）首页功能设计首页集成了商品信息，商品搜索，友情链接和用户登录注册。用户点击某一商品，查看有关商品的详细信息、花语、价格和适用场合等详细信息；用户也可以通过快速查询和高级查询直接查找需要的商品信息。友情连接方便用户访问其他相关网站。只有登录的用户才有权限购买花束。所以用户要想购买商品必须先登录，

21、而如果是新用户就要注册成为网站的会员再进行登录，然后来使用网站提供的功能。网站管理员可以从首页登录，进入到管理页面，对网站的内容进行设置。b）站内查询搜索功能设计用户可以通过快速查询和高级查询来实现对站内花束信息的查找，通过直接填写关键字词和选择查询分类进行快速查询；通过直接输入关键字和选择查找方式、价格范围、商品分类，可进行高级查询。通过从数据库中提取相关数据，在页面中显示有关的花束信息供用户浏览查看。首页上还专门设置了查询方式较多的按适用场合分类查询和按价格分类查询。c）查看商家的有关信息用户可以点击首页导航栏中的企业商务来查看该网站的合作商家，以便使用户知道商品来源。d）发表评论用户可以

22、在首页的在线留言发表自己意见和建议，供其他用户参考和借鉴。2.2.2 管理员功能需求a）管理员信息管理网站的管理员可以在登录后查看和添加管理员账号。b）前台信息管理管理员在登录后可以对前台页面进行管理，查看、添加或删除前台页面显示的商品信息，厂商信息等信息。管理员还可以查看和删除网站用户及订单信息等。2.2.3 系统功能模块图在平台功能的分析基础上，得到本平台的功能模块图如图2.1所示： 图2.1 平台购物模块图用户进入网上花店平台，用户可以注册，然后登录后可以进行修改资料，用户可以通过商品搜索，找到自己想要产品。管理员可以通过后台登录进去进行用户管理，订单信息管理，商品信息管理，厂商信息管理

23、，网站系统管理。在用户管理中，可以对用户进行添加删除。3 概要设计3.1 概述随着Web技术的发展和电子商务时代的到来，人们不再满足于建立各种静态地发布信息的网站，更多的时候需要能与用户进行交互，并能提供后台数据库的管理和控制等服务的动态网站。天簌之心网上花店的设计与实现不光通过用户页面能使使用户能方便的，随时随地的在网上购买花束，并且还拥有强大的后台处理功能，使管理者可以方便的及时的更新网站的内容。3.2 网页设计原理当在Web站点中融入JSP功能后，将发生以下事情：1）客户端通过浏览器发送请求；2）Web服务器接收这个请求，然后转给应用服务器；3）应用服务器会查找客户要访问的文件，假设访问

24、的文件为ch2.jsp；分两种情况：第一次访问：应用服务器把JSP文件转换成Java文件；然后编译成class文件；然后加载类；实例化对象并初始化；后续访问：JSP文件对应的页面对象已经存在，直接查找到这个对象；4）应用服务器封装请求信息，然后调用相应的方法；5）应用服务器把方法执行结果（响应客户的内容）传递给Web服务器；6）Web服务器把这个结果发给客户端；7）客户端浏览器把接收到的html代码解析成网页。这个就是我们看到的结果。3.3 系统概要流程设计该系统网站主要分前台管理和后台管理员管理两大模块。3.3.1 前台模块设计普通用户只有浏览页面的功能，只有注册为会员后，才可以购物。1）前

25、台购物流程如图3.1 所示浏览商品选择商品订购商品去购物车确定订单提交订单未注册用户已登录注册用户未登录注册用户注册登录图3.1 前台购物流程图用户再前台可以浏览商品，看到自己喜欢的商品可以选择商品，然后订购商品，如果是没有注册的用户需要注册，如果是注册了没有登录的用户，则跳转到登录页面，已经登录的用户则跳转到购物车页面，然后提交订单。2）注册功能流程如图3.2所示 图3.2 注册功能流程图注册的具体实现为：点击主页面的用户注册选项后，会弹出一个注册信息页面，用户需要如实填写用户名，密码，E_mail,地址，电话，真实，姓名等各项信息，提交后，系统进行检测判断该用户名是否已经注册过，如果已经存

26、在则弹出新页面，提示用户该用户名已经注册过，如果没有则进行下一步判断，用户输入的两次密码是否一致，然后依次往后判断用户所填写的各项信息是否符合要求，直到所有信息均正确无误，系统将该用户注册信息写入会员表并提示用户注册成功，用户登陆后，就可以进行有效的购物了。3）商品搜索流程如图3.3所示开始搜索输入条件搜索结果查看商品购物车下订单续搜索是否图3.3 商品搜索流程图商品的搜索功能使用户更加方便的进行自己所需要的商品的查询，节省时间，提高效率。用户搜索时只要输入商品的关键字就能搜索到所有相关的商品。并且能列出通过搜索得到的商品的详细信息。4）会员功能模块图如图3.4所示。图3.4会员功能模块图5）

27、购物车流程如图3.5所示购物车查看商品满意吗下订单调整商品结束否是 图3.5 购物车流程图购物车具体的实现可采用这种形式：定义一个购物车的类(Class)。1）列出商品的列表，使用户能够自由选择所需要的商品。2）当用户在点击“添加到购物车”的链接时，执行如下功能：检查用户购物车类是否存在。如不存在，则建立，并注册Session变量；在有用户购物车类存在的情况下，检查该类中是否有该商品。如存在，则商品数量相应加1；如没有该商品，则将该商品添加到该类中。3.3.2 后台模块设计管理员模块各个模块的约束比较少，只要是有管理员登录到管理员模块中就可以使用管理员模块各个功能模块的功能。后台管理模块如图3

28、.6所示图3.6 后台管理模块图3.4 数据库设计在建设网站系统之前，我们必须对系统所用到的数据进行大致的分类和具体的结构设计，既要做到清晰明了，又要能适应系统各项功能的调用，而不至于产生结构上的逻辑混乱，保证关键数据在意外情况下不会被破坏，可以说数据库是系统的重中之重。数据库设计要遵循一些规则，一个好的数据库满足一些严格的约束和要求。尽量分离各实体对应的表，一个实体对应一个表，搞清楚该实体有哪些属性，对应有些什么字段，以及各实体之间有何种联系。实体、属性与联系是进行概念设计时要考虑的三个元素，也是一个好的数据库设计的核心。从实际出发，经过仔细地设计，得到各表的设计，它们分别是表5-1管理员信

29、息表 admin，表5-2 商品信息表goods，表5-3留言表leaveLanguage，表5-4订单表orders，图5-5订单详细信息表ordersDetails，表5-6商家信息表produce，表5-7 商家详细信息表produceDetails，表5-8 商品类别表sort，表5-9 用户信息表users。天簌之心网上花店的数据库设计共涉及到9个表，在此对每个表做详细说明。a）admin（管理员信息表）用来记录管理员信息，对于此表， adminId为主键。admin（管理员信息表）具体说明如表3.1。表3.1 admin（管理员信息表）表项数据类型说明adminIdInt自动编号a

30、dminNameVarchar用户名adminPassVarchar密码b）orders（订单表）用来记录订单信息，对于此表ordersId为主键。orders（订单表）具体说明如表3.2。表3.2 orders（订单表）表项数据类型说明ordersIdInt自动编号usersNameVarchar用户名ordersPriceVarchar订单价格ordersDatetimeVarchar 订单时间c）goods（商品信息表）用来记录商品信息，对于此表，goodsId为主键。goods（商品信息表）具体说明如表3.3。表3. 3 goods（商品信息表）表项数据类型说明goodsIdInt自动

31、编号goodsNameVarchar商品名称goodsmaterialVarchar花束材料goodsPackageVarchar花束包装goodsLanguageVarchar话语goodsPriceFloat价钱goodsCentVarchar积分goodsScopeVarchar销售方向goodsPlaceVarchar适用场合goodsHabitusVarchar是否上架sortNameVarchar分组名称d）leaveLanguage（留言表）用来记录用户留言信息，对于此表， leaveLanguageId为主键。leaveLanguage（留言表）具体说明如表3.4。表3.4 l

32、eaveLanguage（留言表）表项数据类型说明leaveLanguageIdInt自动编号nameVarchar用户名称qqVarcharqq号emailVarcharEmail地址leaveLanguageVarchar留言内容dateTimeVarchar留言时间e）ordersDetails（订单详细信息表）用来记录订单详细信息，对于此表，ordersId为主键。ordersDetails（订单详细信息表）具体说明如表3.5。表3.5 ordersDetails（订单详细信息表）表项数据类型说明ordersIdInt自动编号goodsNameVarchar商品名goodsPrice

33、Varchar商品价格goodsCountInt商品数量f）produce（商家信息表）用来记录商家信息，对于此表，produceId为主键。produce（商家信息表）具体说明如表3.6。表3.6 produce（商家信息表）表项数据类型说明produceIdInt 自动编号produceNameVarchar商家名称g）produceDetails（商家详细信息表）用来记录商家详细信息。produceDetails（商家详细信息表）具体说明如表3.7。表3.7 produceDetails（商家详细信息表）表项数据类型说明produceIdInt自动编号produceNameVarchar

34、商家名称sortIdInt分类编号goodsIdInt商品编号h）sort（商品类别表）用来记录商品类别。sort（商品类别表）具体说明如表3.8。表3.8 sort（商品类别表）表项数据类型说明sortIdInt自动编号sortNameVarchar类别名称i） users（用户信息表）用来记录用户信息，对于此表usersId为主键。users（用户信息表）具体说明如表3.9。表3.9 users（用户信息表）表项数据类型说明usersIdInt自动编号usersNameVarchar用户名usersPassVarchar密码usersRepassVarchar重复密码usersPassQu

35、estionVarchar提问问题usersPassReplyVarchar答案usersTrueNameVarchar待添加的隐藏文字内容3真实姓名usersAddressVarchar用户地址usersPhoneVarchar电话usersE_mailVarcharEmail4 详细设计这一章介绍各个功能模块的详细设计。4.1 站点的建立首先打开Dreamweaver开发工具，点击菜单栏的站点，点击管理站点选项在弹出的对话框中点击新建站点，新建一个站点，命名为“flowershop”。然后就可以在站点中新建网页文件。4.2 页面的设计4.2.1 网站首页页面设计在刚建立的站点中新建一个文件

36、，命名为“index.jsp”，作为网站首页，为了让网站不管是在800*600还是1024*768的显示分辨率的时候都能很好的显示，可以将所有设计的布局和界面的控件都放在表格里。在Dreamweaver开发工具中选择其设计视图点击菜单栏上的插入，选择表格，插入一个表格。在下面的属性栏里将其宽度设置成812将其对其方式选择为居中对齐，将其边框宽度设置为0。通过拆分合并单元格，调整单元格的高度，把网页拆分成不同的模块，将其布局调整成提前设计的布局的样子。接下来对首页的内容进行设计。网站首页的顶部主要是显示网站logo，及常用的购物车等功能的图标，通过超级链接使用户可以方便的跳转到相应的页面。另外还

37、有网站的banner及导航栏。接下来就是会员注册及登录模块，会员通过这里登录网站然后购买商品。这里还有商品导购功能，将鲜花按用途或价格等不同关键词分类，用户可通过这里的导航直接找到自己想要的类型的商品。另外用户还可以通过商品搜索直接寻找感兴趣的内容。在此还设置了最新公告功能，显示网站的一些新的公告。首页上显示的主要内容是一些网站最新推荐的特价商品，还有一些最新上架的商品。在首页的底部显示和其他各个网站的友情链接，通过链接，用户可以很方便的浏览其他网站。首页的foot部分还有管理员登录后台的链接，以便管理员登录。设计中发现页面的样式并不理想中的样式，可以通过来添加样式来使的页面的样式效果更漂亮。

38、在index.jsp文件的HTML语句的中添加如下的语句：TD FONT-SIZE: 9pt; COLOR: #353535; LINE-HEIGHT: 120%/表格字体的大小、颜色、行距BODY FONT-SIZE: 9pt; LINE-HEIGHT: 120% /网站字体属性A:link COLOR: #000000; TEXT-DECORATION: none /链接字体的样式A:visited COLOR: #000000; text-deration: none /访问过的链接颜色A:hover RIGHT: 0px; COLOR: #336699; POSITION: relat

39、ive; TOP: 1px; TEXT-DECORATION: none /鼠标经过链接的颜色A:active COLOR: #000000; TEXT-DECORATION: none /鼠标点击时的颜色这样用户界面的首页就设计完成了。4.2.2 商品的详细页面设计商品信息的显示页面左侧显示花束的图案。右边显示鲜花的详细信息，包括编号、名称。话语等。这些详细信息都是管理员传进数据库的。在页面的下部是添加至购物车按钮，登录的会员可以点击这里将鲜花添加至购物车。通过在中插入来控制页面样式。通过从其他页面传过来的goodsId的值，通过SQL语句操作数据库，从数据库中提取需要的该商品号对应的商品的

40、数据显示在网页中。4.2.3 会员注册页面设计如果用户还不是会员则提示用户进行注册，用户提交信息之后，系统开始判断用户的注册信息是否有效，首先是用户名是否为空，用户输入的两次密码是否一致，然后依次往后判断用户所填写的各项信息是否符合要求，直到所有信息均正确无误，系统将该用户注册信息写入会员表并提示用户注册成功，用户登陆后，就可以进行有效的购物了。注册页面要实现对所填写的内容进行验证，只有完全符合条件后才能注册成功。部分验证代码如下：function checkuserinfo() if(checkspace(document.userinfo.usersPass.value) | docume

41、nt.userinfo.usersPass.value.length 20) document.userinfo.usersPass.focus(); alert(密码长度不能不能这空，在6位到20位之间，请重新输入！);return false; if(document.userinfo.usersPass.value != document.userinfo.usersRepass.value) document.userinfo.usersPass.focus();document.userinfo.usersPass.value = ;document.userinfo.usersRe

42、pass.value = ; alert(两次输入的密码不同，请重新输入！);return false; if(document.userinfo.usersE_mail.value.length!=0) if (document.userinfo.usersE_mail.value.charAt(0)=. | document.userinfo.usersE_mail.value.charAt(0)=| document.userinfo.usersE_mail.value.indexOf(, 0) = -1 | document.userinfo.usersE_mail.value.ind

43、exOf(., 0) = -1 | document.userinfo.usersE_mail.value.lastIndexOf()=document.userinfo.usersE_mail.value.length-1 | document.userinfo.usersE_mail.value.lastIndexOf(.)=document.userinfo.usersE_mail.value.length-1) alert(Email地址格式不正确！); document.userinfo.usersE_mail.focus(); return false; else alert(Em

44、ail不能为空！); document.userinfo.usersE_mail.focus(); return false; 4.2.4 用户登陆模块的实现用户登陆模块是防止非法用户登陆的第一道防线，通过它可以保护后台数据库的安全性，当用户要进行定购时，首先要进入的就是身份验证界面，只有在密码正确的情况下才能进行以后的购物，如果输入的密码不正确，则不能进行定购。如果用户以浏览者的身份进入网站，则只能进行一般的商品浏览和搜索，而不能进行选购，如果是第一次登陆，请先注册。4.2.5 网站管理员页面设计管理员界面的页面设计采用了嵌入框架页的形式，所以和用户界面的页面设计有一些不同，在HTML视图中写下如下代码：FRAME name=main marginWidth=0 marginHeight=0 src=main.js