10分钟搭建企业级后台：ESQLate让SQL秒变管理面板的革命

10分钟搭建企业级后台：ESQLate让SQL秒变管理面板的革命

【免费下载链接】esqlate Build minimum viable admin panels quickly with just SQL 项目地址: https://gitcode.com/gh_mirrors/es/esqlate

你是否还在为内部管理系统开发焦头烂额？后端工程师编写API接口，前端工程师开发交互界面，测试工程师验证功能，整个流程动辄数周甚至数月。而当业务需求变更时，又要重复这套繁琐流程。现在，有一种更高效的方案——ESQLate，一个能让SQL语句直接转换为专业管理面板的开源工具。

读完本文，你将获得：

• 理解ESQLate如何通过JSON5配置文件将SQL转换为Web界面
• 掌握使用ESQLate快速构建数据查询、添加、修改功能的方法
• 学会通过链接功能创建完整业务流程
• 了解三种不同的ESQLate部署方式
• 能够从零开始搭建一个员工管理系统

ESQLate简介：SQL驱动的管理面板解决方案

什么是ESQLate？

ESQLate（SQL生成管理面板）是一个开源工具，它允许开发者通过简单的JSON5配置文件，将SQL查询直接转换为功能完善的Web管理界面。它解决了小型团队在开发内部管理系统时面临的资源紧张问题，让非技术人员也能安全地操作数据库，同时减少开发和维护成本。

核心优势

传统管理系统开发 vs ESQLate方案的对比：

方面	传统开发	ESQLate方案
开发周期	数周/月	几小时/天
技术栈要求	前后端全栈开发	仅需SQL知识
维护成本	高，需同步更新前后端	低，仅需维护SQL和配置文件
权限控制	需单独实现	内置参数化查询，防止SQL注入
灵活性	高但实现复杂	中等但实现简单，易于快速调整

工作原理

ESQLate的工作流程如下：

快速上手：从SQL到管理面板的蜕变

最基础示例：员工列表查询

让我们从最基础的例子开始，创建一个简单的员工列表查询功能。

1. 创建JSON5配置文件

在test-definition目录下创建employee_list.json5文件：

{
    "name": "employee_list",
    "title": "员工列表",
    "description": "显示公司所有员工的基本信息",
    "parameters": [],
    "statement": "\
        SELECT\n\
            employee_id,\n\
            last_name,\n\
            first_name,\n\
            reports_to\n\
        FROM employees"
}

2. 配置解析与界面生成

ESQLate会自动解析这个配置文件，并生成一个简洁的Web界面：

这个最简单的配置会生成一个包含员工ID、姓氏、名字和上级ID的表格视图。

增强版示例：带搜索功能的员工列表

让我们对基础示例进行增强，添加搜索功能和更友好的显示格式。

{
    "name": "employee_list",
    "title": "员工列表",
    "description": "搜索包含特定子字符串的员工信息",
    "parameters": [
        {
            "name": "search_string",
            "type": "string",
            "highlight_fields": ["last_name", "first_name"]
        }
    ],
    "statement": "\
        SELECT\n\
            employees.employee_id,\n\
            concat(employees.first_name, ' ', employees.last_name) as full_name,\n\
            concat(reports_to.first_name, ' ', reports_to.last_name) as reports_to_name\n\
        FROM employees\n\
        LEFT JOIN employees reports_to ON\n\
            reports_to.employee_id = employees.reports_to\n\
        WHERE\n\
            lower(employees.first_name) like CONCAT('%', lower($search_string) , '%') OR\n\
            lower(employees.last_name) like CONCAT('%', lower(${search_string}) , '%')\
        ",
    "statement_type": "SELECT"
}

这个增强版本添加了：

• 搜索参数：允许用户输入搜索字符串
• 连接查询：显示员工的直接上级姓名
• 格式化输出：将名和姓合并为全名
• 搜索功能：在名字或姓氏中搜索包含指定子字符串的员工

添加员工功能：INSERT语句的应用

