快速集成

首先明确，集成db-meta, 需要你先有自己的应用程序, 并且你的应用应当满足以下条件:

• 后端基于maven(3.x) + SpringBoot(2.x)
• 前端基于npm(或yarn) + Vue(2.x) + ElementUI(2.12.0+)

自行创建一个空的SpringBoot工程 和 Vue工程。

标准的SpringBoot工程可以通过idea直接创建, 或者通过官方入口 (opens new window)创建;

标准的Vue工程可以通过vue cli创建 (opens new window);

后端集成

1. 在pom.xml中引入如下坐标:

<dependency>
    <groupId>com.github.md</groupId>
    <artifactId>db-metadata-server-springboot</artifactId>
    <version>${dbmeta.version}</version>
</dependency>

dbmeta.version取决于具体的版本

2. 配置文件中添加如下配置(以yml为例):

# db-meta支持多数据源, 但默认的spring数据库连接配置就是 dbmeta主库
spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://127.0.0.1:3306/db-metadata-demo?useSSL=false&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver

# db-metadata相关配置
md:
  dev-mode: true # 开发模式。为true时系统将允许一些操作(比如清空元对象，重新全量生成等，非开发环境禁止设置为true, 默认为false)
  
  app: # 应用配置
    name: DB-Metadata低代码开发工具 # 系统名。会更改页面Header和登录页显示。
    logo: meta # 系统logo, 可支持四类值: 1. svg名(前端注册了); 2.element icon名; 3. url绝对链接; 4. 以"."开头的前端相对路径图片地址, 注意，前端构建后路径会找不到，因此最好使用public下的图片
    default_pass: 888888 # 用户默认(初始)密码， 当添加用户时、用户注册(未提供密码时)，将使用此默认密码。注意: 入库时会进行加密
    login-bg: # 三种值: 1.登录页背景色(如blue、#0000FF); 2.绝对链接地址背景图(以http/https开头的图片地址，会设置到url中); 3. 以"."开头的前端相对路径图片地址, 注意，前端构建后路径会找不到，因此最好使用public下的图片

dbmeta完整的后端配置，参考这里: 传送门

3. 启动类扫描配置

@SpringBootApplication(scanBasePackages = {"your base package", "com.github.md.*"}) // 将此路径添加扫描: com.github.md.*， 因为目前还没提供starter，因此需要显式扫描
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

启动后端即可。

TIP

如果没有错误，那么首次引入dbmeta时, 你会看到dbmeta自动初始化了数据库表结构以及必要的初始数据。

前端集成

1. 安装前端包。执行如下node命令:

npm install db-metadata
或
yarn install db-metadata

2. 在main.js中进行vue安装。

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 导入element css
import DbMeta from 'db-metadata'
import 'db-metadata/lib/db-metadata.css' // 导入db-metadata css

Vue.use(ElementUI, {}); // ElementUI注册, 写在DbMeta注册之前

Vue.use(DbMeta, {
    router: router, // 路由实例(必须), 创建你自己的VueRouter实例，并传入到这里
});

dbmeta完整的前端配置，参考这里: 传送门

启动即可。访问前端地址, 可以看到.

登录页:

WARNING

ROOT用户账密默认为: ROOT/888888

注意账号必须大写。

输入ROOT账密，即可到主页:

至此，dbmeta集成结束。

接下来

接下来, 借助两张表, 基于在上述Demo工程，图文并茂的形式来创建三个功能模块，分别是:

• 员工单表管理模块
• 部门树型表管理模块
• 部门员工树+表管理模块

两张表的表结构如下:

-- ----------------------------
-- Table structure for t_department
-- ----------------------------
DROP TABLE IF EXISTS `t_department`;
CREATE TABLE `t_department` (
  `id` varchar(32) COLLATE utf8_bin NOT NULL,
  `name` varchar(255) COLLATE utf8_bin NOT NULL COMMENT '部门名',
  `pid` varchar(32) COLLATE utf8_bin DEFAULT NULL COMMENT '父部门',
  `order` int(3) DEFAULT NULL COMMENT '排序',
  `remark` text COLLATE utf8_bin DEFAULT NULL COMMENT '职责说明',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='部门';

-- ----------------------------
-- Table structure for t_employee
-- ----------------------------
DROP TABLE IF EXISTS `t_employee`;
CREATE TABLE `t_employee` (
  `id` varchar(32) COLLATE utf8_bin NOT NULL,
  `name` varchar(255) COLLATE utf8_bin NOT NULL COMMENT '姓名',
  `age` int(3) DEFAULT NULL COMMENT '年龄',
  `sex` varchar(1) COLLATE utf8_bin DEFAULT NULL COMMENT '性别',
  `birth` date DEFAULT NULL COMMENT '出生日期',
  `photo` text COLLATE utf8_bin COMMENT '个人照片',
  `entry_time` datetime NOT NULL COMMENT '入职时间',
  `dep_id` varchar(32) COLLATE utf8_bin NOT NULL COMMENT '所属部门',
  `jobs` varchar(255) COLLATE utf8_bin DEFAULT NULL COMMENT '岗位',
  `address` varchar(500) COLLATE utf8_bin DEFAULT NULL COMMENT '家庭住址',
  `enable` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否启用',
  `certificates` json NULL COMMENT '证件', 
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='员工';

WARNING

注意: 数据库表的DDL是DbMeta的起点, 把DDL写的合理一些, 可以让DbMeta更"懂"你。比如, 以下几点约定：

1. 表名将默认作为元对象编码;
2. 字段的注释将默认作为元字段的中文名, 也会默认成为表单域的label、表格header上的中文显示;
3. 字段的顺序也将成为元字段的顺序, 也会成为表格中列的顺序、表单中表单域的顺序;
4. 默认值很重要, 通常会作为表单新增时的默认值;
5. 字段名称含有image、avatar、picture、photo时, 会自动将域组件设为ImgBox;
6. 字段如果设为必填, 则表单域会自动添加必填的校验规则;
7. 合理的字段类型非常重要, 有利于DbMeta顺利推导实例配置。参考下述表格

字段类型	控件	说明
bit(1)	BoolBox/DropDownBox	长度为1的bit会被视为布尔值, 在表单中使用BoolBox，在搜索面板中使用DropDownBox
varchar(1)	DropDownBox	一个字符长度, 将被视为下拉
varchar(255+)	TextAreaBox	varchar字段类型长度超过255时, 将被视为多行文本域
json	JsonBox	-
datetime、timestamp	DateTimeBox	-
date	DateBox	-
int、tinyint、bigint、decimal	NumBox	-
longtext	RichTextBox	大文本字段类型, 使用富文本组件

WARNING

你可以自定义扩展这些规则！甚至添加自己的规则。规则一旦设置好，DbMeta一键创建实例配置时，就会应用你的规则计算出默认的组件实例配置。 自定义扩展规则的方式见这里