CN112016128A - 基于CRUD和权限管理的vue开发方法及装置 - Google Patents

Abstract

本发明公开了一种基于CRUD和权限管理的vue开发方法及装置，所述方法包括：配置vue框架的配置文件；基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；根据vue动态路由和CRUD封装的状态管理生成vue框架模板；根据所述vue框架模板对vue单页面进行开发。本发明动态创建并插入有权限的路由；引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查，其他人员可以根据已封装的vue框架模板进行快速的开发，从而大大缩减开发时间，提高项目质量。

Description

基于CRUD和权限管理的vue开发方法及装置

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种基于CRUD和权限管理的vue开发方法、装置、电子设备及计算机可读介质。

背景技术

现有的前端开发框架大多采用vue。vue是一套用于构建用户界面的渐进式框架，使用vue框架可以完全在浏览器端渲染页面，服务端只提供数据使用vue框架就可以非常方便的构建单页面应用（SPA）。

对于前端和后端分离的系统架构，由于前后端代码分别开发，对于用户的权限控制及表格的表格增删改查操作复杂，导致开发时间比较长，影响整个项目进度。

发明内容

本发明旨在解决在前后端分离的系统架构中，对于用户的权限控制及表格的表格增删改查操作复杂，导致开发时间长的技术问题。

为了解决上述技术问题，本发明第一方面提出一种基于CRUD和权限管理的vue开发方法，所述方法包括：

配置vue框架的配置文件；

基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；

引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；

根据vue动态路由和CRUD封装的状态管理生成vue框架模板；

根据所述vue框架模板对vue单页面进行开发。

根据本发明一种优选的实施方式，通过v-permission判断用户权限，根据所述用户权限动态创建并插入有权限的路由。

根据本发明一种优选的实施方式，所述通过状态管理进行页面级别的表格增删改查包括：

通过编辑form表单数据、增加form表单数据、查询表单数据和删除列表数据隐藏或显示页面级别的新增、查询、编辑、删除、导入、导出按钮。

根据本发明一种优选的实施方式，所述表格增删改查的基础数据通过全局注册，所述基础数据由表格页面传入。

根据本发明一种优选的实施方式，所述基础数据分为表头数据，标题，表体数据，分页数据和表单数据由表格页面传入。

根据本发明一种优选的实施方式，所述对vue单页面的开发具体为对于vue单页面操作按钮的隐藏；

对应的，所述根据所述vue框架模板对vue单页面进行开发包括：写入列表接口地址和所述vue框架模板的按钮字段。

为解决上述技术问题，本发明第二方面提供一种基于CRUD和权限管理的vue开发装置，所述装置包括：

配置模块，用于配置vue框架的配置文件；

第一封装模块，用于基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；

第二封装模块，用于引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；

生成模块，用于根据vue动态路由和CRUD封装的状态管理生成vue框架模板；

开发模块，用于根据所述vue框架模板对vue单页面进行开发。

根据本发明一种优选的实施方式，所述第一封装模块通过v-permission判断用户权限，根据所述用户权限动态创建并插入有权限的路由。

根据本发明一种优选的实施方式，所述第二封装模块通过编辑form表单数据、增加form表单数据、查询表单数据和删除列表数据隐藏或显示页面级别的新增、查询、编辑、删除、导入、导出按钮。

根据本发明一种优选的实施方式，所述表格增删改查的基础数据通过全局注册，所述基础数据由表格页面传入。

根据本发明一种优选的实施方式，所述基础数据分为表头数据，标题，表体数据，分页数据和表单数据由表格页面传入。

根据本发明一种优选的实施方式，所述对vue单页面的开发具体为对于vue单页面操作按钮的隐藏；所述开发模块用于写入列表接口地址和所述vue框架模板的按钮字段。

为解决上述技术问题，本发明第三方面提供一种电子设备，包括：

处理器；以及

存储计算机可执行指令的存储器，所述计算机可执行指令在被执行时使所述处理器执行上述的方法。

为解决上述技术问题，本发明第四方面提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，当所述一个或多个程序被处理器执行时，实现上述方法。

本发明基于vue后台管理系统，在对项目进行前后端分离的情况下，采用RBAC的思想对vue路由进行动态封装，动态创建并插入有权限的路由；能快速实现对于用户前端权限的新建和控制。引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；通过对表格增删改查的状态进行控制，只要在页面写上表格的接口地址和按钮字段即可完成后台表格，从而可以实现后台管理表格的快速开发。最后，根据vue动态路由和CRUD封装的状态管理生成vue框架模板，并进行框架的封装，实现vue单页面的快速布局以及接口的对接。其他人员可以根据已封装的vue框架模板进行快速的开发，从而大大缩减开发时间，提高项目质量。

相较于现有技术，本发明具有以下有益效果：

