基于HTML5的响应式网站的设计与实现(论文)正文

摘 要

随着网络的发展和普及，各类建站技术的更新与运用，现在搭建一个网站的时间和成本越来越低，使得企业官方网站得到了极大的发展。从早期简单的网页展示，到后来的营销型网站，全网营销型网站，以及目前最新最主流的响应式网站。基于HTML5的响应式网站能够自动适应屏幕大小，实现多终端覆盖，设计高端，丰富的特效让页面展示更精美。

HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如Adobe Flash、Microsoft Silverlight，与Oracle Java FX的需求，并且提供更多能有效增强网络应用的标准集。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。

本课题结合HTML5技术和eclipse开发工具，MySQL Server 作为数据库，实现了企业响应式网站及其管理，使得企业官网的展示更精美，管理更便捷。 关键词：HTML5； CSS3； JavaScript； MySQL Server； 响应式网站

ABSTRACT

With the development of network and popularization, the updating and use of all kinds of web technology, now time and cost of building a website has become more and more low, makes the enterprise's official website got great development. From the early simple web pages, to later marketing type site, the entire network marketing type site, and the reactive sites of the latest most mainstream. Based on the response of the HTML5 responsive website can automatically adapt to screen size, realize the end cover, high-end design, rich in specific page to show more elegant.

HTML5 is HTML next major revision, now is still in the stage of development. Generalized when asked about it actually means, including HTML, CSS, and JavaScript, a set of technology combination. It hopes to be able to reduce the browser plug-in to need the richness of network application service RIA, such as Adobe Flash, Microsoft Silverlight, and the demand of the Oracle Java FX, and can provide more effective enhance the standard set of network applications. HTML5 is the emerging Web development technology, has good semantic labels, match the latest CSS3 can show a unique display effect.

This topic combines the technique of HTML5 and the eclipse development tools, MySQL as the database Server, realize the reactive sites and its management, make enterprise website to show more elegant, more convenient management. Key words: HTML5; CSS3; JavaScript; MySQL Server; Reactive sites

目 录

1. 绪论 .............................................. 1

1.1 课题研究意义和目的 ................................... 1 1.2 国内外发展现状和趋势 ................................. 2 1.3 本文工作和论文结构 ................................... 3 1.3.1 本文工作 ........................................... 3 1.3.2 论文结构 ........................................... 3

2. 系统技术理论基础 .................................. 5

2.1 HTML5简介 ........................................... 5 2.2 JavaEE简介 .......................................... 7 2.3 CSS3概述 ............................................ 9 2.4 JSP概述 ............................................. 9 2.5 JQuery概述 ......................................... 10 2.6 B/S 模式概述 ........................................ 11 2.7 MySQL概述 .......................................... 12

3. 系统需求分析 ..................................... 13

3.1 系统基本需求 ........................................ 13 3.2 系统用例图 .......................................... 14 3.2.1 系统管理员用例 .................................... 14 3.2.2 会员用例 .......................................... 14 3.2.3 游客用例 .......................................... 15

4. 系统设计与实现 ................................... 16

4.1 系统设计原则 ........................................ 16 4.2 系统前端设计与实现 .................................. 17 4.3 系统后台设计与实现 .................................. 25 4.4 数据库设计与实现 .................................... 28 4.4.1 数据库表 .......................................... 28 4.4.2 数据库完整性和安全性 .............................. 33

5. 系统测试 ......................................... 35

5.1 测试目的 ............................................ 35 5.2 测试方法 ............................................ 35 5.3 测试过程 ............................................ 36

6. 总结和展望 ....................................... 41

参考文献 ................................................ 43 致 谢 .................................................. 45

**********************************

1. 绪论

1.1 课题研究意义和目的

现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业文件乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径[1]。

随着3G、4G的发展和移动通信及WEB3.0技术的提升以及近年来各种移动智能设备的兴起，中国互联网正在往移动方向发展，呈现多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等,在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。

企业可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售渠道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。

今天越来越多的人使用智能手机、平板电脑等来查看邮件、浏览网页。随着移动终端的流行和大趋势的变化，网站设计技术也在随之变化。为了能够给移动终端客户提供更好的体验与服务，我们可以有很多选择。例如为移动设备单独重新设计一个网站，这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点[2]。另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验。

响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当

1

**********************************

根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整[3]。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

1.2 国内外发展现状和趋势

响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。当然专门为手机或者平板电脑设计的网站或者app应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有230多种不同的屏幕尺寸，我们不可能为所有这些常用的230多种屏幕尺寸都设计一个独有的网站或者app应用。所以响应式设计此时体现出了它的价值所在。

有调查结果显示，移动设备正在逐渐超过PC设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择和趋势。

Ethan Marcotte曾经在A List Apart发表过一篇文章\"Responsive Web Design\"，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科\"响应式架构(responsive architecture)\"提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产\"智能玻璃\"：当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私[4]。

将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。

2

**********************************

显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式[5]。

响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。

1.3 本文工作和论文结构 1.3.1 本文工作

本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。阐述了一个基于J2EE基础之上的、应用HTML5，JSP等语言开发的B/S结构的高校办公自动化系统的设计与实现过程。具体工作如下：

⑴ 介绍本系统的开发背景和本系统的国内外发展现状；

⑵ 论述了开发本响应式网站平台开发过程中的理论支持、技术基础和实现的关键技术；

⑶ 对本系统进行了需求分析和功能的设计，确定系统的体系结构； ⑷ 以系统设计原则为标准，完成系统的前端页面、后台管理系统和数据库内容的具体实现过程。

1.3.2 论文结构

全文共分为六章，具体工作如下：

第一章 绪论。简单阐述了本系统的开发背景和国内外发展现状。 第二章 系统技术理论基础。主要介绍开发系统的过程中用到的技术和理论。 第三章 系统需求分析。主要对响应式网站的基本需求进行分析、建模。 第四章 系统设计与实现。按照系统设计原则，对系统前端、后台和数据库进行设计，以及系统的前端页面、后台管理系统和数据库内容的具体实现过程。

3

**********************************

第五章 系统测试。对系统的兼容性和功能性进行测试。

第六章 总结和展望。对当前系统在设计和实现的过程当中遇到的问题和针对这些问题给出的解决的方案做个概要的经验总结，以便今后对类似系统的开发提出良好的可行性的建议。对当前系统的不足加以总结，在今后系统的升级或类似系统的开发时做出修改和调整。

