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

基于 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； 响应式网站ABSTRACTWith 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基于 HTML5 的响应式网站的设计与实现(论文)正文目录1. 绪论11.1 课题研究意义和目的11.2 国内外发展现状和趋势21.3 本文工作和论文结构31.3.1 本文工作31.3.2 论文结构32. 系统技术理论基础52.1 HTML5 简介52.2 JavaEE 简介72.3 CSS3 概述92.4 JSP 概述92.5 JQuery 概述102.6 B/S 模式概述112.7 MySQL 概述123. 系统需求分析133.1 系统基本需求133.2 系统用例图143.2.1 系统管理员用例143.2.2 会员用例143.2.3 游客用例154. 系统设计与实现164.1 系统设计原则164.2 系统前端设计与实现174.3 系统后台设计与实现254.4 数据库设计与实现284.4.1 数据库表284.4.2 数据库完整性和安全性335. 系统测试355.1 测试目的355.2 测试方法355.3 测试过程366. 总结和展望41参考文献43致谢45*1. 绪论1.1 课题研究意义和目的现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业文件乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大， 对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径1。随着 3G、4G 的发展和移动通信及 WEB3.0 技术的提升以及近年来各种移动智能设备的兴起，中国互联网正在往移动方向发展，呈现多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等,在现今的大环境下移动设备正在普及并且正在逐渐超过 PC 设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。企业可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售渠道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。今天越来越多的人使用智能手机、平板电脑等来查看邮件、浏览网页。随着移动终端的流行和大趋势的变化，网站设计技术也在随之变化。为了能够给移动终端客户提供更好的体验与服务，我们可以有很多选择。例如为移动设备单独重新设计一个网站，这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点2。另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验。响应式 Web 设计(Responsive Web design)的理念是：页面的设计与开发应当8根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整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 设计同样应该做到根据不同设备环境自动响应及调整。显然，我们无法也无需使用运动传感器或是机器人技术，响应式 Web 设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的 media queries 和脚本等。但是响应式 Web 设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式5。响应式设计在 2012 年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种 Web 的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸” 的理念将更快地驱动响应式设计，所以 Web 设计也将迎来更多的响应式设计元素。1.3 本文工作和论文结构1.3.1 本文工作本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。阐述了一个基于J2EE 基础之上的、应用HTML5，JSP 等语言开发的 B/S 结构的高校办公自动化系统的设计与实现过程。具体工作如下： 介绍本系统的开发背景和本系统的国内外发展现状； 论述了开发本响应式网站平台开发过程中的理论支持、技术基础和实现的关键技术； 对本系统进行了需求分析和功能的设计，确定系统的体系结构； 以系统设计原则为标准，完成系统的前端页面、后台管理系统和数据库内容的具体实现过程。1.3.2 论文结构全文共分为六章，具体工作如下：第一章 绪论。简单阐述了本系统的开发背景和国内外发展现状。第二章 系统技术理论基础。主要介绍开发系统的过程中用到的技术和理论。第三章 系统需求分析。主要对响应式网站的基本需求进行分析、建模。第四章 系统设计与实现。按照系统设计原则，对系统前端、后台和数据库进行设计，以及系统的前端页面、后台管理系统和数据库内容的具体实现过程。第五章 系统测试。对系统的兼容性和功能性进行测试。第六章 总结和展望。对当前系统在设计和实现的过程当中遇到的问题和针对这些问题给出的解决的方案做个概要的经验总结，以便今后对类似系统的开发提出良好的可行性的建议。对当前系统的不足加以总结，在今后系统的升级或类似系统的开发时做出修改和调整。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 及摄像头相联。*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）没有用户会永远等待你的 LoadingHTML5 会通过 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 或 Google10Play 上，所以它的跨平台非常强大，也是大多数人对 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 架构下，开发人员可依循规范基础，进而开发企业级应用；而不同 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，这是为了安全性的考虑。* ApplicationClient 容 器客 户 端 容 器 ， 包 含 的 组 件 为Application Client。Application Client 相对 Applet 而言是一种较重量级的客户端，它能够使用 J2EE 的大多数 Service 和 API10。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 程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。12JSP 与 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 还有一个比较大的优势是，它的文档说明很全，*而且各种应用也说得很详细，同时还有许多成熟的插件可供选择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%在使用 jQuery14。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 架构管理软件更是方便、快捷、高效16。B/S 架构软件的优势： 维护和升级方式简单目前，网站平台的改进和升级越来越频繁，B/S 架构的产品明显体现着更为1*方便的特性。 B/S 架构的平台只需要管理服务器就行了，所有的客户端只是浏览器，根本不需要做任何的维护。无论用户的规模有多大，有多少分支机构都不会增加任何维护升级的工作量，所有的操作只需要针对服务器进行；如果是异地， 只需要把服务器连接专网即可，实现远程维护、升级和共享。所以客户机越来越“瘦”，而服务器越来越“胖”是将来信息化发展的主流方向。今后，系统升级和维护会越来越容易，而使用起来会越来越简单，这对用户人力、物力、时间、费用的节省是显而易见的。成本降低，选择更多大家都知道 windows 在桌面电脑上几乎一统天下，浏览器成为了标准配置，但在服务器操作系统上 windows 并不是处于绝对的统治地位。现在的趋势是凡使用 B/S 架构的应用管理软件，只需安装在 Linux 服务器上即可，而且安全性高。所以服务器操作系统的选择是很多的，不管选用那种操作系统都可以让大部分人使用 windows 作为桌面操作系统电脑不受影响，这就使的最流行免费的 Linux 操作系统快速发展起来，Linux 除了操作系统是免费的以外，连数据库也是免费的，这种选择非常盛行17。2.7 MySQL 概述MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的关系数据库管理系统 ( Relational Database Management System, RDBMS ) 应用软件之一18。MySQL 所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL 作为网站数据库19。163. 系统需求分析3.1 系统基本需求通过网站建设，借助网络推广企业的形象、宣传企业的产品、发布公司新闻， 从而使更多的用户认识企业、了解企业，同时采用面向未来的第四代网站技术， 以 html5 为基础，自适应 pc、笔记本、pad、手机等不同尺寸的终端。“一次设计、普遍适用”。设计时尚大气，更好的展示企业品牌形象、更利于网站优化、后台管理更便捷。迎合移动互联网的趋势，增加移动终端的客户转化率。本系统从功能上，可分为：前端功能包括：信息浏览，站内查询，会员注册，会员登录会员功能包括：藏品鉴定，藏品养护网络平台管理员会员后台功能包括：商品管理，问答管理，会员管理，内容管理商问会内品答员容管管管管游客理理理理藏藏会品品员鉴养登定护录会站信员内息注搜浏册索览图 3-1 系统访问权限图从访问权限上，可分为系统管理员，会员，游客。系统的权限设计使得不同的角色只能使用相对应的功能。系统管理员可以使用所有功能，包括前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能， 以及后台的商品管理、问答管理、会员管理和内容管理功能；会员可以使用前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能；游客只能使用前端的信息浏览、站内查询功能和会员的会员注册功能。具体权限如图 3-1.3.2 系统用例图3.2.1 系统管理员用例系统管理员则负责具体信息系统日常管理和维护，具有信息系统的最高管理权限。问答管理会员管理商品管理内容管理后台管理藏品鉴定会员功能管理员藏品养护前端功能信息浏览会员登录站内搜索会员注册图 3-2 管理员用例图系统管理员可以使用所有功能，包括前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能，以及后台的商品管理、问答管理、会员管理和内容管理功能。用例图如图 3-2.3.2.2 会员用例会员是指通过正规流程申请提交基本信息，加入公司会员系统的客户。藏品鉴定藏品养护会员功能会员登录会 员前端功能会员注册站内搜索信息浏览图 3-3会员用例图会员可以使用前端的信息浏览、站内查询、会员注册、会员登录功能和会员的藏品鉴定、藏品