1、通过对vue框架模板的字段定义后端对前端vue项目的快速开发，减少前端开发时间，实现人员的合理分配。

2、对于将动态路由结合CRUD进行框架的封装，便于后期的维护和迭代，也便于开发时间的缩短，大大减少项目时间，提高项目质量。

3、减少人工成本，小团队或单人即可开发独立项目。

附图说明

为了使本发明所解决的技术问题、采用的技术手段及取得的技术效果更加清楚，下面将参照附图详细描述本发明的具体实施例。但需声明的是，下面描述的附图仅仅是本发明的示例性实施例的附图，对于本领域的技术人员来讲，在不付出创造性劳动的前提下，可以根据这些附图获得其他实施例的附图。

图1是本发明一种基于CRUD和权限管理的vue开发方法的流程示意图；

图2是本发明基于CRUD和权限管理的vue开发的示意图；

图3是本发明一种基于CRUD和权限管理的vue开发装置的结构框架示意图；

图4是根据本发明的一种电子设备的示例性实施例的结构框图；

图5是本发明一种计算机可读介质实施例的示意图。

具体实施方式

现在将参考附图来更加全面地描述本发明的示例性实施例，虽然各示例性实施例能够以多种具体的方式实施，但不应理解为本发明仅限于在此阐述的实施例。相反，提供这些示例性实施例是为了使本发明的内容更加完整，更加便于将发明构思全面地传达给本领域的技术人员。

在符合本发明的技术构思的前提下，在某个特定的实施例中描述的结构、性能、效果或者其他特征可以以任何合适的方式结合到一个或更多其他的实施例中。

在对于具体实施例的介绍过程中，对结构、性能、效果或者其他特征的细节描述是为了使本领域的技术人员对实施例能够充分理解。但是，并不排除本领域技术人员可以在特定情况下，以不含有上述结构、性能、效果或者其他特征的技术方案来实施本发明。

附图中的流程图仅是一种示例性的流程演示，不代表本发明的方案中必须包括流程图中的所有的内容、操作和步骤，也不代表必须按照图中所显示的的顺序执行。例如，流程图中有的操作/步骤可以分解，有的操作/步骤可以合并或部分合并，等等，在不脱离本发明的发明主旨的情况下，流程图中显示的执行顺序可以根据实际情况改变。

附图中的框图一般表示的是功能实体，并不一定必然与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

各附图中相同的附图标记表示相同或类似的元件、组件或部分，因而下文中可能省略了对相同或类似的元件、组件或部分的重复描述。还应理解，虽然本文中可能使用第一、第二、第三等表示编号的定语来描述各种器件、元件、组件或部分，但是这些器件、元件、组件或部分不应受这些定语的限制。也就是说，这些定语仅是用来将一者与另一者区分。例如，第一器件亦可称为第二器件，但不偏离本发明实质的技术方案。此外，术语“和/或”、“及/或”是指包括所列出项目中的任一个或多个的所有组合。

本发明实施例中，vue是一套用于构建用户界面的渐进式框架，使用vue框架可以完全在浏览器端渲染页面，服务端只提供数据使用vue框架就可以非常方便的构建单页面应用（SPA）。

CRUD是指在做计算处理时的增加(Create)、查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。CRUD主要被用在描述软件系统中数据库或者持久层的基本操作功能。

请参阅图1，图1是本发明提供的一种基于CRUD和权限管理的vue开发方法的流程图。如图1所示，所述方法包括：

S1、配置vue框架的配置文件；

本实施例中，vue框架优选采用vue-cli3。通过安装vue依赖，生成vue运行环境。示例性的，vue项目的基本目录可以包括：node_modules、public、scr等。其中，scr目录下可以包括api、assets、components、layout、mixins、router、srore、utils、views、App.vue、mian.js、settings.js等等子目录。

所述配置文件可以是scr目录下的router，本实施例可以对router的参数进行配置生成配置文件。其中，router 是一个机制，用来管理一组或多组路由routes。路由router全部配置在前端，router根据用户权限可以判断进入哪些页面。

例如在一种配置方式中，将router中的参数hidden设置为true表示该路由不会在侧边栏出现，将router中的参数redirect设置为noredirect时表示该路由在面包屑导航中不可被点击。将router中的参数alwaysShow设置为true时会一直显示根路由。当一个路由下面的children声明的路由大于1个时，自动会变成嵌套的模式，如组件页面。此外，还可以通过name、title、icon这三个参数分别设置路由的名称、路由在侧边栏和面包屑中展示的名字、以及路由的图标。

S2、基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；

在RBAC（Role-Based Access Control，基于角色的权限访问控制）中，将权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限，极大地简化了权限的管理。在一个组织中，角色是为了完成各种工作而创造，用户则依据它的责任和资格来被指派相应的角色，用户可以很容易地从一个角色被指派到另一个角色。角色可依新的需求和系统的合并而赋予新的权限，而权限也可根据需要而从某角色中回收。

