本文是Util應用框架 Angular UI 開發(fā)快速入門教程.

Util前端技術概述

Util 應用框架目前僅支持用于開發(fā)管理后臺的 UI.

本文介紹了 Util UI 的技術特點和功能支持.

UI 技術選型

• Js語言

  • TypeScript

    TypeScript 是 微軟開發(fā)的腳本語言, 擴展了弱類型的 Javascript,提供增強的語法和強類型支持.

    為編輯器代碼提示和語法錯誤檢測奠定堅實基礎.

• Js框架

  • Angular

    Angular 是 Google開發(fā)的 Js框架.

    Angular使用 TypeScript 腳本語言開發(fā), 并采用 RxJs 響應式編程框架.

    Angular 是前端Js三大框架之一,另外兩個是 Vue 和 React.

    Util UI 用于開發(fā)管理后臺,選擇 Angular 是因為它的語法最優(yōu)雅, 也最符合后端開發(fā)人員的習慣.

• Angular 組件庫

  • Ng Zorro

    Ng Zorro 是阿里 Ant Design 的 Angular 版本,提供 80+ 常用組件,覆蓋大部分業(yè)務開發(fā)場景.

  • Ng Alain

    雖然 Ng Zorro 提供了大量常用組件,但項目開發(fā)需要一個集成度更高的環(huán)境.

    Ng Alain 是一個基架項目, 集成了 Ng Zorro 組件,提供業(yè)務開發(fā)的項目模板,除了菜單導航等框架元素,還有很多開箱即用的業(yè)務處理頁面模板.

• Angular 微前端框架

  • Angular Module Federation

    如果你的項目包含大量 Angular 模塊,所有文件在同一個項目中,會導致開發(fā)環(huán)境卡頓和緩慢.

    發(fā)布項目也可能需要很長時間.

    另外,如果某個模塊需要進行修改,哪怕只修改一行代碼,也需要對所有模塊重新發(fā)布.

    與后端的微服務類似,微前端是前端的項目拆分方法.

    微前端將不同的 Angular 模塊拆分到不同項目中,可以獨立開發(fā),獨立測試和獨立部署.

    無論你是否使用微服務架構,均可使用微前端拆分方式.

    Angular Module Federation 是基于Webpack模塊聯(lián)合的Angular微前端解決方案.

Util Angular UI 特點

• 使用 Visual Studio 開發(fā)工具

  前端開發(fā)一般使用 Visual Studio Code , 不過 Util Angular UI主要使用 Razor 頁面,使用 Visual Studio 更方便.

• 組件擴展支持

  除了支持 Ng Zorro 原生功能外,Util UI還對常用組件進行了擴展.

  最重要的擴展是支持常用組件直接發(fā)出 Api 請求,而不用定義額外的服務.

• Razor TagHelper 支持

  Util Angular UI不僅可以使用 html 頁面,還能使用 .Net Razor 頁面.

  Razor 頁面可以使用 TagHelper 服務端標簽.

  Util 已將大部分 Ng Zorro 組件封裝為 TagHelper 標簽.

  除了獲得強類型提示外,TagHelper 作為抽象層,提供更簡潔的標簽語法.

  另一個強大之處在于Lambda表達式支持, 可以將DTO直接綁定到 TagHelper 標簽上.

  能夠從Lambda表達式提取元數(shù)據(jù),并自動設置大量常用屬性,比如name,驗證,模型綁定等.

• 前后分離

  一些開發(fā)人員看到 Util Angular UI 使用 .Net Razor 頁面,可能認為 UI 與 .Net 高度耦合,但現(xiàn)在的趨勢是前后分離.

  所謂前后分離,是前端UI和后端API沒有依賴,更換某一端對另一端沒有影響.

  另外,前后分離后,前端UI和后端API可以由不同的開發(fā)人員完成.

  .Net Razor頁面僅在開發(fā)階段提供幫助,在發(fā)布時, Razor 頁面會轉(zhuǎn)換為 html ,后續(xù)發(fā)布流程與純前端開發(fā)方式相同.

  一旦發(fā)布成功,將完全脫離.Net 環(huán)境,可以使用 Nginx 容器承載它.

  發(fā)布后的產(chǎn)物,與你使用純前端方式開發(fā)打包沒有區(qū)別.

  如果你喜歡,可以把后端API換成JAVA,也能正常運行.

