了得網計算機/網絡_Web前端開發使用ASP.NET Core、Angular和Bootstrap

產品特色

編輯推薦

? 讓讀者了解所有新的和改進的ASP.NET Core功能
? 開發用戶期望的功能豐富、靈活且響應敏捷的設計
? 描述使用ASP.NET Core進行前端開發的*、*實踐
? 詳述如何大限度地利用具有非原生功能的第三方庫
? 解釋如何組合應用ASP.NET Core與不同的工具、框架和庫
? 探討Bower依賴關繫、gulp構建繫統與ASP.NET Core的使用

內容簡介

讓讀者了解所有新的和改進的ASP.NET Core功能
？開發用戶期望的功能豐富、靈活且響應敏捷的設計
？描述使用ASP.NET Core進行前端開發的*、*實踐
？詳述如何大限度地利用具有非原生功能的第三方庫
？解釋如何組合應用ASP.NET Core與不同的工具、框架和庫
？探討Bower依賴關繫、gulp構建繫統與ASP.NET Core的使用

作者簡介

Simone Chiaretta(現居比利時布魯塞爾)是一位網頁架構師和開發者，他樂於分享自己20多年來在ASP.NET Web開發和其他Web技術方面的開發經驗和知識。Simone成為ASP.NET領域微軟MVP已有8年，撰寫了幾本關於ASP.NET MVC的書籍(包括Wrox出版的Beginning ASP.NET MVC 1.0和What’s New in ASP.NET MVC 2，以及Syncfusion出版的OWIN Succinctly和ASP.NET Core Succinctly)，並為在線開發者門戶(例如Simple Talk)做出了貢獻。Simone還與他人共同創立了意大利ALT.NET用戶組ugialt.NET，並且是在米蘭召開的許多會議的共同組織者。
讀者可在Simone的博客http://codeclimber.net.nz上閱讀他的想法和開發技巧。
在不編寫代碼和博客文章或是不參與全球.NET社區活動時，Simone喜歡研究Arduino(一種開源硬件)、無人機和水下機器人，並且正在接受培訓，以在2018年完成他的臺“鋼鐵俠”。他是在布魯塞爾工作的眾多外籍專家中的一員，在那裡他領導歐盟理事會(歐盟的執政機構之一)公共網站的開發團隊。