4

**********************************

2. 系统技术理论基础

2.1 HTML5简介

HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。HTML5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如Adobe Flash、Microsoft Silverlight，与Oracle Java FX的需求，并且提供更多能有效增强网络应用的标准集[1]。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力[6]。

HTML5具有以下特性： 1. 语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

2. 本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

3. 设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

5

**********************************

4. 连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，这两个特性能够帮助我们Server-Sent Event和WebSockets就是其中的两个特性，实现服务器将数据“推送”到客户端的功能。

5. 网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

6. 三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、用户会惊叹于在浏览器中，Canvas、WebGL及CSS3的3D功能，所呈现的惊人视觉效果。

7. 性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

8. CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性[7]。

HTML5具有以下优势： 1.网络标准

HTML5 本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话 说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。

2.多设备、跨平台

用 HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中 心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google

6

**********************************

Play上，所以它的跨平台非常强大，也是大多数人对HTML5有兴趣的主要原因。

3.自适应网页设计

很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）2010年，Ethan Marcotte提出了”自适应网页设计“这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

这就解决了传统的一种局面——网站为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

4.即时更新

游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新[8]。

总结概括HTML5有以下优点： 1. 提高可用性和改进用户的友好体验；

2. 有几个新的标签，这将有助于开发人员定义重要的内容； 3. 可以给站点带来更多的多媒体元素(视频和音频)； 4. 可以很好的替代FLASH和Silverlight；

5. 当涉及到网站的抓取和索引的时候，对于SEO很友好； 6. 将被大量应用于移动应用程序和游戏。

2.2 JavaEE简介

J2EE（Java 2 Platform,Enterprise Edition）是一套全然不同于传统应用开发的技术架构，包含许多组件，主要可简化且规范应用系统的开发与部署，进而提高可移植性、安全与再用价值[9]。

J2EE 的核心是一组技术规范与指南，其中所包含的各类组件、服务架构及技术层次，均有共通的标准及规格，让各种依循 J2EE 架构的不同平台之间，存在良好的兼容性，解决过去企业后端使用的信息产品彼此之间无法兼容，导致企业内部或外部难以互通的窘境。

在 J2EE 架构下，开发人员可依循规范基础，进而开发企业级应用；而不

7

**********************************

同 J2EE 供货商，同会支持不同 J2EE 版本内所拟定的标准，以确保不同 J2EE 平台与产品之间的兼容性。

对于开发人员而言，只需要专注于各种应用系统的商业逻辑与架构设计，至于底层繁琐的程序撰写工作，可搭配不同的开发平台，以让应用系统的开发与部署效率大幅提升。

目前许多程序设计师，或者是网页设计人员，多利用 JSP/Servlet的便利性，进而在 J2EE 服务器之上开发相关的应用，或是整合公司内部的各种资源。推出 J2EE 的最初目的是为了克服传统 Client/Server 模式的弊病，迎合

Browser/Server 架构的潮流，为应用 Java 技术开发服务器端应用提供一个平立的、可移植的、多用户的、安全的和基于标准的企业级平台，从而简化企业应用的开发、管理和部署。J2EE 是一个标准，而不是一个现成的产品。各个平台开发商按照 J2EE 规范分别开发了不同的 J2EE 应用服务器，J2EE 应用服务器是 J2EE 企业级应用的部署平台。由于它们都遵循了 J2EE 规范，因此，使用 J2EE 技术开发的企业级应用可以部署在各种 J2EE 应用服务器上。

J2EE 组成了一个完整企业级应用的不同部分纳入不同的容器(Container)，每个容器中都包含若干组件(这些组件是需要部署在相应容器中的)，同时各种组件都能使用各种 J2EE Service/API。J2EE 容器包括：

◆ Web 容器 服务器端容器，包括两种组件 JSP 和 Servlet，JSP 和Servlet 都是 Web 服务器的功能扩展，接受 Web 请求，返回动态的 Web页面。Web 容器中的组件可使用 EJB 容器中的组件完成复杂的商务逻辑。

◆ EJB 容器 服务器端容器，包含的组件为 EJB(Enterprise Java Beans)，它是 J2EE 的核心之一，主要用于服务器端的商业逻辑的实现。EJB 规范定义了一个开发和部署分布式商业逻辑的框架，以简化企业级应用的开发，使其较容易地具备可伸缩性、可移植性、分布式事务处理、多用户和安全性等。

◆ Applet 容器 客户端容器，包含的组件为 Applet。Applet 是嵌在浏览器中的一种轻量级客户端，一般而言，仅当使用 Web 页面无法充分地表现数据或应用界面的时候，才使用它。Applet 是一种替代 Web 页面的手段，我们仅能够使用 J2EE 开发 Applet，Applet 无法使用 J2EE的各种 Service 和 API，这是为了安全性的考虑。

8

**********************************

◆ Application Client 容 器 客 户 端 容 器 ， 包 含 的 组 件 为Application Client。Application Client 相对 Applet 而言是一种较重量级的客户端，它能够使用 J2EE 的大多数 Service 和 API[10]。

2.3 CSS3概述

CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效、多栏布局等。

CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）[11]。

2.4 JSP概述

JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。

用JSP开发的Web应用是跨平台的，即能在Linux下运行，也能在其他操作系统上运行。JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。

Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。

9

**********************************

JSP与Java Servlet一样，是在服务器端执行的，通常返回该客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。

JSP的1.0规范的最后版本是1999年9月推出的，12月又推出了1.1规范。目前较新的是JSP1.2规范，JSP2.0规范的征求意见稿也已出台。

JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。Java Servlet 是JSP的技术基础，而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。 自JSP推出后，众多大公司都支持JSP技术的服务器，如IBM、Oracle、Bea公司等，所以JSP迅速成为商业应用的服务器端语言[12]。

JSP 技术的优势：

⑴ 一次编写，到处运行。在这一点上 Java 比 PHP 更出色，除了系统之外，代码不用做任何更改。

⑵ 系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。相比 ASP/PHP 的局限性是显而易见的。

⑶ 强大的可伸缩性。从只有一个小的 Jar 文件就可以运行 Servlet/JSP ，到由多台服务器进行集群和负载均衡，到多台Application 进行事务处理，消息处理，一台服务器到无数台服务器，Java 显示了一个巨大的生命力。