• 配套Api支持

  前端UI和后端API的開發(fā)是兩個完全不同的領域.

  但開發(fā)一個功能,又需要前端和后端的配合,他們需要溝通,作出一些約定.

  對于配合不到位的團隊,前后端的溝通成本可能很高,另外提供的API可能無法滿足UI的需求,從而讓前端代碼變得畸形.

  通常.Net開發(fā)人員的Js編程功底高于常規(guī)前端人員,前端人員更擅長樣式布局.

  Util Angular UI 不僅提供對前端組件的封裝,同時也為常見功能提供 Api 支持.

  對于使用 Util Angular UI 的團隊, 將 UI 和 API 交給同一個.Net開發(fā)人員就是最好的選擇.

  前端人員僅調(diào)整界面樣式即可.

  不僅減少了溝通成本, API和前端組件的高度集成封裝,讓常規(guī)功能的開發(fā)效率得到大幅提升.

  當然,這對 .Net 開發(fā)人員的水平有一定要求.

• 本地化支持

  得益于 Ng Alain 本地化的良好設計, 可以使用 i18n 管道進行文本的本地化轉(zhuǎn)換.

  '文本' | i18n
  

  不過對于需要支持本地化的項目,這依然是一個負擔,每個表單項,每個表格項,每個文本,可能都需要添加 i18n 管道.

  Util Angular UI 讓本地化開發(fā)更進一步,對大部分組件提供了本地化支持,只有極少數(shù)文本需要手工添加 i18n 管道.

• 授權訪問支持

  Ng Alain提供了授權訪問的支持.

  Util Platform權限模塊基于資源和角色的設計,可以很好的與 Ng Alain授權進行集成.

  你可以控制菜單和任意區(qū)域根據(jù)權限顯示和隱藏.

• 微前端支持

  Util Angular UI 引入了 Angular Module Federation , 能夠?qū)?Angular 模塊拆分到不同項目中,可以獨立開發(fā),獨立測試和獨立部署.

  對于大中型項目,這是非常有必要的.

Util Angular UI 功能列表

Util Angular UI 主要由 util-angular 和 Util.Ui.NgZorro 兩個庫提供支持.

• util-angular 功能列表

  util-angular 是一個 Js 庫, 由Curd組件基類, Ng Zorro常用組件擴展指令和一組工具類組成.

  • 基礎類型

    • ViewModel - 視圖模型基類
    • TreeViewModel - 樹形視圖模型基類
    • TreeNode - 樹形節(jié)點基類
    • PageList - 分頁列表
    • QueryParameter - 查詢參數(shù)基類
    • TreeQueryParameter - 樹形查詢參數(shù)基類
    • Result - 服務端返回結果
    • StateCode - 服務端狀態(tài)碼約定
    • SelectItem - 列表項
    • SelectList - 列表
    • SelectOptionGroup - 列表配置組
    • SelectOption - 列表配置項

  • 工具類

    • 瀏覽器本地存儲操作
    • Cookie操作
    • 事件總線操作
    • 本地化操作
    • Ioc操作
    • 加載操作
    • 路由操作
    • 彈出層操作
    • 抽屜操作
    • 表單操作
    • Http操作
    • Web Api操作
    • 消息操作
    • ...

  • Crud組件基類

    • 編輯組件基類
    • 表格編輯組件基類
    • 樹形編輯組件基類
    • 查詢組件基類
    • 表格查詢組件基類
    • 樹形表格查詢組件基類

  • Ng Zorro指令擴展

    • 必填項驗證擴展指令
    • 驗證消息擴展指令
    • Ng Zorro 按鈕擴展指令
    • Ng Zorro 選擇框擴展指令
    • Ng Zorro 表格擴展指令
    • Ng Zorro 表格編輯擴展指令
    • Ng Zorro 樹形表格擴展指令
    • Ng Zorro 樹形擴展指令
    • Ng Zorro 上傳擴展指令

• Util.Ui.NgZorro 庫介紹

  Util.Ui.NgZorro 是一個 C# 類庫,包含 TagHelper標簽和樹形控制器等類型.

  絕大部分 Ng Zorro 組件已經(jīng)封裝.

  由于組件很多,就不一一列出.

Util Angular UI 已知缺陷

Util Angular UI 在提供大量支持的同時,也存在一些缺陷.

• 開發(fā)階段運行比較緩慢

  與 Visual Studio Code 相比,使用 Visual Studio 開發(fā) Angular 項目要慢一些,如果使用了 Resharper 插件,則會更慢.

  除開發(fā)工具影響外, Util Angular UI 在開發(fā)階段需要啟用 Angular JIT( 即時編譯 ), 運行會變慢.

  另外, Util Angular UI 在開發(fā)階段需要訪問 Razor 頁面,每當項目啟動,Angular 主模塊加載的所有組件都會發(fā)出 Razor 頁面請求.

  不過運行緩慢僅存在于開發(fā)階段,一旦發(fā)布,則與純前端開發(fā)方式的運行速度相同.

