上篇.Net Core應(yīng)用框架Util介紹（二）介紹了Util的開發(fā)環(huán)境，并讓你把Demo運(yùn)行起來。本文將介紹該Demo的前端Angular運(yùn)行機(jī)制以及目錄結(jié)構(gòu)。

?

目錄結(jié)構(gòu)

??　　在VS上打開Util Demo，會看見如下的目錄結(jié)構(gòu)。

　　

　　現(xiàn)代前端通常采用VS Code開發(fā)，不過我們?yōu)榱耸褂肨agHelper，需要采用VS開發(fā)，這為你提供了更多的選擇。?

　　你可以將WebApi和Angular應(yīng)用放在同一個項(xiàng)目中，就像現(xiàn)在看見的那樣。也可以分別把WebApi和Angular應(yīng)用放到不同項(xiàng)目中。?

　　如果你已經(jīng)習(xí)慣了VS Code開發(fā)，這同樣沒問題，不過你將放棄TagHelper帶來的強(qiáng)類型代碼提示和編譯時檢查特性。?

　　對于Angular，它提供了ng cli命令行工具，你可以用ng cli來創(chuàng)建項(xiàng)目結(jié)構(gòu)。

　　前文已簡要介紹了TagHelper，它是用來提升Angular視圖頁面開發(fā)效率的利器。為了使用TagHelper，不得不放棄ng cli，因?yàn)樗恢С衷贏ngular組件上配置服務(wù)端動態(tài)地址。

　　下面介紹這個項(xiàng)目中包含的目錄和文件。

?

Apis目錄

　　這個目錄用來存放Web Api控制器。

　　ApplicationController演示了普通CRUD操作，RoleController演示了樹型層次的CRUD操作。

　　你暫時不要關(guān)心Web Api CRUD操作，我會在后續(xù)介紹。

?

?Areas目錄

?　　用過Asp.Net Mvc的同學(xué)可能知道，Areas就是區(qū)域，它的作用是提供模塊化管理。我們把不同的模塊用Areas的區(qū)域分隔開，這樣在項(xiàng)目規(guī)模變大時，還能迅速找到相關(guān)頁面。

　　與傳統(tǒng)Asp.Net Mvc應(yīng)用不同，Util的Areas控制器并不進(jìn)行任何操作，只是簡單的返回視圖頁面，cshtml僅起到代碼生成器的作用。

　　一個更好的選擇是使用RazorPage,它把控制器和頁面合并了，將來會使用這種方式。?

Configs目錄

?　　你并不需要它，我在Demo中用來放測試配置，項(xiàng)目上我通常把Configs目錄放在應(yīng)用層類庫。

Controllers目錄

?　　Controllers目錄是用來放置與首頁相關(guān)的控制器。

Datas目錄　　

　　Util引入了DDD經(jīng)典架構(gòu)，Datas位于基礎(chǔ)設(shè)施層，一些人把它叫倉儲層。

　　Datas通常放在單獨(dú)的類庫，為了演示簡單，我放在該WEB項(xiàng)目的目錄中。

DbScripts目錄

　　這個目錄提供了Sql Server建庫腳本。

　　一些人可能很驚訝，什么年代了，還在使用Db First開發(fā)。

　　在多年的開發(fā)實(shí)戰(zhàn)中，我摸索到一套以PowerDesigner數(shù)據(jù)建模配合CodeSmith代碼生成的開發(fā)模式。對于CRUD，它具有快速高效的特點(diǎn)，同時你還能擁有清晰的數(shù)據(jù)字典以供未來查閱。

　　對于具備面向?qū)ο缶幊棠芰Φ娜?#xff0c;這種方式并不會降低代碼質(zhì)量和設(shè)計(jì)水平，在將代碼生成出來以后，通過手工調(diào)整就可達(dá)到與Code First相同的代碼水平。

　　我會在未來某個合適的時候介紹這種開發(fā)模式。

?Domains目錄

　　DDD經(jīng)典架構(gòu)中領(lǐng)域?qū)酉嚓P(guān)的目錄，實(shí)際開發(fā)中將放到單獨(dú)的類庫。

Services目錄

　　DDD經(jīng)典架構(gòu)中應(yīng)用層相關(guān)的目錄，實(shí)際開發(fā)中將放到單獨(dú)的類庫。

Typings目錄

?　　Angular相關(guān)的所有東西都在這里。

?

　　app目錄用來存放與業(yè)務(wù)相關(guān)的項(xiàng)目資源，比如Angular組件，指令，服務(wù)等。

