CN105242926A - Web前端开发平台 - Google Patents

Abstract

本发明公开了一种前端开发平台，其中包括：页面模板提供模块，用于提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个树结构导航菜单项；页面内容模板提供模块，用于为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。本发明实施例能够提高Web前端开发的安全性，并降低维护成本。

Description

Web前端开发平台

技术领域

本发明实施例涉及互联网技术领域，尤其涉及一种Web前端开发平台。

背景技术

互联网显示页面(WorldWideWeb，Web)技术是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对互联网上资源的组织和访问。

现有技术中，对于Web前端技术的开发，一般采取直译式脚本语言JavaScript和轻量级的JavaScript脚本语言JQuery两种技术相混合的方法，这需要开发人员需要了解很多的前台技术内容，并且需要掌握大量JavaScript或JQuery的使用方法，而且在开发过程中需要编写大量的程序代码。

然而这两种技术混合使用存在着诸多弊端：(1)缺乏安全性，由于JavaScript的安全问题，黑客可以利用这些漏洞植入一些软件、劫持用户会话等。(2)缺乏维护性，需要开发人员了解大量的前台知识才能维护本系统，会增加维护成本。

发明内容

本发明实施例提供一种Web前端开发平台，提高Web前端开发的安全性，并降低维护成本。

本发明实施例提供了一种Web前端开发平台，包括：

页面模板提供模块，用于提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个树结构导航菜单项；

页面内容模板提供模块，用于为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。

本发明实施例通过页面模板提供模块提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个数结构导航菜单项；通过页面内容模板提供模块为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。本发明实施例能够提高Web前端开发的安全性，并降低维护成本。

附图说明

图1为本发明实施例提供的Web前端开发平台的结构示意图；

图2为本发明实施例提供的Web前端开发平台中的抽屉型导航菜单项的显示界面示意图；

图3为本发明实施例提供的Web前端开发平台中的图标内容导航选项的显示界面示意图；

图4为本发明实施例提供的Web前端开发平台中的将网页原始的提示信息改造成新的风格的示例示意图；

图5为本发明实施例提供的Web前端开发平台中的新增部分组件的示例示意图；

图6为本发明实施例提供的Web前端开发平台中的图标库的示例示意图；

图7为本发明实施例提供的Web前端开发平台中的组件与特效的分离版本的示例示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

图1为本发明实施例提供的Web前端开发平台的结构示意图，如图1所示，具体包括：页面模板提供模块11和页面内容模板提供模块12；

所述页面模板提供模块11用于提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个树结构导航菜单项；

其中，多级导航菜单项可为纵向或横向的多级导航菜单项，所述树结构导航菜单项也可为横向的树状导航菜单项。所述页面模板提供模块11可提供十多种甚至更多的Web显示主页模板。另外，所述主页模板中还包含至少一个抽屉型导航菜单项。

具体的，所述多级导航菜单项和所述树结构导航菜单项可为通过门户portal认证的导航菜单项，且每种导航结构支持的菜单层级也不尽相同。如图2所示，为本实施例提供的抽屉型导航菜单项的显示界面示意图。开发者可以根据自己的需要选择任意一种或多种，然后基于选定的Web显示主页模板进行开发。十多种主页模板足够应对各种各样的Web显示系统的需求。

所述页面内容模板提供模块12用于为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。

具体的，如图3所示，为本实施例提供的图标内容导航选项的显示界面示意图。另外，所述页面内容模板提供模块12可提供非常多的页面内容模板，并可给出代码示例。开发者在制作一个页面时，可以根据自己的需要找到合适的页面内容模板，然后通过拷贝或者修改相关代码即可做出美观、兼容性好、用户体验良好的页面。

本实施例通过页面模板提供模块提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个数结构导航菜单项；通过页面内容模板提供模块为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。本实施例提供的Web前端开发平台包含了大量主页模板和页面内容模板，开发人员在开发时只需要调用这些模板即可，而无需编写大量的程序代码进行实现，可以提高开发效率，并且本实施例提供的Web前端开发平台还能够提高Web前端开发的安全性，并降低维护成本。

示例性的，在上述实施例的基础上，所述Web前端开发平台还包括：

组件修改模块，用于对平台中的已有模板或组件进行修改，以Web显示出不同的风格。

具体的，所述组件修改模块可对已有的网页原有组件或模板进行改进，一方面可以提高组件或模板的美观和扩展性，另一方面还不影响开发者的开发习惯，有助于开发效率的进一步提升。如图4所示，为将网页原始的提示信息改造成新的风格的示例。

示例性的，在上述实施例的基础上，所述Web前端开发平台还包括：

项目添加模块，用于添加新开发出的具有特效功能的模板或组件。

具体的，当开发人员开发了具备新功能的组件或模板后，可通过项目添加模块将其添加到开发平台中，为开发者提供更为强大的组件和特效使用，可极大地提高开发效率和用户的体验度。如图5所示，为新增的部分组件的示例。

示例性的，在上述实施例的基础上，所述Web前端开发平台还包括：

样式模板模块，用于提供基本布局、控制展现方式、创建图标、创建按钮、创建菜单选项和创建工具条中的至少一种功能。