ESQLate不仅支持查询，还支持数据修改操作。下面是一个添加员工的示例：

{
    "name": "employee_add",
    "title": "添加员工",
    "description": "向公司添加新员工",
    "parameters": [
        { "name": "last_name", "type": "string" },
        { "name": "first_name", "type": "string" },
        { "name": "title", "type": "string" },
        { "name": "title_of_courtesy", "type": "string" },
        { "name": "birth_date", "type": "date" },
        { "name": "hire_date", "type": "date" },
        { "name": "address", "type": "string" },
        { "name": "city", "type": "string" },
        { "name": "region", "type": "string" },
        { "name": "postal_code", "type": "string" },
        { "name": "country", "type": "string" },
        { "name": "home_phone", "type": "string" },
        { "name": "extension", "type": "string" },
        { "name": "notes", "type": "string" },
        {
            "display_field": "full_name",
            "definition": "employee_list",
            "value_field": "employee_id",
            "type": "popup",
            "name": "reports_to"
        }
    ],
    "statement": "\
        INSERT INTO employees (\n\
            last_name, first_name, title, title_of_courtesy,\n\
            birth_date, hire_date, address, city,\n\
            region, postal_code, country, home_phone,\n\
            extension, notes, reports_to\n\
        )\n\
        VALUES (\n\
            /* last_name = */ $last_name,\n\
            /* first_name = */ $first_name,\n\
            /* title = */ $title,\n\
            /* title_of_courtesy = */ $title_of_courtesy,\n\
            /* birth_date = */ $birth_date,\n\
            /* hire_date = */ $hire_date,\n\
            /* address = */ $address,\n\
            /* city = */ $city,\n\
            /* region = */ $region,\n\
            /* postal_code = */ $postal_code,\n\
            /* country = */ $country,\n\
            /* home_phone = */ $home_phone,\n\
            /* extension = */ $extension,\n\
            /* notes = */ $notes,\n\
            /* reports_to = */ $reports_to\n\
        )",
    "statement_type": "INSERT"
}

这个配置创建了一个完整的员工添加表单，其中特别值得注意的是"reports_to"字段的配置：

• 它使用了"popup"类型，允许用户通过弹出窗口选择上级
• 它关联了之前创建的"employee_list"定义，实现了功能间的联动

高级功能：构建完整业务流程

链接功能：创建业务流程

ESQLate允许在不同功能之间创建链接，形成完整的业务流程。你可以通过三种方式添加链接：

1. 结果上方的链接（links）：

"links": [
  { "href": "#employee_add", "text": "添加新员工" }
]

2. 定义上方的链接（top_links）：

"top_links": [
  { "href": "#department_list", "text": "查看部门列表" }
]

3. 结果行内的链接（row_links）：

"row_links": [
  { "href": "#employee_edit?employee_id=${employee_id}", "text": "编辑" },
  { "href": "#employee_details?employee_id=${employee_id}", "text": "详情" }
]

这些链接可以将各个独立功能串联起来，形成完整的业务流程。

参数类型：打造专业表单

ESQLate支持多种参数类型，让你能够创建更专业的表单：

参数类型	描述	使用场景
string	文本输入框	姓名、地址等短文本
integer	整数输入框	数量、年龄等整数值
decimal	小数输入框	价格、重量等带小数的值
date	日期选择器	生日、入职日期等日期值
datetime	日期时间选择器	带时间的日期值
select	下拉选择框	从固定选项中选择
popup	弹出窗口选择器	从其他查询结果中选择

例如，一个带下拉选择的参数配置：

{
    "name": "department_id",
    "type": "select",
    "options": [
        { "value": 1, "label": "销售部" },
        { "value": 2, "label": "财务部" },
        { "value": 3, "label": "人力资源部" }
    ]
}

数据可视化与导出

ESQLate提供了数据导出功能，查询结果可以直接下载为CSV文件。对于需要进一步分析的数据，这一功能非常实用。

