ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 實戰小專案視訊

solenovex發表於2018-08-18

視訊簡介

ASP.NET Core Web API + Angular 6的教學視訊

我是後端開發人員, 前端的Angular部分講的比較差一些, 可以直接看程式碼!!!!

 

這是一個小專案的實戰視訊, 該專案採用了:

  • ASP.NET Core 2.1 做API

  • Identity Server 4

  • Angular 6

  • Angular Material

這個專案比較簡單, 適合ASP.NET Core Web API 和 Angular 初學者.

 

專案最終完成的效果如圖:

 

 

 

 

視訊目錄

視訊專輯地址: http://v.qq.com/vplus/4cfb00af75c16eb8d198c58fb86eb4dc/foldervideos/8hk0029019k2fft

原始碼以及PPT: https://github.com/solenovex/ASP.NET-Core-2.1-Angular-6-Demo

第一部分建立Web API及其CRUD功能

  1. 建立ASP.NET Core專案, 以及Program和Startup的簡介
  2. 配置ASP.NET Core專案
    1. 環境, HTTPS等    
    2. 新增Entity Framework Core 2.1支援
  3. 繼續配置ASP.NET Core專案
    1. 新增Serilog
    2. 新增配置檔案, 處理全域性異常
  4. 大致完成ASP.NET Core專案的建立, Resource Model, AutoMapper, FluentValidation
  5. 實現後端的GET
    1. REST簡介, 以及GET的簡單實現
    2. 翻頁, 過濾, 排序等等
  6. GET的塑性, HATEOAS, 自定義Media Type
  7. POST, PUT, PATCH, DELETE, 實體驗證

第二部分, 建立Identity Server 4專案, 新增Mvc客戶端(測試用)

  1. OAuth 2.0 & OpenId Connect 簡介 (可選)
  2. 使用Mvc客戶端訪問被保護的API資源(處於測試的目的)

第三部分, 建立Angular專案, 使用Implicit Flow進行身份認證, 訪問被保護的API

  1. 建立Angular 6專案, 配置Angular Material和UI佈局, 路由等.....
  2. 訪問被保護的API
    1. 訪問未被保護的API資源
    2. 跨域訪問API的另一種辦法
  3. oidc-client.js, 整合Angular客戶端到Identity Server 4
  4. 其它功能(上)
  5. 其它功能(下)

 

相關文章