目錄
第1章 ASP.NET Core MVC的新變化 1
1.1 熟悉軟件名稱 2
1.1.1 ASP.NET Core 2
1.1.2 .NET Core 2
1.1.3 Visual Studio Code 3
1.1.4 Visual Studio 2017 3
1.1.5 本書涵蓋的版本 3
1.2 微軟.NET Web堆棧簡史 4
1.2.1 ASP.NET Web Forms 4
1.2.2 ASP.NET MVC 5
1.2.3 ASP.NET Web API 5
1.2.4 OWIN和Katana 6
1.2.5 ASP.NET Core和.NET Core的出現 7目    錄
第1章 ASP.NET Core MVC的新變化   1
1.1 熟悉軟件名稱   2
1.1.1 ASP.NET Core   2
1.1.2 .NET Core   2
1.1.3 Visual Studio Code   3
1.1.4 Visual Studio 2017   3
1.1.5 本書涵蓋的版本   3
1.2 微軟.NET Web堆棧簡史   4
1.2.1 ASP.NET Web Forms   4
1.2.2 ASP.NET MVC   5
1.2.3 ASP.NET Web API   5
1.2.4 OWIN和Katana   6
1.2.5 ASP.NET Core和.NET Core的出現   7
1.3 .NET Core   7
1.3.1 .NET Core入門   8
1.3.2 dotnet命令行   8
1.4 ASP.NET Core介紹   9
1.4.1 ASP.NET Core Web應用程序項目概述   9
1.4.2 OWIN   13
1.4.3 ASP.NET Core應用程序剖析   16
1.5 ASP.NET Core的重要新特性   19
1.5.1 環境   19
1.5.2 依賴關繫注入   21
1.5.3 日志記錄   24
1.5.4 配置   26
1.6 部分ASP.NET Core中間件簡介   31
1.6.1 診斷   31
1.6.2 提供靜態文件服務   32
1.6.3 應用程序框架   33
1.7 ASP.NET Core MVC   34
1.7.1 在ASP.NET Core中使用MVC框架   34
1.7.2 在控制器中使用依賴關繫注入   36
1.7.3 視圖組件   38
1.7.4 標簽幫助程序   40
1.7.5 Web API   45
1.8 本章小結   46
第2章   前端開發者工具集   47
2.1 需要了解的其他幾種語言   48
2.1.1 Node.js   49
2.1.2 JSON   50
2.1.3 Sass和Less   51
2.1.4 JavaScript的未來   53
2.1.5 TypeScript   54
2.2 JavaScript框架   55
2.2.1 Angular   56
2.2.2 Knockout   58
2.2.3 React   60
2.2.4 jQuery   63
2.3 CSS框架   63
2.3.1 Bootstrap   63
2.3.2 Primer CSS   66
2.3.3 Material Design Lite   66
2.3.4 Semantic UI   67
2.4 包管理器   68
2.4.1 NuGet   68
2.4.2 Bower   70
2.4.3 NPM   71
2.4.4 文件夾結構   71
2.5 任務運行程序   72
2.6 本章小結   74
第3章 Angular簡析   75
3.1 Angular的基本概念   76
3.2 Angular的實現語言   78
3.3 建立一個Angular項目   79
3.3.1 使用在線編輯器   79
3.3.2 利用快速入門示例   80
3.3.3 使用Angular-CLI工具   80
3.4 Angular應用程序結構   81
3.4.1 應用程序入口   81
3.4.2 根模塊   82
3.4.3 根組件   84
3.4.4 主HTML頁面   85
3.5 數據綁定   86
3.5.1 插值   86
3.5.2 單向綁定   87
3.5.3 事件綁定   88
3.5.4 雙向綁定   88
3.6 指令   89
3.7 服務與依賴注入   90
3.8 多重組件   92
3.9 輸入與輸出屬性   95
3.10 與後端程序交互   99
3.10.1 使用Http模塊   100
3.10.2 處理RxJS Observable   101
3.11 Angular與ASP.NET MVC的結合應用   105
3.12 Visual Studio 2017對Angular的支持   116
3.12.1 代碼片段   116
3.12.2 TypeScript文件中的智能提示   118
3.12.3 HTML文件中的智能提示   119
3.13 本章小結   120
第4章   Bootstrap入門   121
4.1 Bootstrap簡介   122
4.1.1 安裝Bootstrap   122
4.1.2 Bootstrap的主要特性   125
4.2 Bootstrap樣式   125
4.2.1 網格繫統   125
4.2.2 排版   130
4.2.3 表格   131
4.2.4 表單   132
4.2.5 按鈕   134
4.3 組件   134
4.3.1 字體圖標   134
4.3.2 下拉菜單   135
4.3.3 輸入組   137
4.3.4 導航   139
4.3.5 其他組件   145
4.4 JavaScript   146
4.4.1 標簽頁內容   146
4.4.2 模態對話框   148
4.4.3 工具提示和彈出對話框   150
4.5 使用Less定制Bootstrap   152
4.5.1 通過網站定制   152
4.5.2 使用Less定制   154
4.6 Visual Studio 2017和ASP.NET Core中的Bootstrap支持   155
4.6.1 Bootstrap Snippet Pack   157
4.6.2 Glyphfriend   158
4.6.3 ASP.NET Core的標簽幫助程序   159
4.7 本章小結   160
第5章使用NuGet和Bower管理依賴關繫   163
5.1 共同概念   164
5.2 NuGet   165
5.2.1 使用NuGet獲取軟件包   166
5.2.2 發布自己的軟件包   170
5.3 NPM(Node.js包管理器)   172
5.3.1 安裝NPM   172
5.3.2 NPM的用法   173
5.3.3 軟件包的安裝位置   176
5.4 Bower   176
5.4.1 安裝Bower   177
5.4.2 使用Bower獲取軟件包   177
5.4.3 軟件包的安裝位置   179
5.4.4 創建自己的軟件包   180
5.5 本章小結   180
第6章使用gulp和webpack構建應用程序   183
6.1 前端構建繫統的作用   184
6.2 gulp深度介紹   185
6.2.1 gulp入門   185
6.2.2 gulpfile.js文件   186
6.2.3 典型gulp構建文件   188
6.2.4 更多gulp技巧   190
6.3 webpack介紹   197
6.3.1 webpack的主要概念   197
6.3.2 應用webpack   197
6.3.3 webpack的其他功能   202
6.4 Visual Studio 2017和構建繫統   203
6.4.1 Bundler & Minifier擴展   203
6.4.2 任務運行程序資源管理器   207
6.4.3 將智能提示用於gulp   208
6.5 本章小結   209
第7章部署ASP.NET Core   211
7.1 ASP.NET Core的新托管模型   212
7.2 在自有IIS環境上的安裝   213
7.2.1 確保一切就緒   213
7.2.2 安裝AspNetCoreModule   215
7.2.3 通過命令行發布應用程序   216
7.2.4 創建網站   217
7.2.5 通過Visual Studio發布應用程序   218
7.3 在Azure上部署   220
7.3.1 使用Web部署從Visual Studio部署到Azure   220
7.3.2 利用git持續部署到Azure   224
7.4 部署到Docker容器   228
7.4.1 安裝Docker支持   228
7.4.2 發布Docker映像   231
7.5 本章小結   233
第8章非Windows環境中的開發   235
8.1 在macOS上安裝.NET Core   236
8.2 在macOS上構建個ASP.NET Core應用程序   237
8.2.1 使用dotnet命令行界面   237
8.2.2 使用Yeoman   240
8.3 Visual Studio Code   243
8.3.1 設置Visual Studio Code環境   243
8.3.2 Visual Studio Code的開發特性   244
8.3.3 OmniSharp   250
8.3.4 其他IDE   251
8.4 使用命令行工具   251
8.5 本章小結   252
第9章綜合運用   253
9.1 構建一個鐵人三項賽成績網站   254
9.2 構建後臺網站   254
9.2.1 設置Entity Framework   259
9.2.2 構建CRUD界面   264
9.3 構建注冊頁面   269
9.4 展示實時成績   273
9.4.1 創建Angular客戶端程序   274
9.4.2 構建Web API   279
9.5 使用物聯網設備連接   284
9.6 部署   288
9.7 本章小結   290

