AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向（十二）

2021-09-15 355
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 数据库逆向就是通过读取数据库物理表schema信息，然后生成表单元数据，可以看成“dbfirst”模式，即先有数据库表，然后根据表生成元数据，逆向表单后续操作和普通动态表单类似。本文主要介绍了数据库逆向功能，在数据库表单已经存在的基础上，通过数据库逆向功能，快速生成元数据，不需要一行代码，我们就可以得到已有数据库的基本crud功能，包括API和UI。类似于phpmyadmin等数据库UI管理系统，但是比数据库UI管理系统更灵活，更友好。

基于Vue和Quasar的前端SPA项目实战之数据库逆向（十二）

回顾

通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，实现了动态表单功能。如果是全新的项目，通过配置元数据并且创建物理表，从而自动实现业务数据的CRUD增删改查。但是如果数据库表已经存在的情况下，如何通过配置表单元数据进行管理呢？这时候数据库逆向功能就很有必要了。

简介

数据库逆向就是通过读取数据库物理表schema信息，然后生成表单元数据，可以看成“dbfirst”模式，即先有数据库表，然后根据表生成元数据，逆向表单后续操作和普通动态表单类似。

UI界面

数据库逆向

输入物理表名称，启用“数据库逆向”功能，然后点击“加载元数据”，然后会自动填充表单字段相关元数据信息。

数据表准备

以ca_product产品为例，通过phpmyadmin创建表

创建产品表

