基于响应式设计模式的Web前端开发

基于响应式设计模式的Web前端开发1绪论HTML5的优势相比于原来的HTML的优势是巨大的，一个新技术的出现必定带动一代人的追捧，HTML5开辟了网页设计的新开端。HTML5的出现席卷了全球人，这一技术使网页变得更加美观与灵活，以前需要很多代码量实现的一个功能，现在只要简简单单的几行代码就能实现，方便了程序员的很多工作量，让程序员无不为这种技术而痴迷。由于市场的庞大，使得这种技术得以广泛应用，收到了无数人员的广泛好评，方便了人们的生活，可以说是一个接近于完美的技术手段。选题背景及意义随着信息技术的不断发展，网络用户的使用量不断增加，用户使用小屏幕的人数在不断增加（如手机、平板、等等），小屏幕上网的使用是一种趋势，然而超大屏幕显示器也在快速发展中，从而导致了屏幕大小的显著差异。面对如此多的终端设备和千差万别的屏幕，传统的网页设计方法是很难达到为每一种屏幕尺寸设计一种专门的系统的，所以本文尝试着通过响应式设计的模式进行构建一个使系统页面随接入设备的显示大小不同而自行改变视频大小尺寸、动态调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户的系统。运用各种不同的技术加以整合运用，使自己的网页布局更加美观和实用，最后实现响应式布局，让不同的设备适合网页的布局，这就是响应式的优势。基于当前响应web界面的设计风格,本文试图从响应类型,追溯起源,响应web页面定义反应网络的特点和设计原则,应用程序和web开发响应进行了对比,总结成反应出现的必然性和自身的局限性,分析了响应设计的一些原因。从界面设计的角度，分析了响应式网页所带来的变化，指出响应式界面设计的本质不仅是外观上的新颖，而且强调了在多终端、多设备的情况下响应式界面的操作。对响应式布局中的各种元素进行分析，例如字体，图片大小，框架等等。针对这些情况，结合笔者自己的设计实践工作，验证了本文的实用价值，为界面设计提供了有价值的参考有效建议，建立了一套响应式web界面设计指南。响应式设计在国内发展状况从应用的角度来看，响应站建设无疑是大势所趋;然而，这并不是万灵药。响应式网站更适合中小企业的官方网站，如淘宝、京东等大型网站。从市场前景,绝对没有问题,但在技术方面,普及,当前国内建筑响应网站大多数还在初级阶段,需要适应各种浏览器,技术成本较高,一般企业做一个像样的响应类型网站,略贵,这是阻碍发展的一个重要的问题反应性网站;阈值技术的如果我们能解决这个问题,反应网站将成为未来的主流企业网站,目前国内能做的反应网站在线云工具越来越多,由竹网站响应云网站系统可以解决这个问题,根据竹网站网站,已经有几家上市公司在云网站系统的使用,这也证明了反应网站正逐渐被市场接受;所以，市场没问题，关键是怎么做的问题了。响应式设计在国外发展状况响应式web站点的概念是由美国web设计师在2010年提出的，此后响应式布局的概念在国际上得到了广泛的应用。反应网站在国外是很常见的,一方面,外国人和倡导自由的极简主义,另一方面是一个响应网站本身在屏幕上的独特魅力,在不同终端统一和交互体验,HTML5代码简洁,无处不显示出一种新的感觉,和外国人紧张的工作完美,无忧无虑的生活,我想从这个角度解释相吻合。并且响应式设计在国外已经相当成熟了，运用一种他们自己成熟的设计手法对他们来讲可谓是一种轻车熟路的感觉，更何况这种技术还散发着一种让人向往、膜拜的眼神，与外国人的生活方式如此相同，使之成为他们最喜爱的设计方式。换言之，在费用方面此方法又有极大地本钱优势，其成本的低廉使之成为一种趋势是必然的结果。一种新技术的革新无疑会推动人类生活的变化，不管是国内国外对新技术的渴望和未知都使得人们为之向往，所以响应式设计在国外的市场上可谓是家常便饭，随处可见，至今为止，市场的网页几乎大多都使用了这一技术，让设计者简洁，让用户体验良好，可谓是一种让人值得兴奋的技术。论文的组织结构论文共分为七章撰写，具体组织结构如下：绪论。针对本文的选题背景及意义，国内外的发展前景进行简要描述。相关技术。介绍系统设计开发中运用的关键技术及技术介绍，主要包括前端响应式设计技术中的关键技术类型，如HTML5、CSS3、流式布局、Bootstrap、JS和jQuery等关键技术。需求分析。介绍项目概况，描述了网站的简要需求，介绍前端网页的响应式设计思路并介绍响应式设计的基本流程。系统设计与实现。针对系统的设计，而详细介绍系统的实现。系统测试。对系统的部分功能进行测试，以达到用户所要达到的效果。结论与展望。总结当前所完成的系统项目功能用途，展望该项目往后发展方向。

