Util应用框架快速入门（三）- UI 快速入门

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