crudapi的博客

基于Vue和Quasar的前端SPA项目实战之拖拽表单定制（十六）回顾通过前一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，实现了元数据中动态表单设计功能，支持常见的数据类型和索引，然后实现了动态表单的crud增删改查功能，所有的表单页面都是默认的风格。本文主要介绍拖拽表单定制功能，通过拖拽的方式定制表单录入和编辑页面，满足了个性化需求。简介针对元数据表的每个字段，通过拖拽方式决定是否显示或者隐藏，然后还可以配置显示的宽度。最终以json格式保存到后台数据库，运行时根据

基于Vue和Quasar的前端SPA项目实战之元数据导出导入（十五）回顾通过前一篇文章 基于Vue和Quasar的前端SPA项目实战之模块管理（十四）的介绍，通过模块管理将具有相同类型或属于同一业务的表单进行分类，方便快速查找。本文主要介绍元数据表单的导出和导入功能。简介针对元数据表，有时需要导出元数据到本地文件，用来备份数据，这里采用的文件格式为json。后续可以通过导入功能进行导入，既可以用来恢复元数据，也可以用于分享元数据给其他系统。UI界面选中需要导出的表单，然后点击“批量导出”按钮

基于Vue和Quasar的前端SPA项目实战之模块管理（十四）回顾通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，通过配置的方式可以零代码实现表单管理功能，但是所有表单都没有分类，如果表单数量很多的情况下不方便查找，因此本文主要介绍表单模块管理相关内容。简介属于同一类型的表单可以添加到同一个模块，比如字典相关的表建立“字典”模块，用户相关的表建立“用户管理”模块，模块在首页直接展示，用户可以快速的操作对应的表单。UI界面首页显示模块和表单链接表单配置

基于Vue和Quasar的前端SPA项目实战之数据导出（十三）回顾通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入（九）的介绍，通过配置的方式可以零代码实现业务数据的批量导入功能，本文主要介绍业务数据批量导出相关内容。简介针对每个业务表，有时需要导出数据到本地文件，用来备份或者分析，这里采用的文件格式为EXCEL，第一行为字段名称，从第二行开始为数据。UI界面产品导出API业务数据导出相关API，具体的通过swagger文档可以查看。通过axios封装api，名称

基于Vue和Quasar的前端SPA项目实战之数据库逆向（十二）回顾通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，实现了动态表单功能。如果是全新的项目，通过配置元数据并且创建物理表，从而自动实现业务数据的CRUD增删改查。但是如果数据库表已经存在的情况下，如何通过配置表单元数据进行管理呢？这时候数据库逆向功能就很有必要了。简介数据库逆向就是通过读取数据库物理表schema信息，然后生成表单元数据，可以看成“dbfirst”模式，即先有数据库表，然后根据表生成元数据

基于Vue和Quasar的前端SPA项目实战之联合索引（十一）回顾通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，关于表单元数据配置相关内容已经实现了，本文主要介绍联合索引功能的实现。简介联合索引又叫复合索引，如果索引只有一个字段，在设置列属性的时候直接设置。如果是多个字段联合索引，就需要单独设置了。这里可以创建普通或唯一两种类型的联合索引，通过下拉框选择多个字段。当然如果索引只有一个字段，也可以通过联合索引功能进行设置。UI界面索引管理核心代码由于在创建

基于Vue和Quasar的前端SPA项目实战之文件上传（十）回顾通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入（九）的介绍，实现了业务数据批量导入功能，本文主要介绍文件上传相关内容。简介crudapi支持附件字段，表字段里面保存的是文件url字符串。附件可以通过其它文件管理系统比如阿里云的OSS进行上传，或者使用系统自带的文件管理API进行上传，包括普通文件上传和大文件切片上传两种方式。UI界面文件上传大文件上传API文件上传API，包括普通文件上传和大文件

基于Vue和Quasar的前端SPA项目实战之数据导入（九）回顾通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，实现了业务数据基本crud功能，本文主要介绍业务数据批量导入相关内容。简介当数据量比较大的时候，如果手工录入数据就会比较慢，所以通过批量导入的方式录入数据，以提高效率。这里采用的文件格式为EXCEL，针对每个业务表，可以自动生成EXCEL模板文件，下载模板之后，直接编辑EXCEL表格，然后上传EXCEL文件进行批量导入数据。UI界面产品导入AP

