CN106446023A - 基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统及方法 - Google Patents

Abstract

本发明公开了一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统，包括服务端和客户端；服务端采用JavaSpringMVC请求驱动类型的轻量级Web框架、前端控制器是DispatcherServlet；应用控制器包括处理器映射器和视图解析器，所述处理器映射器进行处理器管理，视图解析器进行视图管理；页面控制器/动作/处理器由Controller实现；客户端利用Bootstrap对页面进行构建，利用AngularJS实现数据的访问。本发明使用AngularJS来实现数据的访问，既能降低展示系统前端开发人员的学习曲线，使得程序开发、维护更简洁；又能实现数据双向绑定，以实现View层与model层数据的同步，以实现数据的相互影响，更能降低系统各功能模块间的耦合度。

Description

基于AngularJS和Bootstrap实现的双公示生产数据前端展示 系统及方法

技术领域

本发明涉及大数据应用、互联网技术或计算机应用技术领域，尤其涉及一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统。

背景技术

在现有技术中，行政机关行政许可公示和行政处罚公示(以下简称双公示)生产数据前端展示系统一般采用普通的页面展示技术实现，通常对页面宽度设置固定值,以固定页面展示系统的各个元素，这种方式对屏幕较小的移动设备支持不够，对于不同分辨率的移动设备(或者分辨率比展示页面设定的固定宽度值小的PC显示屏)难以做到更好的支持，达不到适应不同屏幕分辨率的理想展示效果。有的双公示生产数据前端展示系统即使采用了以屏幕分辨率百分比来代替固定页面宽度的页面展示方式，但由于缺乏栅格布局和响应式设计原理，展示页面布局不够灵活，难以满足不同设备的各种需求，在不同设备和不同分辨率情况下无法具备一致的用户体验。

Bootstrap是一款由Twitter公司开发的前端框架，其主要目的在于提高Web开发的速度，它基于HTML、CSS、JAVAS-CRIPT，可以灵活、快速的构建Web应用。Bootstrap能够对移动设备提供良好的支持，而且Bootstrap的设计之初就考虑到移动设备上的应用，对于不同操作系统内核、不同分辨率的移动设备都有良好的支持。另外，Bootstrap支持栅格布局，使得页面布局效果更佳灵活方便，能够满足几乎各式各样的展示需求。

AngularJS则是一款由Google公司开发的基于JavaSript的MVC框架，主要用于动态应用程序开发工作，能有效的简化开发过程的复杂度，提高测试和开发效率。而且AngularsJS使用Javascript语言进行开发，大大降低了前端页面开发人员的学习曲线，使得程序的开发、维护和测试更好的简洁。AngularJS数据的双向绑定，可以实现View层与model层数据的同步。AngularJS的代码模块化，提供依赖注入的特点，可以大大降低模块之间的耦合度，有利于开发高效、低耦合的应用程序。化，提供依赖注入的特点，可以大大降低模块之间的耦合度，有利于开发高效、低耦合的应用程序。

发明内容

针对现有双公示生产数据前端展示系统的不足，本发明方案从提高动态应用系统开发效率和降低系统开发、维护难度，以及一致用户体验的角度出发，提供一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统。

本发明的目的是通过以下技术方案实现的：

一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统，包括服务端和客户端；

服务端采用JavaSpringMVC请求驱动类型的轻量级Web框架、前端控制器是DispatcherServlet；应用控制器包括处理器映射器和视图解析器，所述处理器映射器进行处理器管理，视图解析器进行视图管理；页面控制器由Controller实现；

客户端利用Bootstrap对页面进行构建，利用AngularJS实现数据的访问。

一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统的展示方法，包括如下步骤：

S1，用户发送页面展示请求到前端控制器，前端控制器根据请求信息决定选择相应页面控制器进行处理并把请求委托给所述页面控制器，并授予页面控制器控制权；