CREATE TABLE `ca_product` (
  `id` bigint UNSIGNED NOT NULL COMMENT '编号',
  `name` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '名称',
  `fullTextBody` text COLLATE utf8mb4_unicode_ci COMMENT '全文索引',
  `createdDate` datetime NOT NULL COMMENT '创建时间',
  `lastModifiedDate` datetime DEFAULT NULL COMMENT '修改时间',
  `code` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '编码',
  `brand` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '品牌',
  `price` decimal(10,0) DEFAULT NULL COMMENT '单价',
  `weight` decimal(10,0) DEFAULT NULL COMMENT '重量',
  `length` decimal(10,0) DEFAULT NULL COMMENT '长',
  `width` decimal(10,0) DEFAULT NULL COMMENT '宽',
  `high` decimal(10,0) DEFAULT NULL COMMENT '高',
  `ats` bigint DEFAULT NULL COMMENT '库存个数'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='产品';

ALTER TABLE `ca_product`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `UQ_CODE` (`code`) USING BTREE;
ALTER TABLE `ca_product` ADD FULLTEXT KEY `ft_fulltext_body` (`fullTextBody`);

ALTER TABLE `ca_product`
  MODIFY `id` bigint UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '编号', AUTO_INCREMENT=1;
COMMIT;

产品表

查询schema

mysql数据库通过如下SQL语句可以查询表单、字段、索引等信息

SHOW TABLE STATUS LIKE TABLE_NAME
SHOW FULL COLUMNS FROM TABLE_NAME
SHOW INDEX FROM TABLE_NAME

表schema
表基本信息

字段schema
字段信息

索引schema
索引信息

API JSON

查询ca_product的schema信息, 格式如下：

{
  "Name": "ca_product",
  "Engine": "InnoDB",
  "Version": 10,
  "Row_format": "Dynamic",
  "Rows": 0,
  "Avg_row_length": 0,
  "Data_length": 16384,
  "Max_data_length": 0,
  "Index_length": 32768,
  "Data_free": 0,
  "Auto_increment": 2,
  "Create_time": 1628141282000,
  "Update_time": 1628141304000,
  "Collation": "utf8mb4_unicode_ci",
  "Create_options": "",
  "Comment": "产品",
  "columns": [{
    "Field": "id",
    "Type": "bigint unsigned",
    "Null": "NO",
    "Key": "PRI",
    "Extra": "auto_increment",
    "Privileges": "select,insert,update,references",
    "Comment": "编号"
  }, {
    "Field": "name",
    "Type": "varchar(200)",
    "Collation": "utf8mb4_unicode_ci",
    "Null": "NO",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "名称"
  }, {
    "Field": "fullTextBody",
    "Type": "text",
    "Collation": "utf8mb4_unicode_ci",
    "Null": "YES",
    "Key": "MUL",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "全文索引"
  }, {
    "Field": "createdDate",
    "Type": "datetime",
    "Null": "NO",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "创建时间"
  }, {
    "Field": "lastModifiedDate",
    "Type": "datetime",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "修改时间"
  }, {
    "Field": "code",
    "Type": "varchar(200)",
    "Collation": "utf8mb4_unicode_ci",
    "Null": "YES",
    "Key": "UNI",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "编码"
  }, {
    "Field": "brand",
    "Type": "varchar(200)",
    "Collation": "utf8mb4_unicode_ci",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "品牌"
  }, {
    "Field": "price",
    "Type": "decimal(10,0)",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "单价"
  }, {
    "Field": "weight",
    "Type": "decimal(10,0)",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "重量"
  }, {
    "Field": "length",
    "Type": "decimal(10,0)",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "长"
  }, {
    "Field": "width",
    "Type": "decimal(10,0)",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "宽"
  }, {
    "Field": "high",
    "Type": "decimal(10,0)",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "高"
  }, {
    "Field": "ats",
    "Type": "bigint",
    "Null": "YES",
    "Key": "",
    "Extra": "",
    "Privileges": "select,insert,update,references",
    "Comment": "库存个数"
  }],
  "indexs": [{
    "Table": "ca_product",
    "Non_unique": 0,
    "Key_name": "PRIMARY",
    "Seq_in_index": 1,
    "Column_name": "id",
    "Collation": "A",
    "Cardinality": 0,
    "Null": "",
    "Index_type": "BTREE",
    "Comment": "",
    "Index_comment": "",
    "Visible": "YES"
  }, {
    "Table": "ca_product",
    "Non_unique": 0,
    "Key_name": "UQ_CODE",
    "Seq_in_index": 1,
    "Column_name": "code",
    "Collation": "A",
    "Cardinality": 0,
    "Null": "YES",
    "Index_type": "BTREE",
    "Comment": "",
    "Index_comment": "",
    "Visible": "YES"
  }, {
    "Table": "ca_product",
    "Non_unique": 1,
    "Key_name": "ft_fulltext_body",
    "Seq_in_index": 1,
    "Column_name": "fullTextBody",
    "Cardinality": 0,
    "Null": "YES",
    "Index_type": "FULLTEXT",
    "Comment": "",
    "Index_comment": "",
    "Visible": "YES"
  }]
}

核心代码

前端根据API返回的schema信息，转换成crudapi的元数据格式，并显示在UI上, 主要代码在文件metadata/table/new.vue中，通过addRowFromMetadata方法添加字段，addIndexFromMetadata添加联合索引。

addRowFromMetadata(id, t, singleIndexColumns) {
  const columns = this.table.columns;
  const index = columns.length + 1;
  const type = t.Type.toUpperCase();
  const name = t.Field;

  let length = null;
  let precision = null;
  let scale = null;

  let typeArr = type.split("(");
  if (typeArr.length > 1) {
    const lengthOrprecisionScale = typeArr[1].split(")")[0];
    if (lengthOrprecisionScale.indexOf(",") > 0) {
      precision = lengthOrprecisionScale.split(",")[0];
      scale = lengthOrprecisionScale.split(",")[1];
    } else {
      length = lengthOrprecisionScale;
    }
  }

  let indexType = null;
  let indexStorage = null;
  let indexName = null;
  let indexColumn = singleIndexColumns[name];
  if (indexColumn) {
    if (indexColumn.Key_name === "PRIMARY") {
      indexType = "PRIMARY";
    } else if (indexColumn.Index_type === "FULLTEXT") {
      indexType = "FULLTEXT";
      indexName = indexColumn.Key_name;
    } else if (indexColumn.Non_unique === 0) {
      indexType = "UNIQUE";
      indexName = indexColumn.Key_name;
      indexStorage = indexColumn.Index_type;
    } else {
      indexType = "INDEX";
      indexName = indexColumn.Key_name;
      indexStorage = indexColumn.Index_type;
    }
  }
  const comment = t.Comment ? t.Comment : name;

  const newRow = {
    id: id,
    autoIncrement:  (t.Extra === "auto_increment"),
    displayOrder: columns.length,
    insertable: true,
    nullable: (t.Null === "YES"),
    queryable: true,
    displayable: false,
    unsigned: type.indexOf("UNSIGNED") >= 0,
    updatable: true,
    dataType : typeArr[0].replace("UNSIGNED", "").trim(),
    indexType: indexType,
    indexStorage: indexStorage,
    indexName: indexName,
    name: name,
    caption: comment,
    description: comment,
    length: length,
    precision: precision,
    scale: scale,
    systemable: false
  };
  this.table.columns  = [ ...columns.slice(0, index), newRow, ...columns.slice(index) ];
},

addIndexFromMetadata(union) {
  let baseId = (new Date()).valueOf();

  let newIndexs = [];
  const tableColumns = this.table.columns;
  console.dir(tableColumns);

  for (let key in union) {
    const unionLines = union[key];
    const newIndexLines = [];

    unionLines.forEach((item) => {
      const columnName = item.Column_name;
      const columnId = tableColumns.find(t => t.name === columnName).id;

      newIndexLines.push({
        column: {
          id: columnId,
          name: columnName
        }
      });
    });

    const unionLineFirst = unionLines[0];
    let indexType = null;
    let indexStorage = null;
    if (unionLineFirst.Key_name === "PRIMARY") {
      indexType = "PRIMARY";
    } else if (unionLineFirst.Non_unique === 0) {
      indexType = "UNIQUE";
      indexStorage = unionLineFirst.Index_type;
    } else {
      indexType = "INDEX";
      indexStorage = unionLineFirst.Index_type;
    }

    const indexComment = unionLineFirst.Index_comment ? unionLineFirst.Index_comment:  unionLineFirst.Key_name;

    const newIndex = {
      id: baseId++,
      isNewRow: true,
      caption: indexComment,
      description: indexComment,
      indexStorage: indexStorage,
      indexType: indexType,
      name: unionLineFirst.Key_name,
      indexLines: newIndexLines
    }

    newIndexs.push(newIndex);
  }

  this.table.indexs = newIndexs;
  if (this.table.indexs) {
    this.indexCount = this.table.indexs.length;
  } else {
    this.indexCount = 0;
  }
}

例子

demo

以ca_product为例子, 点击“加载元数据之后”，表字段和索引都正确地显示了。保存成功之后，已经存在的物理表ca_product会自动被元数据管理起来，后续可以通过crudapi后台继续编辑，通过数据库逆向功能，零代码实现了物理表ca_product的CRUD增删改查功能。

小结

本文主要介绍了数据库逆向功能，在数据库表单已经存在的基础上，通过数据库逆向功能，快速生成元数据，不需要一行代码，我们就可以得到已有数据库的基本crud功能，包括API和UI。类似于phpmyadmin等数据库UI管理系统，但是比数据库UI管理系统更灵活，更友好。目前数据库逆向一次只支持一个表，如果同时存在很多物理表，就需要批量操作了。后续会继续优化，实现批量数据库逆向功能。

demo演示

官网地址：https://crudapi.cn
测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因，GitHub可能速度慢，改成访问Gitee即可，代码同步更新。

文章标签：
JavaScript
前端开发
关系型数据库
索引
MySQL
API
数据格式
数据库
JSON
数据管理
关键词：
开源数据库
vue前端
前端vue
前端数据库
数据库开源
crudapi
目录
相关文章
全干程序员demo
|
1天前
|
存储 SQL Apache
Apache Doris 开源最顶级基于MPP架构的高性能实时分析数据库
Apache Doris 是一个基于 MPP 架构的高性能实时分析数据库，以其极高的速度和易用性著称。它支持高并发点查询和复杂分析场景，适用于报表分析、即席查询、数据仓库和数据湖查询加速等。最新发布的 2.0.2 版本在性能、稳定性和多租户支持方面有显著提升。社区活跃，已广泛应用于电商、广告、用户行为分析等领域。
全干程序员demo
13 1
Apache Doris 开源最顶级基于MPP架构的高性能实时分析数据库
一缕微风绕指柔
|
5天前
|
前端开发 JavaScript 开发者
React与Vue：前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue：前端框架的巅峰对决与选择策略
一缕微风绕指柔
18 3
一缕微风绕指柔
|
5天前
|
前端开发 JavaScript 数据管理
React与Vue：两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue：两大前端框架的较量与选择策略
一缕微风绕指柔
14 2
众所周知
|
8天前
|
存储 关系型数据库 MySQL
MySQL vs. PostgreSQL：选择适合你的开源数据库
在众多开源数据库中，MySQL和PostgreSQL无疑是最受欢迎的两个。它们都有着强大的功能、广泛的社区支持和丰富的生态系统。然而，它们在设计理念、性能特点、功能特性等方面存在着显著的差异。本文将从这三个方面对MySQL和PostgreSQL进行比较，以帮助您选择更适合您需求的开源数据库。
众所周知
38 4
想飞的雪糕
|
10天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新：深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点，探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化，React 利用虚拟 DOM 和 `diffing` 算法优化更新，Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略，如使用 `key`、分片渲染、虚拟滚动等，帮助开发者在处理大型数组时提升性能。总结指出，选择合适的框架应根据项目复杂度和性能需求来决定。
想飞的雪糕
17 2
TDengine
|
16天前
|
存储 JSON Ubuntu
时序数据库 TDengine 支持集成开源的物联网平台 ThingsBoard
本文介绍了如何结合 Thingsboard 和 TDengine 实现设备管理和数据存储。Thingsboard 中的“设备配置”与 TDengine 中的超级表相对应，每个设备对应一个子表。通过创建设备配置和设备，实现数据的自动存储和管理。具体操作包括创建设备配置、添加设备、写入数据，并展示了车辆实时定位追踪和车队维护预警两个应用场景。
TDengine
39 3
邹荣乐
|
17天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
邹荣乐
52 4
一缕微风绕指柔
|
5天前
|
前端开发 JavaScript 开发者
React与Vue：前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue：前端框架的巅峰对决与选择策略
一缕微风绕指柔
7 0
想飞的雪糕
|
11天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇（三）：运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件，模拟了 MongoDB 的核心功能，允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制，MiniMongo 与服务器端的 MongoDB 实现实时数据同步，确保数据一致性，支持发布/订阅模型和响应式数据源，适用于实时聊天、项目管理和协作工具等应用场景。
想飞的雪糕
27 0
想飞的雪糕
|
12天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react？有了大模型-例如通义灵码辅助编码，就不用纠结了！vue用的多选react，react用的多选vue
本文比较了Vue和React两大前端框架，从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行，但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用，适合中小型项目；React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议，强调了多框架学习的重要性，认为技术问题已不再是选型的关键，熟悉各框架的最佳实践更为重要。
想飞的雪糕
34 0

热门文章

最新文章

  • 1
    数据库中的Schema和Database的区别
  • 2
    RDS入门——Excel文件转存到RDS数据库实践
  • 3
    2011寒假-数据库学习笔记
  • 4
    基于SQL Server的打车系统数据库分析与设计
  • 5
    前沿分享｜上海市新能源汽车数据平台 王成名： 车联网全景监控数据时空超融合数据库方案
  • 6
    数据库厂商提供的 Providers for ASP.NET
  • 7
    ios开发数据库版本迁移手动更新迭代和自动更新迭代艺术（-）
  • 8
    数据库改名系列（数据库名，逻辑名，物理文件名）
  • 9
    NSPredicate用法总结(Cocoa框架中的NSPredicate用于查询，原理和用法都类似于SQL中的where，作用相当于数据库的过滤取)
  • 10
    数据库只读时无法更新的解决方法
  • 1
    如何优化前端网页性能提升用户体验
    79
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
    552
  • 3
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
    142
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
    212
  • 5
    前端开发中的跨域问题及解决方案
    217
  • 6
    现代前端开发中的响应式设计与移动优先策略
    110
  • 7
    现代前端开发中的响应式设计与跨平台兼容性
    137
  • 8
    前端性能优化：掌握解决方案
    45
  • 9
    数据驱动的前端设计与开发实践
    88
  • 10
    袁志佳：前端全栈工程师精英班
    111

    • 相关课程

    更多
  • 数据库的前世今生
  • 数据库核心概念
  • 从传统数据库到云数据库演进
  • 数据库常见问题排查
  • 数据库及SQL/MySQL基础
  • 高校精品课-西安交通大学 -数据库理论与技术

    • 相关电子书

    更多
  • DTCC 2022大会集锦《云原生一站式数据库技术与实践》
  • 阿里云瑶池数据库精要2022版
  • 2022 DTCC-阿里云一站式数据库上云最佳实践

    • 相关实验场景

    更多
  • 自建数据库迁移到云数据库
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • 快速体验PolarDB开源数据库
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月