• 無法使用 Angular 常規(guī)延遲加載方式

  你不能使用 loadChildren 延遲加載模塊,這是因為開發(fā)階段組件的 templateUrl 指向 Razor 頁面地址, 必須使用 Angular JIT 模式,等待運行時再獲取組件模板.

  這個問題從 Angular 13 開始出現(xiàn), Angular 13棄用了傳統(tǒng)的視圖引擎, 使用 loadChildren 加載指向 Razor 頁面地址的組件會報異常.

  解決它的方法是使用微前端方案延遲加載模塊, 當然你也可以回退到 Angular 13之前的版本.

  在同一個 Util Angular UI 項目中,你必須把所有的子模塊加載到主模塊中,并配置微前端將子模塊發(fā)布為可獨立加載包.

Util Angular UI 適合你嗎?

Util Angular UI 是為 .Net 全棧工程師準備的,如果你更喜歡使用 Visual Studio 開發(fā),喜歡代碼提示,喜歡更簡潔的語法,希望開發(fā)的成本更低,它就適合你.

環(huán)境準備: 安裝 NodeJs

NodeJs 是 JavaScript 運行時環(huán)境,前端開發(fā)需要它.

本文幫助你安裝 NodeJs 相關環(huán)境.

打開 NodeJs下載頁面, 下載Windows LTS版本.

如果需要下載 NodeJs特定版本, 點擊進入.

下載后安裝,全部默認下一步即可.

查看 NodeJs 版本

執(zhí)行命令:

node -v

如果顯示以下提示,則說明安裝成功.

查看 NPM 版本

NPM 是 NodeJs 的包管理器.

安裝 NodeJs 會自動安裝 NPM.

執(zhí)行命令:

npm -v

啟用 Yarn

Yarn 是一個NPM客戶端,比自帶的NPM客戶端更快,更安全.

Yarn 不再需要單獨安裝,只需啟用即可.

執(zhí)行命令:

corepack enable

查看 Yarn 版本

yarn -v

如果顯示以下提示,則說明安裝成功.

配置 Yarn 加速地址

國內(nèi)直接拉取NPM包十分緩慢,需要配置鏡像地址.

配置 Yarn 淘寶鏡像

yarn config set registry https://registry.npmmirror.com
yarn config set sass_binary_site https://npmmirror.com/mirrors/node-sass

還原 Yarn 倉庫地址

如果需要還原為原始地址, 執(zhí)行命令:

yarn config delete registry
yarn config delete sass_binary_site

Util UI 快速入門

本文演示Util應用框架 Angular UI 開發(fā)的基本流程.

準備

拉取 Util 代碼生成項目最新代碼.

重要: 務必執(zhí)行此步驟.

生成 UI 項目基架

打開Util代碼生成項目解決方案 Util.Generator.sln .

將項目 Util.Generators.Console 設置為啟動項目.

打開 appsettings.json 配置文件,修改 ProjectType 配置項為 UI.

如果需要修改數(shù)據(jù)庫類型,參考 Web API 開發(fā)快速入門.

重新生成 Util.Generators.Console 項目, 按 F5 鍵啟動控制臺開始生成.

進入 D:\Output\Demo 目錄,可以看到生成的 Demo 項目.

運行示例項目

打開示例項目解決方案 Demo.sln.

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

還原npm包并啟動Angular開發(fā)服務器

進入 D:\Output\Demo\src\Demo.Ui\ClientApp 目錄, 它是 Angular 前端項目目錄.

該目錄包含 start.ps1 腳本文件,運行該腳本.

.\start.ps1

該腳本的內(nèi)容很簡單,還原npm,然后啟動.

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

如果你手工執(zhí)行 yarn 命令,請務必添加 --ignore-optional 選項,否則安裝可能卡住.

安裝過程可能出現(xiàn)如下提示,是否向Google發(fā)送Angular項目的統(tǒng)計信息, 輸入 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.

執(zhí)行完成, Angular CLI 啟動開發(fā)服務器, 如下所示.

運行 Demo.Ui 項目

UI 的運行需要訪問 API ,下面設置同時啟動 Demo.Ui 和 Demo.Api 項目.

右鍵點擊VS解決方案,彈出菜單選擇 配置啟動項目.