⑷多样化和功能强大的开发工具支持。Java 已经有了许多非常优秀的开发工具，而且许多可以免费得到，并且其中许多已经可以顺利的运行于多种平台之下[13]。

2.5 JQuery概述

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，

10

**********************************

而且各种应用也说得很详细，同时还有许多成熟的插件可供选择[2]。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery[14]。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库[15]。

2.6 B/S结构概述

B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet 技术的兴起，对 C/S 结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过 WWW 浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层 3-tier 结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。

以目前的技术看，局域网建立 B/S 结构的网络应用，并通过Internet/Intranet 模式下数据库应用，相对易于把握、成本也是较低的。它是一次性到位的开发，能实现不同的人员，从不同的地点，以不同的接入方式访问和操作共同的数据库；它能有效地保护数据平台和管理访问权限，服务器数据库也很安全 。特别是在 快捷、高效JAVA 这样的跨平台语言出现之后，B/S 架构管理软件更是方便、

B/S 架构软件的优势： ⑴ 维护和升级方式简单

目前，网站平台的改进和升级越来越频繁，B/S 架构的产品明显体现着更为

11

[16]

。

**********************************

方便的特性。 B/S 架构的平台只需要管理服务器就行了，所有的客户端只是浏览器，根本不需要做任何的维护。无论用户的规模有多大，有多少分支机构都不会增加任何维护升级的工作量，所有的操作只需要针对服务器进行；如果是异地，只需要把服务器连接专网即可，实现远程维护、升级和共享。所以客户机越来越“瘦”，而服务器越来越“胖”是将来信息化发展的主流方向。今后，系统升级和维护会越来越容易，而使用起来会越来越简单，这对用户人力、物力、时间、费用的节省是显而易见的。

⑵成本降低，选择更多

大家都知道 windows 在桌面电脑上几乎一统天下，浏览器成为了标准配置，但在服务器操作系统上 windows 并不是处于绝对的统治地位。现在的趋势是凡使用 B/S 架构的应用管理软件，只需安装在 Linux 服务器上即可，而且安全性高。所以服务器操作系统的选择是很多的，不管选用那种操作系统都可以让大部分人使用 windows 作为桌面操作系统电脑不受影响，这就使的最流行免费的 Linux 操作系统快速发展起来，Linux 除了操作系统是免费的以外，连数据库也是免费的，这种选择非常盛行[17]。

2.7 MySQL概述

由瑞典MySQL AB 公司开发，目前MySQL是一个关系型数据库管理系统，

属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管理系统，在 WEB 应用方面MySQL是最好的关系数据库管理系统 ( Relational Database Management System, RDBMS ) 应用软件之一

[18]

。

MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权，它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库

[19]

。

12

**********************************

3. 系统需求分析

3.1 系统基本需求

通过网站建设，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，从而使更多的用户认识企业、了解企业，同时采用面向未来的网站技术，以html5为基础，自适应pc、笔记本、pad、手机等不同尺寸的终端。“一次设计、普遍适用”。设计时尚大气，更好的展示企业品牌形象、更利于网站优化、后台管理更便捷。迎合移动互联网的趋势，增加移动终端的客户转化率。

本系统从功能上，可分为：

前端功能包括：信息浏览，站内查询，会员注册，会员登录 会员功能包括：藏品鉴定，藏品养护

后台功能包括：商品管理，问答管理，会员管理，内容管理

网络平台管理员 会员商品管理问答管理会员管理内容管理游客藏品鉴定藏品养护会员登录会员注册站内搜索信息浏览图3-1 系统访问权限图

从访问权限上，可分为系统管理员，会员，游客。系统的权限设计使得不同的角色只能使用相对应的功能。系统管理员可以使用所有功能，包括前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能，以及后台的商品管理、问答管理、会员管理和内容管理功能；会员可以使用前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能；游客只能使用前端的信息浏览、站内查询功能和会员的会员注册功能。具体权限如图3-1.

13

**********************************

3.2 系统用例图 3.2.1 系统管理员用例

系统管理员则负责具体信息系统日常管理和维护，具有信息系统的最高管理权限。

问答管理会员管理商品管理后台管理内容管理藏品鉴定会员功能管理员藏品养护前端功能信息浏览会员登录站内搜索会员注册图3-2 管理员用例图

系统管理员可以使用所有功能，包括前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能，以及后台的商品管理、问答管理、会员管理和内容管理功能。用例图如图3-2.

3.2.2 会员用例

会员是指通过正规流程申请提交基本信息，加入公司会员系统的客户。

14

**********************************

藏品鉴定藏品养护会员功能会员登录会 员前端功能会员注册站内搜索信息浏览图3-3 会员用例图

会员可以使用前端的信息浏览、站内查询、会员注册、会员登录功能和会员的藏品鉴定、藏品养护功能。用例图如图3-3.

3.2.3 游客用例

游客是指，通过互联网在在线访问浏览网站，之前和公司无关联的访客。

会员注册游 客前端功能站内搜索信息浏览图3-4 游客用例图

游客只能使用前端的信息浏览、站内查询功能和会员的会员注册功能。用例图如图3-4.

15

**********************************

4. 系统设计与实现

4.1 系统设计原则

1. 移动优先原则

随着移动互联网的发展，移动设备的不断增加，考虑到当前的发展形势，优先考虑移动设计无可厚非。所谓移动优先原则是指，整个页面设计的流程优先考虑到移动设备的兼容显示，再次前提下在考虑PC机的兼容显示。

2. 触控优先原则

对触控优先原则的考虑也是基于移动互联网的发展迅速的前提下提出的。在移动设备终端上目前触控是我们主要的一种人机交互方式。基于这点在设计页面上就应该优先考虑设计出易于手指触摸的按钮等交互元素其次才是考虑同样易于鼠标点击的按钮等其他元素。所以网页设计师应该先从触控优先原则入手设计页面，之后在此基础上对页面进行适当的调整以达到对PC端的兼容显示。使网页上的相关交互元素既适合手指触摸又适合鼠标点击。

3. 弹性化原则

在弹性化布局的基础上引入CSS媒介查询的功能使得web响应式的设计和开发思路让页面真正的富有弹性。页面布局再不会被破坏，图片的尺寸可以被自动调整。这样无论用户使用任何设备，页面都能够自动响应与调整。

4. 宏观性原则

在响应式 Web 开发过程中，设计人员在项目的每一个阶段都要在多种浏览器和不同尺寸屏幕中进行测试，以尽早发现问题。