具体的，所述样式模板模块就是一些已经写好的显示样式，要实现主页外观上的调整，只要使用命令(例如class＝“xxx”)就可以了，不必再写相关的程序代码，能够很大程度地提高开发效率。其中，所述样式模板模块可包含控制基本布局(例如，浮动、对齐和行高等)、控制表现(宽高、颜色、字号和缩进等)、图标库等。以图标库为例，使用图标库可以通过一句话很方便地创建图标，应用于按钮、菜单项、工具条中，如图6所示，为提供图标库的示例。

示例性的，在上述实施例的基础上，所述Web前端开发平台还包括：

兼容模块，用于与网页浏览器IE6以上、火狐浏览器FireFox、谷歌Chrome和Safira中至少一种主流浏览器兼容。

具体的，所述兼容模块通过采用多种兼容性技术确保制作的Web前端浏览器与已有的多种主流浏览器兼容。例如可以与IE6、IE7、IE8、IE9、FireFox、Chrome、Safira等主流浏览器完美兼容。

示例性的，在上述实施例的基础上，所述页面模板提供模块、所述页面内容模板提供模块、所述组件修改模块、所述项目添加模块、所述样式模板模块和所述兼容模块间两两相互独立。

例如，如图7所示，制作的WEB前端只需要使用平台的某几个组件或特效，那么不必将整套平台机制全部引入到平台项目中，本实施例提供组件与特效的分离版本，每个组件都是一个独立的文件包。

示例性的，在上述实施例的基础上，所述样式模板模块与表单元组件相关联。

例如，所述表单元组件可提供如图5所示的图标选项。在后续制作Web页面时，可直接从表单元组件中获取相应的图标。

示例性的，在上述实施例的基础上，所述Web前端开发平台还包括：

数据组件，用于与所述轻量级的数据交换格式JSON组件相关联，获取对应的JSON数据项。

具体的，所述数据组件支持JSON数据，通过代码也可以看出。所述数据组件可通过一个url获取JSON数据，这样组件的数据项就构建出来了。例如，通过一个url获取JSON数据的实现代码如下：

第一种url方式，代码如下：

<selecturl＝"${CONTEXT_PATH}/radio_dropdown/getProvinces.do">

</select>

第二种url属性+参数方式，代码如下：

<selecturl＝"${CONTEXT_PATH}/radio_dropdown/getProvinces.do"

Prompt＝"请选择员工"params＝′{"provinceID":"1"}′></select>

第三种赋值给标签的数据属性，代码如下：

<selectprompt＝"请选择员工"

Data＝′{"list":[{"value":"1","key":"员工1"}，{"value":"2","key":"员工2"}]}′></select>

示例性的，除了上述数据组件支持JSON数据外，所述Web前端开发平台还包括：

数据表格组件，用于获取Web前端显示所需的数据。

上述各实施例同样通过页面模板提供模块提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个数结构导航菜单项；通过页面内容模板提供模块为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。本实施例提供的Web前端开发平台包含了大量主页模板和页面内容模板，开发人员在开发时只需要调用这些模板即可，而无需编写大量的程序代码进行实现，可以提高开发效率，并且本实施例提供的Web前端开发平台还能够提高Web前端开发的安全性，并降低维护成本。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种Web前端开发平台，其特征在于，包括：

页面模板提供模块，用于提供多种Web显示主页模板，所述主页模板中包含至少一个多级导航菜单项和/或至少一个树结构导航菜单项；

页面内容模板提供模块，用于为Web显示主页提供至少一种页面内容模板，所述页面内容模板包含至少一个文字内容导航选项和至少一个图标内容导航选项。

2.根据权利要求1所述的平台，其特征在于，还包括：

组件修改模块，用于对平台中的已有模板或组件进行修改，以Web显示出不同的风格。

3.根据权利要求2所述的平台，其特征在于，还包括：

项目添加模块，用于添加新开发出的具有特效功能的模板或组件。

4.根据权利要求3所述的平台，其特征在于，还包括：

样式模板模块，用于提供基本布局、控制展现方式、创建图标、创建按钮、创建菜单选项和创建工具条中的至少一种功能。

5.根据权利要求4所述的平台，其特征在于，还包括：

兼容模块，用于与网页浏览器IE6以上、火狐浏览器FireFox、谷歌Chrome和Safira中至少一种主流浏览器兼容。

6.根据权利要求5所述的平台，其特征在于，所述页面模板提供模块、所述页面内容模板提供模块、所述组件修改模块、所述项目添加模块、所述样式模板模块和所述兼容模块间两两相互独立。

7.根据权利要求4所述的平台，其特征在于，所述样式模板模块与表单元组件相关联。

8.根据权利要求1～7任一项所述的平台，其特征在于，还包括：

数据组件，用于与所述轻量级的数据交换格式JSON组件相关联，获取对应的JSON数据项。

9.根据权利要求1～7任一项所述的平台，其特征在于，还包括：

数据表格组件，用于获取Web前端显示所需的数据。

10.根据权利要求1～7任一项所述的平台，其特征在于，所述主页模板还包含抽屉型导航菜单项。