2相关技术本章将对一些项目中即将用到的一些技术进行简单介绍，作为一名技术的运用者，我们并不需要深层次研究技术本身，只需要运用即可，所以对技术的一定认识还是要有的，下面我将把各个模块，所用的技术一一列举出来。2.1响应式设计技术响应式布局不仅需要满足很多的设备的需求，而且很多的设备的屏幕大小不一，所以应用响应式设计来简化我们的工作量确实是一个很好的技术手段，虽然很多的差异确实微乎其微，但是对于一个追求完美的工程师来说，这种细小的差异也不能容忍。响应式设计使得去控制设计的结果变得更加额外困难，也使得响应式布局非常难以预测。但这也很难说，这是响应式布局之美的一部分。经历过很多的不确定性，我将掌握更多的知识层面。人们仅凭一己之力很难去确定屏幕的大小尺寸，屏幕的分辨率到底是多少，为了解决这一难题，运用响应式设计是我们迫在眉睫的方法，这使得我们放开双手，让这一技术去完全代替人们的手工自动完成，而且使得页面更加的智能化，更加便于操作。2.1.1HTML5HTML5是网络的未来。HTML5不仅在PC上使用，也在移动设备上使用。据了解，全球有将近10亿个浏览器会支持HTML5在2013年里，全球HTMLWeb开发人员将达到200多万人。HTML5不断地改善和完美化，使得全球很多大公司都采用了这一技术，为这一技术而随之疯狂。总的来说，HTML5技术有一些优势，其中HTML5最酷的特性就是本地存储，这有点像老技术cookie与客户端数据库的集成。它比cookie更好，因为它支持多个Windows商店，它具有更好的安全性和性能，甚至在浏览器关闭后也可以保存它。HTML5的数据库放在了客户端，所以完全不必要担心用户数据的丢失，再者其适用于所有的浏览器。2.1.2CSS3CSS3的由来是建立在CSS2、CSS上的，CSS3完善了CSS2等之前的很多缺点，接替了前几个版本的很多优点，不断完善，进而促成了今天的轰动全球的CSS3。CSS3简化的以前很多代码完成的设计，现在只要几行，甚至只要一行代码就能完成的功能。CSS3的优点在于它可以美化HTML5所写的样式，美化当前的界面，使人赏心悦目，完成很多动画的功能。以前要美工完成的工作，现在只要用CSS3就能够独立完成，可谓是节省了人力、物力、财力。CSS3使用了很多以前使用的图像和脚本，甚至包括动画，现在只需要几行代码。例如:文本阴影和盒子阴影、图片边框、圆角、变形(旋转、缩放、倾斜、移动)、渐变、多图像背景、个性化字体、动画、多栏布局、媒体查询等。选择器则简化了前端开发工作人员中山小榄的设计，从而加快页面载入速度。2.1.3Bootstrap由于强大而又简单的Bootstrap的出现，使得前端工程师的工作得以简化，加快了前端工程师的代码速度，提供了一个规范而又优雅的编写环境，基于HTML和CSS的一个轻量级的前端框架。在Bootstrap官网上，包含了React框架、NEXT.JS轻量级框架、Node轻量而又高效的框架、Vue构建用户界面的框架等等。2.1.4JSPJSP（全名的JavaServerPages）是一种将静态页面活起来的技术，平常的静态页面不能跟用户进行交互式的对话，然而出现了JSP之后，用户可以完美的与网页进行对话式的交流，所以说JSP是一种让静态页面活起来的技术。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。2.1.5MqSQLMySQL是一个开源的，轻量级的数据库。由于市场上很多的数据库都是付费的，而且费用特别的昂贵，所以出现一款免费的，开源的数据库就显得尤为重要，此时，MySQL就出现了，以免费，开源而占据广泛的市场，现在大部分的公司都采用这一数据库，不管是直接拿来用也好，还是对源码加以简单修改也好，都可以非常好的运用这款数据库，所以这一数据库的使用才非常流行，所以在本系统中，我也将采用这一免费的数据库来开发学生成绩管理系统。2.1.6TomcatTomcat是一种非常流行的Web服务器，该服务器是完全免费的。Tomcat服务器主要由Apache软件公司开发，为市场上的大多数Web开发公司提供服务，并受到了广泛好评。在Web开发中，Web服务器是必不可少的，而Tomcat是服务器中的首选，因此该系统还将Tomcat服务器用作本系统的服务器管理软件。2.2本章小结本章针对学生成绩管理系统响应式的设计，所用到的技术进行简单描述。所用技术有HTML5、CSS3、Bootstrap、JSP、MySQL、Tomcat等技术，将这些技术熟练应用于本系统的开发之中，对这些技术加以深层次的了解。

