iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
3
Modern Web

跨平台開發利器- ASP.NET Core 系列 第 4

(Day 4) 建立ASP.NET Core專案 - 用Visual Studio

  基本上,我會比較建議初學者由VIsual Studio的整合式開發環逆境來學習ASP.NET Core的開發,這樣可以減少一大堆無謂的為什麼。等熟悉了GUI形式ASP.NET Core專案的開發方式後,再學習命令列的開發方式,會比較容易進入狀況,而且學習曲線也比較溫和。
  我這樣說,一定會受到擁護命令列開發者的抱怨甚至酸文,請注意,我是說初學者,對己經有經驗的資深人士,就不要浪費時間來找我戰了吧,你都己經會了,何必浪費時間呢?
 讓我們開啟Visual Studio。
https://ithelp.ithome.com.tw/upload/images/20181009/20017649nRUiMcGCcB.png
  然後在「檔案」功能下點選「新增]->[專案」。
https://ithelp.ithome.com.tw/upload/images/20181009/20017649Wy2F0GnWPo.png
  就會看到下圖的專案選擇畫面。
https://ithelp.ithome.com.tw/upload/images/20181009/2001764977jIZVbrFI.png
  可以看到傳統的asp.net web 應用程式(.NET Frame)和我們現在的重點ASP.NET Core Web應用程式兩種專案範本存在。
  此外,上圖左方的Visual C#及其下方的清單是選擇不同範圍的範本篩選,所以隨著選擇的範圍不同,Visual Studio展示的專案範本也不同,可別來問我怎麼不一樣。
  讓我們先點選ASP.NET Core Web應用程式專案,然後在名稱欄輸入專案名稱,再點選位置欄旁邊的[瀏覽],選擇專案放置的資料夾。
https://ithelp.ithome.com.tw/upload/images/20181009/20017649AjyQoVhi6u.png
  再按下[確定],進入方案範本選擇畫面。
https://ithelp.ithome.com.tw/upload/images/20181009/20017649gw6PJTo3Vz.png
  在方案範本選擇視窗中,可以看到好幾毎個不同的ASP.NET Core Web應用程式範本,個別介紹如下:

  • 空白,這是為很有經驗的ASP.NET Core應用程式開發人員使用的範本,只有空的架構專案,細節部份都要自行加上。
  • API,這是RestFUL的應用專案範本,不懂就算了。我也沒什麼研究...XD
  • Web應用程式,這是基本的ASP.NET Core專案範本,基本上比空白專案範本多了些架構,比較不用什麼都從頭來過。
  • Web應用程式(模型,檢視,控制器),這是最完整的ASP.NET Core Web專應用程式專案範本,初學者最好從這裏開始。這個專案範本基本上就是ASP.NET MVC專案的.NET Core版本。
  • Razor類別庫,顧名思意,建置Razor使用的類別庫用的專案範本。
  • Angular、React.js、React.js與Redux專案範本,這是三個使用不同開源Javascript Library的ASP.NET Core專案範本。由此可見ASP.NET Core在架構上比以前的.NET Framework更為開放,可以和不同的開源Web應用程式庫或FRamework整合。我會在適當時機介紹ASP.NET Core和Vue.js的整合專案的建置。
      我們從Web應用程式(模型,檢視,控制器)開始。
      再點下[確定]前,我們先看一下驗證。
    https://ithelp.ithome.com.tw/upload/images/20181009/20017649TLVzwcJ8W8.png
      [變更驗證]這部份,分別有:
    • 無驗證:就是進入網站不需要任何驗證的機制。
    • 個別使用者帳戶:如果是有經驗的ASP.NET開發人員,這個就是以前的Membership,或者Forms驗證,但,現在微軟為了整合帳戶不同驗證機制,現在己經改為ASP.NET Identity,Identiry有什麼好用呢?簡單來說,如果想整合Facebook、Twitter、Microsoft帳戶、Google帳戶等來做登入驗證,Identity可以幫你實踐這個願望。在下圖,你可以看到還有兩個選項,儲存應用程式內的使用者帳戶,這個就是之前的Forms驗證機制。另一個是,連到雲端中現有使用者存放區,這個應該不難猜到吧?就是指Facebook、Twitter、Microsoft帳戶、Google帳戶等等雲端應用的帳戶。
       https://ithelp.ithome.com.tw/upload/images/20181009/20017649kxRSmZUa3j.png
    • 工作或學校帳號,這是和Active Directory,Azure Active Directory,Office 365帳戶整合驗證機制。
    • Windows驗證,用於組織內部的驗證機制。組織內如果建置了Active Directory,就可以使用來做驗證機制。
      基本上,ASP.NET Core的驗證機制發展相當成熟,所謂雙因素驗證機制,也是可以實現的。
        我們先從無驗證入門開始,沒事不要搞的太複雜,把自己搞得迷糊了,喪失學習信心就不是學習的要領了。熟悉iT邦動態的邦友大概會瞭解我在講的是...XD
        選好[無驗證]後,按下[確定],等個幾分鐘,等候Visual Studio把專案檔案建置完成。
      https://ithelp.ithome.com.tw/upload/images/20181009/200176490jeZxisLBt.png
        使用VIsual Studio為開發工具,電腦基本不能太慢,否則會發現動輒得咎,不斷在等候Visual Studio的過程中慢慢完成Coding。這對開發人員是很嚴重的影響,因為靈感稍縱即逝,等Visual Studio跑完應該執行的工作時,要寫什麼Code也可能忘記了。我個人建議,i7、16GB記憶體、500GB SSD是基本要有的配備。
        專案建置完成,Visual Studio畫面的右手邊會出現個[方案總管]的小視窗,可以看到三個主要的資料夾:Models、Views、Controllers,MVC的基本標準架構出現了。
      https://ithelp.ithome.com.tw/upload/images/20181009/20017649OMj6gwEj4t.png
        然後,我們可以試著執行專案。等一下,還沒Coding,執行什麼?這,你就太小看Visual Studio的專案範本了。Visual Studio的龐大,原因就在這裏,它幫程式設計師完成了很多初階工作。
        我們點選下圖中的[IIS Express]。
      https://ithelp.ithome.com.tw/upload/images/20181009/20017649foswXCpE6Y.png
        這是叫用個人簡易版本的IIS來執行專案網站,然後會看到SSL的憑證訊息。
      https://ithelp.ithome.com.tw/upload/images/20181009/200176491PVQbitDsy.png
        就勾一下不要再問我,然後[是]自動完成SSL憑證的處理。
      https://ithelp.ithome.com.tw/upload/images/20181009/20017649AQqLrmYJqM.png
        可是因為Windows 10的安全機制,所以還是出現了憑證安裝的安全問題,點[是]繼續下去,最後跳出一個如下的網站。
      https://ithelp.ithome.com.tw/upload/images/20181009/20017649ANdBq7JrJd.png
        這個就是ASP.NET Core Web應用程式式(模型、檢視、控制器)專案範本的基本示範網頁,我們之後會逐步介紹如何修改範本成為自己想要的網站。
        在今天結束之前,再介紹個Visual Studio的小工具,當測試執行網站時,Visual Studio的視窗右邊會出現一個名為[診斷工具]的小視窗,如下圖:
      https://ithelp.ithome.com.tw/upload/images/20181009/20017649F5334UpDe9.png
      這個小工具在診斷網站耗用資源的判斷上很有幫助,各位將來在開發網站時,可以多多利用這個小工具輔助判斷網站對資源的耗用情形,從而決定網站功能的取捨。
        今天就先介紹到這裏,各位可以先去MVC三個資料夾下看看有什麼檔案,明天我會暫時離開ASP.NET Core的主題,先來談談我們想用ASP.NET Core開發什麼應用程式,以及軟體專案開發的一些概念。

上一篇
(Day 3) 在視窗環境下的ASP. NET Core - 使用傳統標準方法開發網站
下一篇
(Day 5) 你知道軟體專案是怎麼開始的嗎?
系列文
跨平台開發利器- ASP.NET Core 30

1 則留言

0
海綿寶寶
iT邦大神 1 級 ‧ 2018-10-10 09:10:18

這樣比喻不知道對不對
本文中VisualStudio的專案範本
替開發人員建立一個有基本功能的網站
就這點來看
跟node.js有類似的開發觀念

賽門 iT邦超人 1 級 ‧ 2018-10-10 21:03:20 檢舉

對Node.js沒有研究
/images/emoticon/emoticon25.gif
有研究的邦友比較看看,來說明一下囉...

我要留言

立即登入留言