摘要 中国不断发展,自然我们人民的生活也得到了改善,大家对肯定也会越来越追求品质。对于居住环境的要求也由之前的满足生活需要到现在的追求个性舒适和多样化。随着科技与互联网的不断更新以及其与生活的日益密切,传统家装行业的经营理念和模式已经无法更好地适应市场需求,因此需要顺应需求和潮流,更多的依靠互联网平台服务与消费者以及宣传和推广公司。本装修网站“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表 列名