Files
mp-java/docs/MOBILE_PAGE_GENERATOR.md
赵忠林 6caf434c3d feat(generator): 新增移动端页面文件生成功能
- 添加了4个移动端页面模板文件:index.config.ts、index.tsx、add.config.ts、add.tsx
- 更新了ShopGenerator和CmsGenerator以支持移动端页面文件生成
- 新增了移动端页面文件生成的详细使用说明和示例
- 创建了验证脚本以确保生成器配置和输出路径正确
2025-08-12 23:41:10 +08:00

122 lines
3.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 移动端页面文件生成器使用说明
## 概述
本功能为代码生成器新增了移动端页面文件生成能力一个表可以生成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` 中:
```java
private static final String[] TABLE_NAMES = new String[]{
"shop_goods", // 商品表
"shop_category" // 分类表
};
```
### 2. 运行生成器
运行对应的生成器主方法,例如:
```bash
# 运行商城模块生成器
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` 中添加以下配置:
```java
// 移动端页面文件生成配置
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文件已生成