# 开发第一个应用

# 概述

本教程将完整演示应用开发的全过程，以"商机登记"应用为例，涵盖从实体定义到前端界面的每个关键步骤。

# 一、开发步骤

# 1. 创建实体类

位置：Web项目/Apps/Entities/

操作步骤：

复制SampleDevice.cs文件
重命名为SalesOpportunity.cs

修改文件内容：

// 修改表名（第9行）
[Table("app_sales_opportunities")]

// 修改类名（第10行）
public class SalesOpportunity
{
// 删除原有字段，替换为以下字段定义：
    [Key]
    [MaxLength(50)]
    public string Id { get; set; }

    [MaxLength(100)]
    public string Company { get; set; } // 公司名称

    [MaxLength(50)]
    public string Contact { get; set; } // 联系人

    [MaxLength(30)]
    public string Mobile { get; set; } // 联系电话

    [MaxLength(50)]
    public string EMail { get; set; } // 电子邮箱

    public DateTime RegisterDate { get; set; } // 登记日期

    [MaxLength(500)]
    public string Remarks { get; set; } // 备注
}

# 2. 在DbContext中登记实体类

位置：Apps/AppDbContext.cs

操作步骤：

打开AppDbContext.cs文件

在DbSet区域添加实体登记（约14行后）：

public DbSet<SalesOpportunity> SalesOpportunities { get; set; }

# 3. 添加种子数据（可选）

位置：AppDbContext.cs中的CreateSeedData方法（约35行后）

操作步骤：

// 在现有种子数据后添加（约73行后）
modelBuilder
    .Entity<SalesOpportunity>()
    .HasData(
        new SalesOpportunity
        {
            Id = "100",
            Company = "长江电子",
            Contact = "张三",
            Mobile = "12345678",
            RegisterDate = new DateTime(2023, 1, 8)
        });

说明：添加种子数据后，数据库表创建时会自动插入一条初始数据。

# 4. 创建后台控制器

位置：Controllers/

操作步骤：

复制SampleDeviceController.cs文件
重命名为SalesOpportunityController.cs

修改关键部分：

// 第17行：修改服务路由地址
[Route("app/sales/opportunity")]

// 第19行：修改类名及泛型参数
public class SalesOpportunityController : AppControllerBase<SalesOpportunity>

// 第21行：修改构造函数名
public SalesOpportunityController(...)

删除不需要的代码（原25-29行的GetQueryable方法）

// 删除以下代码：
protected override IQueryable<SampleDevice> GetQueryable()
{
    return dbContext.SampleDevices
        .Include(x => x.DeviceType);
}

# 5. 创建前端界面

位置：wwwroot/Apps/

操作步骤：

在Apps文件夹下创建sales子文件夹
复制samples/Device.js到sales目录
重命名为SalesOpportunity.js

修改关键配置：

