yc-web-db

v0.0.11

Published

a month ago

YC Web DB - 前端数据库管理工具，支持 API 操作和可视化界面

0High
0Medium
0Low

clover2

database indexeddb dexie frontend sql visualization vue3 web-database browser-database

YC Web DB - 前端数据库管理工具

基于 IndexedDB 的前端数据库管理工具，提供类似 Navicat 的可视化界面和完整的 API 接口。

特性

🗄️ 基于 IndexedDB，数据存储在浏览器本地
🎨 可视化界面，类似 Navicat Premium 的操作体验
🔌 完整的 API 接口，支持程序化操作
📝 支持 SQL 语句执行
🔄 事务支持，自动回滚保证数据一致性
📊 数据导入导出
🔍 数据查询、分页、排序
✏️ 支持数据增删改查
⚡ Web Worker 支持，大数据量操作不卡顿
📈 执行进度显示

安装

npm install yc-web-db

使用方式

方式一：API 接口

import { getDBManager } from 'yc-web-db'

const dbManager = getDBManager()

// 初始化数据库
await dbManager.init()

// 创建数据库
const db = await dbManager.createDB('mydb')

// 获取数据库对象
const db = await dbManager.getDB('mydb')

// 创建表
await db.createTable('users', [
  { name: 'id', type: 'INT', key: 'PRI', autoIncrement: true, nullable: false, comment: '主键ID' },
  { name: 'name', type: 'VARCHAR', length: 255, nullable: false, comment: '用户名' },
  { name: 'email', type: 'VARCHAR', length: 255, comment: '邮箱' },
])

// 获取表操作对象
const table = db.getTable('users')

// 插入数据
const result = await table.insert({ name: '张三', email: '[email protected]' })

// 批量插入数据
const results = await table.insertMany([
  { name: '张三', email: '[email protected]' },
  { name: '李四', email: '[email protected]' },
])

// 查询数据
const data = await table.query()

// 条件查询
const filteredData = await table.where('age').above(18).query()

// 更新数据
await table.update(1, { name: '张三丰', email: '[email protected]' })

// 批量更新
const count = await table.updateMany({ status: 'inactive' }, { status: 'active' })

// 删除数据
await table.delete(1)

// 批量删除
const deleteCount = await table.deleteMany({ status: 'deleted' })

// 执行 SQL - 通用执行方法，返回查询结果或影响行数
const result = await db.execute('SELECT * FROM users WHERE name = "张三"')

// ============================================
// SELECT 查询 - 专门用于查询操作，返回数组结果
// ============================================

// 1. 基础查询 - 查询所有字段
const users = await db.select('SELECT * FROM users')

// 2. 条件查询 - 支持多种运算符
const adults = await db.select('SELECT * FROM users WHERE age > 18')
const minors = await db.select('SELECT * FROM users WHERE age <= 18')
const activeUsers = await db.select('SELECT * FROM users WHERE status = "active"')
const excludedUsers = await db.select('SELECT * FROM users WHERE status != "banned"')

// 3. 模糊查询 - LIKE 运算符（% 匹配任意字符，_ 匹配单个字符）
const zhangUsers = await db.select('SELECT * FROM users WHERE username LIKE "张%"')
const threeCharUsers = await db.select('SELECT * FROM users WHERE username LIKE "___"')
const containsZhang = await db.select('SELECT * FROM users WHERE username LIKE "%张%"')

// 4. 排序和分页
const sortedUsers = await db.select('SELECT * FROM users ORDER BY age DESC')
const pagedUsers = await db.select('SELECT * FROM users LIMIT 10 OFFSET 20')

// 5. 聚合函数
const userCount = await db.select('SELECT COUNT(*) as count FROM users')
const avgAge = await db.select('SELECT AVG(age) as avg_age FROM users')
const maxAge = await db.select('SELECT MAX(age) as max_age FROM users')
const minAge = await db.select('SELECT MIN(age) as min_age FROM users')
const totalScore = await db.select('SELECT SUM(score) as total FROM users')

// 6. 分组查询
const ageGroups = await db.select('SELECT age, COUNT(*) as count FROM users GROUP BY age')
const statusStats = await db.select('SELECT status, AVG(age) as avg_age FROM users GROUP BY status HAVING avg_age > 25')

// 7. 指定字段查询
const userNames = await db.select('SELECT id, username, email FROM users')