5. 开放性原则

支持跨平台运行的体系架构，系统可以运行在各种Windows平台。系统具备互操作性和可扩展性性，具有兼容性。

6. 稳定性原则

保证系统采用成熟稳定的操作系统、数据库、网络协议等，保证系统长期稳定的不间断运行。

7. 安全性原则

对于基于网络的应用，最重要的问题之一是安全性。系统具备精细的权限管理，在网络安全各个环节采用有力措施，保证系统网络整体安全性。

16

**********************************

4.2 系统前端设计与实现

首页：网站首页是一个网站的入口网页，作用是引导互联网用户浏览网站以及其他部分的内容。这部分内容一般被认为是一个目录性质的内容。

图4-1 网站首页图

17

**********************************

整体个网站首页遵循扁平化设计，简洁大气，在色彩搭配上，根据企业LOGO色彩、行业特性进行设计，主次分明，冲击力强。首页为多屏，鼠标下拉或滚轮滚动展示，包含有导航栏，banner图区，站内搜索框，艺术资讯，艺术名家，精品展览，合作机构的部分展示，这样设计的目的是让访客浏览更轻松便捷，突出公司的服务和特色。另外，这样的设计更适合移动终端的上滑、下滑显示，首页内容更丰富直观，浏览更轻松便捷。如图4-1.

导航栏：网站导航栏位于网站最上面，通常网站的主导航主要包括网站的首页和产品栏目及各个单页面的导入链接，是网站中最主要的、必不可少的内容。方便用户以最快，最简单的到达不同的网页。同时也方便用户一目了然的发现网站的主要信息，而不用费力的寻找。

图4-2 导航栏

导航栏功能划分包括：首页，艺术品，展览，资讯，艺术名家，会员中心，关于我们，常见问题；功能根据行业需求和客户体验来划分，精简全面便捷的展示企业信息和服务。其中鼠标经过不同栏目时，当鼠标悬停在栏目上方，栏目背景色变为红色，并展开二级导航栏目。此处用的是CSS3中的:hover 伪类实现的，:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。如图4-2.

艺术品：艺术品栏的设计目的是为了让访客更细致的了解公司艺术品相关的服务和流程，是网站内容更丰富全面。

如图4-3 艺术品和二级导航

18

**********************************

艺术品下面二级导航栏目包含鉴证备案，资产管理，修复保养，个性定制。鉴证备案中包含有鉴证的意义以及具体流程和信息，资产管理中包含有基金、信托、按揭和鉴赏管理，修复保养中包含有保养的意义和具体流程，个性定制中包含有服务项目及优势。如图4-3.

展览：设计展览栏主要是对公司的产品进行一个集中展示。

图4-4 展览和二级导航

展览栏主要分为中国绘画，书法篆刻，西画雕塑，古瓷杂项，当代工艺五个板块。可以选择直接点击展览进入展览大厅，也可以选择直接点击不同二级栏目进入细分板块。如图4-4.

图4-5 展览页布局

展览大厅可以看到五个板块分类，不同价格区间，以及通过对展品的人气高低、价格高低、录入时间来进行排序，更方便访客对展品进行定位和选择。展品以通栏的形式布局，平面感强，是产品更清晰突出。鼠标悬停在图片上，会有图

19

**********************************

片的信息介绍弹出，鼠标离开消失，互动性和体验度很高。这个用到的是jQuery中的mouseover和mouseout事件，鼠标经过悬停时mouseover触发显示信息，鼠标离开mouseout触发信息消失。如图4-5.

图4-6 商品图片的放大镜功能

点击图片信息上的查看详情，就可以看到该展品的详细信息，此时鼠标经过悬停图片，会有一个一个放大镜效果，这样设计的初衷是为了让访客看到更多的展品细节，获取更多信息，提高体验度。如图4-6.

资讯：资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性，它必须被消费者利用。资讯是一种信息，涵盖的不只是新闻，还可以包括其他媒介。

图4-7 资讯和二级导航

资讯栏的设计主要是发布即时的行业新闻动态，活动宣传，文化展示。其中包含有行业动态，艺术活动，艺术展讯，艺术视频四个二级导航。如图4-7.

20

**********************************

艺术名家：艺术名家栏主要是向访客展示介绍一些有所成的艺术家，要知道所有艺术品都离不开创造它的艺术家。

图4-8 艺术名家

选择一些优秀的艺术家进行介绍展示，首先可以提升艺术家知名度，提高展品热度，其次访客也可以了解到各个优秀艺术家，了解更多行业知识，当然优秀艺术家入驻，也可以很好的提升企业形象和实力。如图4-8.

会员中心：会员制是一种人与人或组织与组织之间进行沟通的媒介，它是由某个组织发起并在该组织的管理运作下，吸引客户自愿加入，目的是定期与会员联系，为他们提供具有较高感知价值的利益包。

图4-9 会员中心和二级导航

图4-10 会员注册、登录

21

**********************************

设置会员可以区别一般访客，增加客户粘度，为客户提供更多，更优质，更便捷的服务。会员中心包含有鉴定藏品，藏品养护两个二级导航。如图4-9.进入会员中心必须要先经过注册和登录。如图4-10.

图4-11 送鉴信息

图4-12 送鉴养护统计

会员登录后，就可以使用会员功能，包括鉴定藏品和藏品养护。点开二级导航选择送鉴，就可以填写送鉴信息。如图4-11.也可以查看送鉴和养护信息。如图4-12.

22

**********************************

图4-13 个人中心

点击会员中心，可以进入到个人中心，可以显示自己会员等级和送鉴养护的藏品。如图4-13.

关于我们：主要对企业做一个详细的介绍，让访客对企业有个更系统细致的了解。

4-14 关于我们

关于我们中可以写企业的文化背景，整体实力，服务宗旨，可以加深访客对企业的认知和了解，下面合作机构的设置，是加强行业内的交流与互动，也通过同行也的知名平台，来提升和打造自己的品牌。如图4-14.

常见问题：解决访客疑虑和问题，种植价值观，提高访客转化率。

23

**********************************

图4-15 常见问题和二级导航

图4-16 鉴证备案问题

访客在浏览网站内容时，难免对服务产生的疑虑和问题，通过对问题的整理和分析，总结归纳初一些常见问题，并进行分类，有鉴证备案，鉴证流程，资产管理，修复养护，个性定制。如图4-15.每个板块都有一些相关概念和疑问解答。如图4-16.