本实施例中，基于RBAC对vue路由进行动态封装后，动态路由可以基于RBAC的思想根据用户信息获取其对应的权限，生成对应的路由挂载，然后动态渲染有权限的图标于侧边栏。其中，通过权限控制的图标可以是菜单列表，这样，在前端页面中，可以实现通过不同用户信息获取不同的路由，以此渲染出不同的菜单列表，实现菜单列表的权限控制。通过权限控制的图标还可以是页面上的操作按钮，这样，在前端页面中，可以实现通过不同用户信息获取不同的路由，以此渲染出不同的操作按钮，实现操作按钮的权限控制。本发明中，权限控制采用RBAC思想，支持数据字典与数据权限管理，支持一键生成前后端代码，支持前端菜单列表和操作按钮的动态路由。

此外，如图2所示，基于RBAC对vue路由进行动态封装后，通过v-permission判断用户权限，当用户角色发生改变时，可以动态创建并插入有权限的路由，后台返回可访问的路由表，根据路由表渲染vue-router，快速实现对于用户前端权限的新建和控制。

S3、引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；

本步骤中，如图2所示，引入CRUD封装的状态管理js。通过编辑form表单数据、增加form表单数据、查询表单数据和删除列表数据隐藏或显示页面级别的新增、查询、编辑、删除、导入、导出按钮。其中，新增、查询、编辑、删除、导入、导出按钮可以对应单条数据，也也对应批量数据进行处理。具体的，通过状态管理标签来标识对form表单数据进行编辑、新增和删除的三种状态：即修改前状态、修改后状态和提交后状态。

本实施例中，所述表格增删改查的基础数据通过全局注册，所述基础数据由表格页面传入。在一种示例中，所述基础数据可分为表头数据，标题，表体数据，分页数据和表单数据由表格页面传入。

S4、根据vue动态路由和CRUD封装的状态管理生成vue框架模板；

具体的，对CRUD状态管理与基于RBAC动态路由的vue框架进行封装，生成vue框架模块，后续只要按照设定的代码模版，不管是前端开发，还是后端开发，都能通过简单的架构代码实现后台表格的快速开发。前端权限控制更能快速实现用户对权限功能的掌控。

S5、根据所述vue框架模板对vue单页面进行开发。

示例性的，所述对vue单页面的开发具体为对于vue单页面操作按钮的隐藏，则本发明中只需要写入列表接口地址和所述vue框架模板的按钮字段，即可实现对vue单页面操作按钮的隐藏。

图3是本发明一种基于CRUD和权限管理的vue开发装置的架构示意图，如图3所示，所述装置包括：

配置模块31，用于配置vue框架的配置文件；

第一封装模块32，用于基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；

第二封装模块33，用于引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；

生成模块34，用于根据vue动态路由和CRUD封装的状态管理生成vue框架模板；

开发模块35，用于根据所述vue框架模板对vue单页面进行开发。

在一种具体实施方式中，所述第一封装模块32通过v-permission判断用户权限，根据所述用户权限动态创建并插入有权限的路由。

所述第二封装模块33通过编辑form表单数据、增加form表单数据、查询表单数据和删除列表数据隐藏或显示页面级别的新增、查询、编辑、删除、导入、导出按钮。

其中，所述表格增删改查的基础数据通过全局注册，所述基础数据由表格页面传入。所述基础数据分为表头数据，标题，表体数据，分页数据和表单数据由表格页面传入。

在一种具体实施方式中，所述对vue单页面的开发具体为对于vue单页面操作按钮的隐藏；所述开发模块用于写入列表接口地址和所述vue框架模板的按钮字段。

本领域技术人员可以理解，上述装置实施例中的各模块可以按照描述分布于装置中，也可以进行相应变化，分布于不同于上述实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

下面描述本发明的电子设备实施例，该电子设备可以视为对于上述本发明的方法和装置实施例的实体形式的实施方式。对于本发明电子设备实施例中描述的细节，应视为对于上述方法或装置实施例的补充；对于在本发明电子设备实施例中未披露的细节，可以参照上述方法或装置实施例来实现。

图4是根据本发明的一种电子设备的示例性实施例的结构框图。图4显示的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，该示例性实施例的电子设备400以通用数据处理设备的形式表现。电子设备400的组件可以包括但不限于：至少一个处理单元410、至少一个存储单元420、连接不同电子设备组件（包括存储单元420和处理单元410）的总线430、显示单元440等。

其中，所述存储单元420存储有计算机可读程序，其可以是源程序或都只读程序的代码。所述程序可以被处理单元410执行，使得所述处理单元410执行本发明各种实施方式的步骤。例如，所述处理单元410可以执行如图1所示的步骤。