// 8. 表别名和字段别名
const aliasedUsers = await db.select('SELECT u.id, u.username as name, u.email FROM users u')

// 9. 多条件查询（AND/OR）
const filteredUsers = await db.select('SELECT * FROM users WHERE age > 18 AND status = "active"')
const orUsers = await db.select('SELECT * FROM users WHERE age < 18 OR status = "vip"')

// 10. IN 查询
const specificUsers = await db.select('SELECT * FROM users WHERE id IN (1, 2, 3)')

// 11. 连接查询 JOIN
const userOrders = await db.select(`
  SELECT u.username, o.order_no, o.amount 
  FROM users u 
  INNER JOIN orders o ON u.id = o.user_id
`)
const allUsersWithOrders = await db.select(`
  SELECT u.username, o.order_no 
  FROM users u 
  LEFT JOIN orders o ON u.id = o.user_id
`)

// 12. 子查询
const usersWithOrders = await db.select(`
  SELECT * FROM users 
  WHERE id IN (SELECT user_id FROM orders WHERE amount > 1000)
`)

// 13. UNION 联合查询
const allContacts = await db.select(`
  SELECT name, email FROM customers
  UNION
  SELECT name, email FROM suppliers
`)

// ============================================
// INSERT 插入 - 返回插入的行数
// ============================================

// 1. 单条插入
const insertCount = await db.insertSQL('INSERT INTO users (username, email) VALUES ("张三", "[email protected]")')

// 2. 批量插入
const batchInsertCount = await db.insertSQL(`
  INSERT INTO users (username, email, age) VALUES 
  ("张三", "[email protected]", 25),
  ("李四", "[email protected]", 30),
  ("王五", "[email protected]", 28)
`)

// 3. 插入指定字段
const partialInsert = await db.insertSQL('INSERT INTO users (username) VALUES ("赵六")')

// ============================================
// UPDATE 更新 - 返回更新的行数
// ============================================

// 1. 单条更新
const updateCount = await db.updateSQL('UPDATE users SET age = 26 WHERE id = 1')

// 2. 批量更新
const batchUpdateCount = await db.updateSQL('UPDATE users SET status = "active" WHERE status = "inactive"')

// 3. 更新多个字段
const multiUpdate = await db.updateSQL('UPDATE users SET age = 30, status = "vip" WHERE id = 1')

// 4. 条件更新（支持各种运算符）
const ageUpdate = await db.updateSQL('UPDATE users SET level = "senior" WHERE age >= 30')
const likeUpdate = await db.updateSQL('UPDATE users SET tag = "zhang" WHERE username LIKE "张%"')

// ============================================
// DELETE 删除 - 返回删除的行数
// ============================================

// 1. 单条删除
const deleteSQLCount = await db.deleteSQL('DELETE FROM users WHERE id = 1')

// 2. 批量删除
const batchDeleteCount = await db.deleteSQL('DELETE FROM users WHERE status = "deleted"')

// 3. 条件删除（支持各种运算符）
const ageDelete = await db.deleteSQL('DELETE FROM users WHERE age < 18')
const likeDelete = await db.deleteSQL('DELETE FROM users WHERE username LIKE "test%"')

// 4. 删除所有数据（谨慎使用）
const deleteAll = await db.deleteSQL('DELETE FROM users')

方式二：可视化组件 - DatabaseView

完整的数据库管理界面，包含左侧数据库/表树形结构、SQL 编辑器、数据表格展示、表结构编辑等功能。

<template>
  <div class="app">
    <DatabaseView />
  </div>
</template>

<script setup lang="ts">
import { DatabaseView } from 'yc-web-db/components'
import 'yc-web-db/dist/style.css'
</script>

方式三：API 操作界面 - ApiView

提供完整的 API 操作面板，可以通过界面交互方式学习和测试所有 API 方法。

<template>
  <div class="app">
    <ApiView />
  </div>
</template>

<script setup lang="ts">
import { ApiView } from 'yc-web-db/components'
import 'yc-web-db/dist/style.css'
</script>

ApiView 功能介绍：

ApiView 提供了一个交互式的 API 操作面板，包含以下功能模块：

1. 数据库操作

初始化数据库 - 初始化系统数据库
创建数据库 - 创建新的数据库
获取数据库列表 - 查看所有数据库
获取数据库对象 - 获取指定数据库的操作对象
删除数据库 - 删除指定数据库
清除所有数据 - 清空所有数据库（谨慎使用）

