.Net Core應用框架Util介紹（二） 轉

Util的開源地址

https://github.com/dotnetcore/util

 

Util的開源協議

　　Util以MIT協議開源，這是目前最寬鬆的開源協議，你不只能夠用於商業項目，還能把Util的代碼放進你的框架，放心使用。

 

Util的命名

　　Util這個名字看上去不怎麼高大上，不少人勸我換個霸氣點的，好比USharp。

　　不過我仍是堅持使用Util，由於他簡短，也更好記憶，Util不少類名與.Net或第三方類庫重名，須要使用徹底限定名來調用它，好比Util.Helpers.String.Join()。

　　另外一個常常被提到的問題是Util是一個經常使用詞彙，容易與其它類庫產生衝突，不過Util的定位是爲小團隊提供幫助，通常狀況下，這不會產生問題，另外Util會封裝大量經常使用類庫，衝突會在Util內部處理。在極端的狀況下，你還能使用using建立別名來本身解決。

 

Util的使用方法

　　Util還沒有成熟，因此我尚未發佈正式版，Nuget發佈的是預覽版，若是你想經過Nuget引用，請勾選「包括預發行版」。

　　還沒有成熟並不表示Util Bug不少，還沒法使用，只是還沒達到我心目中理想的那個樣子。對於中小項目，不少經常使用功能都已經封裝，最新版本的Util已經在個人項目上使用，已知問題已所有修復。

　　被問得最多的問題是Util有文檔嗎，抱歉，還真沒有。個人打算是待Util成熟後，再創建完整文檔，並建立一個官網。

　　固然，我但願有更多人能參與進來一塊兒分享技術，一我的精力和能力都是有限的，進度會很是緩慢。

　　因爲目前沒有文檔，你只能經過查看源碼進行學習，這有點痛苦，不過也能讓你基礎打得更紮實一點。

　　你若是對Util及Util引入的相關技術還不太瞭解，那麼不該該將它應用在一個很是緊急的項目上，這會致使風險。

　　Util主要是我用來知足本身項目的產物，因此它可能不能徹底知足你的需求，做爲項目負責人，你必須有能力擴展它。

　　學習Util的起點是提供的Demo，我演示了CRUD的基本用法，不過這個Demo是用Angular開發的，環境上有點折騰，後續我會再提供一個Asp.Net Core Mvc基於JQuery的示例。

　　這個Angular Demo不只演示了服務端CRUD的封裝，同時也演示了TagHelper是如何與Angular配合起來讓UI變得清晰省力。

　　當你把這個Demo運行起來，就能夠經過查看源碼的方式瞭解它的運行機制，基本瞭解清楚後，再本身作幾個複雜點的Demo來練手，有把握再運用到你的項目上。

　　若是你在使用中發現Bug，請不要親自動手，你應該到Github提交Issue，或直接到羣裏來找我，我會以迅雷不及掩耳之勢搞定它。

　　若是你但願我爲你擴展某些功能，也能夠提Issue，不過我會評估是否具備價值，冷門需求只能靠你本身完成。

　　若是你喜歡折騰，推薦你建立本身的應用框架，將Util以及其它框架的源碼慢慢吸取到你的框架中，這能讓你最大限度的瞭解框架內部實現機制，並能大幅加強你的編碼和設計能力。 

　　對於徹底不能或徹底不想折騰的朋友，建議你關掉網頁，好好享受生活，由於新的技術，特別是前端技術真的很折騰。 

　　若是你有新項目，但願採用.Net Core開發，Util將是一個很好的起點，他將爲你節省大把的時間，我最近幾年踩過的坑都埋在了Util中。

 

Util的開發環境

 

.Net Core SDK

　　咱們在使用.Net Framework時，一般是在更換VS時升級SDK。VS換代須要好幾年，因此你可能並不太關注SDK的版本。

　　不過進入.Net Core，狀況有所不一樣，通常幾個月就會更新一次，Util會緊跟.Net Core最新版本，你必須關注SDK的版本問題。

