UI 快速入门

Util应用框架 Angular UI 快速入门

本节演示Util应用框架 Angular UI 开发的基本流程.

准备

拉取 Util 代码生成项目最新代码.

重要: 务必执行此步骤.

生成 UI 项目基架

打开Util代码生成项目解决方案 Util.Generator.sln .

将项目 Util.Generators.Console 设置为启动项目.

打开 appsettings.json 配置文件,修改 ProjectType 配置项为 UI.

如果需要修改数据库类型,参考 Web API 开发快速入门.

重新生成 Util.Generators.Console 项目, 按 F5 键启动控制台开始生成.

进入 D:\Output\Demo 目录,可以看到生成的 Demo 项目.

运行示例项目

打开示例项目解决方案 Demo.sln.

可以看到,新增了 Demo.Ui 项目.

还原npm包并启动Angular开发服务器

进入 D:\Output\Demo\src\Demo.Ui\ClientApp 目录, 它是 Angular 前端项目目录.

该目录包含 start.ps1 脚本文件,运行该脚本.

.\start.ps1

该脚本的内容很简单,还原npm,然后启动.

Write-Host "install npm..."
yarn --ignore-optional
Write-Host "npm start..."
npm start

如果你手工执行 yarn 命令,请务必添加 –ignore-optional 选项,否则安装可能卡住.

安装过程可能出现如下提示,是否向Google发送Angular项目的统计信息, 输入 N,回车.

Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.io/analytics.

执行完成, Angular CLI 启动开发服务器, 如下所示.

运行 Demo.Ui 项目

UI 的运行需要访问 API ,下面设置同时启动 Demo.Ui 和 Demo.Api 项目.

右键点击VS解决方案,弹出菜单选择 配置启动项目.

弹出启动配置窗口, 选择 启动项目 -> 多个启动项目, 将 Demo.Ui 和 Demo.Api 项目 设置为 启动 ,点击 确定 按钮.

按 F5 键 启动项目.

UI项目启动界面如下.

生成的UI项目为 Angular 微前端模块项目, 主界面导航菜单和顶部菜单等仅用于开发阶段.

dashboard组件仅用于占位,顶部菜单也做了简化,仅保留多语言切换.

发布后, 由微前端基架项目提供主界面,并延迟加载业务模块.

如果按 F12 键,你会看到一个错误消息.

Shared module is not available for eager consumption

这个错误是由微前端框架提示的, 原因是开发阶段使用了 Angular JIT 编译方式.

该错误消息从 Angular 16 开始出现, 并且对开发没有什么影响, 目前尚未找到消除它的方法.

项目发布使用 Angular AOT 编译方式,所以在发布以后会自动消失.

提示

API项目可能比UI项目启动慢,这会导致UI无法加载数据,只需等待API项目启动完成,重新刷新一下即可.

编辑学生示例

查看学生示例页面

点击 学生 菜单项,打开示例页面.

生成的界面是一个简单的表格,提供CRUD基础操作.

修改查询条件

查询条件按字段生成,如果字段很多,可能显示很乱.

Student 示例业务模块指向的 Razor 页面位于 Demo.Ui\Pages\Routes\Demos\Student 下.

打开 Index.Query.cshtml, 修改查询条件.

@model StudentQuery

<util-form class="search__form">
    <util-row align="Top">
        <util-column flex="1 1 0px">
            <util-row gutter="24">
                <util-column sm="6" xs="24">
                    <util-input for="Name"/>
                </util-column>
                <util-column sm="6" xs="24">
                    <util-input for="Gender"/>
                </util-column>    
                <util-column sm="4" xs="24">
                    <util-date-picker for="BeginBirthday"/>
                </util-column>
                <util-column sm="4" xs="24">
                    <util-date-picker for="EndBirthday"/>
                </util-column>                
            </util-row>
        </util-column>
        <util-column flex="200px">
            <util-row justify="End">
                <util-button id="btnQuery" type="Primary" icon="Search" on-click="query(btnQuery)" text-query="true"></util-button>
                <util-button id="btnRefresh" icon="Sync" on-click="refresh(btnRefresh)" text-refresh="true"></util-button>
            </util-row>
        </util-column>
    </util-row>
</util-form>

刷新页面.

创建学生示例

点击 创建 按钮,弹出创建学生对话框.

性别 字段应为枚举类型,但生成的代码为 int 类型,需要进行修改.

定义性别枚举

VS 打开领域层项目 Demo.Domain .

添加 Enums 目录, 添加 Gender.cs 文件, 创建 Gender 枚举 .