　　值得注意的是，該目錄包含組件對應(yīng)的.html文件，這些.html文件和.cshtml文件是怎樣的關(guān)系？

?

?

　　如果你從未運(yùn)行過Util Demo項(xiàng)目，打開app目錄，并未找到任何.html文件。

　　你可能已經(jīng)猜到了，.html文件是由.cshtml文件生成的。

　　你永遠(yuǎn)都不應(yīng)該手工編輯這些.html文件，因?yàn)樵谡{(diào)試運(yùn)行時將被覆蓋。?

　　test目錄包含Ts單元測試，我僅對極少數(shù)Helper進(jìn)行單元測試。通過下面的npm命令把測試運(yùn)行起來。

npm test

?

　　util目錄包含對Angular常用API和Angular Material組件的封裝。

　　

?

　　Angular組件由視圖和控制器兩部分構(gòu)成。視圖即模板頁，包含html標(biāo)簽。控制器用來編寫邏輯，包含Ts代碼。換句話說，Angular應(yīng)用開發(fā)主要是編寫html和ts（當(dāng)然還有css，暫時不要管它）。

　　TagHelper并不是Util封裝Angular的唯一手段，對于Angular控制器,Util采用鏈?zhǔn)椒庋b手法，將Angular常用Api封裝得更加簡單易用，使你對Angular Api只要有一個模糊的印象就可以開發(fā)了。

　　對于Angular視圖頁面，并不能直接采用TagHelper簡單包裝，這樣會導(dǎo)致TagHelper過于復(fù)雜，另外很多功能需要在運(yùn)行時進(jìn)行判斷，TagHelper只在開發(fā)調(diào)試階段存在，所以采用兩層封裝會更加省力。

　　首先采用Angular組件或指令對Material組件進(jìn)行封裝，然后采用TagHelper提供強(qiáng)類型提示。　　

　　對于希望采用VS Code開發(fā)的同學(xué)，Typings/util目錄中封裝的代碼同樣可以使用，它跟TagHelper沒有什么關(guān)系，你可以把它Copy到你的項(xiàng)目，我尚未把它發(fā)布到npm。?

Views目錄

　　Views目錄包含首頁。

appsettings.json文件

　　它是一個配置文件，數(shù)據(jù)庫連接字符串在這里。

nlog.config文件

　　它是NLog日志組件的配置文件，Util 采用NLog輸出開發(fā)調(diào)試和錯誤日志，默認(rèn)位置是c:\log目錄。

package.json文件

　　它是npm包管理器的配置文件。

Program.cs文件

　　它是Asp.Net Core程序入口點(diǎn)文件。

Startup.cs文件

　　它是Asp.Net Core啟動文件，在這里配置依賴注入和中間件請求管道。

tsconfig.json文件

　　它是Typescript語言配置文件。

webpack.config.js文件

　　它是Webpack自動化構(gòu)建工具的配置文件。

　　還有兩個配置文件隱藏在webpack.config.js下，它們對util和第三方Js框架進(jìn)行處理。

?

運(yùn)行機(jī)制

　　對于沒有前端基礎(chǔ)的同學(xué)，可能很難理解這個Demo是如何運(yùn)行起來的，下面為你介紹這個Demo的運(yùn)行機(jī)制，我們從npm包還原開始。?

?npm還原

　　當(dāng)你輸入yarn和cnpm install node-sass，它會找到package.json文件的dependencies節(jié)，然后把需要的文件下載到node_modules目錄中。

?執(zhí)行Webpack構(gòu)建

　　然后輸入npm run dev，這里發(fā)生了什么？

　　npm run是npm的一個命令，它會查找package.json中scripts定義的命令。

?

• npm run dev?

　　dev就是npm run要查找的命令名，它是一個約定俗成的名稱，代表開發(fā)階段配置，即develop，當(dāng)然你不一定用這個名字，叫abc也可以。

　　npm run dev查找到package.json文件scripts節(jié)定義的dev命令，它的內(nèi)容是npm run vendor && npm run app，這個命令是由兩個npm run命令組成的。

• ?npm run vendor

　　npm run vendor的內(nèi)容是webpack --config webpack.config.vendor.js，這將對webpack.config.vendor.js執(zhí)行構(gòu)建操作。

　　webpack命令默認(rèn)查找webpack.config.js文件，現(xiàn)在要查找的是webpack.config.vendor.js，所以需要添加參數(shù)—config。

　　我們來看看webpack.config.vendor.js包含什么內(nèi)容。?

?webpack.config.vendor.js

