后端说“基本增删改查都写好了，就差切图仔对接口了！”——我一怒之下撸了个代码生成器

引言：被接口支配的恐惧

作为前端开发者，你是否经历过这样的场景？

后端同事潇洒地说："接口都好了，就等你们前端调用了！"

然后你打开文档，发现几十个字段的表格、表单、搜索条件、弹窗编辑......

每个页面都要手动写 <el-table>、<el-form>、API 调用、分页逻辑...... ，全是重复劳动！**

于是我掀桌了！

用Node写了个代码生成器，原本1天的工作量，现在3分钟就能完成！

从配置界面到生成JSON再到到生成VUE文件

配置界面

生成JSON

js 复制代码

{
    "key": "repairCostYear",
    "title": "年度全面预算管理",
    "api": {
        "list": "/repair_api/tIamYearBudget/selectAll",
        "create": "/repair_api/tIamYearBudget/insert",
        "update": "/repair_api/tIamYearBudget/update",
        "delete": "/repair_api/tIamYearBudget/delete",
        "getOne": "/repair_api/tIamYearBudget/selectOne"
    },
    "detailDiaType": "diapage",
    "fields": [
        {
            "key": "yearBudget",
            "label": "年度",
            "type": "year",
            "showIn": [
                "table",
                "form",
                "search"
            ]
        },
        {
            "key": "grassrootsEnterprises",
            "label": "基层公司",
            "type": "select",
            "showIn": [
                "table",
                "form",
                "search"
            ],
            "enumType": "grassrootsComp"
        },
        {
            "key": "materialCost",
            "label": "材料费用",
            "type": "inputNumber",
            "showIn": [
                "table",
                "form"
            ]
        },
        {
            "key": "constructionCost",
            "label": "施工费用",
            "type": "inputNumber",
            "showIn": [
                "table",
                "form"
            ]
        },
        {
            "key": "serviceCost",
            "label": "服务费用",
            "type": "inputNumber",
            "showIn": [
                "table",
                "form"
            ]
        },
        {
            "key": "otherCost",
            "label": "其他费用",
            "type": "inputNumber",
            "showIn": [
                "table",
                "form"
            ]
        },
        {
            "key": "totalCost",
            "label": "费用合计",
            "type": "inputNumber",
            "showIn": [
                "table",
                "form"
            ]
        },
        {
            "key": "remark",
            "label": "备注",
            "type": "textarea",
            "showIn": [
                "table",
                "form"
            ]
        }
    ],
    "template": "main"
}

生成VUE文件

核心思路：JSON 配置 → 动态拼接 Vue 代码 → 格式化输出

主表模板（main） ：带搜索、分页的列表页、详情弹框页等
组件库 ：基于 Element Plus 二次封装（tabulation、diabox 等）

动态生成 Script 逻辑

js 复制代码

const createScript = async (json) => {
  // 动态生成搜索字段
  const searchData = [];
  json.fields.forEach((field) => {
    if (!field.showIn.includes("search")) return;
    searchData.push({
      label: field.label,
      key: field.key,
      type: field.type,
      ...(field.enumType && { enumType: field.enumType })
    });
  });
  
  // 动态生成表格列
  const tableColumn = [];
  json.fields.forEach((field) => {
    if (!field.showIn.includes("table")) return;
    tableColumn.push({
      label: field.label,
      key: field.key,
      ...(field.enumType && { enumType: field.enumType })
    });
  });
  
  // 生成完整的script部分
  return `
<script setup lang="ts">
  // 导入动态生成的组件
  ${json.detailDiaType === "diadrawer" ? `import diadrawer from "@/components/base/diadrawer.vue";` : ""}
  
  // 使用动态配置
  const searchData = ref(${JSON.stringify(searchData)});
  const tableColumn = ref(${JSON.stringify(tableColumn)});
  
  // 核心CRUD方法
  const initTable = () => {
    request.get("${json.api.list}", {
      ...searchValue.value,
      pageNumber: pagination.value.pageNumber,
      pageSize: pagination.value.pageSize
    }).then((res: any) => {
      tableData.value = res.data.records;
      pagination.value.total = res.data.total;
    });
  };
</script>`;
};

动态生成 Form 表单

js 复制代码

const formData = json.fields.filter(f => f.showIn.includes("form"))
  .map(field => ({
    key: field.key,
    label: field.label,
    type: field.type,
    ...(field.enumType && { enumType: field.enumType })
  }));

// 生成表单模板
const formItems = formData.map(field => `
  <formItem
    :item="{
      key: '${field.key}',
      type: '${field.type}',
      label: '${field.label}',
      ${field.enumType ? `enumType: '${field.enumType}'` : ''}
    }"
    v-model="detailInfo.${field.key}"
  />`).join("");

格式化和生成文件

js 复制代码

const formattedCode = await prettier.format(code, {
  parser: "vue",
  semi: true,
  singleQuote: true,
  tabWidth: 2,
});
fs.writeFileSync(
  path.resolve(__dirname, `./dist/${jsonData.key}.vue`),
  formattedCode
);

生成页面效果

最后：

如果你也厌倦了重复的CRUD，不妨尝试自己写一个代码生成器。毕竟------
"真正的极客，从不该把时间浪费在重复劳动上！"