react-usoft-sqlbuilder

vue2-usoft-sqlbuilder

项目概述

vue2-usoft-sqlbuilder 是一个基于 Vue 2 的 SQL 查询设计器组件，可用于可视化地构建 SQL 查询语句。

特点

• 可视化的 SQL 构建界面
• 支持自定义查询条件
• 支持自定义查询结果

安装

可以使用 npm 来安装该组件：

npm install vue2-usoft-sqlbuilder

开发与构建

在项目根目录下运行以下命令

# 安装依赖
npm install

# 开发环境
npm run dev

# 生产环境
npm run build

使用示例

组件属性

• table-fetch：必需属性，异步获取数据表结构的函数，返回Promise<TableInfo[]>
• ref：引用组件实例以调用方法

核心方法

// 获取设计器数据（返回Promise）
this.$refs.sqlBuilder.getData().then(data => {
  // data为符合SQL生成器规范的JSON结构
});

// 设置设计器数据
this.$refs.sqlBuilder.setData(importData);

完整示例

<template>
  <sql-builder ref="sqlBuilder" :table-fetch="fetchTable"/>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {SqlBuilder} from "./components";
import {TableInfo} from "./components/sqlbuilder/types";

const tables: TableInfo[] = [
  {
    comment: '***',
    table: '***',
    columns: [
      {
        comment: '***',
        dataType: 'string',
        name: '***'
      },
      {
        comment: '***',
        name: '***',
        dataType: 'string'
      }
    ]
  },
]

export default defineComponent({
  name: 'App',
  components: {
    SqlBuilder
  },
  methods: {
    // 获取数据表结构
    fetchTable() {
      return new Promise((resolve, reject) => {
        resolve(tables)
      })
    },
    // 设置设计器数据
    setData() {
      this.queryFromDb().then(response => {
        this.$refs.sqlBuilder.setData(response.data)
      })
    },
    // 获取设计器数据
    getData() {
      this.$refs.sqlBuilder.getData().then(data => {
        ...
      })
    }
  }
})
</script>

截图

后端解析器

如果你需要在后端解析生成的 SQL 查询，可以使用以下 Maven 依赖：

<dependency>
    <groupId>com.usoft</groupId>
    <artifactId>usoft-sqlbuilder-interpreter</artifactId>
    <version>1.0.1</version>
</dependency>

在 Java 代码中，可以使用以下方式构建 SQL 查询：

String sql = SqlBuilder.build(json);