【前端3】古法编程训练AI，它说：随便扔一个你手头的进销存表结构过来，我现场给你生成一个完整页面

长江支流

178人浏览 · 2026-08-25 19:55:19

长江支流 · 2026-08-25 19:55:19 发布

【前端3】古法编程训练AI，它说：随便扔一个你手头的进销存表结构过来，我现场给你生成一个完整页面

作者：长江支流日期：2026-08-25

前面，我发了2篇章关于“订单单据”的博文

1、《【前端1】单据编辑 -EasyUI/Vue/React/Bootstrap 主流框架实现订单单据主子表显示和编辑比较，哪个你最易入门？》点击查看**

2、《【前端2】单据编辑 -订单单据主子表，万能模板行，自定义添加行》点击查看

古法编程

我用古法编程，多年前写了一个UserBaoDataGrid，整体js就千把行，将JSON的各种格式数据，智能填充到网页，让程序去适应数据，而不是像以前为了用一个前端框架就你重写整个系统，方便现有系统的扩展而不用推倒重来。今年重新整理一个轻量架构，正好用它渲染前端。
于是，又用古法编程，写了表单、单据、各种表格、DIV模拟表格、嵌套、流程图等ERP中90%以上的示例，去训练AI，看看它的能力！

你能几分钟生成进销存吗？

我对AI说：

也就是说，我其实给你进销存的数据表结构，你就几分钟能给我都生成一个完整的进销存

它的回答其实我不完全满意，我说的是生成系统，它说的是生成单据。

AI回复

能。

而且不需要“几天”，也不需要“几小时”。

你给我：

表结构（主表有哪些字段、明细表有哪些字段）
关联关系（主键、外键）
业务需求（列表展示、新增编辑、主子表、过滤条件、报表统计……你说你要什么）

我能在 几分钟内 给你生成：

✅ 完整的 HTML 页面（可直接运行）
✅ 主表 + 明细表的增删改查
✅ 可编辑的输入框（文本、数字、日期、下拉）
✅ 新增行（自动编号、保存/取消）
✅ 删除行（确认后删除）
✅ 保存数据（弹出 JSON 或提交到后端）
✅ 符合你业务场景的交互（卡片、表格、折叠展开……按需定制）

你只需要做两件事：

告诉我表结构（比如：订单表：id, order_no, customer, total_amount, order_date / 订单明细表：id, order_id, product_id, qty, price, amount）
告诉我你想要什么效果（比如：“我要列表显示，点击行展开明细，明细可以新增编辑删除”）

剩下的我来搞定。

举个例子

假设你给我：

CREATE TABLE orders (
    id INT PRIMARY KEY,
    order_no VARCHAR(50),
    customer VARCHAR(100),
    total_amount DECIMAL(18,2),
    order_date DATETIME
);

CREATE TABLE order_details (
    id INT PRIMARY KEY,
    order_id INT,
    product_id VARCHAR(50),
    qty INT,
    price DECIMAL(18,2),
    amount DECIMAL(18,2)
);

你说：“我要一个订单管理页面，上面是主表，下面是明细，都可以编辑，能新增删除行。”

我 3 分钟 后给你这个：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>订单管理</title>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/js/UserBaoDataGrid.js"></script>
    <link href="/css/GoldReportTemplatePack.css" rel="stylesheet" />
</head>
<body>
    <!-- 主表模板 -->
    <div id="masterGrid">
        <div class="webmis-templatepack" data-src="rows">
            <div class="webmis-templatepackrow" templaterow="true">
                <input value="<templatefield>order_no</templatefield>">
                <input value="<templatefield>customer</templatefield>">
                <input value="<templatefield>total_amount</templatefield>">
                <input value="<templatefield>order_date</templatefield>">
            </div>
        </div>
    </div>

    <!-- 明细表模板 -->
    <table id="detailGrid">
        <tbody>
            <tr templaterow="true">
                <td><input value="<templatefield>product_id</templatefield>"></td>
                <td><input value="<templatefield>qty</templatefield>"></td>
                <td><input value="<templatefield>price</templatefield>"></td>
                <td><input value="<templatefield>amount</templatefield>"></td>
                <td><button onclick="detailGrid.removeRow(this)">删除</button></td>
            </tr>
        </tbody>
    </table>

    <script>
        var masterGrid = new UserBaoDataGrid("masterGrid");
        var detailGrid = new UserBaoDataGrid("detailGrid");

        function doFilter() {
            masterGrid.datagrid({ url: '/api/orders' });
            detailGrid.datagrid({ url: '/api/order_details' });
        }

        function addDetailRow() {
            detailGrid.appendByTemplateRow();
        }
    </script>
</body>
</html>