银行系统个人业务的实现——毕业论文

Error! No text of specified style in document.摘要在目前前端开发中，由于前、后端职责不清，开发效率问题，对前端发挥的局限，现有开发模式的适用场景等一系列问题。因此，前、后端的分离已经成为一种趋势，越来越多的前端开发不仅仅是简单的页面切割和静态Demo，而且需要丰富的用户体验及数据交互。VX是北京科蓝公司推出的动态Web App框架，通过HTML作为模板语言并扩展HTML语法，使得应用组件开发保持清晰和一致。通过独创的客户端“数据绑定”和“依赖注入”，大大减少JS代码量。VX采用纯JavaScript开发，在浏览器中运行，实现与现有的服务端结构整合。本文基于VX框架，以前、后端分离的方式，对银行的个人业务进行设计实现。实现了较好的用户体验以及用户界面，测试表明本文介绍的系统的数据流通以及服务访问速度得到极大的提升，所占用的宽带也是较之前的系统有明显的降低。关键字：依赖注入指令过滤器服务VX框架ABSTRACTIn the current front-end development, due to the front and rear responsibilities are not clear, the development of efficiency issues, the limitations of the front end, the existing development model of the application of a series of problems. Therefore, the separation of the front and rear ends has become a trend, more and more front-end development is not just a simple page cutting and static Demo. And the need to enrich the user experience and data interaction. VX is the Beijing branch blue company launched the dynamic App Web framework, which is used as the template language and extended HTML syntax, which makes the development of the application component to maintain a high degree of clarity and consistency. Through the original client data binding and dependency injection, greatly reduce the amount of JS code. VX using pure JavaScript development, running in the browser, to achieve integration with the existing server structure. In this paper, based on the VX framework, the former back end of the separation of the way, to open the banks personal business design and implementation. To achieve a better user experience and user interface. The test results show that this paper simply introduces the system data flow and service access speed has been greatly improved, occupied by the broadband is also compared to the previous system has significantly reduced.Keyword: dependencyinjectiondirectivefilters serviceVX framework窗体顶端目录i目录第一章 绪 论11.1项目背景11.2主要任务21.3本文研究内容2第二章 相关技术与工具52.1开发工具介绍52.2开发所使用的VX框架52.2.1VX框架概述52.2.2VX背景72.2.3核心理念72.3开发使用的服务简绍82.4小结8第三章 需求分析93.1银行的个人业务的需求分析93.2银行的个人业务总体设计113.3本章小结13第四章VX框架介绍154.1辅助类库154.2 CSS样式153.2.1ui-calendar.css153.2.2ui-mune.css163.2.3ui-progress.css163.2.4common.css173.2.5public.css174.3 jQuery库173.3.1jquery.select.js173.3.2jquery.min.js184.4自定义模块184.5 JSON数据模仿数据库194.6 本章小结20第五章 整体的页面DEMO和具体布局实现215.1通用页面布局215.2生活服务模块的具体实现235.3本章小节27第六章 结论296.1服务测试296.2页面Demo数据流通测试306.3测试总结32第七章 不足及展望33致谢35参考文献37Error! No text of specified style in document.37第一章 绪 论1.1项目背景随着互联网深入发展，应用领域不断拓宽，对于银行领域产生深远的影响，不管是网上银行、手机银行，还是商城、支付，都正在经历Web2.0/Web3.0的快速转变。由于Web2.0对用户界面、用户体验提出了很高的要求，传统的BS结构在新的形势下，需要在客户端进行快速提升，才能满足用户的需要，并逐步提高用户使用的便携性、方便性、易用性等。从技术角度，RIA架构已经提出几年，但目前在银行界刚刚尝试，HTML5标准大大提升了浏览器的能力，也逐步成为浏览器的事实标准。而移动终端（智能手机、平板电脑）的迅速普及，极大促进了用户体验（user experience，UE）用户界面（user interface，UI）的发展，基于用户为中心的设计（User Centered Design，UCD）也将成为未来客户端的发展主流。科蓝公司为了更好适应Web2.0新技术，满足UI/UE发展的需要，根据对不同技术和方向的综合研究，制定了客户端的发展规划，逐步形成了VX的客户端体系。本文研究的银行系统个人业务模块也是基于此框架之下。之前已经存在的银行系统，由于开发框架的限制，在实际应用中已经出现了相应的问题：问题1：一旦系统需求分析发生变化(此时往往已经到了开发过程的中后期)或者系统需要扩展业务，原有系统的框架不能很好地解决这一问题。原有系统采用单一的Struts开发框架，这种方式缺少有效的模块集成手段，基于不同平台的模块很难集成，系统的可扩展性和伸缩性比较差。问题2：用户反映该系统的用户界面不够简洁，使用流程比较复杂。显然，最根本的解决办法是改变系统开发框架。现在我们所使用的VX框架 VX-API（内部文档）25页。可以很好地解决这一问题，VX可以开发“单页App”或“多页”App，但VX特别适合“单页”App也就是“富客户端”（ Rich Internet Applications，RIA）；“单页”App相比“多页”App有着显著的优势，比如：应用资源一次性加载，避免大量的带宽消耗；App“碎片”（包括HTML和JS）的动态装载和可配置化的缓存；3“碎片”间可方便进行数据交换，避免使用服务端Session；4极大提升了Web App的交互性设计的技术基础。1.2主要任务在1.1的背景之下本项目研究的主要任务如下：使用VX框架建立一个不同于以往所使用其他框架的银行系统，形成一个由于满足对Web2.0所要求用户页面，用户体验的客户端，使得传统的BS结构在新的形势下，得到了极大的提升，以便于满足用户的需要，并且极大的提高，使用的方便性以及易用性。以对及银行系统的快速开发、可维护和扩展能力提供有效的支持。本项目使用VX大大简化Web App的开发。提供了一套高级别的“抽象”模型，整合现有的Web App开发单元，将自动处理这些开发任务： DOM操作，Listener和Notifier的注册和初始化，输入校验 ；解决很多繁琐的开发单元任务，使得开发者能集中精力在业务处理逻辑，避免大量底层、重复性、易出错的编码工作；同时为客户端开发引入一些“高级”的技术： 数据、逻辑和展示的分离 ，数据和展示之间的数据绑定，服务（可复用的Web App操作组件），依赖性注入（主要解决服务间的依赖关系）以及可高度扩展的HTML编译器（纯JavaScript）。 1.3本文研究内容本文主要负责银行系统个人业务的设计和实现的工作，重点探讨了本系统在实现过程中使用的一些辅助的类库以及整个VX框架下的数据层，逻辑层以及表现层的设计。本文分为六章来具体说明：本章节主要介绍了项目提出的背景以及项目的研究目标。第二章节主要说明了本系统所使用的相关知识，以及我们所使用的VX框架，和开发使用的服务。还有我们开发使用的工具。第三章主要说明银行系统个人业务的需求分析以及在不同的客户具体的功能需求，并且详细分析了系统的服务模块划分和总体Demo设计。第四章主要介绍的是再实现本系统是要用的辅助类库。包括配置文件config.js，CSS库，jQuery库，Font库，自定义模块，JSON数据格式模仿数据库，在本章介绍的所有类库都是现在开发Web App中流行的类库。第五章具体的介绍整个页面的布局以及，业务逻辑和数据。这一章的重点是介绍基于VX框架下的银行系统的服务模块划分，以及总体的设计，以生活服务模块中的上海自助缴费为摸版，介绍整个的业务逻辑，以及整个的系统流程。在本章之后读者可以好好地理解VX框架下的银行业务设计，能够深刻理解富客户端的设计和实现。第六章测试本系统的数据流，和服务。保证整个系统的可用性。第七章在最后总结了全文和简单的叙述了现版本的VX的不足和改进以及未来银行系统开发的主要应用方向第二章 相关技术与工具在当今的前端开发趋势下前后端的分离开发是必然的，在这个理念的指导下，我们公司了更好适应Web2.0新技术，满足UI/UE发展的需要，根据对不同技术和方向的综合研究，制定了客户端的发展规划，参照当今相对来说最流行的Angular JS Ari Lerner Ng-book .第二版.人民邮电出版社。165177页。 框架，完善和增加了一系列的功能形成我们在当今业务中使用的VX框架，使用VX框架可以很好的处理当且前端开发中难以处理的业务逻辑以及数据流通的困境。除了主要的核心VX框架外，还用到HTML标记语言及基本语法，需要了解HTML4、xhtml、HTML5相关知识，了解CSS语法和相关原理，了解CSS2和CSS3区别，熟悉掌握JavaScript，了解FP（函数式编程）的原理、闭包、高价函数，熟悉AJAX和Web2.0的编程以及jQuery编程及jQuery的主要API。2.1开发工具介绍现今Web前端开发中可以使用的开发环境有很多，包括Eclipse，MyEclipse，Webstorm，等等一系列的开法工具但是这些开发环境大部分都有同一个缺点，就是过于庞大，导致开发过程不是很便捷，虽说功能全面但是带来的代价就是调试不方便，由于本次任务做的是前后端分离的前端开发，所以我们为了开发方便，以及调试和编程的便捷，我们使用的是Aptana开发环境。Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。它支持HTML/JavaScript/CSS编辑器，prototype/dojo等常见AJAX类库集成和提示，JSON编辑器，JavaScript调试器。还有代码语法错误提示。支持Aptana UI自定义和扩展，支持流行AJAX框架的Code Assist功能：AFLAX，Dojo，jQuery，MochiKit，Prototype。他不光只有这些功能还有其他的一些很好用的比如对Apple iPhone开发环境，PHP开发环境等等但是由于我们这里没有用到,所以就不在一一赘述。2.2开发所使用的VX框架2.2.1VX框架概述VX是开发动态Web App的结构性框架，通过HTML作为模板语言并扩展HTML语法，使得应用组件开发保持高度的清晰和一致。通过独创的客户端“数据绑定”和“依赖注入”，大大减少JS代码量。VX采用纯JavaScript开发，在浏览器中运行，非常容易与现有的服务端结构整合，是WEB项目开发的好帮手。HTML是一种声明式的标记语言，特别适合描述静态文档结构，而VX弥补了HTML在动态应用开发中的不足。通过扩展HTML的静态语法，使得HTML成为Web App开发中最简洁、合适的方式。在VX之间，通常为了解决静态文档和动态程序的失配，我们会采用：一程序库：一组Web App开发的工具函数，应用根据需要进行调用，比如jQuery。 二应用框架：为某类特定的应用而形成的模板类结构，应用需要满足框架的API要求，比如backbone、sproutcore等。 VX采用一种全新的方式，降低了静态HTML和动态Web App的“阻抗”，通过HTML“指令”扩展浏览器支持的语法，提升浏览器的处理能力，比如：一通过提供文本数据绑定 二提供DOM结构的循环/隐藏处理 三提供form处理和数据校验 四在DOM后隐藏代码 五将HTML结构形成重用组件 VX提供一个Web App开发的“端到端”解决方案，它提供了应用的整体结构，并便于扩展，特别适用于大多数的“业务处理”类应用，VX提供：一通过依赖注入，提供一套可高度扩展的组件化和模块化架构。 二提供完整的MVC结构，包括模板指令、数据绑定、Scope等。 三VX内部提供一系列成熟的基础服务，比如表达式、过滤器。 四VX内部提供一系列HTML指令，比如form处理、事件处理、循环结构处理、条件结构处理、viewport等。 五通过viewport提供HTML碎片和JavaScript David Flanagan；淘宝前端团队译。JavaScript权威指南 ；原书第六版. 机械工业出版社。354365页。动态加载方式，为RIA的应用结构打下坚实的基础。当然，VX并不是适用于所有的Web App开发，对于某些需要大量操作DOM结构和页面高度交互和动画的应用，比如游戏，可能VX并不能提供一套完整的解决方案（VX的最佳实践表明，在Controller中不宜进行DOM操作，DOM操作应交给HTML指令进行）。2.2.2VX背景ColdFusion总结客户端开发的一些好的经验，包括： HTML模板 ，MVC架构 ，依赖性注入 Flex开发有几点特别体现客户端开发的方向： 声明式UI语言MXML ，业务逻辑通过Action Script，数据绑定 ，MVC和依赖性注入，而目前，JavaScript Nicholas C.Zakas；李松峰，曹力. JavaScript高级程序设计.第二版。人民邮电出版社。123145页。领域中没有特别成熟结构模式，除了： jQuery提供DOM交互和AJAX等工具 ，还有 jQuery UI / YUI / Ext JS提供一组UI控件。 2.2.3核心理念JavaScript Nicholas C.Zakas 。Professional Java Script for Web Developers Nicholas。第三版。人民邮电出版社。134145。特别需要“结构式框架”，形成标准的Web App开发模式。根据以往经验，特别是ColdFusion和Flex的客户端编程经验，VX坚持“声明优于编码”的理念，声明式指令可以更好地建立UI并形成组件，而编码更适于业务逻辑的处理，VX坚持：一DOM操作与应用逻辑分离，这将大大提高代码的可测试性 二测试与应用编码同等重要，测试难度很大程度上取决于代码的良好结构 三客户端与服务端代码分离，允许开发并行，实现双方向重用 四建立完整的开发流程，从UI设计、业务逻辑到业务测试 对通常的开发高度重用并简化开发，同时对特定要求提供扩展的可能。通过VX开发，可消除客户端开发的一些常见“弊病”：一Callback注册：客户端开发采用事件编程模式，其中使用大量的事件“回调”，但分散的回调函数，使得应用的结构模糊和晦涩，同时产生大量的重复编码。 二DOM操作编码：DOM操作时AJAX应用的基础，但异常繁琐，而且容易出错。通过“声明式”的方式将UI与数据绑定，将大大减少甚至杜绝直接的DOM操作，VX应用原则上可以完全不必直接操作DOM（推荐方式），虽然你可以那么做。 三数据双向绑定：通常处理流程从服务端获取数据，形成model并输出到form，用户修改form并进行数据校验，显示数据校验错误，准确无误后形成model，最后提交服务端。整个过程产生大量编码，VX包括了整个流程，并大大简化编码流程和代码量。 四大量启动代码：对于典型的“Hello World” AJAX应用，往往需要大量的启动代码。VX通过依赖注入方式，内置提供大量基础服务，使得初始应用异常简单，同时还允许应用对初始化进行干预或定制。 2.3开发使用的服务简绍由于我们采用的是自己的开发框架，所以在我们平时开发中使用的模拟的服务器以便于我们运行调试和运行前端DEMO，这里介绍的是他的功能和使用方法VX-server.jar VX-server使用手册（内部文档）。35页。是为开发动态Web App 搭建的运行容器，将VX-server.jar放入开发工程同级目录中运行，使得workspace成为一个自然的Web Content。通过.do请求拦截，转发至相应目录下与交易名对应的JSON文件，已达到模拟服务端交易数据的效果。在结合现有VX规范目录结构的情况下，既方便管理模拟数据，同时非常容易与现有的服务端结构整合,是Web 项目开发的常用工具包。他使用的是jetty-7.6.8web服务器，默认80为服务端口，以VX-server.jar所在文件为服务器根目录运行。启动时，可通过启动命令控制服务器root目录，JSON搜索目录，启动服务端口，trace等级，是否缓存页面等。他的使用得有JDK1.5以上的版本然后将将VX-server.jar放入需要调试的项目目录的父级目录中，如调试VX Practice工程，则将该VX-server.jar放入工作空间内与VX Practice目录同级目录中。最后进入jar包所在位置，输入启动命令-Java jar VX-server.jar就可以启动端口为80的服务。启动成功的截图如图.所示：图2.1服务启动截图2.4小结至此我们就完成了所有的开发准备工作，在本章节中我们主要介绍了我们说使用的工具Aptana，以及使用的开发框架VX，最后介绍了使用的模拟服务器VX-server.jar，看完本章节可以对我的工作有个基本的背景以及开发环境的了解。第三章 需求分析本章就是正式介绍我们的这个系统的需求，以及怎么设计整个系统的业务流程，这里将会用到用例图来形象的表示整个业务，看完本章后能够完整的知道真的系统的工作流程，以及具体的功能有什么。就是我们是将完整的页面切割成一个个碎片页，所以介绍的也就是每个碎片的功能。然后将每个碎片页镶嵌到主页面之中就完成整个的主页面布局。主页面又是由公共的导航目录以及页面标签组成。至此我们就可以完成整个系统的完整功能。接下来就是正式的介绍整个系统。3.1银行的个人业务的需求分析整个银行的个人业务主要俩个部分，第一部分就是登录这一块，登录需要有五个按钮分别为在线注册，忘记用户名，重置密码，电子回单查询和登录五个功能块。登陆成功之后有四大块分别就是登录之后的投资服务，转账汇款，生活服务，以及客户服务四大块。这里一一介绍每个模块；图3.1用例图在线注册：这个链接是一个新的银行客户，第一次使用银行个人业务时需要注册账号来登录这个系统。忘记用户名：这个链接是当用户忘记用户名之后，用户可以根据自己的账号和个人信息来找回自己的用户名。重置密码：这个链接是用户需要改密码是进入的页面。用户可以根据自己需要莱更改密码。登录：验证数据库中是否存在当前的用户以及密码是否正确。主页：当登录成功之后需要进入到当前主页，主页需要包括当前登录状态，当前信息通知。个人账户，以及所投资的业务一览表。我的账户：这个功能模块主要需要我们实现的是包括账户查询，历史明细查询，电子渠道交易查询三个功能，账户查询是需要展示所有的活期定期账户，添金宝以及贷款账户，历史明细查询主要实现的就是查询用户账号的所有的交易，电子渠道交易就是实现查询使用我们的网上业务所产生的交易查询。转账汇款：转账汇款主要也有三个功能，包括行内转账，行外转账，批量转账。行内转账与行外转账基本流程一样只是取决于转账的时间以及所转入银行的选择，批量转账是同时向多个账号进行转账。投资服务：投资服务主要有理财，基金，储蓄，贵金属四个部分。这里不是由我完成就不详细介绍。生活服务：这个模块主要有六个功能包括自助缴费，分行特色，AA计划，团购，电子红包，以及电子贺卡。其中一自助缴费里面包括手机充值，生活缴费，缴费查询和车俩违章罚款。这里面手机充值只需输入手机号，用绑定的银行卡进行缴费即可。生活缴费主要就是输入要交费的地区，类别和项目就可以成功缴费，缴费查询就是把所有缴费记录查询出来。车辆违章罚款就是根据车牌号发动机号，车主号进行罚款的查询。二分行特色主要是针对北京，上海，大连，天津四个地方的因为不同的缴费模式而设置的缴费模式。其中北京地区的缴费吧种类分为四部分分别为水费，燃气费，通讯费，电费，然后使每个缴费都有不同的自己的要求。水费缴费需要输入账号，然后显示与账号绑定的银行卡，完成缴费。燃气费缴费需要输入账号，然后显示与账号绑定的银行卡，完成缴费。通讯费中又分为了联通，移动，电信，铁通四个，这是个缴费基本一样出来缴费的公司不同，缴费需要输入账号，然后显示与账号绑定的银行卡，完成缴费。最后的电费，全北京都是一样的所以也只需要输入账号，然后显示与账号绑定的银行卡，完成缴费。三AA计划是有发起活动，好友管理，查询三个系统功能。AA计划的发起活动主要是你发起一个活动，可以邀请好友，增加或者减少参与人，也同时选择付款方式。AA查询主要就是查询账户内所有发起过的AA计划。好友管理就是可以为你的账户添加或者删除好友以便于以后的AA计划的实施。四团购下面三个功能分别为要团购，发起团购，团购管理三个功能。团购中的我要团购就是说可以查看当前存在的团购，可以选择团购加入其中进行购物。发起团购就是要实现自己组织的团购。团购管理也就是查询所有的团购信息，也可以进一步查看各个团购的具体详细信息。五电子红包包括发送红包，我的红包，电子红包，查询三个功能。发送红包可以选择将要扣款的卡号，选择发送红包的人。我的红包中选择红包拆开。红包记录就是查询所有的红包收发。六电子贺卡包括发送贺卡，和我的贺卡俩个功能。发送贺卡需要编辑样式然后选定样式就可以发送红包，我的贺卡就是别人发给我的贺卡可以查询以及查看详情。客户服务：客户服务这一模块主要就是一系列客户账户的操作，有网银管理，自助签约，自助服务三个功能，而网银管理要实现的是有网银参数设置，网银账户管理，预留信息管理，登录信息查询四个方面的东西；其中网银参数设置要实现的是登录名，密码，每日的限额设置，和个人的参数设置。在这里离店需要特殊注意的是网银的密码设置，这里面需要是下载银行提供的密码控件来监控密码的修改。网银账户管理主要是要实现的是对网银的删除。预留信息管理主要的就是设置头像，设置名字，可以更新自己的状态。登录信息查询主要查询最近的登录状态，也可以选择具体的某一次登录查看其具体的登录信息。自助签约这里面有超级网银，短信提醒服务，网上支付，动态口令，电话银行，短信银行，手机银行七个小内容这些其中超级银行是开通对其他银行的查询权利。短信提醒读物是开通对手机的提醒。网上支付。只是开通网银的权限。动态口令这里设置动态口令只是为了对手机进行绑定，在以后每次进行账务是会有动态口令生成。3.2银行的个人业务总体设计整个系统由于我们采用的是前后端分离开发。加碎片页的形式开发生成的整个业务所以因为整个登录模块的主题页面与主页的主题页面相差甚多。所以我们需要做俩个主页面，第一个就是登录页面，第二个就是功能主页面。对于登录页面的设计如下需要有银行的公告在右侧滚动提醒然后给他设计为左右的俩面栏第一栏就是登陆这一模块的整体的登录。然后分别将对应的超链接放入页面之中这里面的动态口令和数字口令是银行提供的控件。其他的功能标签链接直接通过在主页面中添加超链接就可以实现。图4.2登录页设计功能主页面的效果截图如下图3.3菜单截图这里我们主要把整个页面分为四个部分第一个为顶部菜单以及一些图标功能。第二个区域为左部功能导航栏，第三个为快捷菜单栏，第四个就是功能操作栏。整体的页面设置为这样其中功能操作栏内的下一步需要实现的就是在功能操作区域内切换碎片页，同时不影响主页面的显示。其他的这一些导航栏和菜单提示需要分别为对应的功能实现其页面。整体的设计如上所示。接下来的具体实现会在下一章详细介绍。3.3本章小结通过本章节的介绍能够对整个的业务有一个直接的了解，能够对系统的需求以及整个架构了解的清楚，对后面的代码的具体实现形成一个直接的指导性作用。这里强调的一点，就是我们是将完整的页面切割成一个个碎片页，所以介绍的也就是每个碎片的功能。然后将每个碎片页镶嵌到主页面之中就完成整个的主页面布局。主页面又是由公共的导航目录以及页面标签组成。至此我们就可以完成整个系统的完整功能。第四章VX框架介绍 4.1辅助类库在设计本系统时使用了非常多的类库，都是前辈们整理出来的可以很方便的帮助我们实现功能页面的美化以及所需要的特订格式的组件，这里面包括了CSS样式，jQuery库，Font字库，自定义模块以及JSON数据。所有的这些都是为实现我们主要模块所准备的，有了这些辅助类库以及组件就可以使得我们开发出来的系统统一，美观和实用。4.2 CSS样式CSS Andy Buddy；Cameron Moll CSS Mastery Advanced Web Standards Solutions。第二版。人民邮电出版社。134145页。样式，由于在我们的开发过程中需要各式各样的样式，比如说表单样式，按钮样式，选择框样式等等一系列的公用样式，如果每个页面要使用的这些样式都由自己来开发的话很可能造成每个页面的按钮都会不一样的，造成一种很乱的感觉，在银行这样的比较严肃的场合使用时就显得很出个格，多以我们使用统一的开源CSS Michael Bowers, Dionysios Synodinos, and Victor Sumner Pro HTML5 and CSS3 Design Patterns354267页。样式，以便于我们达到统一样式和风格的目标，在这里我着重介绍几个具有代表性的CSS样式，以及一些UI组件。3.2.1ui-calendar.css这是一个日历的CSS Dava Shea；Molly E.Holzschlag.CSS禅意花园：Web设计艺术的王者之书.人民邮电出版社。234236页。样式组件，他在这里通过使用Bootstrap设置了点击排序时的图标.ui-icon-triangle-1-s 前端UI组件操作手册（内部文档）。24页。，“|”的设置.ui-upright-line，上一页的设置.ui-icon-seek-prev，首页的设置.ui-icon-seek-first，最后一页的设置.ui-icon-seek-next下一页的设置.ui-icon-seek-next，分页图标.ui-icon，悬停变色下拉列表.table-striped tbody tr:hover td,等等最后实现的效果如下。图3.1日历截图这个日历组件是在当点击需要查询时间时弹出来的，一个弹框，你可以点击左右箭头来选择要查询的年月，点击下方的时间来确定你要查询的日期，然后显示的绿色部分就是当前的日期，当鼠标悬停在某一个日期的上方时你可以看到这个日期的颜色变为灰色。这个就是悬停实现变色。3.2.2ui-mune.css这是目录的样式组件，他设置了导航目录的开始结束以及下移。示例如图：图3.2菜单截图导航初始菜单为自助缴费，这个目录下的手机充值，生活缴费以及生活缴费查询，车辆违章罚款查询就出现在这个目录的下方。3.2.3ui-progress.css这个CSS实现的是步骤样式，其实现的效果如下：图3.3步骤样式截图如图当进行到第一步的时候，1查询缴费信息就会变为绿色，当点击下一步时候如果这个步骤可以进行下去，也就是跳到了下一界面，那么就会同时1查询缴费信息2填写缴费金额就会变为绿色，而 第三第四步骤确认信息和缴费完成这俩个步骤就会仍然为褐色，这就是这个CSS样式实现的功能。关于样式组件我就主要介绍这三个，还有通用的CSS文件这是在所有的功能种可能会使用的CSS组件3.2.4common.css这个CSS样式主要是设置登录页面所需要的所有样式，把他单独的放出来主要是因为在登录时的这个页面和我们在进去系统之后和我们的主页面完全不一样的风格所以把他单独放在一边，并且为他色这里独特的样式3.2.5public.css这个CSS样式主要设置的是我们登录系统之后的主页面的样式，在这里包括：以及菜单的样式，二级菜单的样式，三级菜单的样式，四级菜单的样式，还有快捷菜单的样式以及温馨提示，页脚，按钮，浮层等等一系列的主页面需要的样式，这里只是简单提一下我会在后面一一的展示这些功能4.3 jQuery库jQuery众所周知的一款轻量级的JavaScript库,他可以更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。我在这里主要使用了俩个jQuery库3.3.1jquery.select.jsjQuery Select是一款Select下拉单选框模拟插件，模拟原有Select下拉框的功能，不过比原始Select更具表现力，可以随心所欲的对其美化，同时它还支持键盘操作，可通过键盘选择下拉框选项，可自定义样式，可选择需要的Select 进行非全局模拟，另外，它还有点智能，能判断用户是否开启脚本支持，若未开启，则显示原有Select框，不进行模拟。增加了onchange事件。可以支持方法连缀了。修正opera下的笔误。可支持jQuery的选择器了。使用这个插件主要是为了银行系统中选择框的美化以及因为银行系统中会有很多的选择下拉框，使用它的话可以很好的实现数据的选择而不影响页面的美观性。本来我们直接使用HTML就可以完成这个任务，但是由于如果直接使用HTML一个方面美观性会差很多，另一个方面我们的选择框不仅仅是做选择使用而且还需要传递数据以及接收数据，所以直接使用HTML会使得JS文件非常庞大，而且页面直接数据流通的时候会导致当多个页面重复操作是会有些不确定的错误出现。这一切的问题都导致不可以直接使用HTML来实现。所以使用jquery.select.js这个插件，它可以很好地处理这些问题。使得我们界面美观。3.3.2jquery.min.jsjquery.min.js其实就是jquery.js的压缩版，压缩过来之后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。为了减小文件体积，降低网站流量，提升访问速度等我们使用了jquery.min.js。使用jQuery主要目的是因为它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），JQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。他最大的优势是文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。他能使得用户的HTML页面保持代码和HTML代码的内容分离。在开发过程中不需要再HTML里面插入JS来调用命令。我们之所以使用jQuery就是为了这些特性，不然在开发过程中，不但自己画页面，还得在页面加各种业务逻辑这样导致的就是页面的维护和更新出现大问题，而且导致所有代码在一起导致混乱，这样使得开发过程很容易出错。我们使用了jQuery之后就可以很方便的解决这些问题，而且当遇到自己不容易实现的特殊功能时，我们也可以直接应用jQuery的插件来实现。这样不但使得开发过程简单便捷，而且为以后的维护和代码重用也带了极大的方便。4.4自定义模块这个小节主要介绍的就是我们自己定义的编码的一些模块。包括过滤器，国际化，自定义指令和一些服务。接下来一一介绍这些模块。过滤器：这里主要定义了7个过滤器。主要介绍下面几个accountNoFilter.js:这个过滤器定义了四个数字中间加一个空格如图所示效果：图3.4卡片截图这个过滤器达到的效果可以使得客户很好的观察账户卡号。encryptAcNoFilter.js对账号进行加密。例如1211*1231231这样的卡号进行加密，这样在我们使用账号的时候可以在不方便给人看到后就使用这个达到保密的效果.。exprConditionFilter.js:对字符串进行过滤，这个主要使用在我们跳向其他页面的时候传递字符串的是时候过滤掉不需要的其他字符。toIntFilter.js使得金额字符串变为百分比效果如下图3.5缴费截图4.5 JSON数据模仿数据库JSON数据是一种轻量级的数据格式，它使用数组和对象表示，它使用的是JavaScript的语法，因此JSON定义包含早JavaScript文件中，不需要通过基于XML的语言来额外解析。所以我们在这里主要是为了测试页面的数据流通使用的一种格式。由于我们现在是前后端的分离开发，所以有时候需要的数据库不能及时动用还有后台可能没有写完数据逻辑，所以不能适时的使用数据库，这时候就是用JSON数据来模仿数据库，只是说这些数据是写死的不能进行增删改查，主要的作用就是检验我们的页面逻辑，以及在碎片页之间数据的流通。他的格式如图.所示，图3.6数据截图这里我们通过document.getElementById(powersignDiv).innerHTML = getSignObject(powersign);/ 结果页图片链接$remote.get(data/LinkImgMenu.json, , function(data) $scope.linkImgMenu = data;);/ 用户信息$remote.post(data/userInfo. json, , function(data) $scope.userInfo = data;格式来调用，这里的调用方式和直接从数据库中取数据的方式是一样的，只是说这个数据是直接拿过来的，而调用数据库是需要带一系列加密以及各种操作来操作数据的，所以也就导致我前面所说的问题，一就是这个数据指示用用来展示，是不能实际的操作JSON数据，对其进行增删改查。二就是说JSON数据可以模拟一些暂时拿不到的数据以便于后面的工作，先把问题跳过等整体的逻辑实现之后，再回过头来处理这些问题将会更加的便捷和轻松。4.6 本章小结本章主要描述了我们使用的一系列辅助库，以及我们自己定义创建的通用类以及以一些指令。这个章节主要是为了接下来介绍整体项目的时候，我们在哪使用这些包括，CSS，自定义CSS，自定义指令，JSON数据。这些可以便捷明了的说明我们的思路，以及为什么会进行着这样的操作。第五章 整体的页面DEMO和具体布局实现本章节就是介绍功能模块的具体实现，包括页面切割，每个碎片页的设计实现，和主页面的小功能插件以及页面数据的适时校验。5.1通用页面布局这里吧主页面分为了四个区域，第一个为顶部菜单以及一些图标功能。第二个区域为左部功能导航栏，第三个为快捷菜单栏，第四个就是功能操作栏。其实在每个页面的跳转时还会有遮罩层。接下来一一介绍这几个区域。首先简要介绍一下遮罩层：遮罩层效果如图.所示：图5.1遮罩层截图这个遮罩层的主要功能就是当网络或者浏览器自身的一些原因导致页面加载缓慢时为了避免出现类似name这样的网页源码而设计的，这个遮罩层只有当整个页面加载完成后才会消失，展示出跳转之后的页面，当页面加载不成功时就会显示这个遮罩。这样，一可以做到美观，尽可能的实现用户的体验度，二是可以保护我们的页面代码逻辑，防止一些非法的操作。保证系统的安全性。一顶部菜单功能截图如图示：图5. 2菜单导航截图左上角的渤海银行个人网上银行这是一个银行的logo只是用一个图片放在主页面上的这个没有什么解释的。右上角的四个图标是使用是给图片加一个效果当鼠标移动到图标上是可以显示在超链接中给定的标题题目。这样处理的目的就是尽最大可能给用户带来舒服的体验，因为这些功能如果直接显示在页面时会有格格不入的感觉但是不加的话少了这部分功能会在操作上有诸多不便。接下来的导航栏就是把每个大的功能模块的超链接加入主页面形成导航栏。二，左部功能导航栏截图如图所示：图5.3菜单截图左边导航栏是在主页面的顶部导航栏中的功能被选中之后调用对应的HTML页面显示在左边的模块，这里的每个大的功能模块对应的左边导航栏的都是单独建立的页面，当点击导航菜单的选项时，就调用页面显示在左边形成左侧导航栏。导航栏通过生活服务 ；超链接来实现对页面的调用，我们这里每个功能模块的调用的都是使用这个方法实现。三快捷菜单栏截图如图所示：图5.4快捷菜单截图这里的最上边的“快”这个是一个图标，给图片加了超链接，所以这里面的标签也是通过超链接来实现页面的跳转。但是这里使用了一个我们自定义的一个指令这个指令实现的主要作用就是当我们点击快捷图标时，显示出快捷菜单的导航，然后我们可以点击菜单中的功能跳转至想要取得功能中，当鼠标离开导航菜单是，快捷菜单关闭重新显示一个“快”的图标在主页面之中。四功能展示区域效果截图如下：图5.5功能区截图这个区域显示的就是每个功能的具体操作举个例子。如图进去的是生活服务中的自助缴费模块下的手机充值。这个模块的整个功能的主页面是这样，这个区域的主页面下也有菜单导航，如最上面的全国手机充值，与手机充值查询。这是俩个功能块菜单，也是一直悬浮在页面上方而第二行的左边只是每个碎片页显示当前功能所处的位置，没有什么实际意义。后面的步骤提示是使用了UI控件，这个控件的主要作用就是当每次执行完当前碎片页的步骤后跳向下一个碎片页时显示整个的步骤位置，包括所有步骤执行到哪一步，还有几步。而下面的区域就是显示每个碎片页的页面内容，也就是我们的核心功能。所有的对账户的操作都是在这里进行。5.2生活服务模块的具体实现上一节主要的就是整个系统实现的功能分割，这一节将要说明的就是具体的功能逻辑了。在本文中曾数次提到碎片页，碎片页就是我们把每个功能的操作步骤分解为一个个的HTML页面，进行到哪一步就调用哪一个碎片页。这样的好处可以多个人同时开发系统，他们之间互不影想，而且每个功能模块都是单独的一个主页面加数个碎片页，通过自己的功能JS文件对功能处理做到模块之间不影响。在这里主要使用了三种方式来实现不同的功能的具体实现细节。第一种采用的目录结构如图.所示图5.6目录结构截图这个目录结构是把所有的碎片页放入到了一个文件夹下面由于上海地区的缴费不同于其他地方的缴费，上海地区有多个的公司，而他们的收费方式都不一样所以这里把所有的方式都放在一起，效果如图.。图5.7缴费公司截图如图.所示当点击上海城投水务公司时他的缴费界面需要先找到缴费号，然后选定的是银行卡号来付费图5.8录入界面截图而当选择上海南汇公司缴费时候直接显示的界面如图直接弹出你账户所绑定的银行卡可以选择你想要付账的银行卡。图5.9录入界面截图这里面的跳向哪种收费页面是