2. 表操作

创建表 - 根据字段定义创建新表
获取表列表 - 查看数据库中的所有表
获取表结构 - 查看表的字段定义
修改表结构 - 修改已存在表的结构（支持数据迁移）
添加表字段 - 向已存在的表中添加字段
删除表字段 - 从表中删除字段
删除表 - 删除指定的表

3. 数据操作

插入数据 - 向表中插入单条数据
批量插入 - 批量插入多条数据
查询数据 - 查询表中的所有数据
条件查询 - 使用条件查询数据（支持链式调用）
更新数据 - 根据主键更新数据
批量更新 - 根据条件批量更新数据
删除数据 - 根据主键删除单条数据
批量删除 - 根据条件批量删除数据

4. SQL 执行

执行 SQL - 执行任意 SQL 语句（泛型支持）
SELECT 查询 - 执行 SELECT 查询语句
INSERT 插入 - 执行 INSERT 语句
UPDATE 更新 - 执行 UPDATE 语句
DELETE 删除 - 执行 DELETE 语句
CREATE TABLE - 执行 CREATE TABLE 语句
DROP TABLE - 执行 DROP TABLE 语句

每个 API 操作都提供了：

详细的参数说明
类型定义展示
代码示例
实时执行和结果展示

方式四：使用 Web Worker 执行 SQL（推荐大数据量）

import { useSqlWorker } from 'yc-web-db'

const { executeSql, isExecuting, progress, result, error } = useSqlWorker()

// 执行大量 SQL 语句
await executeSql(`
  CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255)
  );
  
  INSERT INTO users (name, email) VALUES ('张三', '[email protected]');
  INSERT INTO users (name, email) VALUES ('李四', '[email protected]');
`)

// 查看执行进度
console.log(progress.value.percent) // 0-100

SQL 执行详解

本系统提供完整的 SQL 执行能力，支持标准 SQL 语法的大部分常用功能。

SQL 执行方法对比

| 方法 | 用途 | 返回值 | 适用场景 | | ------------------ | ---- | -------------- | --------------- | | execute() | 通用执行 | 根据SQL类型返回不同结果 | 不确定SQL类型时使用 | | select() | 查询数据 | T[] 结果数组 | SELECT 查询 | | insertSQL() | 插入数据 | number 插入行数 | INSERT 语句 | | updateSQL() | 更新数据 | number 更新行数 | UPDATE 语句 | | deleteSQL() | 删除数据 | number 删除行数 | DELETE 语句 | | createTableSQL() | 创建表 | boolean 是否成功 | CREATE TABLE 语句 | | dropTableSQL() | 删除表 | boolean 是否成功 | DROP TABLE 语句 |

事务操作

本系统支持数据库事务，确保数据操作的原子性和一致性。

事务方法

| 方法 | 签名 | 说明 | | ---------------------- | ----------------------------------------------------------------- | ------------ | | executeTransaction() | async executeTransaction<T>(mode, tables, callback): Promise<T> | 执行事务（支持自动回滚） | | batchTransaction() | async batchTransaction<T>(operations): Promise<T[]> | 批量操作事务 |

事务使用示例

const db = await dbManager.getDB('mydb')

// ============================================
// 单事务操作 - executeTransaction
// ============================================

// 转账示例：张三向李四转账100元
try {
  await db.executeTransaction('rw', ['accounts'], async () => {
    const accounts = db.getTable('accounts')
    
    // 查询账户
    const zhangsan = await accounts.where('username').equals('张三').query()
    const lisi = await accounts.where('username').equals('李四').query()
    
    // 检查余额
    if (zhangsan[0].balance < 100) {
      throw new Error('余额不足')
    }
    
    // 扣减张三余额
    await accounts.update(zhangsan[0].id, {
      balance: zhangsan[0].balance - 100
    })
    
    // 增加李四余额
    await accounts.update(lisi[0].id, {
      balance: lisi[0].balance + 100
    })
  })
  
  console.log('转账成功')
} catch (error) {
  // 事务中任何操作失败都会自动回滚
  console.error('转账失败，已回滚:', error.message)
}

// ============================================
// 批量事务操作 - batchTransaction
// ============================================