　　vendorJs?對象用于配置將哪些第三方Js框架文件進(jìn)行打包，vendorCss?對象用于配置需要打包的第三方框架提供的Css文件。?

　　entry屬性指定了需要打包的入口文件，output屬性則指定輸出的位置和文件名。?

　　當(dāng)webpack.config.vendor.js執(zhí)行完畢，會在Util.Samples.Webs項(xiàng)目的wwwroot目錄創(chuàng)建一個dist子目錄，并生成vendor.js和vendor.css兩個文件。

　　注意：vendor.js僅在開發(fā)調(diào)試階段使用，所以并沒有對它進(jìn)行壓縮，正式發(fā)布并不需要執(zhí)行vendorJs對象。

　　該腳本的最后一行證明了這一點(diǎn)。

return isDev ? [ vendorJs, vendorCss] : [vendorCss];

• ?npm run app?

　　npm run app又包含兩個命令，用于執(zhí)行webpack.config.util.js和webpack.config.js。

webpack --config webpack.config.util.js && webpack

　　先來看看webpack.config.util.js。

?webpack.config.util.js

　　它將查找Util.Samples.Webs項(xiàng)目下Typings/util/index.ts文件，這是util默認(rèn)導(dǎo)出文件，所有在外部需要訪問的類型都會從這里導(dǎo)出。

　　當(dāng)webpack.config.util.js執(zhí)行完畢，會在dist目錄創(chuàng)建util.js文件。

　　同樣的，util.js文件僅用于開發(fā)調(diào)試階段。?

　　下面看webpack.config.js。

?webpack.config.js

　　webpack.config.js查找Typings目錄下的main.ts，main.ts是angular項(xiàng)目的入口文件。

　　webpack通過遞歸依賴查找main.ts，將除了util.js和vendor.js以外所有引用到的ts或js文件打包到dist/app.js文件中。

　　注意，正式發(fā)布時，app.js將采用angular官方提供的webpack編譯插件@ngtools/webpack進(jìn)行AOT編譯并打包生成。

?

　　現(xiàn)在dist目錄生成了如下文件。

　　0.chunk.js是由angular子模塊生成的js文件，當(dāng)路由配置對子模塊啟用了延遲加載，每個子模塊都會生成一個獨(dú)立的js文件。

?

　　loadChildren以延遲加載的方式來配置SystemModule子模塊。

?運(yùn)行機(jī)制

　　現(xiàn)在運(yùn)行angular應(yīng)用的js文件已經(jīng)就緒，讓我們把它運(yùn)行起來，在VS上F5啟動項(xiàng)目。?

　　注意：你應(yīng)該使用Google?Chrome來打開它，IE瀏覽器，可以通過啟用polyfill來勉強(qiáng)支持，不過由于效果不佳，我已經(jīng)把它扔掉了。?

　　當(dāng)瀏覽器打開首頁http://localhost:5200，Asp.Net Core啟動文件Startup.cs中配置的默認(rèn)路由將被激活，從而將請求發(fā)送到HomeController控制器的Index方法。

?　　Index方法直接返回了Views目錄下Index.cshtml首頁。

?

　　environment標(biāo)簽是一個環(huán)境判斷條件，用于設(shè)置開發(fā)及上線等不同階段的內(nèi)容。

　　<environment?include="Development">用于開發(fā)階段，<environment?exclude="Development">用于發(fā)布階段，可以看出，在發(fā)布后并不需要vendor.js和util.js文件，因?yàn)閍pp.js會包含它們。?

　　好，現(xiàn)在瀏覽器加載了Index首頁，Angular應(yīng)用是如何運(yùn)行起來的呢？

• Angular的引導(dǎo)過程

?　　還記得Angular應(yīng)用入口文件main.ts嗎，來看看它包含什么內(nèi)容。

?

　　platformBrowserDynamic是為瀏覽器平臺提供的JIT動態(tài)編譯服務(wù)，它將引導(dǎo)AppModule根模塊的啟動。

　　AppModule是Angular應(yīng)用的根模塊，它的主要任務(wù)之一就是啟動AppComponent根組件。

　　AppComponent是整個Angular應(yīng)用的根組件，所有其它組件都將被加載到根組件中。

?

　　selector用于指定組件的自定義標(biāo)簽，這里將根組件標(biāo)簽定義為<app></app>，你發(fā)現(xiàn)它已經(jīng)被放置在Index.cshtml中。?

　　AppComponent根組件準(zhǔn)備啟動了，由于是JIT編譯，所以它需要獲取視圖。?

