笔锋教育
基于jQuery框架的装修网站的设计与实现
浏览数:438 
摘要 中国不断发展,自然我们人民的生活也得到了改善,大家对肯定也会越来越追求品质。对于居住环境的要求也由之前的满足生活需要到现在的追求个性舒适和多样化。随着科技与互联网的不断更新以及其与生活的日益密切,传统家装行业的经营理念和模式已经无法更好地适应市场需求,因此需要顺应需求和潮流,更多的依靠互联网平台服务与消费者以及宣传和推广公司。本装修网站“BeauHouse”的前端页面效果是使用Photoshop设计的,主要使用的开发语言是HTML、CSS、JS和JQuery技术,开发环境是Sublime,后台使用JSP访问数据库,调用tomcat访问服务器,开发出一个有着前端交互效果与后台访问数据库功能相结合的装修公司官网。用户可以在网站上注册登录,还可以在官网上浏览公司信息,查看公司产品和服务,了解公司和联系我们等。管理员可以对自身信息与网站以及用户和订单进行管理。   关键字:装修网站;HTML;CSS;Photoshop;JQuery;JSP Abstract As our country continues to develop, naturally our people’s lives have also improved, and everyone will certainly seek quality more and more. for the living environment requirements from the previous to meet the needs of life to the present pursuit of individuality, comfort and diversity. In recent years, with the continuous development of the Internet, the traditional home decoration industry business philosophy and mode has been unable to better adapt to market demand, therefore, need to comply with the needs and trends, more rely on the Internet platform, as well as publicity and promotion companies. The front page decoration effect of the website "BeauHouse" is the use of Photoshop design, mainly used in the development of language is HTML, CSS, JS and JQuery technology, the development software is Sublime, the background using JSP to access the database, call the Tomcat access server, developed a front-end interactive effect and backstage database access function combination decoration company official website. Users can register, browse the company information on the official website, view the company's products and services, understand the company and contact us, etc.. Administrators can maintain the website, and maintain and modify the website users and data. Keywords: decoration website; html; css; photoshop; jQuery; jsp 1 绪论 1.1 课题背景与意义 背景:我们可以看到互联网一直在发展,很多新型的行业都是伴随着互联网的发展而诞生和蓬勃发展的,最为我们所熟知的BAT也是紧紧拥抱互联网平台和大数据而成为中国企业的佼佼者。大家也都能感受到互联网对我们的影响,人类社会的方方面面,大到国家安全、科研调查,小到人们日常的吃饭、购物、打车等生活方式的改变。大家的生活都离不开互联网,如果这个时候传统企业不能够与时俱进,积极地去改变企业自身的盈利模式和生存方式,则必将会被时代的大潮流所抛弃。 近几年时代新提出的的概念那就是“互联网+”,则可见到经济与科技与社会相结合的产物,其倡导将“互联网”技术与“大数据”以及实体经济相结合,以此来产生新一轮的经济革命。我们可以看到,国家正在大力支持这种发展模式,而这种模式也确实能够让传统实体经济重新注入新的血液及焕发新的生机与活力。 意义:由新时代的发展趋势可见,传统意义上的企业拥抱互联网的重要性。一个企业想要长远发展必须是始终开放面对时代的。因此,我想结合大学所学过的理论和实践,结合自身的一些想法,实现一个装修网站,装修行业算是传统的实体行业,而我希望能够将这种行业与互联网相结合,以实现其今后更好的发展模式。同时,也希望通过这种方式能对过去的四年大学所学的做一个总结。 1.2 国内外研究现状 现在时代发展十分迅猛,以前我们用手写键盘打字,且手机功能局限于打电话发短信,到现在各种应用层出不穷。传统行业该如何跟上互联网化的潮流,该如何结合自身特色和时代特质去发展是需要这些传统行业的每个人去认真思考的。传统的装修公司想要不被淘汰,占据一席之地,不得不顺应互联网趋势,打造自身的互联网平台。以前互联网发展重在讲什么功能上,但现在不同,现在越来越注重用户体验,并且伴随着一批新的行业的产生。同时各种产品之间的竞争也越演越烈,谁懂得用户抓住用户的心,谁就能走到前面。新时代如何去应流而上,这正是web前端技术所需要思考和实现的,因此web前端技术将会发展越来越完善,也必将越来越受欢迎。 以“BeauHouse”这个装修网站为切入点,做一个有一定实际价值且较为美观的装修网站,运用之前学习过的知识,结合PS+HTML+CSS+jQuery+JSP等语言制作关键及主要页面,希望在界面美观性也好还是系统功能上也好都能达到一个较好的效果。 1.3 课题主要内容 (1)设计并且开发一个美观实用且实现功能良好的装修网站—“BeauHouse”官网,首先用PS设计,再用HTML和CSS代码实现所设计的页面。 (2)将后台开发语言jsp与前端静态网站相结合,形成一个可以实现完整功能、有其实用价值的网站。 2 可行性研究 2.1 可行性研究编写目的 可行性研究是做一个完整系统的必要阶段,它关系着整个系统能否在实际的生活中得以应用,而不是只是一个绣花枕头,没有使用价值。 可行性分为三大类,在本项目中的具体体现有: 技术可行性:运用已有的知识和理论,如CSS、HTML以及javascript等; 操作可行性:具有简洁美观的页面、与用户互动方式容易,有一定的使用价值; 经济可行性:实现方式较为普遍、制作周期短且人员投入低、网站的维护成本低且运营及管理简单。 2.2 项目可行性分析 2.2.1 技术可行性 本网站首先需用PS设计界面,然后用sublime和Meclipse开发工具,根据之前设计的网站页面用HTML、CSS、JQuery等代码语言实现出来。之后加入jQuery和MySQL等后台开发技术完成各种操作,包括管理员操作和用户操作等。 Photoshop:是一款非常厉害的软件,它能处理多种图片格式。它的功能特别多,不管是图像图形、文字、视频、印刷等各方面都能应用,其是很多设计人员必不可少的一款工具,也越来越成为普通上班族和学生等必须掌握的一项工具。在我们开发人员中也同样不可或缺,它能帮助实现设计网页、切图等功能,有效减少工作复杂性。 HTML和CSS:这两个是创建静态网页的基本代码,HTML可以组成网页的结构。整体包括头部和中部。头部里面包括一些自定义的东西以及title标题,同时还可以包入外部CSS和JS文件。Body里面放的是网页中的元素,有各种图片,文本、超链接等。CSS里面的标记可以是元素标签,链接标签,图片和多媒体等。CSS添加样式装饰网站的。一般包括颜色,大小,背景、动效等,能够影响多个或者几重页面的样式及布局。总得来说,HTML语言编造网页结构,而CSS就是对这个结构的属性样式进行设置。HTML和CSS是开发人员必须掌握的基本代码语言,一般学会这两中语言就可以制作出一个完整的静态网页。 JQuery:是一个包含了JS常用的代码且具有“写得少,做得多”功能的库,它能够兼容多种主流浏览器。JavaScript的功能主要是具有改进设计、选项卡、banner轮播、检测浏览器、创建cookies等功能。因此在此基础上的JQuery框架的作用与其类似。可以通过在HTML文件中引入这个库编写JS代码,从而实现一些特定的网页功能和操作。实现流程如图2_1所示。 图2_1 前端流程示意图 Tomcat:是一款很轻便的性能稳定的同时又免费的服务器。事实上,它是一种扩展,所以一般由tomcat来处理Apache不支持的动态网页。但是Tomcat调试静态不怎么样。因此,在项目运行时,Apache和tomcat分别处理静态和动态网站,这样的一个分工就会使整个网站的运行效率得到大大的提高。 MySql:这款很流行的数据库的数据是会单独放在不同的表里面的,这加快了调取数据的速度和提高查取得灵活度数。能提供API给各种编程,且有效利用资源,所以也支持高效率的多线程工作。 JSP:在HTML内,JSP加入jsp标签和java程序后组成了jsp文件。客户端发出请求后,jsp会处理Java代码并把结果返回给浏览器。Web服务器在执行完java程序代码后宰讲jsp执行结果一起返还给用户,用户看到的是一个功能齐全的网站,并且能跟网站互动。 通过上述分析。这些技术基本上是可以通过大学所学知识来独立完成的。当然开发过程中可能多多少少存在各种问题,但都是可以通过网上查阅或者请教老师同学来慢慢解决的。 2.2.2 经济可行性 本网站的开发成本比较低,开发过程只需一到两个人员即可完成,因此开发人员成本不高。此外开发此项目所用到的时间周期只花了一个月不到,开发周期短,所花费的时间成本低。此外,项目所用到的开发语言较为简单普遍,减少了之后更新维护该系统的成本,因此维护周期不长也是该系统的优点。对它也需要进行一定的经济投入:后期需要对网站的一些功能进行维护和改进,因此需要有相关技术人员来进行维护;此外购买独立的域名及每年花在运营商和广告上的成本是作为一个企业网站所必须花费的。总的来说,对于一个企业,花费在该网站的各方面成本是比较低的,但是因此所带来的回报却是极大的。 2.2.3 法律可行性 本网站是一个装修网站,具有一定的实际使用意义,可用于商业运营,在项目开发上虽然有借鉴他人的地方,但是这些代码都是开源的,以及数据库的开发和开发软件等都是开放性的,因此不需要担心它会侵权或者违法。故在法律上是可行的。与此同时,由于该项目均是个人的构想并完成所有工作,其知识版权及所有权应当受到法律的保护。 2.2.4 操作可行性 从进来我们网站的用户来看,他可以直接点进来就进入网站首页,并能直接看到公司首页所展示的内容,包括登录板块、装修建材查询板块、装修类别导航板块、以及各个页面直达板块和最新装修建材展览板块。用户进入网站后可以直接看到公司的大概结构,比如产品展示,用户可以直接看到最新的公司提供的装修建材产品展示;信息导航:可以清晰了解哪个地方是哪些内容,比如用户想看看公司介绍,则可以进到网站论坛上去看看其他用户对我们网站和产品的评价;再比如订单,如果用户想要在我们网站购买一些装修建材,则需要注册一个账户,如果用户已经拥有他自己的账户,就能够直接登录就行,然后他就可以将想要的产品加入购物车或者直接购买。我们网站还提供专门的一个页面来提供特价产品,其实也是一个专门的页面来展示公司产品,方便用户更好的购买。用户如果想要购买产品,则可以挑选想要的产品及数量,还可以将之前购物车中不想要的产品清除掉;然后可查看自己的订单信息。用户用例图如图2_2所示。 对于网站管理员,他想要获得操作权限必须要在登录之后,比如对用户信息的增删改查操作,以及订单信息的相关操作。具体的一个操作如下:首先在登录界面登入用户名和密码。然后他可以进行的操作有:修改自身密码、用户管理、装修建材产品的管理、订单管理以及网站的维护等。用例图如图2_3所示。 图2_2 用户用例图 图2_3 管理员用例图 3 需求分析 3.1 功能需求 本装修网主要是为该装修公司提供一个互联网平台,一方面为广大用户提供装修服务,另一方面主要是给公司产品的线上发展提供了一个平台。通过这样一个网站平台,一方面可以扩大公司发展的空间及可能性,另一方面也是作为一个实体企业应对时代潮流的正确措施。具体所实现的一些功能,可以参照一些大企业如小米商城的功能,用户可以注册登录、对用户信息进行管理、装修建材产品展示及查询、网站论坛、以及加入购物车和购买、以及订单查询等一系列操作,使得用户能以一个良好的操作交互方式便利地完成整个过程。而后台则是为网站管理员提供管理便利的一个平台,它实现了登录及自身信息管理、用户信息管理、网站产品管理及信息维护、订单管理等功能,整个网站的功能及完整性有助于该装修公司更好的发展。 各模块功能划分如下: 3.1.1 会员功能模块 本网站分为前端和后台两个平台,前端页面风格良好,操作便捷,主要是用户进行相关操作,例如:查询装修建材、购买建材、网站留言等功能,但是这些都必须是登录我们网站之后才能进行的操作。其功能如图3-1所示。 图3-1 会员功能 3.1.2 管理员模块 (1)修改密码:可以修改自身账号; (2)用户管理:查看网站所有的用户并能够做权限内所允许的相关操作; (3)查看装修建材产品信息:管理员可以查看所有装修建材产品相关信息,并进行管理; (4)装修建材产品信息管理:可以查看产品的相应信息,并可以添加或者删除相应产品; (5)订单信息管理:可以查询并处理订单; (6)网站论坛:可以查询和管理用户的留言; (7)公告管理:管理员可以管理公告及发布和查看公告。 其功能如图3-2所示。 图3_2 管理员功能模块 3.1.3 数据流图 数据流图是数据流向的描述。从哪个实体到哪个实体,通过什么方式进行流向的,如图所示。 (1)顶层数据流图 此图可以看出网站是中间平台,属于用户和管理员之间的一个介质,其主要的参与成员是访问网站的用户和网站管理员,还反映了整个网站的流动系统是如何运转的。如图3_3所示。 图3_3 顶层数据流图 (2)第一层数据流图 第一层数据流图作用很重要,首先它是是对顶层数据流图的详细分解,同样也是对在下层数据流图的总结和概括。如图展示了整个网站较为主要和关键的功能,当然还有更为详细的功能。如图3_4所示。 图3_4 第一层数据流图 (3)底层数据流图 底层数据流图已经描述很详细,因此不能再往下进行细分。 ①管理员只能对用户信息进行浏览和删除。只有新用户来网站注册了信息,他的信息才能新出现在列表中,管理员只能够对其浏览和删除。如图3_5所示。 图3_5 底层用户管理数据流图 ②在本网站中,整个逻辑清晰明朗,且结构较为简洁,因此数据流图的结构也比较简单。因为在本网站里管理员的操作基本上就是增删改查,所以我在这里只将其并入一个图中。如图3_6所示。 图3_6 底层管理员管理数据等流图 ③在后台订单管理中,管理员可以查询订单详情,包括用户名、订单编号,下单金额、下单时间、及用户地址等相关信息。如图3_7所示。 图3_7 底层订单管理数据流图 ④此模块为管理员修改相关网站门户信息及产品信息,相关操作如:查看留言、更改公告、修改产品分类和命名以及修改产品价格等相关属性等。如图3_8所示。 图3_8 底层管理数据流图 3.2 性能需求 从整体来看,本网站的功能较为完善,结构清晰明了,同时实现较为容易,下面将从三个方面来进行具体分析。 3.3.1 网站灵活性 整体操作简单灵活,不管是用户还是管理员,可以轻松通过登录完整一系列操作。从用户角度,他们可以通过点击公司网站进入首页,并实现网站各个板块的自由跳转。管理员可以登录获得管理权限。 3.3.2 网站安全性 因为我们网站是有购物的一个功能,所以具有需要登录后才能下单等操作的,而登录注册这种行为是用户自愿去做的,并且不同的用户的他的账号密码是不同且具有其私密性,本网站也坚持遵循相关法律,不会透露用户的隐私信息,因此从用户的角度,其账号的安全性是完全可以得到保障的。而管理员只有登录后才能进行相关修改,其本身的身份已经通过密码的方式得到验证,同时他只能去查看用户信息,而不能对其进行修改等操作,一定程度上也保护了本网站用户信息的安全性。用户和管理员登录页面分别如图3_9和图3_10所示。 图3_9 用户登录界面 图3_10 管理员登录界面 3.3.3 网站完整性 本网站的完整性分别体现在板块的完整性和内容逻辑的完整性。第一个在于我这个装修网站中包含系统主页、特价产品展示、用户购物车及订单、管理员、公司新闻等多个板块,整个网站的完整性较好。第二个则在于网站所展示的内容较为丰富,基本上平常一个企业网站所应具备的功能都有,包括用户登录及信息管理,订单的整个流程和网站留言新闻等介绍公司的板块。用户进入本网站既可以直奔主题购买本公司产品,也完全可以随便观看公司的所展示的内容,从而对本公司更为了解。不管是哪一方面,都有助于公司的互联网化更进一步。 4 概要设计 概要设计主要是描述系统的大概流程,并通过数据结构来表达出来。 4.1 基本设计概念和处理流程 如图4_1所示: 图4_1 网站处理程序流程图 基本的设计开发理念如下: (1)设计并实现界面有一定美观性、功能较完全的网站。 (2)用户可以通过浏览网站各个页面来获得对本公司的了解。 (3)如果用户想要购买我们的产品,他可以先添加购物车,然后如果此时没有登录则需要注册或者登录后,即可跳到订单页面。 (4)用户可以进一步对自己的订单进行修改,然后提交订单。 (5)管理员从专属页面输入用户名密码登入后台管理平台。 (6)管理员权限有管理现有用户信息,查看并管理订单,查看及编辑公司产品属性,管理公司门户信息、新闻和留言。 4.2 系统分析与设计 4.2.1 数据库的分析与设计 数据库将存入网站的所有信息,等到需要的时候对其进行调用。它是一个独立的大型的数据集合,有很强的扩展性和较小的冗余度。当通过一个介质将前台与后端相连接时,里面的数据就可被共同调用。比如用户提交的个人信息:姓名、用户名、年龄、性别以及在网站的留言,用户和管理员都可以使用这个数据,进行增删改查等操作。当用户进行某动作,如点击某个按钮,则网站会自动找到文件,然后使用相应的操作方法从数据库中进行调取。数据库中的用户数据就定义了其对应的ID、user-name、user-password、user realname那么等等数据。类似的,对网站的装修产品的数据有price、catlog-id,name等对于不同类别数据,都会对应其相应的数据特征。 4.2.2 数据库的阶段构成 数据库是按照一定的逻辑和物理结构构成的一个相对稳定有效的库。在项目中用它会使得整个网站的管理和结构更加高效,从而有效的提高网站效率。一般数据结构分为六个阶段。 (1)需求分析:指通过一定的手段分析并能较为准确的了解用户的需求及习惯爱好。 (2)概念结构设计:根据需求设计设计对应的概念上的模型。 (3)逻辑结构设计:根据上一步建立数据模型。 (4)物理结构设计:为模型寻找适合的存储结构和存取方法。 (5)数据库实施:指建立符合要求的数据库。 (6)数据库运行和维护:指调试和运行并进行完善。 4.3 数据库设计 4.3.1 概念设计 概念设计跟具体的数据库系统是不一样的,它是一个概念模型,且具有独立性。因此不可忽视它的作用。它可以对需求归纳和抽象后进行透彻分析。概念模型会使用由属性、实体、域、码及其之间的联系组成的E-R模型,并用E-R(实体-联系)图来表示。它可以表示实体、属性和联系。矩形和椭圆还有联系分别表示实体、属性和菱形。并用直线连接三者,并需要在直线上标注联系的类型,如1 : 1、1 : m、n : m。 (1)用户信息图如图4-2所示: 图4_2 会员信息图 (2)家装装修建材产品类别图如图4-3所示: 图4_3 家装建材类别图 (3)装修产品信息图如图4-4所示: 图4_4 家装建材信息图 (4)公告信息图如图4-5所示: 图4_5 公告信息图 (5)管理员信息图如图4-6所示: 图4_6 管理员信息图 (6)订单信息图如图4-7所示: 图4_7 订单信息图 (7)网站用户留言信息图如图4-8所示: 图4_8 留言信息图 (8)用户查询以及购买家装产品如图4-9所示: m 1 查询 购买 n m 图4_9 查询购买家装产品E-R图 4.3.2 逻辑结构设计 一般可分成三大步: (1)用关系、网状或者层次模型表示概念结构。 (2)在DBMS的作用下,用数据模型来表达关系、网状和层次模型的转换。 (3)优化数据模型。 据此,“Beauhouse”装修网站建立了如下逻辑数据模型。 (1)用户,如表4-1所示。 表4-1 user表 列名数据类型长度允许空是否主键说明 User_idint11否是用户ID User_name varchar50否否用户名 User_pwvarchar50否否用户密码 User_realnamevarchar50否 否姓名 User_sexvarchar50否否性别 User_telvarchar50否否联系方式 User_addressvarchar50否否住址 User_agevarchar50否否年龄 User_emailvarchar 50否否邮箱 (2)类别,如表4-2所示。 表4-2 catelog表 列名数据类型长度允许空 是否主键说明 Catelog_idint11否是类别ID Catelog_namevarchar50否否类别名 Catelog_miaoshuvarchar50否否类别介绍 (3)产品,如表4-3所示。 表4-3 goods表 列名
数据类型长度允许空是否主键说明 goods_idint11否是图书ID Goods_catelog_idint 4否否类别ID Goods_namevarchar50否否名称 Goods_miaoshutext0否否介绍 Goods_picvarchar50否否图书封皮 Goods_shichangjiaint11否否图书价格 Goods_tejiavarchar50否否图书特价 (4)公告,如表4-4所示。 表4-4 公告表 列名 数据类型长度允许空是否主键说明 Gonggao_idint11否是公告ID Gonggao_titlevarchar50否否公告标题 Gonggao_contenttext0否否公告内容 Gonggao_datavarchar50否否发布日期 (5)管理员,如表4-5所示。 表4-5 admin表 列名数据类型长度允许空 是否主键说明 Useridint11否是编号 Usernamevarchar50否否用户名 Userpwvarchar50否否密码 (6)订单,如表4-6所示。 表4-6 order表 列名数据类型长度允许空 是否主键说明 order_idint11否是订单ID Order_bianhaovarchar50否否编号[1.48%] 四川职业技术学院教务管理系统的设计与实现 [学位论文]李毅,2011年 电子科技大学
数据类型 长度 允许空 功能描述newsid int 4 false 文章 idtitle nvarchar 50 true 文章标题checked int 50 true 是否核准original nvarchar 255 true 文章来源editor nvarchar 50 true 作者updatetime smalldatetime 50 true 发表时间content nvarchar 50 true 文章内容(6)公告表 board:id(自动编号)、公告标题、公告内容、时间和发布人。如表 4-7 所示:表 4-7 公告表列名 数据类型 长度 允许空 功能描述id int 4 false 公告 idtitle nvarchar 100 true 公告标题content ntext 16 true 公告内容inuse int 4 true 是否
Order_datevarchar50否否下单时间 Order_zhuangtaivarchar50否否订单状态 songhuodizhivarchar50否否送货地址 fukuanfangshivarchar50否否付款方式 jine int11否否总金额 User_idint11否否邮箱 (7)留言,如表4-7所示。 表4-7 留言表 列名数据类型长度允许空是否主键说明 idint11否是编号 titlevarchar50否否 留言标题 contenttext0否否留言内容 datavarchar50否否留言时间 uservarchar50 否否留言用户 4.3.3 连接原理 数据库连接池可以让数据库的价值更好的发挥,从而帮助我们更为有效地使用数据库,从而提高操作效率。 一般会用Class.forName()方法来加载程序,然后用DriverManager的getConnection()方法来创建连接。通过JDBC连接数据库,可以便捷的访问数据库,有效减少开发人员的工作时间。连接数据库后编写PO,以及Hibernate的映射文件,最后采用DAO模式。 本系统访问数据库的具体过程是: (1)驱动数据库程序; (2)通过JDBC连接数据库; (3)访问数据库,执行SQL语句; (4)断开连接; 开发设计人员无需了解数据库位置及类型,只需要会使用数据对象就行。代码如下: <bean id=”dataSource” Class=”org.apache.commons.dbcp.BasicDataSource”> <property name=”driverClassName” Value=”com.mysql.jdbc.Driver”> </property> <property name=”url” Value=”jdbc:mysql://localhost:3306/db_tushu?useUnicode=true&amp;amp;amp;amp;amp;amp;characterEncoding=utf-8”> </property> <property name=”username” value=”root”></property> <property name=”password” value=”070327”></property> 5 详细设计 5.1 前台界面设计及代码实现 前台主要是给用户使用,可以当游客访问网站,也可以输入他的账户,从而浏览网站所有的内容,还可以购买装修建材或者搜索装修建材,也可以到网站留言板对网站本身或者产品或者建议等进行留言,或者查看网站新闻和公告。 5.1.1 网站首页 主页展示的信息是可以概览到整个网站的架构和内容的。用户可以直接查看到哪个页面是自己想要查看的,并能直接跳转到该页面,同时可以注册或者登录后以获得更多的权限。系统首页分为四板块:head(头部)、top(上端)、left(左边)和right(右边)。Top部分展示公司名,还有功能一些相应功能的板块:首页、特价家装建材、购物车、我的订单、我的信息、系统公告、网站论坛和进入后台。左边部分分别为用户登录、类别和产品查询以及日历表。右边展示的是所有装修产品的信息。Foot部分是网站声明客服热线等。如图5_1所示: 图5_1 装修网站首页 5.1.2 用户登录注册页面 当老用户输入账号跟密码,如数据匹配成功,则会出现提示登录成功的窗口。同样没输入,也则会提示。假如没找到相应的对象,则意味着匹配失败,系统会提示错误。 判断用户输入是否正确的代码如下: Public String userLogin() { String sql=”from TUser where userName=?and userPw=?” Object[] con={userName,userPw}; List userList=userDAO.getHibernateTemplate().find(sql,con); If(userList.size()==0) { this.setMessage(“用户名或密码错误”); this.setPath(“qiantai/default.jsp”); } Else { Map session=ServletActionContext.getContext().getSession(); TUser user=(TUser)userList.get(0); Session.put(“cart”,cart); This.setMessage(“成功登录”); This.setPath(“qiantai/default.jsp”); } return “succeed” } 用户登录界面、登录成功页面、未输入密码和未输入用户名的页面如图5-2至5-5所示。 图5_2 登录界面 图5_3 登录成功提示界面 图5_4 未输入用户名提示界面 图5_5 未输入密码提示界面 5.1.3 安全退出系统 为了信息安全以及用户体验所想,用户如果直接关闭网站,则系统会保存其用户信息,下次无需再重新输入。但是用户也可以选择退出系统,然后系统则自动会将其数据清除,有效的保护信息安全。之后如果有新的用户要登录时,则网站会保存最近的最新的用户信息。关键代码如下: Public String userLogout() { Map session=ServletActionContext.getContext().getSession(); Session.remove(“user”); Return ActionSupport SUCCESS; } 安全退出界面如图5_6所示。 图5_6 公司新闻中心界面 5.1.4 用户注册展示 当用户尚未注册过本网站时,他可点击按钮,跳入填写基本信息的页面。其中用户必须填写账号和密码,其他部分则可选择填写。代码如下: public String userReg() { TUser user=new TUser(); user.setUserName(userName); user.setUserPw(userPw); user.setUserRealname(userRealname); user.setUserSex(userSex); user.setUserAge(userAge); user.setUserAddress(userAddress); user.setUserTel(userTel); user.setUserEmail(userEmail); user.setUserDel(“no”); userDAO.save(user); map request=(Map)ServeltActionContext.getContext().get(“request”); request.put(“msg”,”注册成功,请登录”); Return “msg” 如图5_7所示: 图5_7 注册界面 5.1.5 装修产品查询 网站的搜索板块基本是每个网站所必需的,因为这为用户直接查到自己想要的产品提供了便利,这样可以减少用户的浏览时间,从而可以提高他们的体验效果。本搜索框使用的是模糊查询,用户可以在输入框输入关键字或者词,然后相应的产品或者信息就会列出。此外,如果用户什么也没有输入,则会自动列出所有信息。相关代码如下: public String goodsSearch() { Map request=(Map)ServletActionContext.getContext().get(“request”); String sql=”from TGoods where goodsDel=’no’and goodsName like’%”+goodsName.trim()+”%’”; List goodsList=goodsDAO.getHibernate Template().find(sql); request.put(“goodsList”,goodsList); return ActionSupport SUCCESS; } 空查询结果如图5_8所示,类别查询如图5_9所示: 图5_8 空查询界面 图5_9 类目查询界面 5.1.6 购物车系统 购物车主要是方面买家在浏览产品时可以将喜欢的产品加进去,为买家提供更多便利性。当他找到想买的装修产品时时,可以点击购买按钮,则可将其加入购物车,同时在购物车内,有清空、继续、下一步等操作。页面如图5-10所示: 图5_10 购物车界面 清空的代码如下: public String clearCart() { try {Thread.sleep(1000);} catch(InterruptedException e) {e.printStackTrace();} WebContext ctx=WebContextFactory.get(); HttpSession session=ctx.getSession(); Cart cart=(Cart)session.getAttribute("cart"); cart.getItems().clear(); session.setAttribute("cart",cart); return "yes"; } 继续购买则会跳到头一个界面,还有default.jsp界面,进入确认订单界面,代码如下: Public String orderQueren() { Map request=(Map)ServletActionContext.getContext().get(“request”); Return ActionSupport SUCCESS; } 5.1.7 我的订单界面 用户订单详细信息,比如下单时间、金额、数量、产品等等。 如图5_11所示: 图5_11 我的订单界面 图5_12 订单明细界面 相应代码如下: <div id="content" class="Sub"> <div class="NewContainer771"> <div class="BoxHeader"> <div class="BoxHeader-center MarginTop10">我的订单</div> </div> <div class="Slot"> <table width="99%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF" align="center" style="margin-top:8px"> <tr align="center" bgcolor="#FAFAF1" height="22"> <td>订单编号</td> <td>金额</td> <td>下单日期</td> <td>订单状态</td> <td>编辑</td> </tr> <s:iterator value="#request.orderList" id="order"> <tr align='center' bgcolor="#FFFFFF" height="22"> <td> <s:property value="#order.orderBianhao"/> </td> <td>¥<s:property value="#order.orderJine"/><br/></td> <td><s:property value="#order.orderDate"/></td> <td> <s:if test="#order.orderZhuangtai=='no'">已下单,未受理</s:if> <s:if test="#order.orderZhuangtai=='yes'">已下单,已受理</s:if> </td><td> <a href="#" onclick="orderDetail(<s:property value="#order.orderId"/>)">订单明细</a>&nbsp;&nbsp; <a href="#" onclick="orderDel(<s:property value="#order.orderId"/>)">删除</a> </td> </tr> </s:iterator> </table> </div> </div> </div> 5.2 网站后台 后台主要是为管理员的操作平台,首先需要管理员输入账号密码登录后才能操作。具体管理员的操作权限可分为八大部分,分别是:修改密码、用户管理、装修建材类别管理、产品管理、订单管理、留言管理、公告管理以及退出系统。如图5_13至5_19所示: 图5_13 修改密码界面 图5_14 用户管理界面 图5_15 装修建材类别管理界面 图5_16 类别信息增删界面 图5_17 装修建材管理界面 图5_18 添加产品界面 图5_19 订单管理界面 订单管理的主要代码如下: Public String orderMana() { String sql=”fromTOrder order by orderUserId”; List orderList=orderDAO.getHibernateTemplate().find(sql); Map request=(Map)ServletActionContext.getContext().get(“request”); Request.put(“orderList”,orderList); Return ActionSupport SUCCESS; } 删除订单代码如下: Puclic String orderSekByAd() { TOrder order=orderDAO.findById(orderId); orderDAO.delete(order); String sql=”delete from TOrderItem where orderId=”+orderId”; orderItemDAO.getHibernateTemplate().bulkUpdate(sql); this.setMessage(“删除成功”); this.setPath(“orderMana.action”); return “succeed”; } 添加产品代码如下: public String goodsAdd() { TGoods goods=new TGoods(); goods.setGoodsCatelogId(goodsCatelogId); goods.setGoodsName(goodsName); goods.setGoodsSBN(goodsISBN); goods.setGoodsMiaoshu(goodsMiaoshu); goods.setGoodsPic(fujian); goods.setGoodsShichangjia(goodShichangjia); goods.setGoodsTejia(goodsShichangjia); goods.setGoodsIsnottejia(“no”); goods.setGoodsIsnotuijian(“no”); goods.setGoodsKucun(“goodsKucun”); goods.setGoodsDel(“no”); goodsDAO.save(goods); this.setPath(goodsMana.action); return “succeed”; 6 网站测试 对网站进行测试,以此来检测项目是否达到预期所设定的功能和要求,从而帮助我们能进一步优化和完善系统。测试可分为两部分,分别是黑盒测试和白盒测试。 6.1 登录注册模块测试 (1)测试流程:用户通过不断尝试新账号密码看是否能注册成功并成功登录;管理员看输入账户密码后能否成功登入。 (2)测试详情如表6_1和表6_2所示: 表6_1 登录测试用例 模块名称测试输入预期结果实测结果是否通过 登录模块用户名:空 密码:空弹出用户名或密码不能为空登录失败,提示请输入至少两位用户名通过 登录模块用户名:123 密码:空弹出密码不能为空登录失败,提示请输入至少六位密码通过
登录模块用户名:l 密码:空弹出请输入至少两位用户名登录失败,提示请输入至少两位用户名通过 登录模块用户名:hello 密码:1弹出请输入六位密码 登录失败,提示请输入六位密码通过 登录模块用户名:pyh 密码:123456进入管理平台 登录成功,进入管理平台通过 表6_2 注册测试用例 测试对象测试案例预期结果实际结果 是否[1.48%] 基于android的移动警务管理系统的设计与实现 [学位论文]李艳,2015年 电子科技大学
登录。登录模块测试:验证输入用户名和密码是否与数据库中的数据一致。只有用户输入的用户名和密码与系统数据库中保存的用户名和密码一致时,才能够登录系统;否则,提示用户,用户名不存在,登录失败,并返回系统登录窗口。实验结果如下表所示。表 6-1 系统登录的测试用例表 6- 1 系统登录的测试用例用户名 密码 结果LiYuJiang_Test LiYuJiang_Test123 登录成功LiYuJiang_Test Null 密码
通过 用户注册账号:null 密码:null报错,请输入账号报错,提示请输入账号通过 用户注册用户名:null 密码:1报错,请输入账号报错,提示请输入账号通过 用户注册 用户名:m1 密码:null报错,请输入密码报错,提示请输入密码通过 用户注册用户名:pyh 密码:1注册成功注册成功,请登录通过 用户注册用户名:zhangyuwen 密码:1报错,请用户重新输入用户名注册成功不通过 (3)综上可见注册模块是有缺陷的,即注册时只检测是否输入对应信息,而没有进行对比,没有去检测账号是否是单一的。从理论上讲,如果已存在注册的账号,应当报错并提醒用户该账户已存在。但此系统中不但没有报错,还覆盖了原有账号。 6.2 功能及性能测试 (1)测试流程:对网站各个功能板块一一测试,看是否切换流畅且回应较为迅速。 (2)结论:通过测试,整个系统的访问和等待时间较为合理,首次访问基本可以在两秒钟内进行回应,之后的访问则可以在一秒钟内得到回应。 7 结 论 在临近毕业的时候完成的这个毕业设计是对大学所学的这个专业的概括与总结。在这个项目与论文完成过程中,我通过查询资料、询问同学以及自己的钻研终于完成了这个项目,感觉是对大学四年的一个交代。在这个装修网站项目完成的过程中,对很多的知识都得到了巩固,同时也加深了对这个专业和行业的理解。 在毕业项目中,我各加深入的了解了前端开发的一些原理,以及前端与后台相连接的机制。项目中所用到的jQuery框架和spring框架,以及MVC框架等都让我觉意识到这些框架存在的意义,它会让我们的开发更加高效简洁。在编写代码的过程中,其实遇到了很多技术上或者知识上的问题,但是多亏了现在的学习途径越来越多,以及那么多优秀的同学帮助,才能在自己的努力下完成这个项目。我的这个装修网站不管是细节还是功能上还存在非常多的缺陷和不足。所以我也需要在今后的生活和工作中不断学习,以此来使自己的整个学习系统更加完善。 经过这样的一个毕业设计,我的学习能力和探究能力都得到了很好的锻炼,也将大学中所学到的一些理论知识全部应用到了实践上,使得在项目完成后自己有很大的成就感和满足感,并坚信对未来各方面也有所帮助。