/// <summary>
/// 性别
/// </summary>
public enum Gender {
    /// <summary>
    /// 女
    /// </summary>        
    [Description("util.female")]
    Female = 1,
    /// <summary>
    /// 男
    /// </summary>
    [Description("util.male")]
    Male = 2
}

如下图所示.

修改学生实体性别属性类型

VS 打开领域层 Student.Base.cs 文件, 修改 Gender 属性.

/// <summary>
/// 性别
///</summary>
[DisplayName( "性别" )]
public Enums.Gender? Gender { get; set; }

修改学生DTO性别属性类型

VS 打开应用层 Demo.Application 项目 StudentDto.cs 文件, 修改 Gender 属性.

/// <summary>
/// 性别
///</summary>
[Display( Name = "demo.student.gender" )]
public Domain.Enums.Gender? Gender { get; set; }

如下所示.

修改学生编辑页面

VS 打开 Demo.Ui\Pages\Routes\Demos\Student\Edit.cshtml 文件.

修改学生性别组件

删除 性别 输入框.

<util-input for="Gender" />

添加单选按钮,当输入 <util ,就会看到 Ng Zorro 组件提示,选择 util-radio, 如下所示.

表单组件和一些与字段相关的组件支持 for 属性,用于绑定DTO属性,从而获取元数据,帮你自动完成常用设置.

修改学生年龄组件

年龄可以通过出生年月计算,这里只是为了演示数值类型.

年龄是一个数值类型,应该使用数值输入框.

<util-input for="Age" />

修改为

<util-input-number for="Age" />

修改完成,代码如下所示.

@page
@model StudentDto

@*标题*@
<util-page-header2 title-create="demo.student.create" title-update="demo.student.update" auto-breadcrumb="false" sync-title="false"></util-page-header2>
@*表单*@
<util-card borderless="true">
    <util-form label-span="4" control-span="20" gutter="16">
        <util-input for="Name" />
        <util-radio for="Gender"></util-radio>
        <util-input-number for="Age" />
        <util-date-picker for="Birthday" />
        <util-input for="IdCard" />
        <util-switch for="Enabled" />
        <util-modal-footer>
            <util-button on-click="close()" text-cancel="true"></util-button>
            <util-button id="btnSubmit" is-submit="true" validate-form="true" type="Primary" on-click="submit(btnSubmit)" text-ok="true"></util-button>
        </util-modal-footer>
    </util-form>
</util-card>

添加学生身份证验证

下面使用身份证属性来演示如何添加基础验证.

你可以直接在输入框组件上设置验证属性,不过挨个设置比较费力,另外服务端也需要验证.

在DTO属性上设置 DataAnnotations 数据注解是更好的方法.

Util 会查找数据注解并转换成 Ng Zorro 输入框组件的验证属性,由于数据注解可以保护服务端API,所以两端均得到同步验证.

在 StudentDto 类的IdCard属性上添加 [Required] 和 [IdCard] 数据注解.

Required是必填项验证,IdCard是身份证验证.

查看学生示例编辑页

修改结束,重新运行 UI 和 API,打开 创建学生 对话框.

创建学生表单现在已经具备基本功能.

• 姓名 输入框已添加必填项验证
• 性别 显示为单选按钮
• 年龄 显示为数值输入框,只能输入数字
• 出生日期 显示为日期输入框,只能选择日期.
• 身份证 输入框只能输入有效身份证.
• 启用 显示为开关,只能选择布尔值.
• 当验证未通过时, 提交按钮处于禁用状态,不可点击.
• 
  

提交创建学生表单

下面输入一些正常的数据,并提交创建表单.

创建成功,学生列表显示一条数据.

查看学生详请

点击学生列表 详情 链接, 弹出 学生详情 对话框.

详情页使用 Ng Zorro 描述列表组件,无法直接显示枚举类型,性别显示枚举值 2,需要修改.

StudentDto 添加 GenderDescription 属性,如下所示.

/// <summary>
/// 性别
///</summary>
[Display(Name = "demo.student.gender")]
public string GenderDescription => Gender.Description();

打开 Detail.cshtml 详情页.

<util-descriptions-item for="Gender"></util-descriptions-item>

修改为

<util-descriptions-item for="GenderDescription"></util-descriptions-item>

重新运行 UI 项目,打开学生详请页面,可以看到,性别已经更新.

删除学生示例

点击学生列表 删除 链接, 弹出删除确认提示,点击确定删除学生.

切换语言

点击主界面右上角设置按钮,选择 语言 -> English,切换到英语.

首页如下所示.

编辑页如下所示.

详情页如下所示.

可以看到,Util Angular UI 通过Lambda表达式的封装对多语言的支持几乎是透明的.