站内搜索：站内搜索通俗来讲是一个网站或商城的“大门口”，一般在形式上包括两个要件：搜索入口和搜索结果页面，但在其后台架构上是比较复杂的，其核心要件包括：中文分词技术、页面抓取技术、建立索引、对搜索结果排序以及对搜索关键词的统计、分析、关联、推荐等。

图4-17 站内搜索

站内搜索的设置，主要是针对商品这块，由于商品数量较大，单个寻找比较

24

**********************************

麻烦，也很浪费时间，使用站内搜索，按备案编号或物品名称查询，快速便捷。如图4-17.

4.3 系统后台设计与实现

系统后台的设计首先要功能齐全，能全面的监控和管理前端及数据。其次是管理要便捷，因为一般系统管理员对代码都不了解，关于内容的增删改查要简单可操作。最后也是很重要的一点是，安全性要好，这样才能保障系统正常稳定的运行。

图4-18 管理员登录

管理员登录：管理员登录界面包括用户名、密码、验证码、记住用户名、登录等。正确输入用户名、密码、验证码才能进入后台管理系统。点击验证码图片可以更新验证码，记住用户名的设置是为了方便管理员下次登录。如图4-18.

图4-19 后台系统界面

后台管理系统：管理员登录后，会进入后台管理系统界面，包括功能导航、

25

**********************************

商品管理、问答管理、会员管理、内容管理等模块。界面采用了分上下左右布局，左侧为导航区域，右侧为用户主要操作区域。在右上可以进行账号设置，退出后台操作。如图4-19.

图4-20 商品管理

商品管理：商品管理包含了商品管理、商品分类、商品参数、商品属性、规格管理、艺术名家等模块。在商品列表中可以添加、删除商品，也可以对商品进行筛选，设置每页显示的商品条数等。如图4-20.

图4-21 添加商品参数

添加商品参数：商品参数中可以选择添加操作，添加内容包括绑定分类、商品名称、商品排序、增加参数等。填写完整信息后，点击确定就可以添加成功了，放弃添加则点击返回。如图4-21.

26

**********************************

图4-22 问答管理

问答管理：问答管理实现对常见问题的归类解答，在问答管理界面可以对常见问题进行添加、删除操作。展示形式是问题类型，问题描述，问题解答。还可以对每页显示的问题条数进行设置。如图4-22.

图4-23 会员管理

会员管理：会员管理实现会员基本信息、等级，藏品的鉴定、养护的管理。选择会员后，可进行编辑修改和删除操作，也可以在后台直接添加会员，填写会员信息。还可以对每页显示的会员数进行设置。如图4-23.

27

**********************************

图4-24 文章管理

内容管理：内容管理实现系统的实时新闻资讯发布，相关文章添加。在文章列表中，展示包括文章标题、文章分类、是否发布、文章内容等，选择文章可以进行修改、删除等操作。也可以对每页显示的文章篇数进行设置。如图4-24.

4.4 数据库设计与实现 4.4.1 数据库表

根据设计稿设计出数据库所需要的主要表，如下所示：[1]

表3-2 t_art 藏品表 表字段 Id year sn artName file length width weight type meterial status

28

字段说明 藏品ID 工艺年份 编号 名称 文件 尺寸长 尺寸宽 重量 种类 材质 状态 **********************************

typeId time member 鉴定or养护 鉴定时间 会员 藏品表：记录藏品的基本信息，主要包括藏品编号、名称、尺寸、重量、种类、材质、状态、鉴定养护、鉴定时间以及关联的会员等。

表3-2 t_art 商品表 表字段 Id sn artName fullName price cost marketPrice image unit weight stock isMarketable introduction memo keyword weekHits 字段说明 商品ID 编号 名称 全称 销售价 成本价 市场价 展示图片 单位 重量 库存 是否上架 介绍 备注 搜索关键词 点击数 商品表：记录商品的基本信息，主要包括编号、名称、全称、售价、成本、图片、重量、库存、介绍、备注、搜索关键词以及点击数等。

表3-2 t_article 文章表 表字段 Id title

29

字段说明 文章ID 标题 **********************************

author content seoTitle seoKeywords seoDescription isPublication isTop hits articleCategory image 作者 内容 页面标题 页面关键词 页面描述 是否发布 是否置顶 点击数 文章分类 展示图片 文章表：记录文章的基本信息，主要包括文章标题、作者、文章内容、页面标题、页面关键词、页面描述、是否发布、是否置顶、点击数、分类、图片等。

表3-3 t_article_category 文章分类表 表字段 id name seoTitle seoKeywords seoDescription treePath grade parent children articles 字段说明 文章分类ID 名称 页面标题 页面关键词 页面描述 树路径 层级 上级分类 下级分类 文章 文章分类表：记录文章分类的基本信息，主要包括文章分类名称、页面标题、页面关键词、页面描述、树路径、层级、上级分类、下级分类、关联文章等。

表3-3 t_question 问题表 表字段 id

30

字段说明 问题ID **********************************

ques answer questionCategory 问题内容 答案内容 问题分类 问题表：记录问题的基本信息，主要包括问题ID，问题内容，答案内容，问题分类等。

表3-3 t_quest_category 问题分类表 表字段 id name seoTitle seoKeywords seoDescription treePath grade parent children articles 字段说明 问题分类ID 名称 页面标题 页面关键词 页面描述 树路径 层级 上级分类 下级分类 问题 问题分类表：记录问题分类的基本信息，主要包括问题分类名称、页面标题、页面关键词、页面描述、树路径、层级、上级分类、下级分类、关联问题等。

表3-3 t_identify 藏品鉴定表 表字段 id title name area address phone email member

31

字段说明 鉴定ID 名称 姓名 地区 地址 电话 邮箱 会员 **********************************

藏品鉴定表：记录藏品鉴定的基本信息，主要包括藏品名称、姓名、地区、地址、电话、邮箱、关联会员等。

表3-3 t_reservation 藏品养护表 表字段 id title name area address phone email member 字段说明 养护ID 名称 姓名 地区 地址 电话 邮箱 会员 藏品养护表：记录藏品养护的基本信息，主要包括藏品名称、姓名、地区、地址、电话、邮箱、关联会员等。

表3-9 t_member 会员表 表字段 id username Password email point amount balance isEnabled isLocked loginFailureCount lockedDate name gender

32