此外，通过合理配置SQL查询，你可以创建简单的数据统计和分析视图，例如部门员工数量统计：

{
    "name": "department_stats",
    "title": "部门人员统计",
    "description": "各部门员工数量统计",
    "parameters": [],
    "statement": "\
        SELECT\n\
            d.department_id,\n\
            d.department_name,\n\
            COUNT(e.employee_id) as employee_count,\n\
            MIN(e.hire_date) as earliest_hire_date,\n\
            MAX(e.hire_date) as latest_hire_date\n\
        FROM departments d\n\
        LEFT JOIN employees e ON d.department_id = e.department_id\n\
        GROUP BY d.department_id, d.department_name\n\
        ORDER BY employee_count DESC",
    "statement_type": "SELECT"
}

部署与安装：三种方式任你选

Docker Compose方法（推荐）

Docker Compose是推荐的部署方式，简单快捷：

1. 克隆仓库：

   git clone https://gitcode.com/gh_mirrors/es/esqlate.git
   cd esqlate
   

2. 构建并启动服务：

   docker-compose build && docker-compose up
   

3. 打开浏览器访问：http://localhost:8800/

这种方式会自动部署PostgreSQL数据库、ESQLate Server和ESQLate Frontend，并配置好它们之间的连接。

直接部署方法

如果你需要在现有服务器上部署ESQLate，可以采用直接部署方法：

1. 安装依赖：

   • PostgreSQL数据库
   • ESQLate Server（提供API和数据库查询功能）
   • ESQLate Front（提供Web界面）

2. 配置ESQLate Server连接到你的PostgreSQL数据库

3. 启动ESQLate Server和ESQLate Front

桌面运行方法（不推荐用于生产环境）

如果你只是想试用ESQLate或在本地开发，可以使用桌面运行方法：

1. 启动PostgreSQL数据库（可以使用项目提供的docker-compose配置）：

   docker-compose -f docker-compose-for-postgres-northwind.yml up
   

2. 安装依赖：

   npm install
   

3. 运行ESQLate：

   ./esqlate postgresql -h 127.0.0.1 -d postgres -U postgres -W postgres
   

这种方式会自动选择端口并在启动后打开浏览器。

实战案例：员工管理系统构建

系统架构

我们将构建一个包含以下功能的员工管理系统：

步骤1：创建基础表结构

首先，我们需要创建必要的数据库表：

-- 部门表
CREATE TABLE departments (
    department_id SERIAL PRIMARY KEY,
    department_name VARCHAR(50) NOT NULL,
    location VARCHAR(50)
);

-- 职位表
CREATE TABLE titles (
    title_id SERIAL PRIMARY KEY,
    title_name VARCHAR(100) NOT NULL,
    min_salary DECIMAL(10, 2),
    max_salary DECIMAL(10, 2)
);

-- 员工表
CREATE TABLE employees (
    employee_id SERIAL PRIMARY KEY,
    last_name VARCHAR(50) NOT NULL,
    first_name VARCHAR(50) NOT NULL,
    title_id INTEGER REFERENCES titles(title_id),
    birth_date DATE,
    hire_date DATE NOT NULL,
    department_id INTEGER REFERENCES departments(department_id),
    salary DECIMAL(10, 2),
    address VARCHAR(255),
    city VARCHAR(50),
    region VARCHAR(50),
    postal_code VARCHAR(20),
    country VARCHAR(50),
    home_phone VARCHAR(20),
    extension VARCHAR(10),
    notes TEXT,
    reports_to INTEGER REFERENCES employees(employee_id)
);

步骤2：创建核心功能配置文件

我们需要为每个功能创建JSON5配置文件：

1. 员工列表查询（employee_list.json5）
2. 员工添加表单（employee_add.json5）
3. 员工编辑表单（employee_edit.json5）
4. 员工详情查看（employee_details.json5）
5. 部门列表（department_list.json5）
6. 部门员工统计（department_employees.json5）
7. 职位列表（title_list.json5）

以员工列表查询为例：

