web框架（共9篇）
web框架 篇1
摘要：本文主要进行了基于Bootstrap和Angular JS框架的WEB前端设计研究。首先介绍了WEB前端设计研究的意义、框架的概念和优点,分析了Bootstrap和Angular JS框架设计的核心思想,最后探讨了其在WEB前端设计的具体应用。
关键词：Bootstrap,Angular JS,框架,WEB前端
0 引言
随着新一代信息技术的快速发展,Web应用越来越广泛,对于Web前端开发工程师的要求也越来越高,无论是开发技术上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,由原来必须掌握的HTML、CSS和Java Script三个技术要素演变成现在的HTML5,CSS3和Jquery。而且前端工程师开发的Web应用不仅需要适合传统的电脑PC端,还需要适合手机和IPAD等各种不同的移动设备。为了降低Web前端开发的难度和复杂性,引入框架思想进行Web前端开发。
使用框架进行Web前端开发主要有两个方面的原因:使用W3C标准的框架后,可以有效提高Web应用的性能,让应用的代码组织更有序,提高其可维护性;使用便捷的MVC框架,把HTML作为信息模型(Model)、CSS控制样式(View)、Java Script实现功能和业务逻辑(Controller),使得代码具有很好的重用性和复用性,提高Web前端开发的效率、质量和团队协作性。本文主要简单介绍使用框架思想来进行Web前端开发。
1 框架概述
框架是随着软件工程的发展演变而来的,在软件开发过程中,很多项目要解决的问题和实现的功能是一样的,在这种情况下,可以将实现相同功能的代码放在单独的一个文件作为组件或构件,供以后开发和使用,这些代码是可重用和扩展的。因此,业界人士将相同功能的实现和问题的解决方法进行抽象,最终抽取和形成一个应用框架。框架可以使软件开发人员将大部分时间用来分析和处理业务逻辑上,在编写代码时只要应用框架就可以了。
使用框架开发应用的优点如下:
(1)框架重用性好,开发效率高。在开发应用时,可以重用框架的分析、设计、代码,使得应用开发效率和开发质量得到了显著提高。应用开发人员可以按照框架的思想将应用进行分析并将其分解为同样的组件,采用同样的方法来解决的问题。框架还提供了可重用的概要设计和详细设计,并将应用分解成较小的组件和接口。只要符合框架的定义和要求,开发人员就可以使用框架中的类和接口,使得开发效率大大提高。
(2)因框架实现了“高内聚、低耦合”,可扩展性较好。框架把要解决的业务分解为较小的事务,采用分层的方法将相关性很强的代码组合成一个组件,根据单一责任原则只解决一项较小的事务,并且减少组件与组件之间的联系,如果彼此之间的联系比较复杂的话,继续分解为较小的组件。因此框架实现了软件工程的“高内聚、低耦合”的要求,易于控制,易于扩展。
(3)使用框架,开发周期短,成本低,可维护性较好。使用框架开发应用,只要调用类和接口就可以完成大部分工作,大幅度缩短了应用和软件的开发周期,显著提高了软件开发质量。大粒度的重用使得应用和软件开发成本大大降低,开发时间成倍减少,同时分层思想设计的框架使得应用开发的适应性和灵活性也得到增强,可维护性较好。
2 Bootstrap框架应用
2.1 概述
Bootstrap框架主要用于静态页面的设计,是由Twitter公司的设计师Mark Otto和Jacob Thornton共同开发的,是比较受欢迎的一个CSS/HTML Web前端框架。它是基于HTML5、CSS3和Java Script的框架,符合HTML和CSS规范,且代码简洁灵活,使得Web前端开发更加快捷。Bootstrap框架推出以后一直颇受欢迎,是Git Hub网站上的排行榜靠前的开源项目,国外知名的公司NASA的Breaking News和国内一些移动开发者较为熟悉We X5前端开源框架都采用了Bootstrap框架。
由于Bootstrap的HTML是基于HTML5的最新技术,可以快速实现响应式页面,集成了非常友好的CSS样式表,对于非设计人员也可以制作出很漂亮的网页,且占用资源非常少,因此我们也采用Bootstrap框架进行Web前端设计。该框架包含了丰富多彩的Web组件,利用这些组件,我们可以快速的搭建一个个性化的、漂亮和功能完备的网站。主要包括以下几个部分:
1)全局CSS样式:包含了格栅系统、表单和表格等集成样式。
2)组件:包含了下拉菜单、按钮下拉菜单、文本框、导航、列表框等组件。
3)插件:包含了进度条、警告对话框、弹出框等插件。
2.2 应用
(1)从Bootstrap官网http://getbootstrap.com/getting-started/#download下载Bootstrap开源框架。Bootstrap主要包含css、fonts和js文件夹:css文件夹存放的是bootstrap.css基本样式,在网页中使用<link rel="stylesheet"href="css/bootstrap.css"/>命令即可;fonts文件夹存储网页中可以使用的各种字体;js文件夹存放的是bootstrap.js等js文件,在网页中可以通过<script></script>标签来使用js组件。
(2)Bootstrap是根据移动终端优先的原则设计的。它支持响应式网页(RWD,Responsive Web Design),为了控制网页的尺寸比例和触屏缩放,需要使用命<meta name="viewport"content="width=devicewidth,initial-scale=1">命令添加viewport元素。
(3)设置页面流式布局,网页中的各元素会根据设备分辨率的不同而自动调整大小,但元素位置并不会发生变化。流式布局通常将页面分为12列,将网页的宽度设置为100%,具体代码因太多此处省略。
(4)运用Bootstrap提供的各种样式、组件和插件完成WEB前端设计。例如制作一个提交按钮,通过以下代码实现<button class="btn btn-default"type="submit">提交</button>。
3 Angular JS框架应用
3.1 概述
Angular JS主要用于构建单页面的动态页面的设计,更多关注的是构建CRUD(增加Create、查询Retrieve、更新Update、删除Delete)应用,由Misko Hevery等人在2009年创建,是一款优秀的JS框架,被广泛应用。
Angular JS主要使用MVC的分层设计模式,将管理数据的model、应用逻辑controller和向用户显示数据的界面(view)清晰地分离开,以提高代码的易读性和可移植性,使得程序清晰易读。在Angular JS应用中,model被存储在各个对象的属性中,view就是文档对象模型(DOM),controller就是JS类和代码。
3.2 应用
(1)从网上下载Angular JS框架。将要使用的js文件复制到工程文件的js文件夹中,并在页面中使用<script src="js/angular.js"></script>命令引入。
(2)使用ng-app命令在动态页面中创建模块。Angular JS的MVC结构是基于整个具体应用的。通常在页面的指定容器标签中使用ngapp命令来创建具体模块,例如<div ng-app="test"></div>。
(3)设置控制器controller。在网页中通过ng-controller指令设置控制器,<div ng-app="test"ng-controller="test Controller">{{text}}</div>。再通过JS代码控制逻辑,app.controller("test Controller",function($scope){$scope.text='welcome';})。
(4)设置模型数据model。通过ng-model命令动态设定模型数据model内容,<div ng-app="特test"ng-controller="Hello Controller"><input type="text"ng-model="text">{{text}}</div>。
4 总结
本文针对新一代信息技术的发展,将Bootstrap和Angular JS框架运用在WEB前端开发中,希望能对WEB前端设计的研究提供一定的参考。当然本文只是简单介绍了Bootstrap和Angular JS框架的基本应用,详细的应用有待进一步的完善。
参考文献
[1]http://www.51cto.com.
[2]http://baike.baidu.Com.
[3]俞华锋.基于HTML5的网页设计与实现[J].科技信息,2012(29).
web框架 篇2
【摘要】在INTRANET上设计基于WEB的MIS时，大批量数据录入变成了操作上的瓶颈，并给WEB SERVER与DATABASE造极大的负担。
为解决这个问题，我们设计了多框架结构，将应用的功能进行细分，然后交给各框架分别完成，这种分工协作方式可以使操作界面上的数据实现受控的部分刷新，有效地减小了网络的数据传输量，缩短了各部分的处理时间，同时了也大大减轻了WEB SERVER与DATABASE的系统负担。
多框架解决方案采用ASP(ActiveX Server Pages)及ADO(ActiveX Data Objects)完成与数据库的交互工作。采用DOM技术解决和框架之间的协作问题。
关键词：多框架
*注：本文中讨论的方案中WEB服务器为IIS4.0、客户端浏览器为IE4.0以上版本。
一、问题的提出
最初，我们采用ASP及ADO技术在INTRANET上设计基于WEB的MIS(下文简称MIS)时，沿用了以往设计WEB站点时的设计习惯。但随着设计的深入，我们发现，现有的系统结构无法承担大批量的数据录入工作，因此，必须重新构造系统的总体设计结构。
MIS与普通的WEB站点之间最大的区别在于处理信息的方式。普通WEB站点的`主要功能是发布信息，采集信息只是它极小的一部分功能，而且这些信息采集功能也都是比较简单的。但对于MIS系统来说，信息的采集及维护工作占有比较高的比例，在这些信息采集功能中还存在一些较为复杂及大批量的数据录入功能，这些功能成为了系统中的设计难点。
二、问题的分析
当一个系统涉及到复杂及大批量的数据录入功能时，同时也就涉及到了响应速度及界面的问题。在以往的C/S方式中，客户端的录入速度由录入员来控制，一般情况下，当录入员熟悉了操作方式之后，录入速度是不受系统限制的。但在WEB方式下，页面采用完全刷新方式，每次的交互操作至少要造成一个页面的刷新。这种刷新的工作不仅更新了数据，也将界面上的一些固定内容重新加载了一遍。对于普通用户来说，这种短时间的刷新并不会造成影响;但对于长时间进行操作的录入员来说，录入一条数据就要等待一段时间(这一段时间可能是2-3秒，也可能是十几秒甚至几分钟)，是绝对不能接受的。即使，网络有足够的带宽，页面的重载也会造成一种闪动的效果，这种一闪一闪的刷新造成录入员必须重新识别页面上的各种元素，不仅也会拖慢了他们的录入速度，还造成眼睛的快速疲劳。
三、解决方案
如果能够“不”刷新页面而“快速更新”页面中的数据，问题应该能够解决了。而且页面由于没有刷新，一些必须由服务器保存的状态信息也能够在客户端保存下来了，从而减轻服务器的负担。那么如何达到这个目标呢?下面将详细讨论。
1.设计思路
首先，我们确立采用多框架建立页面。框架(Frames)其实不是什么新东西，许多站点上都用它来完成显示固定标题及菜单的功能。采用框架能够避免一些页面的重复访问。但是如果结合使用DOM(Document objects model)，框架可以完成许多细致的工作。
按照DOM的定义，框架可以被当作一个对象。假设我们建立了一个框架，并给它取名为A，则对于建立框架的页面来说，A是Frames集合中的一个成员，而对于A中的页面来说，A相当于window对象。因些，虽然框架之间不存在从属关系，但可以通过它们的父页面(对象)建立各框架之间的关系。
如右图所示：框架之间能够进行相互控制与数据传送。
1).在框架A中用的是最常用的框架控制方式，利用
web框架 篇3
【摘要】框架是一种复杂的构件形式，可以达到复用的效果，可生成自定义的应用程序，在应用过程中可自主升级，具有良好的扩展性和结构性。成熟的框架可以辅助完成一些基本工作，开发人员只需要进行逻辑设计即可。因此，框架是一种针对特定领域而面向对象软件的构件技术，能够简化设计问题，提高软件开发效率，使产品扩展性更加良好，维护起来也更加便捷。针对Web开源框架研究的市场潜力，本文将深层次的分析基于开源框架开发Web应用的研究情况。
【关键词】开源框架开发；Web；应用
软件开发从结构化逐渐发展为面向对象化，其发展焦点集中在提高模块质量方面，21世纪的软件开发已从面向对象过程进化到了面向构件过程，未来的应用开发将努力提供一种完全开放的构件体系，便于构件之间的集成和组装。
1、Web应用开发框架
1.1框架技术概述
世界上第一个广泛应用的框架是MVC框架，在长期的发展过程中，框架已不再局限于与用户对接，而是存在多种应用领域。框架能够为软件设计和代码组成提供一种可复用的软件基础，实现特定领域的应用设计，关于框架的定义，学界有这样的描述：框架是一个部分完成的软件系统，为特定对象提供基本构造模块，并定义特殊功能的实现方式。按照不同的应用方式可以将框架分为黑盒框架和白盒框架。黑盒框架所描述的是系统包含的类以及类之间的相互关系，用户可以通过构件的不同组装方式，达到修改黑盒框架的目的[1]。白盒框架与黑盒框架恰好相反，它是通过用户的抽象类继承来定制框架的，用户在使用过程中首先需要为每个抽象类派生出一个子类，然后在子类中实现抽象方法，最后将其用于特定应用。由于白盒框架能够为用户提供更加具体的细节，而且用户还可以进行各种修改操作，提高了白盒框架的复用范围，但前提是用户需要掌握白盒框架的内部结构，对用户的技术水平有一定要求。
1.2多种框架类型
（1）Strets框架。Strets是在JSP基础上发展并成熟起来的一种新型框架形式，而且在JSP框架中占有绝大部分的市场份额，该框架整合了JSP的所有技术优势，能够为用户提供可扩展的软件开发基础。（2）Struts框架。Struts由一系列相互关联的类组成，可在Web应用中加入MVC架构模式，因此，Struts是MVC的一种体现方式。（3）Ajax框架。Ajax技术是诸多RIA技术中最受欢迎的一种实现技术，能够用于辅助程序开发，而且多数都是开源的，体现了Ajax技术的开放性。（4）DWR框架。每个Ajax框架都具有屏蔽前台操作的功能，DWR框架就相当于一种引擎，能够把Ajax的请求-响应循环彻底消除掉，从而简化代码程序[2]。因此，DWR框架主要是针对Ajax框架开发出来的，可用于开放源码，提供协议解决方案，虽然DWR不是唯一可用的引擎工具包，但却是最成熟的，与其他框架相比，DWR最大的特色在于服务端，客户端可以直接生成SCRIPT代码，没有插件困扰，简单易行，对于DHTML编程经验不足的开发用户来讲，DWR是最佳的选择对象。
2、Web开发集成框架应用与实现
2.1级联菜单的设计与实现
Web应用中一般是将菜单写成固定的静态结构，程序可读性较差，Javascript代码维护起来难度较大，正是基于这种现状，才在流行开源框架的基础上形成了级联菜单模式，通过Struts与Ajax的联合使用，借助MVC来提高编程效率，降低维护难度。级联菜单与传统菜单相比，可一次性完成数据转用，避免每次操作引起的重载提示，还可用JavaScript来控制子集栏目，避免向服务器频繁发送请求信息，提高了用户操作的响应速度[3]。
2.2检索对话框的设计与实现
随着社会信息量的爆炸式增长，人们对信息检索提出了更高的要求，一方面要求信息检索的准确率要高，另一方面是在信息检索速度方面更快，从而在更短的时间内检索到更加准确、有价值的信息。基于此，检索提示功能能够有效的解决上述两个问题，借助Ajax框架的检索提示功能，用户可以在检索信息时获得有用的参考提示，就像使用电脑桌面程序一样，无需任何操作，可有效节省检索时间，提高检索效率[4]。
2.3使用效率分析
为了体现Ajax框架的应用优势，需要在同一功能模块基础上对比使用Ajax和不使用两种情况下的网络流量和代码使用量。使用Ajax框架时，一开始由于只加载JS类库，因此持续时间比较短，但是在不使用Ajax框架框架时，第一次载入的流量较高，而且持续时间较长，两者之間的流量差距较大。代码使用量是所有开发用户所共同关心的问题，因为代码用量越少，开发难度也就越小，维护起来也更加简单。在检索框中使用DWR框架，代码量是413行，在不使用时，代码量是531行，但从行数上比较，使用DWR框架时，可有效降低22%的工作量。
3、结束语
本文是围绕开源框架Web技术来实现MVC展开的，通过对当前主要应用框架技术进行分析，可将开源框架集成应用到Web中，实现基于开源框架的Web应用，并分析Web开发集成框架在级联菜单、检索对话框、使用效率方面的应用优势。我们有理由相信，随着开源框架技术水平的提高，基于开源框架的Web应用将具有更加广阔的市场前景。
参考文献
[1]鲍陈，王海涛，陈阳.基于ExtJS和S2SH的Web开发框架研究与应用[J].宿州学院学报，2013，09：64-70.
[2]张婷.基于Extjs+Spring MVC的Web系统开发架构的研究与实现[J].计算机技术与发展，2013，01：147-149+153.
[3]姚敦红，彭小宁，石元泉.基于Pushlet与Esper轻量级实时Web系统的设计[J].计算机应用与软件，2013，05：163-166.
基于缓存框架的Web缓存研究 篇4
1 缓存框架OSCache研究
OSCache由Open Symphony设计,它是一种开创性的JSP定制标记应用,提供了在现有JSP页面之内实现快速内存缓冲的功能。OSCache也是一个被广泛采用的高性能的JZEE缓存框架,它能应用于任何Java应用程序的缓存解决方案。
OSCache是Open Symphony组织提供的一个J2EE架构中Web应用层的缓存技术实现组件,它能缓存任何Java对象,拥有全面的API,可以永久缓存,支持集群,缓存过期控制等等。
1.1 缓存标签实现部分页面缓存
OSCache提供一系列的JSP标签库,实现主要缓存功能,这些标签是:cache、usecached、flush等等。
1)cache标签
这是OSCache标签库中最重要的一个标签,使用格式如下:
some JSP content//需要缓存的内容
包括在标签之间的内容将被缓存处理。页面第一次加载的时候,标签中的内容被处理并被缓存起来,页面被再次访问的时候,缓存机制首先会检查这部分内容是否失效。如果缓存内容已经失效,这时缓存内容将被重新处理并且返回处理过后的信息;如果缓存内容没有失效,那么返回给用户的将是缓存中的信息。
2)usecached标签
这个标签是cache标签的一个嵌套标签,主要用在程序控制中通知父标签是否使用以前的缓存内容,如:
<%try{%>
some JSP content//需要缓存的内容
<%}
catch(Exception){%}
<%}%>
上述代码在系统容错性方面提供了很好的容错方案。当程序捕获到异常时,通过Catch分支中usecached标签的use属性执行操作。当use属性值为true时,读取缓存内容。若此时系统发生错误,用户看到的不再是单调乏味的报错页面而是储存在缓存中的内容。
3)flush标签
该标签的作用体现在允许操作者在任意运行期间自主手动刷新缓存内容。格式如下:
上述代码表示刷新session范围内键值为my Example的缓存内容。
1.2 Cache Filter实现整个页面缓存
在OScache组件中提供了一个cache Filter用于实现页面级缓存,开发者只需配置Web.xml便可实现该功能。Cache Filter用于对Web应用中的某些动态页面进行缓存,尤其是那些需要生成PDF格式的页面以及包括大量图片文件的页面。Cache Filter的运用不仅缩短了服务器响应时间,减小了数据库服务器的压力,而且显著提高了Web服务器的性能。
1.3 Java API for OSCache缓存管理
在实际应用中除了JSP标签库,还可以使用OSCache提供的Java API。其中有一个重要的Java类———General Cache Administrator,用它来建立、刷新和管理缓存。
2 Hibernate数据缓存
在操作数据库的时候,通常使用SQL语句添加、删除、更改、查询数据,ORM(object Relational Mapping,对象关系映射)通过使用描述对象和数据库之间的映射,将Java程序中的对象自动持久化到关系数据库中。Hibernate正是一个ORM的实现,它使得与关系数据库打交道变得十分轻松,就像操作普通Java对象一样,同时不必考虑如何把它们从数据库表中取出或放回到数据库表中。Hibernate模型结构如图1所示。
2.1 Hibernate一级缓存和二级缓存
Hibernate提供两级缓存,一级缓存是Session级别的缓存,属于事务范围的缓存。这一级缓存由Hibernate管理,一般情况下无需进行干预;二级缓存是Session Factory级别的缓存,属于进程范围或群集范围的缓存。这一级别的缓存可以进行配置和更改,并且可以动态加载和卸载。Hibernate还为查询结果提供了一个查询缓存,它依赖于第二级缓存。Hibernate的二级缓存由从属于Session Factory的所有session实例共享,Hibernate二级缓存的工作过程如下:
l)查询的时候,形成一条SQL语句“select*from table_name where…(查询条件)”查询数据库,一次性获得所有的数据对象。
2)把获得的所有数据对象根据ID(对象在业务表中的唯一标识)放入二级缓存中。
3)当Hibernate根据ID访问数据对象的时候,首先从Session一级缓存中查找,并按从一级缓存,到二级缓存,再到数据库的顺序查找,直到找到查询结果,并把结果按照ID放入缓存。
4)删除、更新、增加数据的时候同时更新缓存。
显然,对数据库中所有的数据都实施缓存是最简单的方法。但是,如果没有对当前数据的使用情况进行考察就全部缓存起来,内存会迅速被几乎不可能再重用的数据充斥,系统的性能会急剧下降。因此,只有当数据满足一定的缓存条件时,才可以将其纳入缓存管理。
2.2 Hibernate二级缓存的实现
Hibernate为众多的第三方缓存组件提供接入接口,如JCS,Ehcache,OSCache,Swarm Cache,JBoss Cache等。Hibernate对缓存进行了良好封装,透明化的缓存机制使得在上层结构的实现中无需面对繁琐的缓存维护细节。目前Hibernate支持的缓存机制通过下面的Java类来实现net.sf.Ehcache.hibernate.Provider,net.sf.hibernate.cache.OSCache Provider,net.sf.hibernate.cache.Swarm Cache Provider,net.hibernate.cache.Tree Cache Provider。
3 Web应用缓存方案的提出
企业级的Web应用除了实现核心业务外,还包括必不可少的查询模块。针对查询模块出现的问题,结合上述缓存技术提出一个解决方案。
3.1 查询模块
查询模块,通常是一个用户接口。通过该接口,用户可以查看存储在数据库中的各种信息。一般来说,使用查询模块的员工分为两类:一类人员是使用该系统的一线操作员,另一类人员是通过该模块查看并掌握业务总体情况的领导。
对于一线操作人员来说,查看的数据量相对较少。因为他们只需关心自己最近一小段时间内处理那部分数据,特别是每一条记录的详细明细。这类人员对这些记录的关心程度与时间先后顺序密不可分,越是新近的操作记录他们查看的频率越是高。并且这些记录都保持稳定,生成后不再被更改。因此,对数据库的查询结果进行缓存是一个良好的系统提速方案,可以显著提高系统的响应速度。
一线操作员的查询流程归纳为以下几个步骤:
1)用户选择或者输入查询条件,提交查询请求。此时系统形成完整的SQL语句提交给数据库,例如:“select*from table_name where condition”。
2)系统根据形成的SQL语句从数据库中读取所有符合查询条件的实体列表,显示在前台页面。
3)用户查看实体列表,找到真正关心的某一条数据,查看详情。此时传递该条记录的ID号,形成新的SQL语句:“select*from table_name where id=***”。
4)数据库服务器进行再次查询同时返回该条记录详细信息。
从上述流程了解到,对数据库的实体查询操作并不涉及实体的更新。一旦信息被返回,用户不会关注查询过后数据库中的数据是否发生改变,而且用户更加关注最新的一条或几条记录。因此,对数据库的查询结果进行缓存是一个良好的系统提速方案。具体思想为,将查询出来的所有记录进行分页显示,并将第一页里的每条记录信息由动态页面转化为静态页面缓存起来。提供一个专门的Java类,负责将动态页面按规定的模式解析成为静态页面,并将每条记录的明细页面保存为“***.html”的形式,其中***为该条记录的ID号码。一线操作员使用查询模块的缓存方案流程如图2所示。
使用查询模块的另一类用户是领导。他们通过查询模块了解一段时间内发生业务的总体情况,其时间间隔较长,查询数据量较庞大。对于这样的查询,查询响应的速度显得尤其重要。无论是访问数据库还是将查询结果显示到前台都会耗费过多的系统资源,必须实现分页功能缓解系统压力。将查询出来的数据一并放入缓存,只有当用户需要查看具体某页的时候才显示该页的查询结果。这样做可以避免重新获取和释放对象,不必每次都从数据库中获取数据。
此时需要这样一种机制,不仅能够在内存中保存对象同时也提供保持内存中对象更新的功能,即对象缓存。Hibernate通过对不同数据库的统一接口设计,实现透明化通用分页实现机制。以下是实现分页功能的关键函数:
Criteria.set First Result(int x)//从第x条记录开始获取
Criteria.set Fetch Size(int y)//获取记录大小
更重要的是缓存框架作为第三方插件可以方便的引入到Hibernate中,因此对于查询模块的缓存设计提出Hibernate整合缓存框架的方案。领导使用查询模块的缓存方案如图3所示。
3.2 缓存框架的选择
在选择缓存框架之前,首先列出选择缓存框架需要达到的目标:
1)在Web应用中能够快速访问数据。
2)提供可配置的缓存管理,以便通过描述方式而不是编码方式修改参数。
3)发挥多个缓存框架的优势,提供符合具体项目需求的缓存框架结构。
4)最流行的Java开源缓存框架是OSCache和Ehcache。对于运用JSP开发表示层的Web应用来说,OSCache是一个易于操作并能快速提高性能的页面级缓存,但是对于Hibernate来说OSCache并不是最好的选择。而Ehcache本身出自于Hibernate,能够更好的支持Hibernate。因此,采用Ehcache作为Hibernate的二级缓存实现。
从整个系统的角度来说,具体缓存方案为:利用Ehcache作为Hibernate的二级缓存,实现查询结果的对象缓存,同时利用0SCache实现对JSP页面的缓存。
上述缓存方案应用于湖北省水路交通规费征稽网络系统,实现从略。
4 结束语
改文重点阐述了缓存框架OSCache的缓存组件与Hibernate的数据缓存管理。Hibernate不仅能够提供强大的、高性能的数据查询功能,而且还拥有良好的缓存管理机制。本文提出将第三方组件OSCache、Ehcache和Hibernate整合在一起的Web缓存方案,实现了页面缓存和查询结果的对象缓存,很大程度地改善了系统的性能。
参考文献
[1]赵玉伟.WWW中缓存机制的应用研究[D].武汉:武汉理工大学,2006.
[2]Duane Wessels.Web Caching[M].United States of America:O'Reilly&Associates Inc,2001:1-6.
[3]阎洁.Web应用若干关键技术的研究[D].武汉:武汉理工大学,2008:33-46
[4]opensymphony.What is OSCache[EB/OL].http://www.opensymphony.com/oscache/wiki/what%20is%20OSCache.html,2005.
[5]opensymphony.Tag Reference of OSCache[EB/OL].http://www.opensymphony.com/oscache/wiki/JSP%20Tags.html,2005.
[6]Object Renational Mapping-Persistence and Caching for Java[EB/OL].http://cayene.apache.org,2007.
[7]夏昕,曹晓钢,唐勇.深入浅出Hibernate[M].北京:电子工业出版社,2005.300-301.
Web层开发框架的分析与研究 篇5
随着社会不断发展, 网络技术日新月异, 越来越多的企业选择依托Web来建立其应用系统。电子商务的蓬勃发展, 企业对系统功能需求的增加使得企业级应用系统的结构和规模日趋庞大。这种情况要求开发者们采用一种合适的方法来开发软件, 以便降低开发和维护成本, 提高程序的复用性。于是各种具有不同特点的Web开发框架应运而生。如何选取适当的Web开发框架呢?在不同的情况下各种框架有何优缺点呢?
本文将对一些典型的、最新的Web开发框架进行研究, 对他们的特点进行总结概括, 对各自的优缺点进行分析, 对一部分框架进行整合和扩展。J2EE在Web应用系统开发上占有显著地位, 这里将主要对基于J2EE的Web开发框架进行分析研究。2.Web开发框架的分析研究
框架是软件系统的设计、开发过程中的一个概念, 它强调对已完成的设计、代码的重复使用。框架往往都是针对某个特定应用领域的, 是在对这个应用领域进行深刻理解的基础上, 抽象出该应用的概念模型, 是一个有形无体的框架, 不同的具体应用根据自身的特点对框架中的抽象概念进行实现, 完成应用的功能。基于J2EE标准的框架基本上都是封装了许多组类, 利用这些类之间特定的相互协作, 为一些通用问题提供解决方案。其中典型的有Struts框架、Spring框架、Hibernate框架和Jsf框架等。
2.1 Struts框架
Struts是一个基于Sun J2EE平台的MVC框架, 是由Apache Software Foundation发起的开源项目, 他由一组相互协作的类 (组件) 、Servlet以及jsp Tag Lib组成。Struts也包含了丰富的标记库和独立于该框架工作的实用程序类。Struts有其自己的控制器 (Controller) , 同时整合了其他的一些技术去实现模型层 (Model) 和视图层 (View) 。在模型层, Struts可以很容易的与数据访问技术相结合, 包括EJB, JDBC和Object Relation Bridge。在视图层, Struts能够与JSP、Velocity Templates、XSL等等这些表示层组件相结合。从框架结构的完善程度和使用范围讲, Struts在软件开发框架领域具有极其重要的地位, 市场上有大批精通Struts的程序员, 是产品开发较稳妥的选择。
Struts的优势在于:
1. 利用Struts提供的Taglib可以大大节约开发时间, Taglib是Struts的标记库, 灵活动用, 能大大提高开发效率。
2. 表现与逻辑分离, 使开发流程和结构更加合理。
3.Struts为系统开发人员提供了充分的扩展机制, 维护扩展比较方便。
4.业界"标准", 学习资源丰富, HTML标签非常优秀。
Struts的缺点有:
1.Taglib的使用使得表现层的处理过于复杂, 不利于系统的升级和再设计, 不利于客户方技术人员接手系统, 增加了开发人员的工作量, 大大增加了系统的开发成本。
2. 由于Struts将其框架重点放在了控制层和视图层上, 使得模型层的管理和开发规范显得很模糊,
没有制定统一的框架标准。
3.表单验证没有考虑复用, 而且没有对前端验证提出方案, 不利于在大型系统中使用。
2.2 Spring框架
Spring是一个以控制反转原则和面向方面编程思想为基础的轻量级开源框架。它是在一个由Rod Johnson所提供的初步开发框架实现 (interface21开发包) 的基础上逐步扩展改造而形成的。其核心是一个具有依赖注入功能的轻型对象容器, 通过依赖注入来设定对象之间的依赖关系。
Spring的优势在于:
1.低侵入式设计, 代码的污染极低。
2.独立于各种应用服务器, 基于Spring框架的应用, 可以真正实现Write Once, Run Anywhere的承诺。
3.Spring的DI机制降低了业务对象替换的复杂性。
4.Spring的高度开放性, 并不强制应用完全依赖于Spring, 开发者可自由选用Spring框架的部分和全部。
Spring的缺点是:使用人数少、Jsp中要写很多代码、控制器过于灵活, 缺少一个公用控制器。
2.3 Hibernate框架
Hibernate是采用ORM映射机制的持久层开发工具, 它是Java应用和关系数据库之间的桥梁, 负责Java对象和关系数据之间的映射, 内部封装了JDBC访问数据库的操作, 向上层应用提供了面向对象的数据库访问API。利用Hibernate, 开发人员可以按照Java的基础语意, 包括关联、继承、多态、组合以及Java的集合架构进行持久层的开发。Hibernate提供了对大多数主流数据库的良好支持, 提供了完善的数据关联、事务管理、缓存管理、延迟加载机制。Hibernate提供的HQL (Hibernate Query Language) 是面向对象的查询的语言, 它在对象数据和关系型数据之间构建一条快速、高效、便捷的沟通渠道。
Hibernate的优势在于:
1.Hibernate使用Java反射机制而不是字节码增强程序来实现透明性。
2.Hibernate的性能非常好, 因为它是个轻量级框架。映射的灵活性很出色。
3. 它支持各种关系数据库, 从一对一到多对多的各种复杂关系。
Spring的缺点是:
1.限制使用的对象模型, 如一个持久性类不能映射到多个表。
2.无法使用多个表的复合查询, 必须使用SQL语句, 这样使得表的映射文件就失去意义。
3. 使用映射文件, 调试不方便, 且由于使用了映射文件, 编
写程序的时候不能使用字段索引, 对于程序编写带来麻烦。
4.若仅采用Hibernate架构开发应用系统, 系统只会在业务模型部分有所改善, 但系统的逻辑处理、流程控制与视图并没有得到有效分离, 系统的耦合性太高, 不易于维护。
2.4 Jsf框架
Jsf (Java Server Faces) 是SUN公司于2003年推出的一套基于MVC模式的Web框架 (Framework) , 是一种新的用于构架J2EE应用用户界面 (UI) 的技术, 能有效提高系统的开发效率。它不同于其它Java表示层技术的最大优势是其采用的组件模型, 事件驱动, 可以简单的通过一组可重用的组件来创建用户界面。
Jsf的优势在于:
(1) 简单易用:Jsf的简单易用源于它自身的体系机构。一方面, Jsf技术在行为和表现之间提供了干净的分离, 大部分用户, 从网页设计者到组件开发者, 都可以利用Jsf技术的这个优点, 使得更好的分工和获得更短的开发周期。另一方面, 由Jsf技术创建的用户界面处理了所有的错综复杂的界面管理, 包括输入校验、组件状态管理、页面导航和事件处理。
(2) 标准化:Jsf技术是通过JCP (Java Community Process) 在JSR-127下开发的, 几家著名的工具开发商是JSR-127专家组的成员, 他们将致力于在他们的工具中支持Jsf技术。
(3) 设备独立:Jsf技术的设计是非常灵活的, 在可扩展的UI组件类仅仅定义组件的功能, Jsf体系机构允许组件开发者去扩展这些组件类, 从而为特定的客户端产生他们自己的组件标记库。
Jsf的缺点是:UI组件不够丰富、具体实现的可选择余地过窄、使用Jsf开发的实际项目不多。Jsf仍是相当新的并处于发展过程中。要看到成功的部署和广泛的应用还需要一段时间。3.框架的整合与扩展
近些年来, 各种Web开发框架层出不穷, 不同的框架有各自不同的特点, 将各种不同的框架加以整合, 汇聚他们的优点, 有助于系统的开发和维护。以下将介绍两种不同的整和方法。
3.1 Jsf与Struts的整合
Jsf与Struts集成的目标是期望开发者能够在表示层使用JSF UI组件, 同时在控制层继续使用Struts的控制器、业务逻辑Action类。
为此要完成两方面工作: (1) 使Jsf用户界面组件在服务器端能够将其属性值传送到Struts的控制器Action Servlet: (2) 使由Action Servlet转发的响应信息或Actions的处理结果能传递到Jsf用户界面组件并恰当的显示。
在基于JSP/Servlet的Web应用程序中, 采用的是请求URL映射机制, 即将匹配的URL信息传送到特定的Servlet进行处理, 而映射细节是在配置文件web.xml中定义的。这就可以在Jsf的UI表单中写入特定的URL, 使表单通过URL映射提交到Struts的控制器Action Servlet来处理。又由于在控制层Jsf和Struts都采用Servlet, 因此有相同的接口, 传送到Faces Servlet的信息同样可以送Action Servlet处理。
Struts在表示层采用的是JSP定制标记库, 同样可以创建另一个定制标记库来替代Struts的定制标记库, 把Struts控制器的响应信息再传回JSF UI组件标记。这样以来, 通过定制标记库, Action Servlet的响应信息就可以返回给JSF UI组件表示器来显示。
3.2 Jsf与Spring的整合
Spring与Jsf集成的关键是表示层和控制层的集成, 获得彼此的上下文引用, 以此进一步获得各自管理的bean。在Spring中Application Context是相当重要的类, 对于web应用, 它还包装Javax.servlet.Servlet Context为web应用提供了所有可以利用的数据, 包括可管理bean。在Jsf中, 通过Faces Context类可以获得所以可以利用的资源, 同样包括Jsf的可管理支持bean。它们都围绕着Servlet Context提供了自己的门面, 通过各自的门面在Servlet容器的世界里彼此相通。可以用下面几种方法来实现集成:
(1) 直接编写工具类。首先获得对方的上下文引用, 再通过绑定的方法实现在Jsf里查找Spring管理的bean和在Spring中查找Jsf组件。
(2) 利用Jsf-Spring。这个框架是Spring相关项目, 提供一个包de.mindmatters.faces.spring, 这个包包含Jsf和Spring框架综合集成的粘合代码, 这些代码以独立于一个实现的方式完成, 这样它能和任何Jsf实现一起使用。这个包提供的代码主要目的是尽可能透明的集成两个框架, 主要特征:Jsf开发者应该能访问Spring管理的Beans, 就好像它们是由Jsf管理的。Jsf可管理beans应能集成入Spring, Request Handled Event事件也应该能被发布到Spring。
4. 结论
本文通过对各种不同的Web开发框架进行研究, 针对各种流行框架的优劣进行了总结概括。有助于开发者对应不同的情况选择合适的开发框架。对提高开发效率、降低开发成本、提高程序的复用性大有帮助。
摘要：Web开发框架的研究主要是为了使开发者能够了解各种流行框架的特点, 帮助开发者更好的选择适合的框架, 并对一些框架的整合和扩展进行探讨。对开发者提高开发效率、降低开发和维护成本很有帮助。
关键词：Web开发框架,Struts框架,Spring框架,Hibernate框架,Jsf框架
参考文献
[1].贾广宇.MVC设计模式下Web开发框架的研究与应用.硕士学位论文.大连海事大学.2006.
[2].刘君强, 顾海全, 王讯, 李秀荣.基于开源框架的高质量J2EE应用架构.计算机工程与设计2007, 01期.
[3].任文娟, 王华, 鞠宏伟, 宋柱芹.基于Struts和Hibernate框架的Web应用的设计与实现.微计算机信息.2006, 27期.
[4].左学明, 张力.一种新的基于JSF技术的Web用户界面开发方法.计算机应用, 2005, 01期.
[5].王冠宇, 赵冬生.基于J2EE下的JSF与Struts框架比较分析.微机发展, 2005, 12期.
[6].罗时飞.精通Spring.2005, 4.
[7].孙卫琴.精通Hibemate:Java对象持久化技术详解.2005, 5.
[8].Bill Dudney, Jonathan Lehr, Bill Willis, LeRoy Mattingly.Mastering JavaServer Faces.2005, 6.
浅谈WEB开发框架的设计与实现 篇6
WEB的本意是蜘蛛网和网的意思, 现在广泛的被译作网络、互联网等技术领域, 表现为三种形式, 即超文本 (hypertext, 一种全局性的信息结构, 它将文档中的不同部分通过关键字建立连接, 使信息得以用交互方式搜索) 、超媒体 (hypermedia, 是超文本和多媒体在信息浏览环境下的结合) 、超文本传输协议 (Hypertext Transfer Protocol超文本在互联网上的传输协议) 等, WEB开发框架是人们在使用某种语言编写WEB应用服务端关于架构的最佳实践。我国越来越多的企业使用基于WEB的应用系统, 但是随着科学技术的不断进步, 企业的业务流程也越来越复杂, 由于较高的成本和实现方式的复杂性, 使得一些没有规划很好的企业的WEB应用项目最终以失败结束。因此, 有效的WEB开发框架的设计, 可以为企业降低开发成本的同时, 还能提高开发的效率, 为企业的经济效益带来提升的目的。
2、WEB开发框架的主要设计
2.1 WEB开发框架的设计中的开发规范
(1) 缓存文件。将所有的缓存文件全部放入缓存文件夹中, 在缓存文件夹中要创建不同类型的子文件夹, 并且把不同类型的缓存文件放入不同类型的子文件夹中, 最后, 根据WEB开发框架系统的类型, 决定是否要在不同的缓存文件夹中设置权限。
(2) 创建调试的文件。创建调试的文件是代表有一个正在开发中的项目, 而且已经自动启用了调试模式, 如果没有创建调试文件, 那就代表了这是一个线上的运行环境, 因此, 在开发中的项目, 需要在开发环境的项目文件里面创建一个有效的调试文件。
(3) 其它文件的储存。例如:容器文件夹、配置文件、类库文件夹、控制器文件夹、模型文件夹等, 这些文件夹都是给PHP开发工程师使用的, PHP开发工程师一般是用来写程序的。
2.2 WEB开发框架的设计中的WEB开发框架的结构
(1) WEB开发框架的结构有系统库。系统库是指把开发过程中需要用到的文件总结在一起。系统库的设计实现了工厂模式的驱动类的目标, 这样便可以更有效的适应更多的需求, 以及适应各种运行环境。
(2) WEB开发框架的结构组成有函数库。基本函数库是指当系统还处于初始化的状态时, 支持系统初始化的文件库和系统内核。
(3) WEB开发框架的结构组成有系统核心类库。系统核心类库的内容有:通用类型库、超级类、必备类。
2.3 WEB开发框架的设计中模板开发语言
(1) WEB开发框架设计中的模板开发语言。模板开发语言是指用最少量的标签来使得工程师用最小的编程来进行知识学习的操作。这个模板开发语言的设计是为了让工程师能耐尽可能的不要接触PHP语言而设计的。
(2) 模板解析方案。模板解析方案有smarty等等优秀的模板解析方案, 虽然说这模板解析方案是非常优秀的方案, 但是这种模板解析方案在轻量级的框架中它发挥不了应有的作用, 并且在中国地区的用户中, 也发挥不了应有的效果。
3、WEB开发框架设计的实现
3.1 WEB开发框架设计的实现有加载器
所谓的加载器是指一类会自动的、及时的包含所需要类, 并且还会自动将这些需要类初始化的函数。加载器可以加载的内容有:配置、模型、辅助函数、语言包等。当加载器把这些需要被加载的内容自动包含后, 这些需要被加载的内容就会根据内容的类型自动的选择文件夹。
3.2 WEB开发框架设计的实现有控制器
控制器是整个WEB程序运行的中心, 是指当用户需要请求时, 就会以合理的、及时的方式进行响应。而且当控制器也有请求的时候, 它可以自动的、及时的向模型、缓存、类库、助手函数等很多的对象发出需要的请求。虽然他可以自动的、及时的向所需对象发送请求消息, 但是控制器不可以直接的访问到对象的最终视图和数据, 而是利用视图层, 以及数据层来进行访问, 最后得出一个清晰的分层结果。
3.3 WEB开发框架设计的实现有内核功能
所谓的WEB开发框架设计的内核功能是指可以有效的初始化系统的运行环境, 以及有效的读取系统的配置, 并且可以自动的对URI路由进行合理的选择和合理的定义系统的变量, 以及有效的加载系统的函数库内容和对用户输入的数据及时的实行安全处理的工作。当URI和内核功能都处于静态化的状态时, 内核功能的工作进行到路由的选择时, 就会自动的加载静态化页面的内容, 加载完成后就会返回, 并且不再操作任何工作内容。
3.4 WEB开发框架设计的实现有调试器
调试器 (De Bugger) 是自从计算机诞生伊始就始终伴随着程序员的一个挚友, 起初的调试器都是基于硬件直接实现的。直到计算机行业有了比较突出的发展后, 才开始了软件实现的调试器。WEB开发框架设计的调试器的实现体现在:
(1) 控制软件运行。将一个飞速运行的程序中断下来, 并且使其按照用户的意愿执行, 调试器靠迫使目标程序触发一个精心构造的异常来完成这些工作的。 (2) 查看软件运行中的信息。查看软件当前的信息, 这些信息包含但不限于当前线程的寄存器信息, 堆栈信息、内存信息、当前的EIP附近的反汇编信息等。 (3) 修改软件执行流程。修改内存信息、反汇编信息、堆栈信息、寄存器信息等。 (4) 日志处理功能。WEB开发框架设计的调试器中设置了一个日志处理功能, 日志处理功能包括了调试信息的日志记录和系统异常的记录, 以及系统错误的记录等。这个功能不管调试器是否处于调试模式的状态下, 这个程序都会自动运行操作。
参考文献
[1]姜君, 董立文, 张福来, 张金帅.WEB开发框架的设计与实现[J].科技信息, 2011, (14) .
[2]刘胜利, 寿永熙.Web层开发框架的分析与研究[J].福建电脑, 2008, (1) .
web框架 篇7
关键词：MVVM,Web前端框架,Angular JS
面向对象设计(OOD)的核心设计原则是使程序模块达到“高内聚,低耦合”,而MVC、MVP、MVVM等都是围绕这一核心原则相继产生的框架模式。随着Web应用的日趋复杂、前端规模不断扩大,Web前端也开启了MVC、MVVM风潮,越来越工程化。
1 MVVM框架模式思想
MVVM框架模式是Model-View-View Model模式的简称,于2005年由微软的WPF和Silverlight的架构师John Gossman提出。MVVM既吸收了MVC模式的精华,又利用了数据绑定(Data Binding)技术和WPF中命令Command技术对MVP模式进行了改进。其设计思想是“数据驱动界面”,与传统的“事件驱动界面”相比较,以数据为核心,使视图处于从属地位。数据绑定[1]使表层视图会随底层数据地改变而改变,若用户修改了视图元素值,相当于透过视图元素直接修改了底层数据。Com-mand技术可接受View中用户的输入并做相应处理,它解耦了视图和视图模型。
MVVM框架模式结构如图1所示,由模型(Model)、视图(View)、视图模型(View Model)三部分组成[2]。MVVM为View层单独定制了一个Model,既View Model。View中的视图逻辑通过双向数据绑定和命令绑定到View Model的属性上,通过View Model得到Model中的数据,双向数据绑定实现了视图和数据模型的自动同步机制。
MVVM中每个模块在系统中的职责不同。视图:用于界面呈现,它不直接与Model进行交互,而是通过View Model与Mod-el通信,并可独立于Model的变化和修改,这也是MVVM低耦合思想的体现。视图模型:是对视图逻辑和View与Model模块之间状态控制的封装,是View和Model通信的桥梁,也是MVVM设计思想的核心部分。它包含绑定的数据集合,可根据用户输入通知修改Model、响应Model中的数据变化事件,可发送View Model中的变化事件以通知View更新。一个View Model可以绑定到多个View上,即多个View可以复用同一个View Mod-el,这大大提高了代码的可重用性。模型:封装了与业务逻辑相关的数据,以及数据处理等事件。它不依赖于View和View-Model,可直接与数据库交互。
2 Angular JS中MVVM框架模式的应用
2.1 Angular JS简介
Angular JS框架于2009年由Google首次发布。因其模块化思想,双向数据绑定,指令(Directives),测试驱动开发等特性,以及其2.0版本对移动设备的良好支持,目前已处于前端JS框架之领导地位。Angular JS设计初衷是标准的MVC模式,但随着代码重构和API的重写,现在更是将MVVM框架模式表现得淋漓尽致。
2.2 Angular JS中MVVM应用模式
在Angular JS中,MVVM应用模式主要体现在以下几个部分,结构如图2所示。
View:它专注于界面的显示和渲染。在Angular JS中,View除了HTML、CSS这些视图代码,还包含Angular JS指令、表达式等的视图模板。View不能直接与Model交互,视图对象需要通过$scope这个View Model来引用。
View Model:它负责View和Model的交互、协作。View Model给View提供显示数据,并提供了View中Command事件操作Model的方式。在Angular JS中,$scope对象充当了这个View-Model的角色。$scope被称为控制器的功能模块包装,它提供一些API来监控View状态,可以把数据模型和函数暴露给视图(UI模板),它包括数据引用关系、控制器定义行为、视图处理页面布局以及相应的处理跳转等内容。
Model:它是与应用程序的业务逻辑相关的数据的封装载体,是业务领域的对象。Angular JS通过数据模型Model驱动,以Java Script对象的属性的形式呈现。通过数据绑定技术,视图会根据数据模型的变化自动更新,因而模型也是Web应用程序开发和设计中的焦点。
Angular JS中,Model与View Model通过$scope对象互动。$scope对象监听Model的变化,通过View来发送和渲染,由HT-ML来展示代码。Model并不关心会被如何显示或操作,所以Model中也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象,而Angular JS中内置的服务$http非常强大,可直接替代Jquery的Ajax函数,它封装和处理这些与Model相关的业务逻辑。
Controller:Angular JS提供了无状态的Controller,它并不是MVVM模式的核心元素。Controller可设置模型的初始状态,它组合一个或者多个服务(service)来获取业务领域Model并将其放在View Model对象上,使得应用界面在启动加载的时候达到一种可用的状态。另外,Controller可监控模型其余部分的变化并采取相应的动作。
Angular JS内嵌了j QLite,它内部实现的一个Jquery子集,包含了常用的Jquery DOM操作方法,事件绑定等,所以我们只需用JS控制View Model,不用关注数据如何呈现到页面,由框架更新Model和View。对于用户交互Command事件(如ng-Click、ng-Change、ng-If等)则会转发到转到$scope的某个行为逻辑上,通过View Model来实现对Model的改变,对于Model的任何改变也会随之反应在View Model之上,再通过$scope的“脏检查机制”($digest)来更新到View,从而实现View和Model的分离。
2.3 Angular JS中MVVM应用模式与Web前端传统开发思维对比
Jquery是以事件驱动为中心、面向网页编程的传统前端开发思维的代表。它专注于View层的变化和用户的操作,在对网页元素的定位和操作上需花费较多精力,对于数据处理却是弱项。随着界面和逻辑的日趋复杂,再使用JS或者Jquery去控制DOM会越来越不易,尤其对具有复杂交互的项目,JS逻辑会变得臃肿,交互逻辑分散。而Jquery template技术,虽可实现模块之间解耦,但无法实现数据和视图展现的解耦。Angular JS是新一代前端开发思维的体现,以Model为中心、面向数据编程。它减少对网页元素的定位和操作,避免了Jquery中DOM操作对网页结构的破坏。Angular JS把模型和视图绑定在一起,实现联动,改变模型,DOM就可以随之进行改变,甚至绑定DOM的事件也可以直接跟着进行改变,让View和Model的进一步分离和解耦,减少了前端开发工作量,提高了开发效率。
3 MVVM框架在Web前端开发过程中的优势
MVVM适合编写大型Web应用前端JS框架,其优势如下。在团队层面,MVVM改变了软件开发方式。由于View与View Model之间的松耦合关系,使得开发团队与设计团队分工明确,设计团队只需产出用户友好的界面,而开发团队则专注于业务逻辑和数据,提高了开发效率。在架构层面,模块间松耦合关系使得模块间相互依赖性降低,项目架构更稳定,扩展性得到提高,后续如需增加新模块,能做到最小的改动。在代码层面,通过合理的规划分层View Model,可提高代码重用性,使整个逻辑结构更为简洁。另外,MVVM的引入能更有效地组织应用结构,使项目模块变得清晰化、条理化,增强了代码可读性,降低了前端测试难度。
4 结束语
MVVM框架模式归根结底还是MVC精心优化后的结果,它可兼容当下使用的MVC模式。或许有些人认为,MVVM是以更复杂的方式存储DOM和数据绑定关系,比较耗内存、耗性能,但是当Web应用程序的功能达到一个量级且代码开始需要以更高效的方式组合时,使用优秀的开发框架反而会提高网站的性能。
参考文献
[1]刘立.MVVM模式分析与应用[J].微型电脑应用,2012(12):57-60.
[2]陈涛.MVVM设计模式及其应用研究[J].计算机与数字工程,2014(10):1982-1985.
web框架 篇8
JSValidation验证框架采用xml来存储表单验证信息,开发者只需要定义几个xml标记,就可以创建出复杂的验证策略,使得表单验证在整个系统中的耦合度很低,且易维护性大大提高。JSValidation还具备跨浏览器的能力,支持IE5及以上版本,Mozilla系列和支持DOM2模型的其它浏览器。JSValidation验证框架现在广泛应用于Web表单校验中。
2 使用JSValidation进行Web表单验证
客户端程序员通过配置xml文件,表单提交后会触发xml中记录的表单校验规则,从而实现对客户端代码进行校验的工作。以图1所示的用户登录界面为例,说明使用JS-Validation验证框架进行Web表单验证的具体过程。
Web项目project中有一个用户登录页面login.html,表单的name属性值为form1,用户名和密码框的name属性值分别为username和password。
步骤一:下载JSValidation-1_0b4.zip,并解压缩,当前目录中包含三个核心文件。validation-config.dtd文件用来定义validation-config.xml的文档结构;validation-config.xml文件是用来记录相应校验规则的配置文件;validation-framework js文件是用来解析validation-config.xml和用于校验的函数文件。
步骤二:在当前项目project的WebRoot目录下新建一个文件夹validate将validation-config.xml和validation-framework.js文件复制到这个文件夹中。
步骤三:修改validation-framework.js文件的内容。用Editplus文本编辑器打开validation-framework.js文件,将var ValidationRoot的值设置为″/project/validate/″,其中project为项目名,validate是上一步中新建立的文件夹。
步骤四:修改validation-config.xml文件。validationconfig.xml是JSValidation处理验证条件的文件,是标准文本格式,可以用任何文本编辑器(比如Editplus)打开,通过修改内容来实现验证。validation-config.xml文件内容如下:
在validation-config.xml文件中,
通过validation-config.xml文件的内容可以看到要验证的是username和password两个控件字段,并且username和password两个字段是必须要有内容的,可以是普通英文字符、字母、数字和下划线。当访问页面login.html,并在用户登录界面中输入不符合上面验证要求的用户名或密码,比如两个字段的输入为空时,就会弹出如图2所示的警告对话框。
当用户登录界面中输入不符合验证要求的用户名或密码时,也可以直接在页面上显示错误提示信息。这时需要在当前的login.html文件中加入一行代码:
。同时还要修改validation-config.xml文件,将
摘要：通过一个实例说明使用JSValidation验证框架进行Web表单校验的过程。
关键词：表单校验,JSValidation验证框架
参考文献
[1]杨会芹,姚文琳.一个可复用的表单验证类的设计与实现[J].广州:华南金融电脑,2007,15(3):104-107.
[2]陆荣杰,刘知贵,黄晓芳.J2EE中基于容器管理的Web客户端安全验证[J].绵阳:兵工自动化,2005,24(3):47-48.
web框架 篇9
文章在分析电子化报表平台各个部分的实现方式及关键技术的此基础上, 设计了一套符合目前企业管理流程, 方便快捷的电子化报表平台系统, 并采用MVC模式与基于JSP的Struts Web框架设计, 实现了基于WEB的电子化报表平台系统。
1 系统总体结构
随着网络技术的快速发展, 绝大部分的管理软件开始向B/S (Browser/Server) 结构转变。这种基于WEB技术的应用系统基于现成通用的浏览器作为用户界面, 应用程序安装在后台服务器中, 可以被任何操作系统上的通用浏览器所浏览, 这样不但实现了跨平台操作, 而且降低了系统开发和维护的成本[3]。文章设计的Web电子报表系统由浏览器、Web服务器、应用服务器和数据库服务器组成, 如图1所示。
从图1中可以看出, 在文章设计的电子报表系统中, 在客户端, 用户利用Web浏览器通过URL访问Web服务器, Web服务器通过SQL数据库语言请求数据库服务器, 并将获得的结果以HTML形式返回客户端浏览器[4,5]。基于系统采用B/S的模式, 本系统的逻辑结构由以下三个部分组成:
前台系统:即用户界面, 采用目前比较流行的基于JSP的Web框架结构—Struts框架技术来实现。
业务处理系统:该系统负责提取数据源、数据预处理、对数据输入核对的业务流程控制、报表处理以及必要的系统管理。可以看出, 该部分包含与前台通过HTTP协议交互的功能, 同时也包括通过JDBC与数据库交互的功能。该部分是本系统的核心之一。
数据库系统:采用ORACLE11g数据库, 里面存放系统所需的数据, 通过JDBC与外界交互。
系统的逻辑结构图如下:
2 Web电子报表系统设计方案
设计的电子报表系统主要由后台数据库系统、报表生成管理系统和手工录入系统等组成, 下面分别详细介绍。
系统数据库采用ORACLE11g, 负责处理大量的后台计算。数据库具有以下功能:
报表生成管理系统主要生成两类报表:原始数据展现类和用户查询类。原始数据展现类主要是用于原始数据的保存。报表处理模块按照预先设定的程序, 通过报表名称、机构号以及时间分别调取相关数据, 然后经过加工处理, 生成所需的报表文件, 并以*.roi的文件格式存放在I-SERVER (报表管理服务平台) 的指定地点。用户查询类主要是用于根据用户需要将报表中指定的信息。这类报表的实现主要利用E-Report-Designer通过SQL语句调用数据库中的表、视图的数据, 然后经过加工处理后生成所需的报表。
手工录入系统按照需求包括三个功能模块, 则三个功能的具体需求如下:
3 手工报表录入系统的具体实现
由于篇幅上的限制, 文章在这里以关键的手工报表录入系统作为实例, 通过具体介绍手工报表录入系统的界面制定、中间层的实现原理来阐述整个电子化报表平台建立的关键技术, 数据库实现部分就不在这里描述。
3.1 中间层的实现原理
当用户点击按钮, 提交一个事件 (Event) , JSP页面即前端视图则向Servlet控制器 (Structs) 发出一个请求 (Request) 给Action类[6]。其中页面提交的请求和Action类的对应关系由Structs的配置文件Structs-config.xml来配置;Action类利用到数据访问对象类 (Data Access Object, DAO类) 存取数据, 并通过Action Forward对象指向的JSP组件生成动态网页, 返回给客户。其中对每一个具体的功能对应一个具体的Action类。
控制器的配置决定了发给控制器的请求将得到怎样的处理。在系统配置的sructs-config.xml文件中, 将action的请求都映射到了控制器, 并指定对每一请求该如何处理。部分实现代码如下所示:
就本系统来说, 需要处理登录请求和页面提交的信息。每个视图都分别具有相应的表单Form Bean和用于处理的Action类[7]。其中配置文件分为两个部分:其一是表单Form bean, 负责指定存储来自视图的参数值以及action映射置的Java类。第一部分处理提交的信息, 如下所示:
而第二部分则负责处理登录和页面的跳转, 通过customer Login Form Action类来实现。
3.2 前端视图的代码实现
前端视图利用JSP实现, 用Struts标签库同表单Form bean交互, 意味着所有的元素都必须用Struts标签库来创建。下面介绍手工录入的汇总表页面设计, 该页面分为三部分, 分别是页面上部的公司logo, 页面左边的树形结构, 和主页面的汇总表显示窗口。该页面的部分代码如下:
在该页面视图中可看到所有的HTML标签都是用标签库编码的。这就是Struts调整HTML文档和表单Form bean之间参数值的方法。在处理每一JSP页面时, 标签库会被扩展为HTML, 而内部的Form bean则包含默认值。
页面上按钮标签的功能实现也是通过页面编码实现, 例如“返回”按钮实现页面跳转功能:
其中center表示按钮处于该行的中间, 如果点击该按钮将跳到reportagregation.jsp的页面。到这里, 整个系统的描述基本结束, 有关应用程序的部署请查阅相关书籍, 在这里就不赘述。
4 结论
论文主要工作围绕着企业电子化报表系统的研究开发而展开, 针对报表平台的核心技术:手工报表录入系统的具体实现进行了详细的论述, 采用了目前较流行的基于JSP技术的Struts框架结构实现用户界面。尽管论文在电子化报表平台系统方面做了一定工作, 但是距离实际应用还有一定距离。对系统中的某些细节问题 (如中心数据库的建立, 用户界面等) , 需进行更进一步的研究与完善。
参考文献
[1]王丽.企业会计报表发展探析[J].中国经贸, 2013 (2) :216.
[2]梁红兵.企业财务电子报表错误及解决对策[J].中国电子商务, 2011 (9) :185, 187.5864
[3]李伟春.浏览器状态电子报表的系统实现[J].计算机与现代化, 2008 (2) :125-126.
[4]Havery M Deitel.Advanced Java2 Platform How to Program[M].Prentice Hall, 2003.
[5]张宗福.基于STRUTS框架开发MVC模式的WEB应用[J].计算机光盘软件与应用, 2012 (22) :206-207.
[6]孙卫琴.精通Struts:基于MVC的JavaWeb设计与开发[M].北京:电子工业出版社, 2007.