所述存储单元420可以包括易失性存储单元形式的可读介质，例如随机存取存储单元（RAM）4201和/或高速缓存存储单元4202，还可以进一步包括只读存储单元（ROM）4203。所述存储单元420还可以包括具有一组（至少一个）程序模块4205的程序/实用工具4204，这样的程序模块4205包括但不限于：操作电子设备、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线430可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备400也可以与一个或多个外部设备300（例如键盘、显示器、网络设备、蓝牙设备等）通信，使得用户能经由这些外部设备300与该电子设备400交互，和/或使得该电子设备400能与一个或多个其它数据处理设备（例如路由器、调制解调器等等）进行通信。这种通信可以通过输入/输出（I/O）接口450进行，还可以通过网络适配器460与一个或者多个网络（例如局域网（LAN），广域网（WAN）和/或公共网络，例如因特网）进行。网络适配器460可以通过总线430与电子设备400的其它模块通信。应当明白，尽管图4中未示出，电子设备400中可使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID电子设备、磁带驱动器以及数据备份存储电子设备等。

图5是本发明的一个计算机可读介质实施例的示意图。如图5所示，所述计算机程序可以存储于一个或多个计算机可读介质上。计算机可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的电子设备、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子（非穷举的列表）包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。当所述计算机程序被一个或多个数据处理设备执行时，使得该计算机可读介质能够实现本发明的上述方法，即：配置vue框架的配置文件；基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；根据vue动态路由和CRUD封装的状态管理生成vue框架模板；根据所述vue框架模板对vue单页面进行开发。

通过以上的实施方式的描述，本领域的技术人员易于理解，本发明描述的示例性实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个计算机可读的存储介质（可以是CD-ROM，U盘，移动硬盘等）中或网络上，包括若干指令以使得一台数据处理设备（可以是个人计算机、服务器、或者网络设备等）执行根据本发明的上述方法。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行电子设备、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语音的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语音包括面向对象的程序设计语音—诸如Java、C++等，还包括常规的过程式程序设计语音—诸如“C”语音或类似的程序设计语音。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网（LAN）或广域网（WAN），连接到用户计算设备，或者，可以连接到外部计算设备（例如利用因特网服务提供商来通过因特网连接）。

综上所述，本发明可以执行计算机程序的方法、装置、电子设备或计算机可读介质来实现。可以在实践中使用微处理器或者数字信号处理器（DSP）等通用数据处理设备来实现本发明的一些或者全部功能。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，本发明不与任何特定计算机、虚拟装置或者电子设备固有相关，各种通用装置也可以实现本发明。以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种基于CRUD和权限管理的vue开发方法，其特征在于，所述方法包括：

配置vue框架的配置文件；

基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；

引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；

根据vue动态路由和CRUD封装的状态管理生成vue框架模板；

根据所述vue框架模板对vue单页面进行开发。

2.根据权利要求1所述的方法，其特征在于，通过v-permission判断用户权限，根据所述用户权限动态创建并插入有权限的路由。

3.根据权利要求1所述的方法，其特征在于，所述通过状态管理进行页面级别的表格增删改查包括：

通过编辑form表单数据、增加form表单数据、查询表单数据和删除列表数据隐藏或显示页面级别的新增、查询、编辑、删除、导入、导出按钮。

4.根据权利要求3所述的方法，其特征在于，所述表格增删改查的基础数据通过全局注册，所述基础数据由表格页面传入。

5.根据权利要求4所述的方法，其特征在于，所述基础数据分为表头数据，标题，表体数据，分页数据和表单数据由表格页面传入。

6.根据权利要求1所述的方法，其特征在于，所述对vue单页面的开发具体为对于vue单页面操作按钮的隐藏；

对应的，所述根据所述vue框架模板对vue单页面进行开发包括：写入列表接口地址和所述vue框架模板的按钮字段。

7.一种基于CRUD和权限管理的vue开发装置，其特征在于，所述装置包括：

配置模块，用于配置vue框架的配置文件；

第一封装模块，用于基于角色的权限访问控制RBAC对vue路由进行动态封装，动态创建并插入有权限的路由；

第二封装模块，用于引入CRUD封装的状态管理，通过状态管理进行页面级别的表格增删改查；

生成模块，用于根据vue动态路由和CRUD封装的状态管理生成vue框架模板；

开发模块，用于根据所述vue框架模板对vue单页面进行开发。

8.一种电子设备，包括：

处理器；以及

存储计算机可执行指令的存储器，所述计算机可执行指令在被执行时使所述处理器执行根据权利要求1-6中任一项所述的方法。

9.一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，当所述一个或多个程序被处理器执行时，实现权利要求1-6中任一项所述的方法。

Images