开发及测试

本章节介绍如何基于下载的模板进行业务开发，包括后端接口开发、前端页面开发以及测试调试等内容。

后端开发

项目结构

下载的后端模板项目结构如下：

incloud-biz-demo/
├── src/main/java/com/netwisd/biz/demo/
│   ├── config/           # 配置类
│   ├── controller/       # 控制器层
│   ├── service/          # 服务层
│   │   └── impl/         # 服务实现
│   ├── mapper/           # 数据访问层
│   ├── entity/           # 实体类
│   ├── dto/              # 数据传输对象
│   ├── vo/               # 视图对象
│   └── DemoApplication.java  # 启动类
├── src/main/resources/
│   ├── application.yaml  # 应用配置
│   └── logback-spring.xml # 日志配置
├── Dockerfile            # Docker构建文件
└── pom.xml               # Maven配置

使用代码生成

推荐使用平台提供的代码生成工具快速创建CRUD代码：

方式一：数据建模（推荐）

登录平台管理端
进入"应用 -> 低代码开发 -> 数据建模"
创建数据模型，定义字段
点击"生成代码"下载完整的后端和前端代码

详见：数据建模

方式二：后台代码生成

使用incloud-codegen模块进行代码生成：

@SpringBootTest
public class CodeGenTest {
    @Autowired
    private GenService genService;

    @Test
    public void generate() {
        genService.generate(
            "/Users/xxx/gen/",     // 生成路径
            "demo",                 // appCode
            "incloud_biz_demo_order", // 表名
            "订单表",               // 表注释
            "single",              // 模板类型：single/single-wf
            "com.netwisd.biz",     // 包名
            "demo",                // 模块名
            "incloud_biz_",        // 表前缀
            Arrays.asList()        // 排除项
        );
    }
}

详见：代码生成

开发规范

Entity实体类

@Data
@TableName("incloud_biz_demo_order")
@Table(value = "incloud_biz_demo_order", comment = "订单表")
public class DemoOrder extends AbstractEntity<DemoOrder> {

    @Schema(description = "订单编号")
    @TableField("order_no")
    @Column(type = DataType.VARCHAR, length = 50, isNull = false, comment = "订单编号")
    private String orderNo;

    @Schema(description = "订单金额")
    @TableField("amount")
    @Column(type = DataType.DECIMAL, length = 10, precision = 2, comment = "订单金额")
    private BigDecimal amount;
}

Service服务层

public interface IDemoOrderService extends IBaseService<DemoOrder> {
    // 自定义业务方法
    Result<DemoOrderVo> getOrderDetail(Long id);
}

@Service
public class DemoOrderServiceImpl
    extends AbstractBaseService<DemoOrderMapper, DemoOrder>
    implements IDemoOrderService {

    @Override
    public Result<DemoOrderVo> getOrderDetail(Long id) {
        DemoOrder order = getById(id);
        return Result.success(DozerUtils.map(order, DemoOrderVo.class));
    }
}

Controller控制器

@RestController
@RequestMapping("/demo/order")
@Tag(name = "订单管理")
public class DemoOrderController
    extends AbstractBaseController<IDemoOrderService, DemoOrder> {

    @Operation(summary = "获取订单详情")
    @GetMapping("/detail/{id}")
    public Result<DemoOrderVo> getDetail(@PathVariable Long id) {
        return service.getOrderDetail(id);
    }
}

启动后端服务

确保中间件已启动（Nacos、MySQL、Redis等）
配置环境变量
运行启动类

# 或使用Maven
mvn spring-boot:run

前端开发

项目结构

incloud-biz-demo-web/
├── public/               # 静态资源
├── src/
│   ├── api/              # API接口定义
│   ├── views/            # 页面组件
│   ├── components/       # 公共组件
│   ├── router/           # 路由配置
│   └── utils/            # 工具函数
├── build.ts              # 构建配置
├── vite.config.ts        # Vite配置
└── package.json          # 依赖配置

安装依赖

# 安装pnpm（如未安装）
npm install -g pnpm

# 安装项目依赖
pnpm install

开发页面

API接口定义

// src/api/order.ts
import { request } from '@platform-lib/base'

export const orderApi = {
  // 获取订单列表
  getList: (params: any) => request.get('/demo/order/list', { params }),

  // 获取订单详情
  getDetail: (id: number) => request.get(`/demo/order/detail/${id}`),

  // 新增订单
  create: (data: any) => request.post('/demo/order', data),

  // 更新订单
  update: (data: any) => request.put('/demo/order', data),

  // 删除订单
  delete: (id: number) => request.delete(`/demo/order/${id}`)
}

列表页面

<template>
  <NwTableLayout>
    <template #search>
      <NwTableLayoutSearch :form-data="searchForm" @search="handleSearch" />
    </template>
    <template #toolbar>
      <NwToolbar :buttons="toolbarButtons" />
    </template>
    <template #table>
      <vxe-table :data="tableData" :loading="loading">
        <vxe-column field="orderNo" title="订单编号" />
        <vxe-column field="amount" title="金额" />
        <vxe-column title="操作" width="150">
          <template #default="{ row }">
            <t-button theme="primary" variant="text" @click="handleEdit(row)">编辑</t-button>
            <t-button theme="danger" variant="text" @click="handleDelete(row)">删除</t-button>
          </template>
        </vxe-column>
      </vxe-table>
    </template>
  </NwTableLayout>
</template>

启动前端

# 开发模式启动
pnpm run dev

# 默认访问地址
# http://localhost:3000

测试调试

后端接口测试

使用Knife4j文档

启动后端服务后，访问 Swagger 文档：

http://localhost:8001/doc.html

可以在线测试所有API接口。

使用Postman/ApiFox

导入OpenAPI文档进行接口测试：

http://localhost:8001/v3/api-docs

前端调试

配置代理

在 vite.config.ts 中配置后端代理：

export default defineConfig({
  server: {
    proxy: {
      '/api/v5.0': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
})

浏览器调试

使用Chrome DevTools进行调试：

Network面板：查看接口请求
Console面板：查看日志输出
Vue DevTools ：调试Vue组件状态

常见问题

问题	解决方案
接口返回401	检查Token是否过期，重新登录获取Token
跨域错误	检查网关配置或前端代理配置
数据库连接失败	检查环境变量和数据库配置
Nacos连接失败	确认Nacos服务已启动且地址正确

下一步

完成开发和测试后，可以进行构建部署：

部署及构建 - 了解如何构建和部署应用

25 十一月 2025