一种CRUD表单的集成方法与流程

文档序号:24558002发布日期:2021-04-06 12:08阅读:115来源:国知局

本发明涉及企业管理相关技术领域,尤其是指一种crud表单的集成方法。



背景技术:

企业内部的管理后台,涉及到很多对表单的增删改查之类的操作。这些操作具有很高的重复性,如果对每个页面都开发一套增删改查的操作,缺少了代码的精简性。



技术实现要素:

本发明是为了克服现有技术中存在上述的不足,提供了一种提高代码精简性的crud表单的集成方法。

为了实现上述目的,本发明采用以下技术方案:

一种crud表单的集成方法,具体包括如下步骤:

(1)在调用crud方法前,要先注册crud,初始化crud配置;

(2)表单页面采用vue框架进行构建表单,一个vue相当于一个crud方法的实例;

(3)根据页面设计要求,一个页面可能会存在多个表单,在这种情况下,将会有多个vue,即多个crud实例,每个实例用参数tag进行标记,保持数据清洁;

(4)将查询数据的接口url传给crud方法,url参数值必传;将defaultfun传给crud方法,即将默认的表单结构传给crud,若defaultfun没有赋予参数值,即使用默认参数值;

(5)对表单进行初始化,即调用crud中的retrieve操作,获取相关字段数据,呈现表单的默认状态。

其中:crud是以增加(create)、读取查询(retrieve)、更新(update)和删除(delete)这4个单词的首字母命名。crud提供的方法:toquery(搜索)、refresh(刷新)、doedit(编辑)、submitcu(提交新增)、dodelete(删除)、doexport(导出excel)等。为了解决该问题,将增删改查封装成一套crud(create、retrieve、update和delete)方法,里面包括如何改变刷新前后、新增前后、删除前后等的状态问题,只要在页面上进行传参调用即可。本方法生成一个js的crud文件,集成vue的mixins混路方法,mixins提供使用crud方法的一个通道,通过mixins方法使得crud的js文件在页面上可以使用,然后外部通过crud暴露的方法来操作crud的内部,这样设计能够大大提高代码精简性。

作为优选,在步骤(1)中,在注册crud时,需要定义crud方法,其主要作用定义属性和公共方法,返回curd对象;多个curd时,通过属性tag进行标记,识别组件;在初始化crud配置时,在vue实例属性上添加crud方法,返回合并后的属性;mixins混入crud定义好的属性和方法。mxins是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

作为优选,在步骤(1)中,crud与表单开发先定义好权限控制字段rolesname,用户在登录时接口调用获取用户权限,初始化crud时与rolesname字段进行权限匹配,根据匹配到的权限来确定该用户界面是否有相关的操作按钮。

作为优选,在步骤(4)中,根据url和defaultfun可以获得表单的基本信息,包括表单包含哪些参数,表单使用增删改查中的哪一种或几种操作。

作为优选,crud方法如下:先对要配置的表单进行置空,清空数据残留和初始化,利用钩子监听指定的消息类型,提供操作空间,利用与之相关联的指针this,拿到实例。

作为优选,在crud方法中,新增前要做校验,要在新增前的钩子里做处理;新增时表单填写了一半取消新增,通过钩子监听到这个操作后则进行状态置空处理,在这些特殊事件前后都需要添加这样一个钩子来进行监听并处理。

本发明的有益效果是:生成一个js的crud文件,集成vue的mixins混路方法,mixins提供使用crud方法的一个通道,通过mixins方法使得crud的js文件在页面上可以使用,然后外部通过crud暴露的方法来操作crud的内部,能够大大提高代码精简性。

具体实施方式

下面结合具体实施方式对本发明做进一步的描述。

一种crud表单的集成方法,具体包括如下步骤:

(1)在调用crud方法前,要先注册crud,初始化crud配置;

在注册crud时,需要定义crud方法,其主要作用定义属性和公共方法,返回curd对象;多个curd时,通过属性tag进行标记,识别组件。

在初始化crud配置时,这里引入curd.js,在vue实例属性上添加crud方法,返回合并后的属性;mixins混入crud定义好的属性和方法。mxins是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

crud与表单开发先定义好权限控制字段rolesname,用户在登录时接口调用获取用户权限,初始化crud时与rolesname字段进行权限匹配,根据匹配到的权限来确定该用户界面是否有相关的操作按钮。

(2)表单页面采用vue框架进行构建表单,一个vue相当于一个crud方法的实例;

(3)根据页面设计要求,一个页面可能会存在多个表单,在这种情况下,将会有多个vue,即多个crud实例,每个实例用参数tag(参数值为a,b,c······)进行标记,保持数据清洁;

(4)将查询数据的接口url传给crud方法,url参数值必传;将defaultfun传给crud方法,即将默认的表单结构传给crud,若defaultfun没有赋予参数值,即使用默认参数值;根据url和defaultfun可以获得表单的基本信息,包括表单包含哪些参数,表单使用增删改查中的哪一种或几种操作。

(5)对表单进行初始化,即调用crud中的retrieve操作,获取该表单目前拥有的总数据条数count、表单的每条数据内容list、列表的字段名、(补充下)等相关字段数据,呈现表单的默认状态。

crud方法如下:先对要配置的表单进行置空,清空数据残留和初始化(有些要填写的地方是有默认值的),利用钩子(hooks)监听指定的消息类型,提供操作空间,利用与之相关联的指针this,拿到实例(达成什么样的目的)。在crud方法中,例如:新增前要做校验,要在新增前的钩子里做处理;例如:新增时表单填写了一半取消新增,通过钩子监听到这个操作后则进行状态置空处理,在这些特殊事件前后都需要添加这样一个钩子来进行监听并处理。

其中:crud是以增加(create)、读取查询(retrieve)、更新(update)和删除(delete)这4个单词的首字母命名。crud提供的方法:toquery(搜索)、refresh(刷新)、doedit(编辑)、submitcu(提交新增)、dodelete(删除)、doexport(导出excel)等。本方法增删改查封装成一套crud(create、retrieve、update和delete)方法,里面包括如何改变刷新前后、新增前后、删除前后等的状态问题,只要在页面上进行传参调用即可。本方法生成一个js的crud文件,集成vue的mixins混路方法,mixins提供使用crud方法的一个通道,通过mixins方法使得crud的js文件在页面上可以使用,然后外部通过crud暴露的方法来操作crud的内部,这样设计能够大大提高代码精简性。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1