{
    "name": "employee_list",
    "title": "员工列表",
    "description": "搜索和查看公司员工信息",
    "parameters": [
        {
            "name": "search_string",
            "type": "string",
            "placeholder": "输入姓名或部门关键词",
            "highlight_fields": ["last_name", "first_name", "department_name"]
        },
        {
            "name": "department_id",
            "type": "select",
            "label": "部门",
            "options": [
                { "value": "", "label": "所有部门" },
                { "value": 1, "label": "销售部" },
                { "value": 2, "label": "财务部" },
                { "value": 3, "label": "人力资源部" },
                { "value": 4, "label": "技术部" }
            ]
        }
    ],
    "statement": "\
        SELECT\n\
            e.employee_id,\n\
            e.last_name,\n\
            e.first_name,\n\
            d.department_name,\n\
            t.title_name,\n\
            e.hire_date,\n\
            e.salary,\n\
            concat(r.first_name, ' ', r.last_name) as reports_to_name\n\
        FROM employees e\n\
        LEFT JOIN departments d ON e.department_id = d.department_id\n\
        LEFT JOIN titles t ON e.title_id = t.title_id\n\
        LEFT JOIN employees r ON e.reports_to = r.employee_id\n\
        WHERE\n\
            (LOWER(e.last_name) LIKE CONCAT('%', LOWER($search_string), '%') OR\n\
             LOWER(e.first_name) LIKE CONCAT('%', LOWER($search_string), '%') OR\n\
             LOWER(d.department_name) LIKE CONCAT('%', LOWER($search_string), '%')) AND\n\
            ($department_id = '' OR e.department_id = $department_id)\n\
        ORDER BY e.last_name, e.first_name",
    "statement_type": "SELECT",
    "top_links": [
        { "href": "#employee_add", "text": "添加新员工" },
        { "href": "#department_list", "text": "部门管理" }
    ],
    "row_links": [
        { "href": "#employee_details?employee_id=${employee_id}", "text": "详情" },
        { "href": "#employee_edit?employee_id=${employee_id}", "text": "编辑" }
    ]
}

步骤3：配置功能间的链接

通过添加链接，我们将各个功能连接起来，形成完整的用户流程：

1. 在员工列表中添加"添加新员工"和"部门管理"链接
2. 在员工列表的每行添加"详情"和"编辑"链接
3. 在员工详情页面添加"返回列表"、"编辑员工"和"查看部门"链接
4. 在部门列表中添加"查看员工"链接

步骤4：测试与优化

1. 测试所有功能是否正常工作
2. 优化SQL查询性能
3. 调整表单布局和交互体验
4. 添加必要的验证和错误处理

总结与展望

ESQLate为快速开发内部管理系统提供了一种革命性的方法。它将SQL查询与Web界面直接关联，大大降低了开发门槛和周期。通过简单的JSON5配置文件，开发者可以快速创建功能完善的管理面板，而无需编写大量的前后端代码。

适用场景

ESQLate特别适合以下场景：

• 小型团队需要快速开发内部工具
• 数据分析师需要将查询转换为可分享的界面
• 业务人员需要安全地访问和操作特定数据
• 原型验证和快速迭代

未来展望

ESQLate目前已经提供了核心功能，但仍有一些潜在的改进方向：

• 更丰富的数据可视化功能
• 更强大的权限控制
• 表单验证和业务规则支持
• 多语言支持
• 自定义主题和样式

如果你正在为开发内部管理系统而烦恼，不妨尝试ESQLate，它可能会彻底改变你构建数据驱动应用的方式。

开始使用

立即访问ESQLate的GitCode仓库，开始你的高效管理面板开发之旅：

git clone https://gitcode.com/gh_mirrors/es/esqlate.git
cd esqlate
docker-compose build && docker-compose up

然后访问http://localhost:8800/，开始探索这个强大工具的无限可能。

【免费下载链接】esqlate Build minimum viable admin panels quickly with just SQL 项目地址: https://gitcode.com/gh_mirrors/es/esqlate