3需求分析需求分析需要成为用户的真正解决方案。但是程序员自己有一个真正的问题通常情况下，开发软件的技术人员熟悉计算机技术。但与您的业务无关用户了解他们的业务。但是他们对计算机技术了解不多因此，技术人员和用户可能对同一问题有不同的认识。因此，在软件工程师可以开始设计软件之前，具有计算机技术和用户操作专业知识的软件系统分析人员必须分析软件问题的详细需求。需求分析是软件工程中的重要一步。在需求分析过程中，软件系统分析人员查看用户对软件需求的需求，并接收软件需求，以确定软件系统必须满足的功能，性能，数据和其他目标，并加以分析。3.1可行性分析可行性分析要求精确、全面、系统的分析项目的各个方面，论文通过对学生信息管理系统的主要功能和作用的研究，从技术、经济、社会等方面进行调查研究和分析比较，并对系统实现以后可能取得的影响进行预测，从而提出项目是否值得建设或如何设计等建议。3.1.1技术可行性分析成熟的技术是实现用户需求的前提。本系统的前端使用HTML5+CSS3来实现布局，该技术在世界上已经成熟稳定，大多数浏览器都支持这两种技术。有很多不支持的这两项技术的浏览器，我们可以用Javascript技术来实现最终的效果。后端采用MVC的设计模式，JSP编程技术，开发工具使用Eclipse，数据库使用MySQL。这些开发技术在世界各地的开发公司中都已经相当成熟，尤其是MySQL数据库，它具有开源、可移植等优点，受到广大编程用户的青睐。这些成熟的技术可以满足学生成绩管理系统的设计与实现，所以该系统在技术上是可行的。3.1.2经济上可行性分析经济可行性研究又称“经济可行性分析”。经济可行性研究是可行性研究中的重要组成部分，存在于项目可行性研究的全过程之中。其根本任务是从国民经济出发，通过综合成本效益分析，通过多个方案的比较，确定建设项目是否接受并推荐最佳的投资方案，为决策者做出投资决策提供科学依据。从本项目的经济可行性分析来看，本项目使用eclipse,MySQL等开源软件，这些软件都是免费的、开源的。再加上一台个人笔记本电脑，大概几千元左右，经济是完全可以进行下去的，所以经济可行性完全在预算之内。3.1.3法律上可行性分析本系统只针对学生的基本信息进行数据存储，只对学校管理员、老师、学生本人维护账号密码，因此不会泄露个人信息等重要信息文件，不会侵犯他人隐私。同时，在合法范围内使用本系统，并不会存在任何违法的问题。所以该系统在法律方面是完全可行的。即法律可行性通过。3.2功能需求分析3.2.1系统总体功能需求分析本系统以新余学院学生成绩管理工作为背景，结合本校的学生管理事务中心的实际经验，面向新余学院学生管理事务中心的工作需求设计与开发学生成绩管理。按照项目中的实际需求，将学生成绩管理系统划分为管理员、教师、学生三个功能模块，并对成绩系统中不同的用户设置不同的权限，不同的用户只能做自己权限内的事务和操作。系统用户权限示意图如图3-1所示。图3-1学生信息管理系统功能模块图下面将分别对学生、教师、管理员三种人员进行需求分析，并给出子功能模块图。3.2.2学生的需求分析通过对学生事务中心管理人员和办公室工作人员的调查，获得学生需要的功能有:学生对各学科的查询、学生对各种通知和公告的查看、学生对自己信息的修改和查看、学生对课程信息的查看等。子功能模块图如图3-2所示。图3-2学生需求功能模块图3.2.3管理员的需求分析经过对学生事务中心的管理员及办公人员的调查得出，以下管理员用户需要的功能，管理员对公告的发布，管理员对公告的删除，管理员对公告的批量删除，管理员对学生信息的修改，管理员对学生信息的批量删除，管理员对教师信息的批量删除及修改等操作，管理员对课程信息的导入与删除，管理员对学生成绩的汇总及报表等功能需求。子功能模块图如图3-3所示。图3-3管理员需求功能模块图3.2.4教师的需求分析经过对学生事务中心的管理员及办公人员的调查得出，得以得出教师用户需要的功能，教师对课程的增加，教师对课程的修改（加课或换课），教师对成绩的录入，教师对学生成绩的修改等。子功能模块图如图3-4所示。图3-4教师需求功能模块图3.3非功能需求分析非功能规格是与系统特定功能不直接相关的规格。但是涉及系统的整体特征（例如可靠性，响应时间，存储空间等）不活动的规范定义了系统提供的服务或功能限制，包括时间限制，空间限制，过程限制制定并遵循标准。它源于用户约束，包括预算约束、制度政策、与其他硬件和软件系统的互操作性，以及诸如安全法规和隐私保护立法等外部因素。3.3.1安全性需求分析学生信息管理系统在处理数据过程中会涉及到用户的个人信息，要是系统存在安全漏洞将会造成信息的泄露及系统的安全性丧失，将会波及到用户信息的安全。因此，为了使整个系统处于一个安全的状态下运行，是学生和老师的信息安全得到保障，我们将WEB服务器架设在校园内，内部设有安全防火墙，防止病毒以及黑客入侵服务器。不同用户的登入采用不同的账户+不同的密码+用户身份验证的方式登入，用户的密码将采用MD5加密方法进行加密。对数据库还进行了加密处理，并设计了周期性进行备份处理。3.3.2实用性需求分析实用性需求分析主要是针对学生信息的查询、教师课程的查询以及管理员的实际操作。学校内部有校园全覆盖的校园网，针对每个用户都可以随时随地在校园中进行登入学生信息管理系统进行操作。并且每个功能模块都符合所需用户的需求，让用户达到满意的效果，即实用性效果良好。3.4本章小结本章主要针对系统功能需求进行详细的讲解，并且阐述了每个子功能模块所要进行的具体操作及不同用户所针对的不同的需求。最后，又对非功能需求进行了简单分析。为下一章系统设计与实现奠定了良好的基础。