字段说明 申请人ID 用户名 密码 E-mail 积分 消费金额 余额 是否启用 是否锁定 连续登录失败次数 锁定日期 姓名 性别 **********************************

birth zipCode mobile memberRank 出生日期 地址 手机号 会员等级 会员表：记录会员的基本信息，主要包括会员用户名、密码、E-mail、积分、消费金额、是否启用、是否锁定、连续登录失败次数、锁定日期、姓名、性别、出生日期、地址、手机号以及会员等级等。

4.4.2 数据库完整性和安全性

1. 数据库的完整性约束

数据库完整性（Database Integrity）是指数据库中数据在逻辑上的一致性、正确性、有效性和相容性。数据库完整性由各种各样的完整性约束来保证，因此可以说数据库完整性设计就是数据库完整性约束的设计。数据库完整性约束可以通过DBMS或应用程序来实现，基于DBMS的完整性约束作为模式的一部分存入数据库中。数据库的完整性约束主要包括一下三个方面要求：

1) 实体完整性（Entity Integrity）

实体完整性指表中行的完整性。主要用于保证操作的数据（记录）非空、唯一且不重复。即实体完整性要求每个关系（表）有且仅有一个主键，每一个主键值必须唯一，而且不允许为“空”（NULL）或重复。

若属性A是基本关系R的主属性，则属性A不能取空值，即主属性不可为空值。用户提交信息后，系统会对用户所填的信息进行验证，对于其中的关键信息没有填或者数据非法时，系统会提示用户更改后再提交，这样保证了系统的实体完整性。

2) 参照完整性（Referential Integrity）

参照完整性属于表间规则。对于永久关系的相关表，在更新、插入或删除记录时，如果只改其一，就会影响数据的完整性。在关系数据库中，关系之间的联系是通过公共属性实现的。这个公共属性经常是一个表的主键，同时是另一个表的外键。参照完整性体现在两个方面：实现了表与表之间的联系，外键的取值必须是另一个表的主键的有效值，或是“空”值。

3) 用户定义完整性（User-defined Integrity）

33

**********************************

用户定义完整性是对数据表中字段属性的约束。包括字段的值域、字段的类型和字段的有效规则（如小数位数）等约束，是由确定关系结构时所定义的字段的属性决定的。如，百分制成绩的取值范围在0~100之间等。

2. 数据库的安全性

数据库安全包含两层含义：第一层是指系统运行安全，系统运行安全通常受到的威胁如下，一些网络不法分子通过网络，局域网等途径通过入侵电脑使系统无法正常启动，或超负荷让机子运行大量算法，并关闭cpu风扇，使cpu过热烧坏等破坏性活动； 第二层是指系统信息安全，系统安全通常受到的威胁如下，黑客对数据库入侵，并盗取想要的资料。数据库系统的安全特性主要是针对数据而言的，包括数据性、数据安全性、数据完整性、并发控制、故障恢复等几个方面。

本系统的安全设计包括服务器和数据库两方面。当用户访问系统特殊功能时，系统会首先检查用户是否登录，如果用户没有登录，则将页面跳转至登录界面。用户提交登录信息后，系统会对用户的身份进行核对，如果在数据库中找到相关记录，打开相应功能界面。在系统管理界面，提示用户使用管理员账号登录，没有管理权限的用户无法登录系统后台。系统确认了管理员身份后会打开后台管理界面，系统管理员可以整个系统的数据库进行管理和维护。

34

**********************************

5. 系统测试

系统测试是将已经确认的软件、计算机硬件、外设、网络等其他元素结合在一起，进行信息系统的各种组装测试和确认测试，系统测试是针对整个产品系统进行的测试，目的是验证系统是否满足了需求规格的定义，找出与需求规格不符或与之矛盾的地方，从而提出更加完善的方案。系统测试发现问题之后要经过调试找出错误原因和位置，然后进行改正。是基于系统整体需求说明书的黑盒类测试，应覆盖系统所有联合的部件。对象不仅仅包括需测试的软件，还要包含软件所依赖的硬件、外设甚至包括某些数据、某些支持软件及其接口等。

5.1 测试目的

系统测试是为了发现错误而执行程序的过程，成功的测试是发现了至今尚未发现的错误的测试。

测试的目的就是希望能以最少的人力和时间发现潜在的各种错误和缺陷。应根据开发各阶段的需求、设计等文档或程序的内部结构精心设计测试用例，并利用这些实例来运行程序，以便发现错误。信息系统测试应包括软件测试、硬件测试和网络测试。硬件测试、网络测试可以根据具体的性能指标来进行，此处所说的测试更多的是指软件测试。

系统测试是保证系统质量和可靠性的关键步骤，是对系统开发过程中的系统分析系统设计和实施的最后复查。根据测试的概念和目的，在进行信息系统测试时应遵循以基本原则。

应尽早并不断地进行测试。测试不是在应用系统开发完之后才进行的。由于原始问题的复杂性、开发各阶段的多样性以及参加人员之间的协调等因素，使得开发各个阶段都有可能出现错误。因此，测试应贯穿在开发的各个阶段，尽早纠正错误，消除隐患。

5.2 测试方法

系统测试主要进行兼容测试、功能确认测试、安全性测试、性能测试等。性能测试分四个方面：文档、界面、功能、性能。测试用例应包括合理的和不合理的输入条件。测试方法有功能测试，性能测试，易用性测试，兼容性测试，安全性测试

等。

35

**********************************

5.3 测试过程

响应式功能测试：响应式动态网站设计好后，我们需要在浏览器上模拟各种终端设备屏幕大小下的页面展示效果。

图5-1 PC端测试截图

PC端测试：在PC端打开网页，浏览网站整体页面，包括首页、二级页面的展示情况，有无出现图片分辨率、字体排版错误。经测试各方面展示良好，未出现测试目的中的错误。如图5-1.

图5-2 Pad端测试截图

Pad端测试：在电脑端打开网页，浏览网站整体页面，包括首页、二级页面

36

**********************************

的展示情况，有无出现图片分辨率、字体排版错误。经测试各方面展示良好，未出现测试目的中的错误。如图5-2.

图5-3 移动端测试截图

移动端测试：在移动端打开网页，浏览网站整体页面，包括首页、二级页面的展示情况，有无出现图片分辨率、字体排版错误。经测试各方面展示良好，未出现测试目的中的错误。如图5-3.

会员功能测试：会员功能需要注册、登录测试，以确保会员功能的稳定性和安全性。