彈出啟動配置窗口, 選擇 啟動項目 -> 多個啟動項目, 將 Demo.Ui 和 Demo.Api 項目 設置為 啟動 ,點擊 確定 按鈕.

按 F5 鍵 啟動項目.

UI項目啟動界面如下.

生成的UI項目為 Angular 微前端模塊項目, 主界面導航菜單和頂部菜單等僅用于開發(fā)階段.

dashboard組件僅用于占位,頂部菜單也做了簡化,僅保留多語言切換.

發(fā)布后, 由微前端基架項目提供主界面,并延遲加載業(yè)務模塊.

如果按 F12 鍵,你會看到一個錯誤消息.

Shared module is not available for eager consumption

這個錯誤是由微前端框架提示的, 原因是開發(fā)階段使用了 Angular JIT 編譯方式.

該錯誤消息從 Angular 16 開始出現(xiàn), 并且對開發(fā)沒有什么影響, 目前尚未找到消除它的方法.

項目發(fā)布使用 Angular AOT 編譯方式,所以在發(fā)布以后會自動消失.

{{% alert title="提示" color="warning" %}}
API項目可能比UI項目啟動慢,這會導致UI無法加載數(shù)據(jù),只需等待API項目啟動完成,重新刷新一下即可.

編輯學生示例

打開學生示例頁面

點擊 學生 菜單項,打開示例頁面.

生成的界面是一個簡單的表格,提供CRUD基礎操作.

修改查詢條件

查詢條件按字段生成,如果字段很多,可能顯示很亂.

Student 示例業(yè)務模塊指向的 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>

刷新頁面.

創(chuàng)建學生示例

點擊 創(chuàng)建 按鈕,彈出創(chuàng)建學生對話框.

性別 字段應為枚舉類型,但生成的代碼為 int 類型,需要進行修改.

定義性別枚舉

VS 打開領域?qū)禹椖?Demo.Domain .

添加 Enums 目錄, 添加 Gender.cs 文件, 創(chuàng)建 Gender 枚舉 .

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

如下圖所示.

修改學生實體性別屬性類型

VS 打開領域?qū)?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屬性,從而獲取元數(shù)據(jù),幫你自動完成常用設置.

修改學生年齡組件

年齡可以通過出生年月計算,這里只是為了演示數(shù)值類型.

年齡是一個數(shù)值類型,應該使用數(shù)值輸入框.

<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 數(shù)據(jù)注解是更好的方法.

Util 會查找數(shù)據(jù)注解并轉(zhuǎn)換成 Ng Zorro 輸入框組件的驗證屬性,由于數(shù)據(jù)注解可以保護服務端API,所以兩端均得到同步驗證.

在 StudentDto 類的IdCard屬性上添加 [Required] 和 [IdCard] 數(shù)據(jù)注解.

Required是必填項驗證,IdCard是身份證驗證.

查看學生示例編輯頁

修改結束,重新運行 UI 和 API,打開 創(chuàng)建學生 對話框.

創(chuàng)建學生表單現(xiàn)在已經(jīng)具備基本功能.

• 姓名 輸入框已添加必填項驗證
• 性別 顯示為單選按鈕
• 年齡 顯示為數(shù)值輸入框,只能輸入數(shù)字
• 出生日期 顯示為日期輸入框,只能選擇日期.
• 身份證 輸入框只能輸入有效身份證.
• 啟用 顯示為開關,只能選擇布爾值.
• 當驗證未通過時, 提交按鈕處于禁用狀態(tài),不可點擊.

提交創(chuàng)建學生表單

下面輸入一些正常的數(shù)據(jù),并提交創(chuàng)建表單.

創(chuàng)建成功,學生列表顯示一條數(shù)據(jù).

查看學生詳請

點擊學生列表 詳情 鏈接, 彈出 學生詳情 對話框.

詳情頁使用 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 項目,打開學生詳請頁面,可以看到,性別已經(jīng)更新.

刪除學生示例

點擊學生列表 刪除 鏈接, 彈出刪除確認提示,點擊確定刪除學生.

切換語言

點擊主界面右上角設置按鈕,選擇 語言 -> English,切換到英語.

首頁如下所示.

編輯頁如下所示.

詳情頁如下所示.

可以看到,Util Angular UI 通過Lambda表達式的封裝對多語言的支持幾乎是透明的.文章來源地址http://www.zghlxwxcb.cn/news/detail-711063.html

到了這里，關于Util應用框架 UI 開發(fā)快速入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！