4系统设计与实现系统的详细设计是根据系统需求的分析结合需要实现的功能而进行代码的编写详细设计。系统实现问题则是指编完代码之后进行代码的调试、译码、运行然后查看运行成功的界面是否达到最初的要求。4.1登录界面对一个基于响应式Web设计的学生信息管理系统来说，一个直观、简洁的登录首页是非常重要的，给人一种初次见面的好感度提升是非常重要的，所以在设计登入首页时就是尽可能简洁明了的界面。系统的登入界面如图4-1所示。图4-1系统登录界面图从登录界面可以看出一共有四栏，第一栏为用户类型选择，分为管理员、学生、教师三种类型；第二栏为用户名栏；第三栏为密码栏；第四栏为验证码栏，验证码为随机给出。当用户输入了用户名和密码，之后再输入验证码，若有一项没有输入正确将会触发错误机制，这些错误可能是用户名错误、密码错误或验证码错误，相对应的错误，会触发相对应的错误机制。这里截取了验证码输入错误的截图，如下图4-2所示。图4-2验证码验证错误图4.2管理员操作界面当用户输入的信息都正确之后，点击登录，登录进入管理员操作界面（这里主要用管理员身份来介绍系统）。登录成功之后的系统界面截图如下图4-3所示。图4-3管理员界面图从上图可以看出，管理员界面包含学生信息管理界面、教师信息管理界面、课程信息管理界面、成绩报表管理界面以及系统设置界面。本系统最大的特点就是采用了响应式设计的技术，对界面进行响应式的设计，适应了所有设备的使用，不管是手机，平板电脑，电脑都可以方便的使用本系统。以下就用手机界面截图来展示一下这个功能的便捷，如下图4-4所示。图4-4手机界面下的系统布局图从上图可以看出，菜单采用层叠式方式，将管理员的各个操作界面层叠起来，方便了手机用户的使用。4.3学生的管理功能在所有的功能中，最常用的莫过于学生的成绩、课程等功能了。下面我将针对学生界面进行讲解，学生操作界面如图4-5所示。图4-5学生操作界面图从上图可以看出，学生界面包含了课程信息界面、通知界面、成绩界面。学生可以通过课程界面查看自己的有关课程信息；学生可以通过成绩界面查看自己的成绩信息。学生通过选课界面选择自己想学的课程，可查询可选课程和已选课程，有关界面的详细信息如图4-6所示。4-6学生选课界面图学生通过查询成绩界面查询自己的成绩，也可通过打印按钮来打印自己的成绩报表，相关图片如图4-7所示。图4-7学生成绩界面图4.4教师的管理功能教师一职在学生信息管理系统中也尤为重要，关系到课程的开设与课程成绩的录入，在学生信息管理系统中教师可以查看学生选课情况及自己课程开设情况。具体功能看如下图4-8所示。图4-8教师管理界面图从上图中可以看出，教师可以通过学生列表查看选自己课程的学生人数及姓名，教师还可以从我的课程中查看自己开设的课程具体情况。学生列表界面如下图4-9所示。图4-9学生列表图教师所开课程图如图4-10所示。图4-10教师的课程图4.5成绩报表功能学生信息系统中一个重要的系统功能--成绩报表生成。选择需要的时间区间，查询需要搜索的学生或老师课程成绩，将学生成绩导出至Excel中，方便管理人员对学生信息的查询。有关图片如下图4-11所示。图4-11成绩报表生成图4.6本章小结本章详细介绍了系统的设计与实现，通过图文并茂的方式，让我们更加清晰的了解学生成绩管理系统。主要介绍了登录界面、管理员操作界面、学生操作界面、教师操作界面和成绩报表功能。

5系统测试5.1测试目的软件测试的目的是在指定条件下测试软件，并通过测试查找软件中的错误。这样，程序员可以衡量软件的质量，并对软件是否满足原始要求或原始意图做出正确的判断。软件测试随软件的创建一起进行。在早期的软件开发过程中，软件规模较小且复杂度较低。软件开发过程是混乱且非常随机的。测试的含义相对狭窄。开发人员将测试等同于“调试”，以纠正软件中已知的错误。开发人员经常完成这部分工作。5.2功能测试功能测试是软件测试人员基于软件的各个功能进行规模化的测试运行，对不同的功能进行不同的测试用例针对性的测试，简单说就是针对每个