一种移动应用中模版化查询配置的方法技术

本发明专利技术公开了一种移动应用中模版化查询配置的方法，使用JavaScript框架angular组件在移动设备上以单页面应用的形式，通过ui‑route组件加载指定模板，将模板数据绑定到指定应用页面中，取得页面各部分的数据并展现出来。本发明专利技术的一种移动应用中模版化查询配置的方法与现有技术相比，在移动设备的html5基础上使用将模板化配置在单页面应用上通过路由功能展示查询报表，最大的优势在于用户体验，对于内容的改动不需要加载整个页面；对服务器压力很小，消耗更少的带宽，与面向服务的架构更好地结合，实用性强，适用范围广泛，易于推广。

A method of template query configuration in mobile applications

The invention discloses a mobile application template query configuration method, using the JavaScript framework angular module on the mobile device to a single page application form, specify a template by UI route component loading, template binding data to the specified application page, the page made in various parts of the data and show it. The invention relates to a mobile application template query allocation method compared with the existing technology, based on HTML5 mobile devices using the template based configuration in a single page application through the routing function display query statements, the biggest advantage is that the user experience for the content changes without reloading the entire page on the server is small; pressure, consumes less bandwidth and service oriented architecture, better integration, strong practicability, wide application range, easy popularization.

【技术实现步骤摘要】
一种移动应用中模版化查询配置的方法
本专利技术涉及软件应用
，具体地说是一种可缩减开发时间，提高开发效率的移动应用中模版化查询配置的方法。
技术介绍
现有移动应用查询功能的开发中，设计人员提供表样与数据定义，美工人员根据表样设计前台页面，开发人员根据数据定义开发后台接口，三方合作完成一个表样。由于移动应用以移动设备尤其手机为本，移动运行环境复杂，尤其手机操作系统更新换代频繁，新硬件新特性层出不穷，移动设备的性能与电脑差别普遍比较大，显示屏又始终维持在便携程度，对移动应用操作性、运行速度、离线能力、显示特效、不同设备下的体验一致，相比电脑有很高的要求，美工人员需要花费相当多的时间设计应用界面，设计好的界面又对开发人员提出了很高的要求来保持界面与数据的适配。目前的模板定制化开发工具，对电脑浏览器支持比较完善，定制报表比较快捷，各种组件通过拖曳式操作可迅速合成一张报表进行发布，但因为移动应用的复杂性，这些工具难以满足移动开发的普适性，同一个组件在移动应用中与电脑浏览器中相比，在尺寸、位置、特效、触发事件、社交共享接口、调用手机功能接口交互等方面差异较大。由于移动设备性能局限性，目前的模板定制工具产生的报表在html5缓存、单页面应用、本地存储等方面难以使用这些新技术或理论，通过简单的操作已经难以实现比较满意的移动应用查询报表。基于此，本专利提供一种可解决上述问题的移动应用中模版化查询配置的方法。
技术实现思路
本专利技术的技术任务是针对以上不足之处，提供一种可缩减开发时间，提高开发效率的移动应用中模版化查询配置的方法。一种移动应用中模版化查询配置的方法，使用JavaScript框架angular组件在移动设备上以单页面应用的形式，通过ui-route组件加载指定模板，将模板数据绑定到指定应用页面中，取得页面各部分的数据并展现出来。所述的单页面应用的形式是指，使用angular及ui-route路由解析地址hashbang获取数据定义编号和模板地址。所述指定模板包括后台模板表、数据接口和应用页面，其中后台模板表存储模板数据信息；数据接口用于连接应用页面与后台模板表；应用页面置于前台，用于提供模板页，完成调用信息的请求输入。所述后台模板表用以填写移动应用页面的数据规范，该数据规范包含页面标题、数据来源、数据表格定义、页面后退地址、页面检索条件、ECHARTS设置，在应用服务器部署适配数据规范的应用页面，通过设备访问移动应用页面时，根据访问地址中hashbang值获取后台数据库配置好的数据规范，取得页面各部分的数据定义并展现出来。所述的模板数据存储在后台模板表中，该模板数据包含模板编号、页面标题、检索条件、过滤条件、排序、超链接、echarts设置信息。所述后台模板表存储的模板数据中，页面标题是指应用页面的标题；检索条件包括条件名称、初始值；过滤条件是指过滤器过滤时出现的过滤器提示、要过滤的数据属性或字段；排序是指具体的排序方式，该排序方式包括汉字排序方式、数字排序方式或不允许排序；超链接是指超链接地址及地址中的参数定义；echarts设置是指是否可展示echarts图的设置。所述后台模板表由数据表头定义和数据来源描述组成数据表格的形式，其中，表头定义包含数据各属性的字段名、显示名称、显示长度、上下对齐方式、显示格式转换函数、排序方式、超链接地址及地址中的参数定义、是否可展示echarts图；数据来源是一个结果集，包含表头定义中的各个字段，通过SQL来定义。所述数据接口由前台模板页请求调用，获取后台模板表中的数据定义，取到定义后，根据数据来源SQL查询数据，然后以JSON格式返回给应用页面，完成信息展示。所述应用页面的主页面通过Angular组件作为单页面路由应用，以ui-route控制路由访问，具体访问过程为：首先配置访问应用的地址，设置hashbang值，根据该hashbang值获取模板编号与模板地址；ui-route通过hashbang分解参数传给具体模板控制器，模板控制器根据模板编号向后台请求数据定义，根据模板地址指向要求加载的模板html地址，请求完成后由angular指令将数据定义绑定在页面组件上。所述页面组件包括查询框，过滤框，表格、echarts图表。本专利技术的一种移动应用中模版化查询配置的方法和现有技术相比，具有以下有益效果：本专利技术的一种移动应用中模版化查询配置的方法，在移动设备的html5基础上使用将模板化配置在单页面应用上通过路由功能展示查询报表，最大的优势在于用户体验，对于内容的改动不需要加载整个页面；对服务器压力很小，消耗更少的带宽，与面向服务的架构更好地结合，实用性强，适用范围广泛，易于推广。具体实施方式下面结合具体实施例对本专利技术作进一步说明。一种移动应用中模版化查询配置的方法，利用本方法可缩减开发时间，提高开发效率。本专利技术通过下述技术方案予以实现：在应用后台数据库中创建模板配置表，用以填写移动应用页面的数据规范，包含页面标题、数据来源，数据表格定义，页面后退地址，页面检索条件，ECHARTS设置，在应用服务器部署适配数据规范的模板页面，在通过设备访问移动应用页面时，根据访问地址中hashbang值获取后台数据库配置好的数据规范，取得页面各部分的数据定义并展现出来。其具体实现过程为：使用JavaScript框架angular组件在移动设备上以单页面应用的形式，通过ui-route组件加载指定模板，将模板数据绑定到指定应用页面中，取得页面各部分的数据并展现出来。所述的单页面应用的形式是指，使用angular及ui-route路由解析地址hashbang获取数据定义编号和模板地址。所述指定模板包括后台模板表、数据接口和应用页面，其中后台模板表存储模板数据信息；数据接口用于连接应用页面与后台模板表；应用页面置于前台，用于提供模板页，完成调用信息的请求输入。所述的模板数据存储在后台模板表中，该模板数据包含模板编号、页面标题、检索条件、过滤条件、排序、超链接、echarts设置信息。所述后台模板表存储的模板数据中，页面标题是指应用页面的标题；检索条件包括条件名称、初始值；过滤条件是指过滤器过滤时出现的过滤器提示、要过滤的数据属性或字段；排序是指具体的排序方式，该排序方式包括汉字排序方式、数字排序方式或不允许排序；超链接是指超链接地址及地址中的参数定义；echarts设置是指是否可展示echarts图的设置。所述后台模板表由数据表头定义和数据来源描述组成数据表格的形式，其中，表头定义包含数据各属性的字段名、显示名称、显示长度、上下对齐方式、显示格式转换函数、排序方式、超链接地址及地址中的参数定义、是否可展示echarts图；数据来源是一个结果集，包含表头定义中的各个字段，通过SQL来定义。所述数据接口由前台模板页请求调用，获取后台模板表中的数据定义，取到定义后，根据数据来源SQL查询数据，然后以JSON格式返回给应用页面，完成信息展示。所述应用页面基于html5规范，引用v1.3.8版本的AngularJS及ui-route模块和百度ECHARTS图形模块，在width>=320p和height>=480px的尺寸上开发。其主页面引入Angular组件作为单页面路由应用，以ui-本文档来自技高网...

