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

.摘 要 随着网络的发展和普及，各类建站技术的更新与运用，现在搭建一个网站的时间和成本越来越低，使得企业官方网站得到了极大的发展。从早期简单的网页展示，到后来的营销型网站，全网营销型网站，以及目前最新最主流的响应式网站。基于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； 响应式网站精品word文档.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 enterprises 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 精品word文档.精品word文档.目 录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. 系统需求分析13精品word文档.3.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 测试过程36精品word文档.6. 总结和展望41参考文献43致 谢45精品word文档.1. 绪论1.1 课题研究意义和目的现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业文件乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径1。随着3G、4G的发展和移动通信及WEB3.0技术的提升以及近年来各种移动智能设备的兴起，中国互联网正在往移动方向发展，呈现多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等,在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。企业可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售渠道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。今天越来越多的人使用智能手机、平板电脑等来查看邮件、浏览网页。随着移动终端的流行和大趋势的变化，网站设计技术也在随之变化。为了能够给移动终端客户提供更好的体验与服务，我们可以有很多选择。例如为移动设备单独重新设计一个网站，这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点2。另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验精品word文档.。响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整3。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。1.2 国内外发展现状和趋势响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。当然专门为手机或者平板电脑设计的网站或者app应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有230多种不同的屏幕尺寸，我们不可能为所有这些常用的230多种屏幕尺寸都设计一个独有的网站或者app应用。所以响应式设计此时体现出了它的价值所在。有调查结果显示，移动设备正在逐渐超过PC设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择和趋势。Ethan Marcotte曾经在A List Apart发表过一篇文章Responsive Web Design，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科响应式架构(responsive architecture)提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产智能玻璃：当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私精品word文档.4。将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式5。响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。1.3 本文工作和论文结构1.3.1 本文工作本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。阐述了一个基于J2EE基础之上的、应用HTML5，JSP等语言开发的B/S结构的高校办公自动化系统的设计与实现过程。具体工作如下： 介绍本系统的开发背景和本系统的国内外发展现状； 论述了开发本响应式网站平台开发过程中的理论支持、技术基础和实现的关键技术； 对本系统进行了需求分析和功能的设计，确定系统的体系结构； 以系统设计原则为标准，完成系统的前端页面、后台管理系统和数据库内容的具体实现过程。精品word文档.1.3.2 论文结构全文共分为六章，具体工作如下： 第一章 绪论。简单阐述了本系统的开发背景和国内外发展现状。 第二章 系统技术理论基础。主要介绍开发系统的过程中用到的技术和理论。第三章 系统需求分析。主要对响应式网站的基本需求进行分析、建模。 第四章 系统设计与实现。按照系统设计原则，对系统前端、后台和数据库进行设计，以及系统的前端页面、后台管理系统和数据库内容的具体实现过程。 第五章 系统测试。对系统的兼容性和功能性进行测试。第六章 总结和展望。对当前系统在设计和实现的过程当中遇到的问题和针对这些问题给出的解决的方案做个概要的经验总结，以便今后对类似系统的开发提出良好的可行性的建议。对当前系统的不足加以总结，在今后系统的升级或类似系统的开发时做出修改和调整。精品word文档.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)精品word文档.从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.网络标准精品word文档.HTML5 本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话 说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。2.多设备、跨平台用 HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中 心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台非常强大，也是大多数人对HTML5有兴趣的主要原因。3. 自适应网页设计很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）2010年，Ethan Marcotte提出了”自适应网页设计“这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。这就解决了传统的一种局面网站为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。4. 即时更新游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新8。总结概括HTML5有以下优点：1. 提高可用性和改进用户的友好体验；精品word文档.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 应用服务器上。精品word文档.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，这是为了安全性的考虑。 Application Client 容 器 客 户 端 容 器 ， 包 含 的 组 件 为Application Client。Application Client 相对 Applet 而言是一种较重量级的客户端，它能够使用 J2EE 的大多数 Service 和 API10。2.3 CSS3概述CSS即层叠样式表（CascadingStyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是精品word文档.CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效、多栏布局等。CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）11。2.4 JSP概述JSP(JavaServerPages)是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。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程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。JSP与JavaServlet一样，是在服务器端执行的，通常返回该客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。JSP的1.0规范的最后版本是1999年9月推出的，12月又推出了1.1规范。目前较新的是JSP1.2规范，JSP2.0规范的征求意见稿也已出台。精品word文档.JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。JavaServlet是JSP的技术基础，而且大型的Web应用程序的开发需要JavaServlet和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+, 精品word文档.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 架构管理软件更是方便、快捷、高效精品word文档.16。B/S 架构软件的优势： 维护和升级方式简单目前，网站平台的改进和升级越来越频繁，B/S 架构的产品明显体现着更为方便的特性。 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 ) 应用软件之一精品word文档.18。MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库19。精品word文档.3. 系统需求分析3.1 系统基本需求通过网站建设，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，从而使更多的用户认识企业、了解企业，同时采用面向未来的第四代网站技术，以html5为基础，自适应pc、笔记本、pad、手机等不同尺寸的终端。“一次设计、普遍适用”。设计时尚大气，更好的展示企业品牌形象、更利于网站优化、后台管理更便捷。迎合移动互联网的趋势，增加移动终端的客户转化率。本系统从功能上，可分为：前端功能包括：信息浏览，站内查询，会员注册，会员登录会员功能包括：藏品鉴定，藏品养护后台功能包括：商品管理，问答管理，会员管理，内容管理图3-1 系统访问权限图从访问权限上，可分为系统管理员，会员，游客。系统的权限设计使得不同的角色只能使用相对应的功能。系统管理员可以使用所有功能，包括前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能，以及后台的商品管理、问答管理、会员管理和内容管理功能；会员可以使用前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能；游客只能使用前端的信息浏览、站内查询功能和会员的会员注册功能。具体权限如图3-1.精品word文档.3.2 系统用例图3.2.1 系统管理员用例系统管理员则负责具体信息系统日常管理和维护，具有信息系统的最高管理权限。图3-2 管理员用例图系统管理员可以使用所有功能，包括前端的信息浏览、站内查询、会员注册、会员登录功能，会员的藏品鉴定、藏品养护功能，以及后台的商品管理、问答管理、会员管理和内容管理功能。用例图如图3-2.精品word文档.3.2.2 会员用例会员是指通过正规流程申请提交基本信息，加入公司会员系统的客户。图3-3 会员用例图会员可以使用前端的信息浏览、站内查询、会员注册、会员登录功能和会员的藏品鉴定、藏品养护功能。用例图如图3-3.3.2.3 游客用例游客是指，通过互联网在在线访问浏览网站，之前和公司无关联的访客。精品word文档.图3-4 游客用例图游客只能使用前端的信息浏览、站内查询功能和会员的会员注册功能。用例图如图3-4.精品word文档.4. 系统设计与实现4.1 系统设计原则1. 移动优先原则随着移动互联网的发展，移动设备的不断增加，考虑到当前的发展形势，优先考虑移动设计无可厚非。所谓移动优先原则是指，整个页面设计的流程优先考虑到移动设备的兼容显示，再次前提下在考虑PC机的兼容显示。2. 触控优先原则对触控优先原则的考虑也是基于移动互联网的发展迅速的前提下提出的。在移动设备终端上目前触控是我们主要的一种人机交互方式。基于这点在设计页面上就应该优先考虑设计出易于手指触摸的按钮等交互元素其次才是考虑同样易于鼠标点击的按钮等其他元素。所以网页设计师应该先从触控优先原则入手设计页面，之后在此基础上对页面进行适当的调整以达到对PC端的兼容显示。使网页上的相关交互元素既适合手指触摸又适合鼠标点击。3. 弹性化原则在弹性化布局的基础上引入CSS媒介查询的功能使得web响应式的设计和开发思路让页面真正的富有弹性。页面布局再不会被破坏，图片的尺寸可以被自动调整。这样无论用户使用任何设备，页面都能够自动响应与调整。 4. 宏观性原则在响应式 Web 开发过程中，设计人员在项目的每一个阶段都要在多种浏览器和不同尺寸屏幕中进行测试，以尽早发现问题。5. 开放性原则支持跨平台运行的体系架构，系统可以运行在各种Windows平台。系统具备互操作性和可扩展性性，具有兼容性。6. 稳定性原则精品word文档.保证系统采用成熟稳定的操作系统、数据库、网络协议等，保证系统长期稳定的不间断运行。7. 安全性原则对于基于网络的应用，最重要的问题之一是安全性。系统具备精细的权限管理，在网