37

**********************************

图5-4 注册正、误测试截图

会员注册：注册会员要填写手机号、用户名、密码、密码验证、验证码。错误测试中主要验证各项条件，手机号格式、用户名长度、密码长度等。经测试各项条件完整并给出提示。正确输入条件时注册成功。如图5-4.

图5-5 登录正、误测试截图

会员登录：登录会员要填写用户名、密码、验证码。错误测试中主要验证各项条件，用户名、密码、验证码等。经测试各项条件完整并给出提示。正确输入条件时登录成功。如图5-5.

站内搜索功能测试：站内搜索功能需要对不同查询条件进行测试，以确保站内搜索功能的完整性、稳定性和准确性。

38

**********************************

图5-6 空查询测试截图

空查询测试：空查询测试是为了测试站内搜索功能的完整性。选择按物品名称查询，在未填信息时点击GO查询测试，弹出错误提示。提示选择查找类型或产品。测试结果说明功能完整。如图5-6.

图5-7 备案编号查询测试截图

备案编号查询测试：选择按备案编号查询，在站内搜索框中输入备案编号201512191818，点击GO查询测试，跳转到《张京城 赏秋》图页面，查询成功。如图5-7.

图5-8 物品名称查询测试截图

39

**********************************

物品名称查询测试：选择按物品名称查询，在站内搜索框中输入物品名称方见尘 早春图，点击GO查询测试，跳转到《方见尘 早春图》页面，查询成功。如图5-8.

40

**********************************

6. 总结和展望

通过本文从理论和技术两个方面的论述，实现了一个具体的艺术资产·中国响应式官网平台。经过严密的测试，和预上线一段时间以来的系统监控，系统所有预期功能实现成功，且运行稳定。目前艺术资产·中国网站平台已经完成并已经投入使用，整个系统的界面友好，运行稳定，硬件资源配置要求较低，符合企业的实际情况。尽管本系统具有针对性设计的特点，但它的设计思想和实现方法并不失其一般性，对其他企业响应式官网的开发有一定的借鉴意义和参考价值。

本系统使用了Java EE的编程技术，页面技术JSP，开发模式B/S架构，数据库MySql。实现的功能包括前端会员注册、登录，站内搜索，产品展示，图片放大镜，新闻文章显示等；后台商品管理系统，问答管理系统，会员管理系统，内容管理系统。

通过这个系统的开发使我深入了解了Java EE编程的思想和方法，更进一步学习了JSP页面技术的各种使用方法，学会了写一些复杂的查询语句，对于B/S架构有了更为清晰的认识，并实践开发，更加熟练使用tomcat发布系统，这些都是极为宝贵的经验，使我受益良多，对于我以后参加工作有一定的帮助。

从设计的开始到完成，我查阅了大量有关响应式网站和Java EE程序开发等方面的资料，从模糊到清晰，渐渐形成了网站建设的整体认知。在整个系统的设计过程中，我学习了关于jQuery的许多知识，特别是ajax有了一定的理解。可以肯定的是，通过这次毕业设计，我对JavaEE的认识有了一个质的飞跃。

鉴于响应式 Web 设计可以为不同移动设备环境的用户提供更友好的浏览体验和更加舒适的界面风格，再者伴随着移动设备的不断增加与普及以及Web 技术的迅速发展，相信响应式web设计很快成为网页设计中的一大利器。尽管响应式 Web 设计技术仍然存在一些不足，再者对于不同用户体验来说也不是最完美的解决方案，尽管如此然而就针对目前的响应式Web技术发展状况而言，它已经丰富了我们在web设计方式可采用的方案，给每个网页设计师带来不一样的惊喜。最后随着采用响应式设计方案的网页设计师越来越多，相信不久的将来会有更多的且基于响应式Web设计的网页的产生。到那时随着响应式设计的逐渐普及以及被市场的认可，相信也会有更多的企业进入到响应式设计市场中来，随着企业的加入，又会触发更多开发人员的进入该领域，最终形成一个良性

41

**********************************

循环，以至最后能够促进整个web响应式网页设计的发展。

当然，由于个人能力和时间，这个系统中也存在一些不足和值得改进的地方，如会员功能中只能注册和登录，会员自己不能在个人中心里更改个人信息；常见问题中只有设定好的问题和回答，访客不能编辑提交问题等。这个网站平台整体是偏营销型，后期可以向电子商务平台发展，添加在线支付系统，订单管理系统，物流管理系统等功能。

42

**********************************

参考文献

[1] 唐俊开，HTML5技术与移动出版 [M].北京：电子工业出版社，2013.

[2] 秦成德，JSP动态开发案例指导 [M].北京：人民邮电出版社，2012.92-108. [3] 余芳，JSP动态网站开发案例指导 [M].上海：电子工业出版社,2010.142-176. [4] 秦小波，设计模式之禅 [M].北京：机械工业出版社,2014. [5] 冯燕奎.JSP实用案例教程[M]. 清华大学出版社,2004.

[6] 陶国荣，jQuery权威指南第二版 [M].北京：机械工业出版社,2013. [7] 唐汉明，翟振兴等. 深入浅出MySql[M]. 人民邮电出版社，2014.

[8] 朱育发，岳阳，jQuery开发完全技术宝典 [M].北京：中国铁道出版社,2012. [9] Brad Dayley，jQuery与JavaScript入门经典 [M].北京：人民邮电出版 社,2014. [10] 王映龙，刘春阳，熊曾刚，Java EE实用教程 [M].北京：清华大学出版 社,2011. [11] 李兴华,王月清. JavaWeb开发实战经典[M]. 北京：清华大学出版社,2010. [12] 弗雷恩. 响应式Web设计HTML5和CSS3实战[M]. 人民邮电出版社, 2013. [13] 连政. 基于HTML5技术的移动Web前端设计与开发[D]. 浙江工业大学, 2014. [14] 王庆, 杨文晖. 基于HTML5的移动Web技术[J]. 软件导刊, 2013(12):145-147. [15] 孙卫琴.Hibernate逍遥游记[M].北京：电子工业出版社，2010.