S2，页面控制器接收到请求后，进行如下业务处理：首先收集前端控制器委托过来的请求中携带的参数并绑定到一个对象，被绑定的对象为命令对象，并对命令对象进行有效性验证，然后将命令对象委托给业务模型进行处理；处理完毕后返回一个模型数据和对应的逻辑视图名；

S3，前端控制器收回控制权，然后根据返回的逻辑视图名，选择模型数据中的视图进行渲染，并把模型数据传入以便视图渲染；

S4，前端控制器再次收回控制权，将响应返回给用户，即给用户显示用户请求的url页面。

优选地，所述请求信息为展示页面的URL。

与现有技术相比，本发明实施例至少具有以下优点：

本发明中的双公示生产数据前端展示系统使用Bootstrap对前端展示页面进行构建，由于其对移动设备良好的支持和栅格化布局，使得系统布局效果灵活、在不同操作系统、不同分辨率的移动设备上都能达到良好的展示效果，解决了现有双公示生产数据前端展示系统对不同分辨率无法达到一致用户体验的缺点。本发明使用AngularJS来实现数据的访问，既能降低展示系统前端开发人员的学习曲线，使得程序开发、维护更简洁；又能实现数据双向绑定，以实现View层与model层数据的同步，以实现数据的相互影响，更能降低系统各功能模块间的耦合度。

附图说明

图1为本发明基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统的通信结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

下面结合附图和实施例对本发明作进一步详述。

如图1所示，一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统，包括服务端和客户端；

服务端采用JavaSpringMVC请求驱动类型的轻量级Web框架、前端控制器是DispatcherServlet；应用控制器包括处理器映射器和视图解析器，所述处理器映射器进行处理器管理，视图解析器进行视图管理；页面控制器由Controller实现；

客户端利用Bootstrap对页面进行构建，利用AngularJS实现数据的访问。

一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统的展示方法，包括如下步骤：

S1，用户发送页面展示请求到前端控制器，前端控制器根据请求信息决定选择相应页面控制器进行处理并把请求委托给所述页面控制器，并授予页面控制器控制权；

S2，页面控制器接收到请求后，进行如下业务处理：首先收集前端控制器委托过来的请求中携带的参数并绑定到一个对象，被绑定的对象为命令对象，并对命令对象进行有效性验证，然后将命令对象委托给业务模型进行处理；处理完毕后返回一个模型数据和对应的逻辑视图名；

S3，前端控制器收回控制权，然后根据返回的逻辑视图名，选择模型数据中的视图进行渲染，并把模型数据传入以便视图渲染；

S4，前端控制器再次收回控制权，将响应返回给用户，即给用户显示用户请求的url页面。

所述请求信息为展示页面的URL。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。

Claims (3)

1.一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统，包括服务端和客户端；其特征在于，

服务端采用JavaSpringMVC请求驱动类型的轻量级Web框架、前端控制器是DispatcherServlet；应用控制器包括处理器映射器和视图解析器，所述处理器映射器进行处理器管理，视图解析器进行视图管理；页面控制器由Controller实现；

客户端利用Bootstrap对页面进行构建，利用AngularJS实现数据的访问。

2.一种基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统的展示方法，其特征在于，包括如下步骤：

S1，用户发送页面展示请求到前端控制器，前端控制器根据请求信息决定选择相应页面控制器进行处理并把请求委托给所述页面控制器，并授予页面控制器控制权；

S2，页面控制器接收到请求后，进行如下业务处理：首先收集前端控制器委托过来的请求中携带的参数并绑定到一个对象，被绑定的对象为命令对象，并对命令对象进行有效性验证，然后将命令对象委托给业务模型进行处理；处理完毕后返回一个模型数据和对应的逻辑视图名；

S3，前端控制器收回控制权，然后根据返回的逻辑视图名，选择模型数据中的视图进行渲染，并把模型数据传入以便视图渲染；

S4，前端控制器再次收回控制权，将响应返回给用户，即给用户显示用户请求的url页面。

3.根据权利要求2所述的基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统的展示方法，所述请求信息为展示页面的URL。