使用 Angular 8 ﹑Node.js 和 MariaDB 開發 Web 應用程式實戰課程

Contents

透過使用 Angular Universal，Node.js，Sequelize 和 MariaDB 建立自己的 SEO 友好部落格來學習建構真實世界的 Web 應用程式。

從這 9 小時的課程，你會學到

從頭開始使用 Angular(Universal) 建立一個 web 應用程式
使用 Node.js 在後端實現一個 web 服務
使用關聯式資料庫MariaDB 管理系統
使用 JSON Web Tokens (JWT)實現身份驗證
使用 Sequelize 做物件關聯對映 ( ORM )
使用 IISNode 在 windows server 上釋出 web 應用程式
實現 HTTP 攔截器( Interceptors )
使用 Angular Route Guards 限制元件訪問
Implement a JavaScript Middleware 實現一個 JavaScript 中介軟體
使用 Facebook 共享的偵錯程式
如何更新你的web 應用程式到一個新的 Angular 版本

要求

最好有 Angular 和 node.js 的基本工作經驗 ( 請參考 Angular 8 (Angular 2 的最新版) – 完整指南和 ( 完整的 NodeJS 開發者課程 ( 版本 3.0 )
熟悉 HTML，CSS 和 JavaScript 的基礎知識也是推薦的 ( 請參考 Javascript 程式設計語言學習地圖 )
使用 IISNode 釋出你的 web 應用程式，您需要一個安裝有 IIS 的 window sserver

課程說明

我知道你在想什麼。又一個 Angular 課程？我保證這個課程不一樣！

在這個課程中，我們不會包含 Angular 的絕對基礎，讓我們誠實以對-在那裡已經有足夠多的 Angular 課程。

相反，我們將專注於使用 Angular 和 Node.js 提供的工具建構一個真實的 web 應用程式。

我們將建立一個 SEO 友好的部落格，這意味著我們將使用 Angular Universal 建立一個伺服器端渲染前端。

在後端，我們將使用 Node.js 建立 web 服務，我們將資料儲存在 MariaDB 中，並將物件對映到資料庫中，我們將使用物件關係對映程式庫-Sequelize 。

最後，我們在一個具有 IISNode 的 windows server 上釋出整個程式。

Web 應用程式本身將是一個部落格，可以擴展到一個大的新聞或雜誌網頁應用程式。

我們從顯示一些文章開始，然後我們將建構一個管理儀表板，其中包含身份驗證(我們使用 JSON Web token 來更具體化)和建立新文章、修改它們等選項。

讓我們更深入地看看你在這門課程中將學到什麼:

基礎部落格

在這一部分，我們將開始我們的 Angular 專案和開發部落格，以便它將離線工作-沒有任何網路服務或資料庫。實際上，如果你想在你的 Angular 應用程式中新增你所有的部落格文章，你可以釋出這個部落格。

Meta & Open Graph Tags

正如標題可能已經暗示，這裡我們將新增元標籤( meta tags )和開放圖形標籤。因此，搜尋引擎和社交媒體平台需要找到你的部落格，並在分享文章時正確顯示這些資訊。

但是請記住，如果你堅持使用客戶端呈現的 Angular 應用程式，那麼這些標記將不一定能夠運作。 Google 承諾能夠抓取客戶端呈現的 Angular web 應用程式，但是根據許多部落格和開發者的經驗，我們還沒有達到這個水平。

除此之外，社交媒體平台仍然需要適當的原始碼或標籤來正確地蒐集你的網站。

Angular Universal

一個簡短但重要的部分-我們將在這裡實現伺服器端渲染(SSR)。這就是 Angular Universal 的意義所在。當你完成伺服器端渲染後，你的標記將在您的部落格源碼中可用，你的頁面渲染速度也會快得多。

後端使用 Node.js

是時候做後端了。我們將建立一個新的專案，使用 Node.js 的 web 服務。現在這些文章將來自 web 服務。

使用 MariaDB & Sequelize 為資料庫 & ORM

我們擴展了 web 服務，並最終將我們的 web 應用程式與資料庫連線起來，這樣文章現在就儲存在 MariaDB 中了。此外，我們將使用 Sequelize 在模型和資料庫表之間進行物件關聯對映。

管理儀表板

本質上，部落格與所有層都可以運作。我們有客戶端、 web 服務和資料庫。但是新增新文章和修改它們有點麻煩。因此，讓我們新增一個管理面板，在這裡我們可以獲得所有文章的概述，以及我們可以在哪裡建立、更新和刪除它們——這意味著建構所有 CRUD 操作。

認證

管理儀表盤工作正常，但直到現在，每個人都可以使用它。在本節中，我們通過新增使用 JSON web 令牌的身份驗證來改變這一點。此外，我們還將介紹 Angular 攔截器、路由守衛和一個小型中介軟體。

IISNode

最後，我們可以部署我們的部落格。在本節中，你將學習如何在具有 IIS 服務的 Windows 伺服器上建構和釋出 Angular Universal 客戶端和 Node web 服務。

我們使用什麼工具？

我們在本課程中使用的所有工具都是免費的。

Visual Studio Code ——微軟為 Windows、 Linux 和 macOS 開發的原始碼編輯器。我們將為 Angular 客戶端應用程式和 Node.js web 服務使用這個程式碼編輯器。
HeidiSQL – 一個免費的開源管理工具，我們將與 MariaDB 一起使用和安裝。它非常適合檢視我們要儲存在資料庫中的資料。
Postman-API 測試的最佳選擇。在本課程的後面部分，我們將使用 Postman 運行對 Node.js web 服務的 API 呼叫。
Google Chrome-沒有必要使用谷歌瀏覽器，任何帶有開發工具的網頁瀏覽器在這裡都很有用。我們將使用開發人員工具進行控制台輸出，並檢查 web 應用程式的 HTML。
Git-這一個是完全可選的。我推薦使用 Git 作為原始碼控制。你可以在本地端使用它，或者把你的程式碼推送到類似 GitHub 的雲端服務上。例如，本課程中完整的程式碼可以在 GitHub 上找到。

這門課是為誰而設的？

本課程適合..。

已經對 Angular 有點經驗了
想用 Angular 和 Node.js 來提高自己的水平
學習使用 Angular、 Node.js、 MariaDB 和 Sequelize 從頭開始建構最新的網路應用程式的技能
… 希望建立一個作品組合網站或私人部落格完全不使用任何第三方服務

講師是誰？

Patrick 是一個有經驗的網頁開發者，在這個領域已經工作了超過15年。擁有幾門關於 Udemy 的課程，超過30,000名學生和超過3,000條評論，他知道你在一門關於網路開發的課程中尋找什麼。他在德國一家市場研究公司擔任全職開發人員，在 Udemy 和 YouTube 上教授線上課程，還舉辦一對一的線上講座。讓我們看看，其他學生是怎麼說的:

⭐⭐⭐⭐⭐