基于Vue和Quasar的前端SPA项目实战之docker部署（八）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，crudapi-admin-web基本功能全部实现了，本文主要介绍前端打包和docker部署相关内容。简介Docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。采用docker技术可

基于Vue和Quasar的前端SPA项目实战之业务数据（七）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之表关系（六）的介绍，元数据设计功能全部实现了，本文主要介绍业务数据的crud增删改查功能。简介在crudapi系统中，通过配置表单的方式定义元数据。表单配置好之后，对应的crud接口就自动生成了，前端集成RESTful API就可以实现业务数据的crud功能，如果配置了表关系，也支持主子表的级联操作。UI界面业务数据列表编辑业务数据[外链图片转存失败,源站可能有防

基于Vue和Quasar的前端SPA项目实战之表关系（六）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，我们已经完成了元数据中动态表单设计功能，本文主要表关系功能的实现。简介在crudapi系统中，通过表关系(relation)管理将多个表连接起来，支持一对多，多对一，一对一，多对多等关系，有关表关系基本概念参考之前文章 表关系 ，通过UI配置好表关系后，可以支持主子表的级联操作。UI界面表关系列表编辑表关系表关系图API表关系API包

基于Vue和Quasar的前端SPA项目实战之动态表单（五）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之序列号（四）的介绍，我们已经完成了元数据中序列号的增删改查，本文主要介绍动态表单设计功能的实现。简介在crudapi系统中，所有的业务表单都是通过配置动态生成的，代码无需写死，有关基本概念参考之前文章 元数据管理—动态表单设计器在crudapi系统中完整实现 ，表单配置好之后，对应的crud接口就自动生成了。UI界面表单列表[外链图片转存失败,源站可能有防盗链机制,建

基于Vue和Quasar的前端SPA项目实战之序列号（四）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单（三）的介绍，我们已经完成了布局菜单，本文主要介绍序列号功能的实现。简介MySQL数据库没有单独的Sequence，只支持自增长(increment)主键，但是不能设置步长、开始索引、格式等，最重要的是一张表只能由一个字段使用自增，但有的时候我们需要多个字段实现序列号功能或者需要支持复杂格式，MySQL本身是实现不了的，所以crudapi封装了复杂序列号，支持字符串和数

基于Vue和Quasar的前端SPA项目实战之布局菜单（三）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之用户登录（二）的介绍，我们已经完成了登录页面，今天主要介绍布局菜单的实现。UI界面效果首页业务数据菜单展开设置页面说明布局主页分为三个部分，最上面为导航栏，主要包括刷新按钮，后退按钮，用户信息等内容。左边为菜单，包括业务数据，元数据，系统三个一级菜单。业务数据菜单的二级菜单为表名称，元数据菜单包括序列号、表、关系三个二级菜单，系统菜单包括设置和关于两个二

基于Vue和Quasar的前端SPA项目实战之用户登录（二）回顾通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之环境搭建（一）的介绍，我们已经搭建好本地开发环境并且运行成功了，今天主要介绍登录功能。简介通常为了安全考虑，需要用户登录之后才可以访问。crudapi admin web项目也需要引入登录功能，用户登录成功之后，跳转到管理页面，否则提示没有权限。技术调研SESSIONSESSION通常会用到Cookie，Cookie有时也用其复数形式Cookies。类型为“小型文本文件

背景介绍和环境搭建背景crudapi增删改查接口系统的后台Java API服务已经全部可用，需要一套后台管理UI，主要用户为开发人员或者对计算机有一定了解的工作人员，通过UI配置元数据和处理业务数据，经过调研最终决定通过Vue实现SPA单页面Web应用，打开浏览器就可以很方便使用。技术选型Vue目前主流的三大前端框架分别是Angular、React、Vue。其中Angular适合大型项目，React的JSX语法个人觉得不是很好。由于本项目不是很复杂，并且避免引入Typescript，精力放在通用的