// 批量操作示例：创建订单、扣减库存、记录日志
try {
  await db.batchTransaction([
    // 操作1：创建订单
    async () => {
      const orders = db.getTable('orders')
      return await orders.insert({
        productId: 'P001',
        quantity: 2,
        status: 'pending'
      })
    },
    // 操作2：扣减库存
    async () => {
      const inventory = db.getTable('inventory')
      const product = await inventory.where('productId').equals('P001').query()
      await inventory.update(product[0].id, {
        stock: product[0].stock - 2
      })
      return '库存扣减成功'
    },
    // 操作3：记录操作日志
    async () => {
      const logs = db.getTable('operation_logs')
      return await logs.insert({
        action: 'order_created',
        productId: 'P001',
        quantity: 2,
        timestamp: new Date()
      })
    }
  ])
  
  console.log('批量操作成功')
} catch (error) {
  // 任一操作失败，所有操作自动回滚
  console.error('批量操作失败，已回滚:', error.message)
}

事务特性

原子性：事务中的所有操作要么全部成功，要么全部失败
一致性：事务执行前后，数据库保持一致性状态
自动回滚：事务中任何操作抛出错误，自动回滚所有修改
隔离性：事务之间相互隔离，不会互相干扰

支持的 SQL 语法

1. SELECT 查询

基础语法：

SELECT [DISTINCT] 列名1, 列名2, ... | *
FROM 表名 [AS 别名]
[WHERE 条件]
[GROUP BY 列名1, 列名2, ...]
[HAVING 条件]
[ORDER BY 列名 [ASC|DESC], ...]
[LIMIT 数量 [OFFSET 偏移量]]

支持的运算符：

| 运算符 | 说明 | 示例 | | ----------- | ---- | -------------------------------------- | | = | 等于 | WHERE age = 18 | | != / <> | 不等于 | WHERE status != 'deleted' | | > | 大于 | WHERE age > 18 | | >= | 大于等于 | WHERE age >= 18 | | < | 小于 | WHERE age < 60 | | <= | 小于等于 | WHERE age <= 60 | | LIKE | 模糊匹配 | WHERE name LIKE '张%' | | IN | 在集合中 | WHERE id IN (1, 2, 3) | | AND | 逻辑与 | WHERE age > 18 AND status = 'active' | | OR | 逻辑或 | WHERE age < 18 OR age > 60 |

LIKE 通配符：

% - 匹配零个或多个任意字符
_ - 匹配单个任意字符

聚合函数：

COUNT(*) - 统计行数
SUM(列名) - 求和
AVG(列名) - 平均值
MAX(列名) - 最大值
MIN(列名) - 最小值

2. JOIN 连接查询

SELECT 列名
FROM 表1 [AS 别名1]
[INNER|LEFT|RIGHT|FULL] JOIN 表2 [AS 别名2] ON 连接条件
[WHERE 条件]

3. 子查询

SELECT * FROM 表名
WHERE 列名 IN (SELECT 列名 FROM 另一表 WHERE 条件)

4. UNION 联合查询

SELECT 列名 FROM 表1
UNION [ALL]
SELECT 列名 FROM 表2

5. INSERT 插入

INSERT INTO 表名 (列名1, 列名2, ...)
VALUES (值1, 值2, ...), (值1, 值2, ...), ...

6. UPDATE 更新

UPDATE 表名
SET 列名1 = 值1, 列名2 = 值2, ...
[WHERE 条件]

7. DELETE 删除

DELETE FROM 表名
[WHERE 条件]

8. CREATE TABLE 创建表

CREATE TABLE 表名 (
    列名 数据类型 [约束条件],
    列名 数据类型 [约束条件],
    ...
) [COMMENT='表注释']

支持的约束：

PRIMARY KEY / PRI - 主键
AUTO_INCREMENT - 自增
NOT NULL - 非空
UNIQUE / UNI - 唯一
DEFAULT 值 - 默认值
COMMENT '注释' - 注释

错误处理

SQL 执行过程中可能会抛出以下错误：

try {
  const users = await db.select('SELECT * FROM users WHERE age > 18')
} catch (error) {
  // 常见错误类型：
  // - 表不存在：表 "xxx" 不存在
  // - 字段不存在：字段 "xxx" 在表 "yyy" 中不存在
  // - SQL 解析错误：无法解析 SQL / 不支持的 SQL 语法
  console.error('SQL 执行失败:', error.message)
}

API 文档

DatabaseManager - 数据库管理器

