赵忠林
6caf434c3d
- 添加了4个移动端页面模板文件：index.config.ts、index.tsx、add.config.ts、add.tsx - 更新了ShopGenerator和CmsGenerator以支持移动端页面文件生成 - 新增了移动端页面文件生成的详细使用说明和示例 - 创建了验证脚本以确保生成器配置和输出路径正确
124 lines
3.4 KiB
Markdown
124 lines
3.4 KiB
Markdown
# 移动端页面文件生成器使用示例
|
||
|
||
## 快速开始
|
||
|
||
### 1. 配置生成器
|
||
|
||
以 `ShopGenerator` 为例，编辑 `src/test/java/com/gxwebsoft/generator/ShopGenerator.java`：
|
||
|
||
```java
|
||
// 需要生成的表
|
||
private static final String[] TABLE_NAMES = new String[]{
|
||
"shop_goods", // 商品表
|
||
"shop_category", // 分类表
|
||
"shop_user_address" // 用户地址表
|
||
};
|
||
```
|
||
|
||
### 2. 运行生成器
|
||
|
||
```bash
|
||
# 在 IDE 中运行 ShopGenerator.main() 方法
|
||
# 或者使用命令行
|
||
cd /Users/gxwebsoft/JAVA/cms-java-code
|
||
mvn test-compile exec:java -Dexec.mainClass="com.gxwebsoft.generator.ShopGenerator"
|
||
```
|
||
|
||
### 3. 生成的文件结构
|
||
|
||
运行后会在 `/Users/gxwebsoft/VUE/template-10550/src/` 目录下生成：
|
||
|
||
```
|
||
src/
|
||
├── shop/
|
||
│ ├── goods/
|
||
│ │ ├── index.config.ts # 商品列表页面配置
|
||
│ │ ├── index.tsx # 商品列表页面组件
|
||
│ │ ├── add.config.ts # 商品新增/编辑页面配置
|
||
│ │ └── add.tsx # 商品新增/编辑页面组件
|
||
│ ├── category/
|
||
│ │ ├── index.config.ts
|
||
│ │ ├── index.tsx
|
||
│ │ ├── add.config.ts
|
||
│ │ └── add.tsx
|
||
│ └── userAddress/
|
||
│ ├── index.config.ts
|
||
│ ├── index.tsx
|
||
│ ├── add.config.ts
|
||
│ └── add.tsx
|
||
```
|
||
|
||
## 生成的文件内容示例
|
||
|
||
### index.config.ts
|
||
```typescript
|
||
export default definePageConfig({
|
||
navigationBarTitleText: '商品管理',
|
||
navigationBarTextStyle: 'black'
|
||
})
|
||
```
|
||
|
||
### index.tsx (列表页面)
|
||
```typescript
|
||
import {useState} from "react";
|
||
import Taro, {useDidShow} from '@tarojs/taro'
|
||
import {Button, Cell, CellGroup, Space, Empty, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
|
||
import {Dongdong, ArrowRight, CheckNormal, Checked} from '@nutui/icons-react-taro'
|
||
import {View} from '@tarojs/components'
|
||
import {ShopGoods} from "@/api/shop/goods/model";
|
||
import {listShopGoods, removeShopGoods, updateShopGoods} from "@/api/shop/goods";
|
||
|
||
const ShopGoodsList = () => {
|
||
const [list, setList] = useState<ShopGoods[]>([])
|
||
// ... 其他逻辑
|
||
};
|
||
|
||
export default ShopGoodsList;
|
||
```
|
||
|
||
### add.config.ts
|
||
```typescript
|
||
export default definePageConfig({
|
||
navigationBarTitleText: '新增商品',
|
||
navigationBarTextStyle: 'black'
|
||
})
|
||
```
|
||
|
||
### add.tsx (新增/编辑页面)
|
||
```typescript
|
||
import {useEffect, useState, useRef} from "react";
|
||
import {useRouter} from '@tarojs/taro'
|
||
import {Button, Loading, CellGroup, Input, TextArea, Form} from '@nutui/nutui-react-taro'
|
||
import Taro from '@tarojs/taro'
|
||
import {View} from '@tarojs/components'
|
||
import {ShopGoods} from "@/api/shop/goods/model";
|
||
import {getShopGoods, updateShopGoods, addShopGoods} from "@/api/shop/goods";
|
||
|
||
const AddShopGoods = () => {
|
||
// ... 表单逻辑
|
||
};
|
||
|
||
export default AddShopGoods;
|
||
```
|
||
|
||
## 支持的模块
|
||
|
||
- **ShopGenerator**: 输出到 `/Users/gxwebsoft/VUE/template-10550/src/shop/`
|
||
- **CmsGenerator**: 输出到 `/Users/gxwebsoft/VUE/template-10550/src/cms/`
|
||
|
||
## 自定义配置
|
||
|
||
如需修改输出路径，可以编辑生成器中的常量：
|
||
|
||
```java
|
||
// UniApp文件输出目录
|
||
private static final String OUTPUT_LOCATION_UNIAPP = "/Users/gxwebsoft/VUE/template-10550";
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. 生成前请确保目标目录存在
|
||
2. 建议先备份现有文件
|
||
3. 生成的代码可能需要根据具体业务调整
|
||
4. 确保对应的 API 文件已经生成
|