// 第2行：修改类名
Ext.define('Apps.sales.SalesOpportunity', {

// 第4行：修改服务地址
serviceUrl: Yiez.$url('app/sales/opportunity'),

// 第5行：准备修改表单ID（后续步骤完成）
formId: '待替换的表单ID',

// 把第23-36行替换为以下列定义
columns: [
    { text: '编号', dataIndex: 'Id', width: 30, hidden: true },
    { text: '公司名称', dataIndex: 'Company', width: 150, align: 'left', sortable: true },
    { text: '联系人', dataIndex: 'Contact', width: 150, align: 'left', sortable: true },
    { text: '联系电话', dataIndex: 'Mobile', width: 150, align: 'left', sortable: true },
    { text: '电子邮箱', dataIndex: 'EMail', width: 150, align: 'left', hidden: true },
    { text: '登记日期', dataIndex: 'RegisterDate', width: 160, align: 'left', formatter: 'date("Y-m-d")' },
    { text: '备注', dataIndex: 'Remarks', flex:1, align: 'left', sortable: true }
],

// 第15行：修改默认排序列
property: 'RegisterDate'

# 6. 生成数据库迁移

操作步骤：

打开 程序包管理器控制台（VS菜单：工具 → NuGet包管理器 → 程序包管理器控制台）
执行以下命令生成迁移：
```
Add-Migration v1
```
注意：命令执行后会在项目的 Migrations 文件夹中生成迁移文件。
生成SQL脚本：
```
Script-Migration -Idempotent
```
在 SQL Server 中执行生成的 SQL 脚本：
- 选择WebApps数据库，粘贴SQL并执行
- 确认app_sales_opportunities表已创建

# 7. 配置应用菜单

位置：Apps/Navigator/

操作步骤：

修改主菜单配置文件SamplesController.cs：

// 在现有模块后添加（约40行后）：
new {
    id = "app_sales",
    title = "销售管理",
    navigator = new {
        leafOnly = true,
        dataURL = Url.Content("~/navigator/app/samples/sales")
    }
}

创建子菜单控制器：

复制Samples/ConceptController.cs
重命名为Sales.cs
修改关键部分：

// 第16、22行：把ConceptController替换为SalesController
public class SalesController : Controller
public SalesController(...)

// 第14行：修改路由地址
[Route("navigator/app/samples/sales")]

// 配置商机登记菜单项，删除不需要的行，留下一个子模块，修改为：
new {
    id = "商机登记",
    text = "商机登记",
    glyph = 0xea9c,
    xclass = "Apps.sales.SalesOpportunity"
}

# 8. 设计表单

操作位置：集团流程库 → 表单设计

操作步骤：

点击"添加"，创建新表单
添加字段：客户名称、联系人、电话、登记日期
开启高级存储模式
点击"添加存储表"，在弹出的数据库树中：
- 展开WebApps数据库
- 选择app_sales_opportunities表
配置字段映射：
- 客户名称 → Company
- 联系人 → Contact
- 电话 → Mobile
- 登记日期 → RegisterDate
保存表单，命名为"商机登记"
重要：右键表单 → 复制表单ID

# 9. 关联表单与应用

位置：wwwroot/Apps/sales/SalesOpportunity.js

操作步骤：

修改第5行formId的值为商机登记表单的ID

formId: '3a1b51c5-7a26-dfd5-f626-05b2030ccf6a', // 替换为实际的表单ID

保存文件

# 二、运行和测试

启动应用：按Ctrl+F5运行网站
访问应用中心：https://localhost:5001/app/samples

功能验证：

功能项	验证步骤	预期结果
菜单显示	访问应用中心	显示"销售管理"模块
列表显示	访问销售管理 → 商机登记	显示种子数据"长江电子"
表单打开	点击"添加"按钮	正确打开商机登记表单
新增功能	填写表单并保存	数据成功保存并显示在列表
编辑功能	选中数据 → 点击"编辑" → 修改后保存	数据更新成功
搜索功能	输入关键字搜索	正确过滤显示结果
排序功能	点击列标题	按指定列排序
删除功能	选中数据 → 点击"删除"	数据从列表中移除

# 三、核心要点与总结

# 开发流程概览

定义数据结构：创建实体类
配置数据层：登记实体、可选种子数据
实现业务层：创建后台控制器
构建表示层：开发前端界面
更新数据库：生成并执行迁移
配置导航：设置菜单入口
表单设计 - 设计数据录入界面
表单关联 - 将表单与应用关联

# 关键注意事项

数据库同步：修改实体或DbContext后需重新生成迁移
表单ID：务必正确配置，否则表单无法打开
命名一致：前后端名称需保持统一
代码复用：充分利用模板文件提高效率

# 平台价值体现

标准化：提供清晰、统一的开发模式
高效性：基于模板和自动化工具，快速完成开发
灵活性：兼顾简单应用与复杂业务场景
质量保障：内置最佳实践和成熟框架支持

# 后续学习建议

掌握基础流程后，可进一步：

为应用添加更多字段和业务逻辑
基于此模式开发更复杂的业务系统
探索平台的外部系统集成能力
根据需求定制前端UI组件

掌握以上开发流程后，您可以独立开发各种业务应用。建议从简单应用开始实践，逐步掌握所有开发环节。通过实践不断提高熟练度，您将能够高效开发各类企业级应用。

← 初始化应用开发环境存id显示名字 →