DatabaseManager 是系统的核心管理类，负责管理所有数据库的创建、获取和删除。

获取管理器实例

import { getDBManager } from 'yc-web-db'

const dbManager = getDBManager()

重要提示： 建议每次执行操作时都通过 getDBManager() 方法获取最新的管理器实例。当数据表结构发生变动（如创建表、修改表、删除表）后，如果没有获取最新的 manager，可能会导致后续操作失败。这是因为 IndexedDB 的版本会在表结构变动时自动升级，旧的实例可能无法正确访问新版本的数据库。

方法列表

| 方法 | 签名 | 说明 | | --------------------- | ------------------------------------------------------------ | -------- | | init() | async init(): Promise<void> | 初始化系统数据库 | | createDB() | async createDB(name: string): Promise<UserDatabaseManager> | 创建新数据库 | | getDB() | async getDB(dbName: string): Promise<UserDatabaseManager> | 获取数据库对象 | | deleteDB() | async deleteDB(dbName: string): Promise<void> | 删除数据库 | | getDBList() | getDBList(): DatabaseInfo[] | 获取数据库列表 | | clearAllDatabases() | async clearAllDatabases(): Promise<void> | 清除所有数据 |

使用示例

// 初始化
await dbManager.init()

// 创建数据库
const db = await dbManager.createDB('my_database')

// 获取数据库列表
const databases = dbManager.getDBList()
// 返回: [{ id: 'xxx', name: 'my_database', createdAt: Date }]

// 获取数据库对象
const db = await dbManager.getDB('my_database')

// 删除数据库
await dbManager.deleteDB('my_database')

UserDatabaseManager - 用户数据库管理器

UserDatabaseManager 用于管理单个数据库的表结构和数据操作。

获取实例

const db = await dbManager.getDB('my_database')

方法列表

| 方法 | 签名 | 说明 | | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------ | | createTable() | async createTable(tableName: string, fields: FieldInput[]): Promise<void> | 创建表 | | getTables() | async getTables(): Promise<string[]> | 获取表列表 | | getTableSchema() | async getTableSchema(tableName: string): Promise<TableSchema \| undefined> | 获取表结构 | | updateTable() | async updateTable(tableName: string, newFields: FieldInput[]): Promise<void> | 修改表结构 | | addTableField() | async addTableField(tableName: string, fields: FieldInput \| FieldInput[]): Promise<void> | 添加字段 | | deleteTableField() | async deleteTableField(tableName: string, fieldNames: string \| string[]): Promise<void> | 删除字段 | | dropTable() | async dropTable(tableName: string): Promise<void> | 删除表 | | getTable() | getTable<T>(tableName: string): TableOperator<T> | 获取表操作对象 | | execute() | async execute<T = any>(sql: string): Promise<T> | 执行 SQL | | select() | async select<T = any>(sql: string): Promise<T[]> | SELECT 查询 | | insertSQL() | async insertSQL(sql: string): Promise<number> | INSERT 语句 | | updateSQL() | async updateSQL(sql: string): Promise<number> | UPDATE 语句 | | deleteSQL() | async deleteSQL(sql: string): Promise<number> | DELETE 语句 | | createTableSQL() | async createTableSQL(sql: string): Promise<boolean> | CREATE TABLE | | dropTableSQL() | async dropTableSQL(sql: string): Promise<boolean> | DROP TABLE | | executeTransaction() | async executeTransaction<T>(mode: 'rw' \| 'r', tables: string[], callback: () => Promise<T>): Promise<T> | 执行事务 | | batchTransaction() | async batchTransaction<T>(operations: (() => Promise<T>)[]): Promise<T[]> | 批量事务 |

使用示例

const db = await dbManager.getDB('my_database')

// 创建表
await db.createTable('users', [
  { name: 'id', type: 'INT', key: 'PRI', autoIncrement: true, nullable: false, comment: '主键ID' },
  { name: 'username', type: 'VARCHAR', length: 50, nullable: false, key: 'UNI', comment: '用户名' },
  { name: 'email', type: 'VARCHAR', length: 100, nullable: true, comment: '邮箱' },
  { name: 'age', type: 'INT', nullable: true, comment: '年龄' },
])

// 获取表列表
const tables = await db.getTables()
// 返回: ['users', 'orders', ...]

// 获取表结构
const schema = await db.getTableSchema('users')
// 返回: { name: 'users', comment: '', columns: [...] }

