一种基于自定义组件的前端页面生成方法、装置及系统制造方法及图纸

本发明专利技术实施例公开了一种基于自定义组件的前端页面生成方法、装置及系统，通过提取页面基本通用功能模块的代码，封装成为自定义组件，并定义组件需要对外暴露的属性；基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面。列表的基本增删改查可以通过配置快速生成页面，提高效率；可减少冗余代码；修改组件内代码可以直接修改代码，减少大量代码操作，减少工作量。减少工作量。减少工作量。

【技术实现步骤摘要】
一种基于自定义组件的前端页面生成方法、装置及系统


[0001]本专利技术实施例涉及前端开发
，具体涉及一种基于自定义组件的前端页面生成方法、装置及系统。

技术介绍

[0002]针对后台管理系统的开发，现阶段前端主要是根据UI库进行页面开发，例如每个页面都有table、form表单、查询条件搜索框、分页等功能，现有技术中存在以下问题：后台管理系统中有大量的基础的增删改查操作，而前端开发人员对这些基本的操作会编写大量重复的编码；前端开发人员编码花费时间长，延长开发时间；如果要修改同样的功能且是修改相同的代码需要修改大量文件。

技术实现思路

[0003]为此，本专利技术实施例提供一种基于自定义组件的前端页面生成方法、装置及系统，以解决现有前端开发中存在的对基本操作的编写会产生大量重复的编码，前端开发时间长，修改工作量大的问题。
[0004]为了实现上述目的，本专利技术实施例提供如下技术方案：
[0005]根据本专利技术实施例的第一方面，提出了一种基于自定义组件的前端页面生成方法，所述方法包括：
[0006]提取页面基本通用功能模块的代码，封装成为自定义组件，并定义组件需要对外暴露的属性；
[0007]基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面。
[0008]进一步地，所述页面基本通用功能模块包括列表查询、列表展示、添加表单、查询条件搜索框、添加、修改、删除、分页等模块。
[0009]进一步地，所述方法还包括：将所述自定义组件发布至NPM仓库。
[0010]进一步地，基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面，具体包括：
[0011]基于Vue框架，进入Vue项目目录，并安装依赖包，安装完成之后，在Vue项目的目录下的main.js中引入自定义组件，然后调用Vue.use()实现在项目中的任何一个Vue文件中使用所述自定义组件。
[0012]根据本专利技术实施例的第二方面，提出了一种基于自定义组件的前端页面生成装置，所述装置包括：
[0013]自定义组件封装模块，用于提取页面基本功能模块的代码，封装成为自定义组件，并定义组件需要对外暴露的属性；
[0014]页面生成模块，用于基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面。
[0015]根据本专利技术实施例的第三方面，提出了一种基于自定义组件的前端页面生成系
统，其特征在于，所述系统包括：处理器和存储器；
[0016]所述存储器用于存储一个或多个程序指令；
[0017]所述处理器，用于运行一个或多个程序指令，用以执行如上任一项所述的方法。
[0018]根据本专利技术实施例的第四方面，提出了一种计算机存储介质，所述计算机存储介质中包含一个或多个程序指令，所述一个或多个程序指令用于被一种基于自定义组件的前端页面生成系统执行如上任一项所述的方法。
[0019]本专利技术实施例具有如下优点：
[0020]本专利技术实施例提出的一种基于自定义组件的前端页面生成方法、装置及系统，通过提取页面基本通用功能模块的代码，封装成为自定义组件，并定义组件需要对外暴露的属性；基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面。列表的基本增删改查可以通过配置快速生成页面，提高效率；可减少冗余代码；修改组件内代码可以直接修改代码，减少大量代码操作，减少工作量。
附图说明
[0021]为了更清楚地说明本专利技术的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图引伸获得其它的实施附图。
[0022]图1为本专利技术实施例1提供的一种基于自定义组件的前端页面生成方法的流程示意图。
具体实施方式
[0023]以下由特定的具体实施例说明本专利技术的实施方式，熟悉此技术的人士可由本说明书所揭露的内容轻易地了解本专利技术的其他优点及功效，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0024]实施例1
[0025]如图所示，本实施例提出了一种基于自定义组件的前端页面生成方法，所述方法包括：
[0026]S100、提取页面基本通用功能模块的代码，封装成为自定义组件，并定义组件需要对外暴露的属性。
[0027]本实施例中，所述页面基本通用功能模块包括列表查询、列表展示、添加表单、查询条件搜索框、添加、修改、删除、分页等模块。前端将业务上面常用的列表的样式、搜索框、添加、修改、删除、分页等模块的代码抽离出来，再在vue页面上使用这些模块的组件组成列表的增删改查，封装成组件，通过暴露属性，使用组件时传入所需要的值。
[0028]前端将后台管理系统当中经常用到的添加、查询、修改和删除代码提取出来，table和form表单针对不同类型的字段做不同的处理，将头部的查询、列表、分页、保存表单再组成增删改查页面，对外暴露出相应的属性。
[0029]S200、基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面。
[0030]进一步地，所述方法还包括：将所述自定义组件发布至NPM仓库。通过npm publish上传到NPM仓库。
[0031]本实施例中，基于Vue框架，使用自定义组件需进入Vue项目目录，并通过执行npm install tpf
‑
crud来安装依赖包，安装完成之后，在Vue项目的目录下的main.js中引入自定义组件，然后调用Vue.use()实现在项目中的任何一个Vue文件中使用所述自定义组件。
[0032]示例性的，在vue文件里的<div>中使用组件，如定义columnList＝[
[0033]{
[0034]prop:“title”，//此属性对应后台接收此参数的字段名称
[0035]label:“名称”，//前端表单和列表需要展示的字段含义
[0036]type:“input”，//form表单中这个字段需要展示的类型
[0037]tableShow:true，//这个字段是否在列表中显示(true为显示false为不显示)
[0038]formShow:true，//这个字段是否在添加表单中显示(true为显示false为不显示)
[0039]width:“120”，//这个字段在列表中的宽度
[0040]overflow:true，//是否当内容过长被隐藏时显示tooltip(true为显示false为不显示)
[0041]rules:[]，//添加表单时对这个字段校验规则
[0042]list:[]，//当t本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于自定义组件的前端页面生成方法，其特征在于，所述方法包括：提取页面基本通用功能模块的代码，封装成为自定义组件，并定义组件需要对外暴露的属性；基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面。2.根据权利要求1所述的一种基于自定义组件的前端页面生成方法，其特征在于，所述页面基本通用功能模块包括列表查询、列表展示、添加表单、查询条件搜索框、添加、修改、删除、分页等模块。3.根据权利要求1所述的一种基于自定义组件的前端页面生成方法，其特征在于，所述方法还包括：将所述自定义组件发布至NPM仓库。4.根据权利要求3所述的一种基于自定义组件的前端页面生成方法，其特征在于，基于页面开发框架，调用所述自定义组件，并传入相应属性值，生成页面，具体包括：基于Vue框架，进入Vue项目目录，并安装依赖包，安装完成之后，在Vue项目的目录下的main.js中引入自定义组件，然...

【专利技术属性】
技术研发人员：张晴，王畅，
申请(专利权)人：北京鼎普科技股份有限公司，
类型：发明
国别省市：