[16] 蔡建平编著. 软件测试方法与技术[M]. 北京：清华大学出版社, 2014.01. [17] 高湛. 基于HTML5的资讯分享网站的设计与实现[D]. 华南理工大学, 2013. [18] 梅耶著(美）. 软件测试的艺术 原书第3版. 北京：机械工业出版社, 2012.04. [19] (英)弗雷恩(Frain, B. ). 响应式Web设计[M]. 人民邮电出版社, 2012. [20] 拉格罗. 响应式Web设计[M]. 机械工业出版社, 2014.

[21] 罗强, 刘玉梅. 浅谈响应式Web设计[J]. 科技风, 2013(21):93-93. [22] 王珊, 萨师煊. 数据库系统概论(第5版)[J]. 中国大学教学, 2014(9). [23] 王珊, 丁治明. 移动数据库及其应用[J]. 计算机应用, 2000, 20(9):1-4.

[24] 唐汉明. 深入浅出--MYSQL数据库开发.优化与管理维护[M]. 人民邮电出版社, 2008. [25] 蔡建平编著. 软件测试方法与技术[M]. 北京：清华大学出版社, 2014.01. [26] 李书振. MySQL数据库的安全机制[J]. 计算机应用, 2002, 22(6):51-53.

[27] 刘姗. 一种改进的MySQL数据库访问控制的设计与实现[D]. 华中科技大学, 2011. [28] 孙莹,王华伟.软件测试中存在的问题及对策[J].软件导刊,2015,（第1期）.

[29] 杜小刚, 李舟军. J2EE Web开发框架体系结构[J]. 计算机科学, 2006, 33(8):236-239. [30] 周军. 基于FLEX和J2EE多层架构的Web开发框架研究[J]. 广西民族师范学院学报,

2010, 27(5):66-68.

[31] （美）Chris Radcliff著；王爱国，周丽萍等译.Perl Web开发技术[M].北京：机械工业出

版社.2002.

[32] 夏帮贵编著.Java Web开发完全掌握[M].北京：中国铁道出版社.2011. [33] 任东陕著.Web开发技术[M].西安：西安电子科技大学出版社.2009.

[34] 殷永峰, 王轶辰与刘斌, 基于MVC模式的嵌入式软件测试开发环境设计. 计算机工程

与应用, 2007(7): 第117-119页.

[35] 游琪, 张广云与桂改花, 基于MVC模式的角色访问控制系统设计. 电脑知识与技术,

2009(32): 第39-40页.

[36] 于同亚, 用C#设计基于.NET框架的应用程序——ASP.NET购物网站的设计与实现. 电

脑知识与技术, 2009(18): 第4907-4908页.

[37] 袁江琛, 基于ASP.NET的校园信息网设计和开发. 电脑编程技巧与维护, 2011(24): 第

43

**********************************

23-24+49页.

[38] 占小忆, VB.NET中利用ADO.NET连接数据库. 电脑知识与技术(学术交流), 2007(5):

第1211-1212页.

[39] 张峰与张莉莉, ASP.NET平台ADO.NET连接池机制的分析与设计. 电脑学习, 2008(2):

第-90页.

[40] 张国武, 基于OPC和.NET框架的SIMATICNET客户应用实现. 工业控制计算机,

2008(4): 第70-71页.

[41] 张捍卫, 基于ASP.NET AJAX的资产网络清查系统的设计. 计算机与现代化, 2012(4):

第94-96页.

[42] 张建成与李春青, 基于.NET环境下ADO.NET访问数据库技术的研究. 电脑知识与技

术, 2009(22): 第6102-6104页.

[43] 张杰, 张景安与孙沛, 基于云模型的C2C电子商务信任评价模型. 计算机系统应用,

2010(11): 第83-87+74页.

[44] 张黎明与龚琪琳, 基于MVC模式的Java Web应用设计. 计算机与现代化, 2007(2): 第

22-24页.

[45] 张俐, MVC模式在数据中间件中的应用. 计算机工程, 2010(9): 第70-72页.

[46] 张俐, 基于JavaEE的电信CRM数据持久层的实现. 计算机工程, 2009(6): 第41-43页. [47] 张俐与张维玺, 基于JavaEE的固定资产管理系统的设计与实现. 计算机工程与设计,

2009(16): 第3797-3800页.

[48] 张南平与朱富利, 基于MVC模式的Struts框架的研究与应用. 计算机技术与发展,

2006(3): 第229-231+234页.

[49] 张庆扬与柴胜, 使用二级索引的中文分词词典. 计算机工程与应用, 2009(19): 第

139-141页.

[50] 张翔, 陆远与罗贵明, 模型与实例设计模式在工作流管理系统设计中的应用. 计算机应

用研究, 2006(7): 第165-166+169页.

[51] 张永才与吾守尔•斯拉木, 基于J2ME的维汉双语电子词典的研究与实现. 计算机系统

应用, 2010(7): 第229-231页.

[52] 张宗平, 马冰冰与莫灵江, 基于ASP.NET的网络培训系统的研究. 现代计算机(专业版),

2011(14): 第52-页.

44

**********************************

致 谢

在武汉纺织大学的学习生活即将结束，在做毕业设计的这段时间里，我的老师、同学、朋友给予了我耐心细致的指导和帮助，借此机会，向他们表达我最真诚的感谢！

首先，在整个论文设计的过程中，从选题、论文框架的布局到完善细节的修改，我由衷的感谢我的导师魏雄老师。论文进展不顺利时，是魏老师以长者的仁爱胸怀对我表示关心，他不仅帮我指正了论文的方向，而且为我提供了大量的参考文献。魏老师责任心很强，对我的毕业设计十分关心，给我提供一些实在有用的学习方法和建议。快要完成毕设的几周，魏老师督促我们按时完成毕业设计中的计划，并在百忙之中审查我的论文格式并纠正我的格式问题。魏老师对我耐心的指导和严格的要求使我的学习有了更大的提高和收获。他勤勉的敬业精神和一丝不苟的工作态度也使我深深感动，这将是我一生工作和学习的好榜样。

其次，我还要特别感谢我的同学赵辉，她帮我在图书馆借了一些关于网站搭建的书籍，还给我介绍了几个有用前端框架和功能上的建议，让我对我的课题有了更加深入的研究与了解。

同时也要感谢我的父母和家人，他们这么多年来一直给我以无私的关爱与支持，浓浓的亲情和期盼都是我学习的动力和源泉。

最后要感谢四年来所有授我以业的老师，如果没有这些年的知识的积累与积淀，我也没有这么大的信心与动力完成这篇论文。同时感恩之余，也由衷的感谢各位老师在百忙之中抽出时间对本文进行审阅。

45