// 修改表结构（支持数据迁移）
await db.updateTable('users', [
  { name: 'id', type: 'INT', key: 'PRI', autoIncrement: true, nullable: false, comment: '主键ID' },
  { name: 'username', type: 'VARCHAR', length: 50, nullable: false, comment: '用户名' },
  { name: 'email', type: 'VARCHAR', length: 100, nullable: true, comment: '邮箱' },
  { name: 'phone', type: 'VARCHAR', length: 20, nullable: true, comment: '电话（新增）' },
])

// 添加字段
await db.addTableField('users', [
  { name: 'phone', type: 'VARCHAR', length: 20, nullable: true, comment: '电话' },
  { name: 'address', type: 'TEXT', nullable: true, comment: '地址' },
])

// 删除字段
await db.deleteTableField('users', ['phone', 'address'])

// 删除表
await db.dropTable('users')

// 执行 SQL - 通用方法，根据SQL类型自动路由到对应方法
const result = await db.execute('SELECT * FROM users WHERE age > 18')

// ============================================
// SELECT 查询 - 返回查询结果数组
// ============================================

// 基础查询
const users = await db.select('SELECT * FROM users WHERE age > 18')

// 模糊查询 - LIKE
const zhangUsers = await db.select('SELECT * FROM users WHERE username LIKE "张%"')

// 排序和分页
const sortedUsers = await db.select('SELECT * FROM users ORDER BY created_at DESC LIMIT 10 OFFSET 0')

// 聚合查询
const stats = await db.select('SELECT status, COUNT(*) as count, AVG(age) as avg_age FROM users GROUP BY status')

// 连接查询
const userOrders = await db.select(`
  SELECT u.username, o.order_no, o.amount 
  FROM users u 
  INNER JOIN orders o ON u.id = o.user_id 
  WHERE o.amount > 1000
`)

// 子查询
const highValueUsers = await db.select(`
  SELECT * FROM users 
  WHERE id IN (SELECT user_id FROM orders WHERE amount > 5000)
`)

// ============================================
// INSERT 插入 - 返回插入的行数
// ============================================

// 单条插入
const insertCount = await db.insertSQL(`INSERT INTO users (username, email) VALUES ('张三', '[email protected]')`)

// 批量插入
const batchInsertCount = await db.insertSQL(`
  INSERT INTO users (username, email, age) VALUES 
  ('张三', '[email protected]', 25),
  ('李四', '[email protected]', 30)
`)

// ============================================
// UPDATE 更新 - 返回更新的行数
// ============================================

// 单条更新
const updateCount = await db.updateSQL('UPDATE users SET age = 26 WHERE id = 1')

// 批量更新
const batchUpdateCount = await db.updateSQL('UPDATE users SET status = "active" WHERE status = "inactive"')

// 使用 LIKE 更新
const likeUpdateCount = await db.updateSQL('UPDATE users SET tag = "test" WHERE username LIKE "test%"')

// ============================================
// DELETE 删除 - 返回删除的行数
// ============================================

// 单条删除
const deleteCount = await db.deleteSQL('DELETE FROM users WHERE id = 1')

// 批量删除
const batchDeleteCount = await db.deleteSQL('DELETE FROM users WHERE status = "deleted"')

// 使用 LIKE 删除
const likeDeleteCount = await db.deleteSQL('DELETE FROM users WHERE username LIKE "temp_%"')

// ============================================
// CREATE TABLE - 返回 boolean
// ============================================

const success = await db.createTableSQL(`
  CREATE TABLE products (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL COMMENT '产品名称',
    price DECIMAL(10, 2) NOT NULL COMMENT '产品价格',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
  ) COMMENT='产品表'
`)

// ============================================
// DROP TABLE - 返回 boolean
// ============================================

const dropped = await db.dropTableSQL('DROP TABLE products')

TableOperator - 表操作器

TableOperator 提供对单张表的数据操作方法，支持泛型类型。

获取实例

const table = db.getTable('users')
// 或带类型
interface User {
  id: number
  username: string
  email: string
  age: number
}
const table = db.getTable<User>('users')

方法列表