　　組件的視圖由templateUrl屬性指定。

templateUrl: env.prod() ? './app.component.html' : '/home/main'

　　我們希望開發(fā)階段通過訪問服務(wù)端控制器來獲取視圖，這樣在編輯TagHelper時就能更方便，只需刷新頁面就能看見效果。?

　　env是一個環(huán)境檢測對象，prod方法如果返回true表明當(dāng)前為正式環(huán)境，將從app.component.html靜態(tài)文件獲取視圖，如果是開發(fā)調(diào)試環(huán)境，則訪問服務(wù)端HomeController控制器的Main方法獲取視圖。?

　　Main方法上的Html特性，是用來幫助.cshtml生成.html靜態(tài)文件的輔助工具。?

　　一般情況下，你并不需要手工設(shè)置Html特性來生成html文件，Util提供了ViewControllerBase控制器基類，當(dāng)你的視圖控制器繼承它，所有html文件就會生成到約定的目錄中。

?

　　由Template屬性設(shè)置的路徑可知，Typings/app中的項(xiàng)目結(jié)構(gòu)也采用模塊化組織，與區(qū)域模塊相對應(yīng)。

?　　現(xiàn)在來看根組件的視圖。

?　　這是你第一次看見Util封裝的TagHelper標(biāo)簽，以<util-打頭的標(biāo)簽都是Util TagHelper，它們以粗體顯示，這是由于安裝了Resharper的原因。

　　TagHelper在運(yùn)行時會把html輸出到頁面，它們把弱類型的html封裝成了具有強(qiáng)類型提示的標(biāo)簽。

　　如何知道某個TagHelper到底輸出了什么html呢？

　　一種辦法是打開它生成的.html文件來查找，不過當(dāng)頁面很復(fù)雜時，這種辦法有點(diǎn)吃力。

　　另一種辦法是查看日志，Util TagHelper的每個組件都提供了write-log屬性，當(dāng)設(shè)置為true，就會在C盤log目錄生成日志。

?

　　main.cshtml視圖中最關(guān)鍵的部分就是<router-outlet></router-outlet>標(biāo)簽。

　　router-outlet是Angular路由的占位符，當(dāng)根模塊AppModule中配置的路由激活時，相關(guān)的Angular組件就會被放進(jìn)這個占位符中。

　　根模塊中的路由配置被拆分到一個單獨(dú)的模塊AppRoutingModule中，路由配置如下。

?

　　通過路由配置可以發(fā)現(xiàn)，當(dāng)打開首頁時，命中路由第二項(xiàng)path:’’，會跳轉(zhuǎn)到/systems/application路徑，systems是一個子模塊，我們來查看它的路由配置。

?

?

　　/systems/application將激活ApplicationIndexComponent組件，并把它加載到根組件的<router-outlet></router-outlet>中。

　　ApplicationIndexComponent組件請求服務(wù)端地址/view/systems/application獲取視圖。

?

?　　/view打頭的地址將匹配到Areas區(qū)域控制器，這是在MVC路由配置中設(shè)置的。

?

　　控制器ApplicationController的Index方法將返回視圖。

?

　　Angular JIT編譯會在系統(tǒng)啟動時請求服務(wù)端URL，在Chrome瀏覽器F12調(diào)出開發(fā)者工具，刷新頁面，會觀察到頁面請求了Areas中的控制器。

　　

　　所以你在開發(fā)階段運(yùn)行項(xiàng)目會感覺比較慢，在正式發(fā)布后就沒這些開銷了。

小結(jié)　　

　　本文簡要介紹了Util Demo的目錄結(jié)構(gòu)和運(yùn)行機(jī)制，如果你沒有Angular基礎(chǔ)，估計(jì)還是很難看懂，建議你閱讀Angular中文網(wǎng)https://angular.cn。　　

　　未完待續(xù)，下一篇將對Util Demo的Angular封裝進(jìn)行介紹，本來是準(zhǔn)備這篇介紹的，不過限于篇幅，放到下篇，我知道，太長的文章既難寫更難讀。

　　寫文需要動力，請大家多多支持，點(diǎn)下推薦，Github點(diǎn)下星星。

　　Util應(yīng)用框架交流一群: 24791014

相關(guān)文章：

• .Net Core應(yīng)用框架Util介紹（一）

• .Net Core應(yīng)用框架Util介紹（二）
  

原文地址:https://www.cnblogs.com/xiadao521/p/Util-Introduction-3.html

---

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的.Net Core应用框架Util介绍（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。