小程序开发-服务端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

3.2 KiB

移动端页面文件生成器使用说明

概述

本功能为代码生成器新增了移动端页面文件生成能力,一个表可以生成4个移动端页面文件:

  1. index.config.ts - 列表页面配置文件
  2. index.tsx - 列表页面组件文件
  3. add.config.ts - 新增/编辑页面配置文件
  4. add.tsx - 新增/编辑页面组件文件

新增的模板文件

src/test/java/com/gxwebsoft/generator/templates/ 目录下新增了以下模板文件:

  • index.config.ts.btl - 列表页面配置模板
  • index.tsx.btl - 列表页面组件模板
  • add.config.ts.btl - 新增/编辑页面配置模板
  • add.tsx.btl - 新增/编辑页面组件模板

支持的生成器

目前已为以下生成器添加了移动端页面文件生成功能:

  • ShopGenerator.java - 商城模块代码生成器
  • CmsGenerator.java - CMS模块代码生成器

使用方法

1. 配置生成器

在对应的生成器类中配置需要生成的表名,例如在 ShopGenerator.java 中:

private static final String[] TABLE_NAMES = new String[]{
    "shop_goods",  // 商品表
    "shop_category"  // 分类表
};

2. 运行生成器

运行对应的生成器主方法,例如:

# 运行商城模块生成器
java com.gxwebsoft.generator.ShopGenerator

# 运行CMS模块生成器  
java com.gxwebsoft.generator.CmsGenerator

3. 生成的文件位置

移动端页面文件将生成到以下目录:

{OUTPUT_LOCATION_UNIAPP}/src/{模块名}/{表名}/
├── index.config.ts    # 列表页面配置
├── index.tsx          # 列表页面组件
├── add.config.ts      # 新增/编辑页面配置
└── add.tsx            # 新增/编辑页面组件

例如,对于 shop_goods 表,会生成:

/Users/gxwebsoft/VUE/template-10550/src/shop/goods/
├── index.config.ts
├── index.tsx
├── add.config.ts
└── add.tsx

模板特性

列表页面 (index.tsx)

  • 支持数据列表展示
  • 支持删除操作
  • 支持编辑跳转
  • 支持默认选项设置
  • 空数据状态处理

新增/编辑页面 (add.tsx)

  • 自动根据表字段生成表单项
  • 支持新增和编辑两种模式
  • 自动处理字符串类型字段的输入组件选择
  • 表单验证和提交处理

配置文件

  • 自动根据表注释生成页面标题
  • 统一的导航栏样式配置

自定义扩展

如需为其他生成器添加移动端页面文件生成功能,可参考 ShopGenerator.java 中的实现,在对应生成器的 focList 中添加以下配置:

// 移动端页面文件生成配置
templatePath = TEMPLATES_DIR + "/index.config.ts.btl";
focList.add(new FileOutConfig(templatePath) {
  @Override
  public String outputFile(TableInfo tableInfo) {
    return OUTPUT_LOCATION_UNIAPP + OUTPUT_DIR_VUE
      + "/pages/" + pc.getModuleName() + "/"
      + tableInfo.getEntityPath() + "/" + "index.config.ts";
  }
});

// 其他3个文件的配置...

注意事项

  1. 确保 OUTPUT_LOCATION_UNIAPP 路径配置正确
  2. 生成前请备份现有文件,避免覆盖重要代码
  3. 生成的代码可能需要根据具体业务需求进行调整
  4. 模板中的API调用方法需要确保对应的API文件已生成