| 方法 | 签名 | 说明 | | -------------- | ------------------------------------------------------------------------- | ------ | | insert() | async insert(data: Omit<T, "id">): Promise<T> | 插入单条数据 | | insertMany() | async insertMany(dataList: Omit<T, "id">[]): Promise<T[]> | 批量插入 | | query() | async query(): Promise<T[]> | 查询所有数据 | | where() | where<K extends keyof T>(field: K): WhereOperator<T> | 条件查询 | | update() | async update(id: string \| number, data: Partial<T>): Promise<void> | 更新数据 | | updateMany() | async updateMany(filter: Partial<T>, data: Partial<T>): Promise<number> | 批量更新 | | delete() | async delete(id: string \| number): Promise<void> | 删除数据 | | deleteMany() | async deleteMany(filter: Partial<T>): Promise<number> | 批量删除 |

使用示例

const table = db.getTable('users')

// 插入单条数据
const result = await table.insert({ username: '张三', email: '[email protected]', age: 25 })
// 返回: { id: 1, username: '张三', email: '[email protected]', age: 25 }

// 批量插入
const results = await table.insertMany([
  { username: '张三', email: '[email protected]', age: 25 },
  { username: '李四', email: '[email protected]', age: 30 },
])

// 查询所有数据
const data = await table.query()

// 条件查询（链式调用）
const adults = await table.where('age').above(18).query()
const teenagers = await table.where('age').between(13, 19).query()
const specificUsers = await table.where('username').equals('张三').query()

// 更新数据
await table.update(1, { age: 26 })

// 批量更新（返回影响行数）
const count = await table.updateMany({ status: 'inactive' }, { status: 'active' })

// 删除数据
await table.delete(1)

// 批量删除（返回影响行数）
const deleteCount = await table.deleteMany({ status: 'deleted' })

WhereOperator - 条件操作器

WhereOperator 用于构建条件查询，支持链式调用。

方法列表

| 方法 | 签名 | 说明 | | ----------- | ------------------------------------------------- | ---- | | equals() | equals(value: T[K]): WhereOperator<T> | 等于 | | above() | above(value: T[K]): WhereOperator<T> | 大于 | | below() | below(value: T[K]): WhereOperator<T> | 小于 | | between() | between(min: T[K], max: T[K]): WhereOperator<T> | 范围查询 | | in() | in(values: T[K][]): WhereOperator<T> | 包含查询 | | query() | async query(): Promise<T[]> | 执行查询 |

使用示例

// 等于
const user = await table.where('username').equals('张三').query()

// 大于
const adults = await table.where('age').above(18).query()

// 小于
const minors = await table.where('age').below(18).query()

// 范围
const teenagers = await table.where('age').between(13, 19).query()

// 包含
const activeUsers = await table.where('status').in(['active', 'premium']).query()

类型定义

FieldInput - 字段输入

interface FieldInput {
  name: string;           // 字段名
  type: DataType;         // 数据类型: INT/VARCHAR/TEXT/DATETIME/BOOLEAN/DECIMAL/FLOAT/DOUBLE/DATE/TIME/BLOB
  length?: number;        // 长度(仅VARCHAR/DECIMAL需要)
  decimal?: number;       // 小数位数(仅DECIMAL需要)
  nullable?: boolean;     // 是否可空,默认true
  key?: KeyType;          // 索引类型: PRI(主键)/UNI(唯一)/MUL(普通索引)
  defaultValue?: any;     // 默认值
  autoIncrement?: boolean;// 是否自增(仅主键)
  comment?: string;       // 字段注释
  unsigned?: boolean;     // 是否无符号
  zerofill?: boolean;     // 是否补零
}

TableSchema - 表结构

interface TableSchema {
  name: string;      // 表名
  comment: string;   // 表注释
  columns: FieldInfo[]; // 字段数组
}

interface FieldInfo {
  id: string;             // 字段ID
  tableId: string;        // 所属表ID
  name: string;           // 字段名
  type: DataType;         // 数据类型
  length?: number;        // 长度
  decimal?: number;       // 小数位数
  nullable: boolean;      // 是否可空
  key: KeyType;           // 索引类型
  defaultValue?: any;     // 默认值
  autoIncrement: boolean; // 是否自增
  comment: string;        // 字段注释
  unsigned?: boolean;     // 是否无符号
  zerofill?: boolean;     // 是否补零
  sortOrder: number;      // 排序顺序
}

DatabaseInfo - 数据库信息

interface DatabaseInfo {
  id: string;        // 数据库ID
  name: string;      // 数据库名称
  createdAt: Date;   // 创建时间
}

数据类型