前言

前言
曾幾何時，後端開發人員和前端開發人員從事著迥異的工作。後端開發人員使用服務器端語言編寫用於呈現頁面的代碼，前端開發人員則使用JavaScript編寫具有一定交互功能的代碼，並使用CSS美化Web頁面。
幾年之前，隨著單頁面應用程序(SPA)的登場，JavaScript不再局限於增加“一定”的交互性，還能構建應用程序本身。後端開發人員必須擴展自己的技能儲備，以納入前端開發人員的典型工具，例如特定的JavaScript框架，以及CSS的基礎運用。
《Web前端開發》的目標是闡釋前端開發人員的常用工具，以及如何有效地將它們與ASP.NET Core MVC組合運用。
為何Web開發需要通曉多種語言的開發人員
在日常生活中，“多語言者”(polyglot)是指了解並能使用多種語言的人，他們不需要精通雙語(或多語)，但能較熟練地使用第二種或更多種語言。
何謂多語言開發人員？是指一名了解超過一種(編程)語言或框架，能在同一個程序中使用它們的開發人員。前    言
曾幾何時，後端開發人員和前端開發人員從事著迥異的工作。後端開發人員使用服務器端語言編寫用於呈現頁面的代碼，前端開發人員則使用JavaScript編寫具有一定交互功能的代碼，並使用CSS美化Web頁面。
幾年之前，隨著單頁面應用程序(SPA)的登場，JavaScript不再局限於增加“一定”的交互性，還能構建應用程序本身。後端開發人員必須擴展自己的技能儲備，以納入前端開發人員的典型工具，例如特定的JavaScript框架，以及CSS的基礎運用。
《Web前端開發》的目標是闡釋前端開發人員的常用工具，以及如何有效地將它們與ASP.NET Core MVC組合運用。
為何Web開發需要通曉多種語言的開發人員
在日常生活中，“多語言者”(polyglot)是指了解並能使用多種語言的人，他們不需要精通雙語(或多語)，但能較熟練地使用第二種或更多種語言。
何謂多語言開發人員？是指一名了解超過一種(編程)語言或框架，能在同一個程序中使用它們的開發人員。
從IT行業發端之日開始，應用程序主要是使用一種編程語言編寫的，筆者個人是從C開始的，然後轉向Visual Basic，在Cold Fusion上著陸，使用過JavaScript早期版本(在客戶端和服務器端均用過)，進行了一點Java開發，終固定在.NET平臺上，但每段時間裡隻使用一種編程語言。
那時是大型企業級框架的時代，廠商試圖向他們的語言或框架中塞入應用程序可能需要的一切特性。微軟曾經試圖將開發人員與Web實際使用的語言HTML和JavaScript隔離開來，推出了ASP.NET Web Forms和ASP.NET Ajax框架。如果讀者回顧自己在IT行業的經歷，可能會找到許多類似的例子。
不過近出現了一種新趨勢，走向相反的方向，IT業界認識到，或許有的語言比其他語言更適於完成某些特定任務，人們使用多種語言開發應用程序，而非試圖強行用一種語言包打天下。
現在我們已經統一了“多語言開發人員”一詞的定義，接下來讓我們看看，作為一名多語言開發人員有什麼優勢。
工欲善其事，必先利其器：在工作中選擇合適的工具
多語言開發的個也是重要的好處是能夠選擇完成工作的適合工具，而不必因為語言或框架不支持某個指定功能而不得不做出妥協。
例如，使用微軟Ajax框架時，將受限於它提供的功能，而直接使用JavaScript，則可擁有該語言的全部靈活性。
作為一名Web開發人員，必須了解HTML語言，但隻要使用Visual Studio的開發界面，僅拖曳工具箱中的工具，即可構建Web應用程序。顯然，此時無法像直接編寫HTML一般，擁有徹底的控制力。
所以，在某種程度上，每個Web開發人員都是多語言開發人員。
另一個例子是Sass在Visual Studio 2015中的集成。幾年前Ruby社區提出了CSS樣式預處理的創意，微軟將其原始版本集成到其IDE中，而Sass正是預處理CSS樣式的合適工具。
他山之石：交叉思維的優勢
通曉多種語言的第二個好處是能從廠商和開源社區在其他語言的工作中獲取靈感；在無法直接使用時，能夠改造或開發適合自己的版本。
ASP.NET MVC是這方面的一個絕佳例子。十年前，當時流行的語言是Ruby，這要歸功於其簡單的Web框架Ruby on Rails，它建立在模型-視圖-控制器模式之上。.NET開發人員社區從中獲得靈感，並開始同樣基於MVC模式構建.NET Web框架。這導致微軟構建了ASP.NET MVC框架，該框架是《Web前端開發》介紹的主要內容之一。
居安思危：擴展你的安樂窩
如果不隻考慮技術方面，使用多種語言和框架還帶來了一項額外益處：它會迫使你走出現有的“安樂窩”，使你的適應性更強，並打破始終循規蹈矩地工作帶來的厭煩情緒。毫不奇怪，有許多開發人員對嘗試新事物猶豫不決，並且更喜歡使用他們熟悉的工具、框架和語言，盡管這樣做會犧牲靈活性和控制能力。但如果你正在閱讀這《Web前端開發》，可能不是其中之一。因此，請準備好在《Web前端開發》的其餘部分，學習源自Microsoft .NET領域之外的新語言和框架。一開始，你會走出你的“安樂窩”。而當學習完成時，你會發現“安樂窩”已經變得更大、更具回報。
《Web前端開發》讀者對像
《Web前端開發》的目標讀者是擁有ASP.NET MVC知識(無論是版本還是早期版本的框架)的人員的Web開發人員，以及希望學習使用前端開發中流行工具和框架的人員。此外，《Web前端開發》也可以作為已經采用某些前端工具和框架，但希望通過Visual Studio 2017引入的集成功能更高效地使用它們的開發人員的指南。
《Web前端開發》涵蓋的內容
《Web前端開發》主要介紹使用ASP.NET Core MVC進行前端開發。除概述微軟的框架外，還涵蓋一些受歡迎的前端框架和工具，如Angular、Bootstrap、NuGet、Bower、webpack、gulp和Azure等。
除框架外，《Web前端開發》還展示了Visual Studio 2017中面向前端開發的新特性，以及如何不使用該軟件，而改用標準文本編輯器(例如Mac OS X上的Visual Studio Code)開發ASP.NET Core MVC應用程序。
這並不是一本面向初學者的書籍，所以筆者假設讀者已經掌握HTML、JavaScript和CSS的基礎知識，了解C#或VB.NET(請記住所有示例都將使用C#編寫)，並且使用過ASP.NET MVC和Web API。
《Web前端開發》的組織結構
為幫助讀者確定這《Web前端開發》是否適合自己，下面將簡要解釋《Web前端開發》的結構和每章的內容。
●   第1章“ASP.NET Core MVC的新變化”：介紹使用ASP.NET Core、ASP.NET Core MVC以及.NET中的所有新功能和新開發方法。對於那些已經了解ASP.NET MVC版本的讀者來說，可通過該章進行復習；對於新人而言，可通過該章來簡單了解這個版本。
●   第2章“前端開發者工具集”：開始探索前端開發人員的世界，介紹使用的工具類別，並介紹每類工具和框架中的佼佼者。
●   第3章“Angular簡析”：介紹Google的JavaScript框架Angular，闡釋其中的主要概念，以及Visual Studio 2017附帶的新的Angular工具。
●   第4章“Bootstrap入門”：介紹Twitter的CSS框架Bootstrap，並展示如何使用它構建自適應網站。該章還討論Less(一種CSS預處理語言)，以及它與Visual Studio 2017的集成。
●   第5章“使用NuGet和Bower管理依賴關繫”：管理所有前端和服務器端的組件可能是件非常痛苦的工作，但幸運的是，存在一些組件管理器，能用於大大簡化工作。可使用NuGet工具管理.NET服務器端依賴關繫，而在客戶端使用Bower。該章介紹如何與Visual Studio 2017結合使用這些工具，以及如何打包庫文件，以便在公司內部共享或與外界共享。
●   第6章“使用gulp和webpack構建應用程序”：介紹gulp和webpack，這是兩種可使用JavaScript進行編程的構建繫統。該章還將介紹它們與Visual Studio 2017的集成，以及ASP.NET開發中使用的一些常用秘訣。
●   第7章“部署ASP.NET Core”：應用程序準備就緒後，即可進行部署。該章使用Azure展示集成了測試、構建和部署操作的持續流程。
●   第8章“非Windows環境中的開發”：.NET Core堆棧的一個主要特性是它也可在Linux和Mac操作繫統上運行。微軟開發了一個跨平臺的IDE，但也有其他選擇。該章將介紹如何在Mac上完成所有ASP.NET開發。
●   第9章“綜合運用”：《Web前端開發》的後一章將所有概念融會貫通，詳解構建現代化、響應式網站所需的所有步驟，包括通過OAuth與第三方服務和認證相集成。
學習《Web前端開發》需要準備的條件
這《Web前端開發》中有很多示例，因此體驗它的好方法就是在電腦上親自試一試。為此，需要安裝Windows 7/8/10操作繫統和Visual Studio 2017社區版。
ASP.NET Core MVC也可以在Windows、Mac OS X或Linux上的任何文本編輯器中開發。微軟還開發了一款名為Visual Studio Code的跨平臺文本編輯器。在第8章中學習在Windows之外進行開發時需要使用該工具。當然也可以使用任何其他兼容的文本編輯器，但使用的命令和操作界面與Visual Studio Code中的不同。
約定
為了幫助讀者準確掌握學習內容，獲得收益，《Web前端開發》使用了一些約定。
警告
包含與前後文直接相關的重要、不可遺忘的信息。
注意
用於指示對當前討論內容的注釋、提示、技巧、旁白等信息。
代碼使用兩種格式：
對於大多數示例代碼使用不突出顯示的等寬字體。
使用粗體強調該代碼在當前上下文中特別重要，或體現其與前文代碼片段的差異。
源代碼
在完成《Web前端開發》中的示例時，可以選擇手動輸入所有代碼，也可以使用《Web前端開發》附帶的源代碼文件。Wrox圖書使用的所有源代碼均可從www.wrox.com下載，具體到《Web前端開發》的代碼下載鏈接則位於以下網址的Download Code(下載代碼)選項卡中：
www.wiley.com/go/frontenddevelopmentasp.netmvc6
你也可以通過ISBN在www.wrox.com上搜索圖書(《Web前端開發》的ISBN為978-1-119-18131-6)以查找代碼。要獲得所有當前Wrox書籍的完整代碼下載列表，請訪問www.wrox.com/dynamic/books/ download.aspx。
www.wrox.com上的大部分代碼都以.ZIP、.RAR歸檔或適用相應平臺的類似歸檔格式進行壓縮。下載代碼後，隻需要使用相應的壓縮工具對其進行解壓縮即可。
另外，也可掃描《Web前端開發》封底的二維碼下載源代碼。
注意
由於許多書籍名稱相似，你可能會發現使用ISBN進行搜索簡單，《Web前端開發》英文版的ISBN是978-1-119-18131-6。
勘誤表
我們盡一切努力確保文本或代碼中沒有錯誤。但畢竟人非聖賢，難免會出現錯誤。如果在我們的某《Web前端開發》中發現錯誤，如拼寫錯誤或代碼錯誤，我們將非常感謝你的反饋。通過發送勘誤表，可能能夠幫助其他讀者，使他們免於在挫折沮喪中浪費數小時，同時還能幫助我們提供更高質量的信息。
要查找《Web前端開發》的勘誤表，請訪問www.wiley.com/go/ frontenddevelopmentasp.netmvc6，然後單擊Errata鏈接。在這個頁面上，可以查看所有已經提交給《Web前端開發》並由Wrox編輯發布的勘誤表。
如果未在Book勘誤頁面上發現“你發現的錯誤”，請訪問www.wrox.com/contact/techsupport.shtml，並填寫表格以向我們發送找到的錯誤。我們會檢查這些信息，在適當的時候在《Web前端開發》的勘誤頁上發布信息，並在《Web前端開發》後續版本中予以更正。

商品搜索

商品分类

【醫學】

【各大出版社】