　　若是你不知道在哪裏下載SDK，在百度搜索可不是那麼容易，下面介紹下載.Net Core SDK的正確姿式。

　　在任意項目上右鍵，彈出菜單中選擇屬性。

　　在「目標框架」選擇「安裝其它框架」，進入下載頁面。

　　下載頁面選擇最新的正式版本SDK，SDK是給開發機器用的，Runtime是在部署到服務器上用的，SDK已經包含了Runtime，注意這個區別。

 

開發工具

• VS 2017最新版本。

　　若是你還在用VS2015，但又想用最新技術，這可能讓你吃盡苦頭。不要擔憂，VS2015和VS2017能夠共存，多安裝一個就行了。

• Resharper(R#)最新版本。

　　R#是一個VS上的重構插件，開發代碼不必定須要R#，但你想開發出更優雅的代碼，R#就是一個神兵利器。VS的代碼提示功能很強，但R#能把VS的提示功能再提高几個檔次。

　　R#的主要毛病是很是卡，若是你的電腦沒有固態硬盤，內存連16G也沒有，建議你不要用。

數據庫

• SqlServer 2012+

　　我如今主要用Sql Server來作測試，生產環境使用的是PgSql。

　　目前提供的Demo包含一個Sql Server的建庫腳本，因此你須要安裝它，還沒有提供EF遷移和其它數據庫腳本，後續有空會增長上來。

• PostgreSql(PgSql)
• MySql

前端環境

　　幾年前，若是須要某個Js組件，我會從網上下載並把它放進項目，而後在頁面上引用它。每當有版本更新，我就到它的官網下載一個新的。爲了讓頁面加載得更快，我會在發佈時用打包工具把多個Js文件打成一個，而後再用壓縮工具給它瘦身。

　　若是隻引用了少許幾個Js文件，這樣作沒什麼問題，簡單易懂，是我的就能作。

　　隨着前端需求的增長，你慢慢引入了十幾個，幾十個乃至數百個Js文件，維護它們就是一場噩夢。

　　若是能讓文件下載，版本更新，打包壓縮所有自動化，你就能從大堆Js文件中解脫出來。

　　NodeJs與它的生態系統解決了這個難題。

• NodeJs

　　NodeJs是利用Google Chrome V8引擎來執行Js的運行環境，這樣Js就能夠脫離瀏覽器運行了。

　　首先查看你的機器是否已安裝NodeJs，在命令行輸入node -v 。

 　　若是你跟我同樣，對命令行十分反感，是時候做出一些改變了，某些場景命令行比UI操做更便利，還有一些狀況必須使用命令行，好比Npm還原。採用.Net Core最大的亮點是能夠跨平臺部署，換句話說，你能夠把代碼部署到Linux， 爲了節省服務器資源，一般不會在Linux服務器上啓動UI，你必須能經過黑屏命令行操控它。

　　你能夠看到個人機器上安裝的NodeJs版本是8.9.3，若是你的NodeJs版本很低，可能會讓後續操做失敗，另外我聽到羣裏有同窗反饋，NodeJs版本太高也會出現問題，我尚未測試過，若是你環境上出現問題，能夠安裝我這個版本。

　　你能夠經過這個地址http://nodejs.cn/download下載安裝NodeJs。安裝完成，記得重啓電腦，這是怪異問題的必殺技之一。

 

 

　　

• Npm(Node Package Manager)

　　Npm是NodeJs包管理器，它相似於咱們的Nuget。當安裝完NodeJs，Npm會被默認安裝。 

　　前端很是混亂，包管理器就有不少，好比Bower，VS在以前的版本默認提供了對Bower的支持，不事後面刪除了它，這也從側面說明了Npm擊敗了競爭對手，成爲前端事實上的標準包管理器。

　　當你須要某個Js組件時，不用再千里迢迢打開網站下載，只需打開Npm配置文件package.json，把你要下載的Js組件寫上去就行了。

　　想知道某個Js組件有沒有更新，只需在package.json移動鼠標便可。

　　或者直接在package.json的版本號位置敲代碼提示快捷鍵，Ctrl + 空格 或 Ctrl + J。

 

　　當你把須要的Js組件添加到package.json，Ctrl + S保存之後，VS就開始自動下載了，這讓你心情很是愉快，VS不愧是銀河系最強的IDE。 

　　過了一個小時，你吃完飯回來，發現它還在下載，難道是網絡很差？這是由我國衆所周知的緣由致使的。 

　　要想讓Npm還原成功，你必須禁止VS Npm自動還原，先來設置下VS。

　　在國內若是沒有特殊裝置，Npm基本沒法還原成功。

　　一種選擇是使用淘寶鏡像，這是我初期使用的方法。

　　另外一種方法是使用Yarn來還原Npm，有人給我推薦了它，使用後發現這傢伙的下載速度更快，我如今也強烈推薦給你。

　　先去這裏https://yarnpkg.com/zh-Hans/docs/install#windows-stable下載一個Yarn安裝包。

安裝完成，命令行yarn –v，看看是否安裝成功。

•  Webpack

　　Webpack是NodeJs生態中用來進行自動化構建的工具。它很是強大，打包壓縮不過是它的冰山一角。

　　前端的混亂來自開源項目的百家爭鳴和低耦合的設計理念。

　　前端技術一片繁榮，這得益於開源項目的蓬勃發展，低耦合的設計理念讓你在遇到相關問題只需尋找對應組件，集成上來就能結束戰鬥。

　　這確實很好，但卻苦了咱們這些碼農。

　　你必須對各類框架，各類組件，以及這些組件中的插件很是瞭解，不然你沒法工做。

　　這大幅增長了學習成本，專業前端人員薪資高確實是有道理的，看看別人吃了多少苦頭。

　　還在懷念.Net前幾年高度集成的開發方式嗎？那個時代已通過去了。

　　在Webpack以前，還有Grunt，Gulp等構建工具，Webpack憑藉遞歸查找依賴的能力戰勝了它們，成爲前端事實上的標準自動化構建工具。

　　Webpack是一個插件體系，擁有豐富的插件，不論打包壓縮，仍是將Ts編譯成Js，都有相應的插件支持。

　　Webpack表面上很易用，這是創建在你對它的插件很瞭解的基礎上，若是你是個新手，想添加某個特性，但殊不知道哪一個插件具備這個功能，經過查看webpack官網並不必定能解決問題，由於不少插件的說明很是模糊，你只能本身多嘗試。

　　雖然如此，你也大可沒必要泄氣，你所使用的前端框架，會爲你作好Webpack配置，基本不用操心。

　　一旦把Webpack配置好，它就會很是易用，自動化構建的整個流程被隱藏在一行npm命令中。

　　Webpack經過Npm安裝，因此不須要單獨安裝它了。

 

Util Demo運行說明

開發環境確認

　　上面已經簡要介紹了Util的開發環境，爲了將Util Demo運行起來，咱們再確認一遍。

• 你安裝了VS 2017最新版本。
• 你安裝了.Net Core SDK正式版最新版本。
• 你安裝了Sql Server 2012或更新版本。
• 你安裝了NodeJs。
• 你安裝了Yarn。
• 你已經從Github下載了Util，並保證是最新版本。

運行數據庫腳本

　　因爲我開發採用的是Db First，因此給你提供了一個Sql Server的建庫腳本，這也是我平時的測試方式。

　　不要擔憂，你徹底可使用Code First方式，這只是個人我的習慣問題。

　　請將Sample.sql建庫腳本複製到Sql Server並執行。

 

　　下面，你須要修改Util.Samples.Webs項目數據庫鏈接字符串，它在這裏。

還原Npm

　　在Util.Samples.Webs項目上右鍵，選擇「在文件資源管理器中打開文件夾」，進入Util.Samples.Webs項目根目錄。

　　按住Shift，在Util.Samples.Webs項目根目錄空白位置右鍵，選擇「在此處打開命令窗口」。這樣作的目的是打開一個命令行，而且路徑是Util.Samples.Webs項目根目錄。

　　注意：不一樣的操做系統，菜單提示不一樣，我用的是Windows 2008 R2。

　　輸入命令yarn，開始還原。

 

　　若是你人品爆發，可能沒有看見任何錯誤就還原成功了。

　　不過在大部分狀況下，你都會獲得一個錯誤。這是由大名鼎鼎的巨無霸先生node-sass致使的。

　　node-sass是用來幫助將scss編譯成css的編譯工具，scss是一個css預處理器，給css增長了變量，控制結構等編程元素。Boostrap等現代前端框架都採用scss編寫。

　　我觀察到，node-sass從npm下載後，會運行腳本，而後訪問github及其它Url，毫無疑問，這將被攔截在搖籃中。

　　安裝node-sass的解決方案是cnpm，這是淘寶提供的npm包安裝工具。

　　咱們先來安裝cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　下面用cnpm來安裝node-sass。

cnpm install node-sass

　　若是你運氣不是太差，npm包應該還原成功了。 

　　若是你是第一次接觸npm，在還原完成後，項目根目錄會出現一個node_modules文件夾，你細數了一下文件的數目，大吃一驚，竟然有10幾萬個文件，這就是低耦合的悲劇，習慣就好。 

　　在cnpm還原node-sass的提示中，有一個版本警告信息，不要管它，目前我使用的是node-sass 4.7.2這個版本，更高版本有編碼錯誤，若是在scss中存在中文註釋，會編譯失敗。 

　　我發現npm治癒了個人升級強迫症，你若是也有這個毛病，請當心測試後再升級。 

　　當你發現cnpm如此強悍，連node-sass這個巨無霸都敗在它的腳下，你可能會直接用cnpm還原全部npm包。

　　注意：cnpm還原的包與npm並不徹底相同，特別是使用VS開發前端項目，問題尤爲嚴重，在打開解決方案時，會卡住好幾分鐘，你只應該用cnpm來還原node-sass，其它的採用yarn。

 

執行Webpack構建流程

　　你只須要一行npm命令就能把webpack構建流程跑起來。

npm run dev

　　若是這個過程沒有報任何異常，說明構建成功了。

　　若是有異常，一般說明npm包還沒有徹底還原成功。

 

運行Demo

　　終於你能夠把Demo運行起來了，F5把瀏覽器彈起來。

　

　　這是一個貌不驚人的Crud Demo，看到這個界面不少人可能大失所望，搞了半天就這麼個東西？

　　不要急，我給你展現的只是最簡單的東西，好讓你快速上手，Util封裝的是Angular官方提供的Material這套組件庫，你能夠到Material的官網https://material.angular.io/看看它包含哪些東西。

　　Material缺少像Ng Alain這樣的腳手架主界面，我項目上是前端人員本身搭建的。另外彷佛國內用Material風格來開發管理後臺的並很少，基於這個緣由，我已經有封裝Ng Alain + Ng-Zorro的計劃。 

　　另外一個Demo頁面展現了樹型Crud操做，將向你展現Util是如何對樹型關係進行封裝的。

 

注意事項

　　若是你根據上面的介紹仍是沒法將npm還原成功，可能有如下緣由。

• VS進程鎖定了node_modules目錄，你在還原時最好把VS關掉。
• 若是你以前已經還原過，可能存在垃圾文件干擾，這須要先刪除node_modules目錄，你能夠直接刪除文件夾，不過可能須要半小時以上時間，你應該經過命令行來刪除它。

npm install rimraf -g

rimraf node_modules

　　刪除node_modules目錄也應該關掉VS，以避免干擾。

• 你須要特別關照node_sass，沒事就cnpm搞它一下。

小結

　　本文介紹了Util的運行環境以及注意事項，初次接觸現代前端環境會有點不適，不過挺過去你就能再多幹幾年。

　　未完待續，下一篇將對Util Demo的運行機制進行介紹。

　　寫文須要動力，請你們多多支持，點下推薦，Github點下星星。