【技术保护点】
一种移动应用中模版化查询配置的方法，其特征在于，使用JavaScript框架angular组件在移动设备上以单页面应用的形式，通过ui‑route组件加载指定模板，将模板数据绑定到指定应用页面中，取得页面各部分的数据并展现出来。

【技术特征摘要】
1.一种移动应用中模版化查询配置的方法，其特征在于，使用JavaScript框架angular组件在移动设备上以单页面应用的形式，通过ui-route组件加载指定模板，将模板数据绑定到指定应用页面中，取得页面各部分的数据并展现出来。2.根据权利要求1所述的一种移动应用中模版化查询配置的方法，其特征在于，所述的单页面应用的形式是指，使用angular及ui-route路由解析地址hashbang获取数据定义编号和模板地址。3.根据权利要求1所述的一种移动应用中模版化查询配置的方法，其特征在于，所述指定模板包括后台模板表、数据接口和应用页面，其中后台模板表存储模板数据信息；数据接口用于连接应用页面与后台模板表；应用页面置于前台，用于提供模板页，完成调用信息的请求输入。4.根据权利要求3所述的一种移动应用中模版化查询配置的方法，其特征在于，所述后台模板表用以填写移动应用页面的数据规范，该数据规范包含页面标题、数据来源、数据表格定义、页面后退地址、页面检索条件、ECHARTS设置，在应用服务器部署适配数据规范的应用页面，通过设备访问移动应用页面时，根据访问地址中hashbang值获取后台数据库配置好的数据规范，取得页面各部分的数据定义并展现出来。5.根据权利要求4所述的一种移动应用中模版化查询配置的方法，其特征在于，所述的模板数据存储在后台模板表中，该模板数据包含模板编号、页面标题、检索条件、过滤条件、排序、超链接、echarts设置信息。6.根据权利要求5所述的一种移动应用中模版化查询配置的方法，其特征在于，所述后台模板表存储的模板数据中，页面标题是指应用页面的标题；检索条件包括条件名称、初始值；过滤条件是指...

【专利技术属性】
技术研发人员：殷海龙，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：山东,37