支持的数据类型：

| 类型 | 说明 | 示例 | | -------- | ------- | ----------------------- | | INT | 整数 | 123 | | BIGINT | 长整数 | 9007199254740991 | | VARCHAR | 字符串 | 'hello' | | TEXT | 长文本 | '长文本内容...' | | DECIMAL | 精确小数 | 123.45 | | FLOAT | 浮点数 | 3.14 | | DOUBLE | 双精度浮点数 | 3.14159265359 | | BOOLEAN | 布尔值 | true / false | | DATE | 日期 | '2024-01-01' | | DATETIME | 日期时间 | '2024-01-01 12:00:00' | | JSON | JSON 数据 | '{"key": "value"}' | | BLOB | 二进制数据 | Uint8Array |

可视化组件

DatabaseView

完整的数据库管理界面，包含：

左侧数据库/表树形结构
SQL 编辑器
数据表格展示
表结构编辑

<template>
  <DatabaseView />
</template>

<script setup lang="ts">
import { DatabaseView } from 'yc-web-db/components'
import 'yc-web-db/dist/style.css'
</script>

ApiView

API 操作面板，提供所有 API 方法的交互式操作界面：

数据库操作（创建、删除、列表等）
表操作（创建、修改、删除等）
数据操作（增删改查）
SQL 执行

<template>
  <ApiView />
</template>

<script setup lang="ts">
import { ApiView } from 'yc-web-db/components'
import 'yc-web-db/dist/style.css'
</script>

其他组件

| 组件名 | 说明 | | ----------------- | ------- | | SqlEditorPage | SQL 编辑器 | | TableDataView | 表数据展示 | | CreateTablePage | 创建表界面 | | EditTablePage | 编辑表结构界面 | | DataEditDialog | 数据编辑弹窗 | | GridTable | 数据表格组件 | | PageWindow | 页面窗口组件 | | TabBar | 标签栏组件 |

浏览器兼容性

| 浏览器 | 最低版本 | | ------- | ---- | | Chrome | 23+ | | Firefox | 16+ | | Safari | 10+ | | Edge | 12+ |

注意事项

数据持久化

数据存储在浏览器本地的 IndexedDB 中
清除浏览器数据会导致数据丢失
建议定期导出重要数据

数据库版本

每次修改表结构（添加/删除表）会自动升级数据库版本
版本号存储在 IndexedDB 中
如果遇到版本冲突错误，可以尝试清除浏览器数据后重新初始化

性能建议

大数据量插入时使用 insertMany 批量插入
大数据量删除时使用 deleteMany 批量删除
执行大量 SQL 语句时使用 useSqlWorker 避免阻塞主线程
查询时使用分页（page/pageSize）避免一次性加载过多数据

存储限制

IndexedDB 的存储限制取决于浏览器和设备
通常限制在 50MB - 几百MB 之间
超出限制时会抛出 QuotaExceededError 错误

开发团队

洋铲工作室 - 让你体验不一样的低代码

官网: http://www.yangchan.work
天幕低代码: http://www.yangchan.work/skyCurtain/

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

YC Web DB - 前端数据库管理工具

特性

安装

使用方式

方式一：API 接口

方式二：可视化组件 - DatabaseView

方式三：API 操作界面 - ApiView

1. 数据库操作

2. 表操作

3. 数据操作

4. SQL 执行

方式四：使用 Web Worker 执行 SQL（推荐大数据量）

SQL 执行详解

SQL 执行方法对比

事务操作

事务方法

事务使用示例

事务特性

支持的 SQL 语法

1. SELECT 查询

2. JOIN 连接查询

3. 子查询

4. UNION 联合查询

5. INSERT 插入

6. UPDATE 更新

7. DELETE 删除

8. CREATE TABLE 创建表

错误处理

API 文档

DatabaseManager - 数据库管理器

获取管理器实例

方法列表

使用示例

UserDatabaseManager - 用户数据库管理器

获取实例

方法列表

使用示例

TableOperator - 表操作器

获取实例

方法列表

使用示例

WhereOperator - 条件操作器

方法列表

使用示例

类型定义

FieldInput - 字段输入

TableSchema - 表结构

DatabaseInfo - 数据库信息

数据类型

可视化组件

DatabaseView

ApiView

其他组件

浏览器兼容性

注意事项

数据持久化

数据库版本

性能建议

存储限制

开发团队