# 北科大專題課程-1 .Net Core
##### 2019/10/04
###### 黃豊凱KevinHuang
---
### 基礎觀念
![](https://i.imgur.com/WqCyhmG.png)
---
### 網頁系統基本知識
- 網頁系統架構:前端、後端、資料庫
- 程式語言(C#、HTML、CSS、JavaScript)
- 程式開發架構(MVC)
- 框架(.Net Framework、.Net Core)
- 什麼是前後端分離?API又是什麼?
---
### 網頁系統架構
> 前端、後端、資料庫
---
### 前端後端=前台後台?
---
### 前端後端=前台後台?
### *錯!*
- 前台:使用者操作的介面
- 後台:管理者操作的介面
- 前端:系統架構中負責畫面、使用者操作
- 後端:系統架構中負責邏輯運算、存取資料
---
### 前端、後端、資料庫
###### 流程與各自的語言與框架
![](https://i.imgur.com/Sh6BtUn.png)
---
### 前端、後端、資料庫
###### 更簡單的理解方法
![](https://i.imgur.com/RAQE2C2.png)
---
### 程式語言
> (C#、HTML、CSS、JavaScript)
---
### 程式語言
- C#:後端程式語言
- HTML:前端元素
- CSS:前端樣式
- JavaScript:前端動畫效果、進行動作
---
### 程式開發架構
> MVC
---
### MVC
- Model(資料模型對應)
- View(前端視圖)
- Controller(流程控制器)
- Service(邏輯運算服務)
---
### MVC
![](https://i.imgur.com/1YAlibl.png)
---
### 框架
> .Net Framework vs. .Net Core
---
### .Net Framework vs. .Net Core
[開啟圖片](https://i.imgur.com/ZWr415O.png)
![](https://i.imgur.com/ZWr415O.png)
---
### 什麼是前後端分離?API又是什麼?
---
### 什麼是前後端分離?API又是什麼?
![](https://i.imgur.com/Y7qdcia.png)
---
### 什麼是前後端分離?API又是什麼?
![](https://i.imgur.com/DoHifil.png)
---
### Restful API-Http Method
[參考連結](https://progressbar.tw/posts/53)
![](https://i.imgur.com/KrerRBN.png)
---
### Http Method 範例
![](https://i.imgur.com/FrvM592.png)
---
### Restful API
[可參考資料](https://github.com/twtrubiks/django-rest-framework-tutorial/tree/master/RESTful-API-Tutorial)
![](https://i.imgur.com/Eu2KKjv.png)
---
### Restful API 範例
[可參考資料](https://github.com/twtrubiks/django-rest-framework-tutorial/tree/master/RESTful-API-Tutorial)
```
- GET /api/files/ 得到所有檔案
- GET /api/files/1/ 得到檔案 ID 為 1 的檔案
- POST /api/files/ 新增一個檔案
- PUT /api/files/1/ 更新 ID 為 1 的檔案
- PATCH /api/files/1/ 更新 ID 為 1 的部分檔案內容
- DELETE /api/files/1/ 刪除 ID 為 1 的檔案
```
---
## 開始實作
---
### 1.建立專案
![](https://i.imgur.com/MQ4Q1zj.png)
---
### 2.建立資料庫與資料表
![](https://i.imgur.com/gZoiQtJ.png)
---
### 3.安裝EF Core套件
![](https://i.imgur.com/cF3b82K.png)
---
### 4.初始化資料模型對應
![](https://i.imgur.com/j65b754.png)
---
### 5.新增MVC資料夾
![](https://i.imgur.com/nu5zCqp.png)
---
### 6.建立第一個API Controller
![](https://i.imgur.com/3s1jzel.png)
---
### 7.Controller呼叫Service
![](https://i.imgur.com/TBUodA7.png)
---
### 8.Service引入DBContext
![](https://i.imgur.com/UT0Tqc6.png)
---
### 9.Service查詢資料並回傳
- EF Core 使用的是LinQ語法,而不是SQL指令
- [EF Core LinQ官方參考文件](https://docs.microsoft.com/zh-tw/ef/core/querying/basic)
![](https://i.imgur.com/rhyPYJQ.png)
---
### 10.Controller回傳資料
![](https://i.imgur.com/19VIQfk.png)
---
### 11.透過網頁測試Get API
![](https://i.imgur.com/qkPhU1Q.png)
---
### 12.透過PostMan測試API
![](https://i.imgur.com/3Afqb6u.png)
---
### 13.開發更多API
- 新增:新增會員
- 修改:修改會員資料
- 刪除:刪除會員資料
- 查詢:查詢所有會員、查詢單一會員資料
---
### 未來主題
- Git版本控制
- Swagger圖形化API介面
- 前端發請求範例
- 前端框架-Vue.js
- 專案架設部署
---
### 複習與深入了解資源
- [ASP.Net Core MVC進化之路](https://ithelp.ithome.com.tw/users/20111879/ironman/1749)
- [ASP.NET Core 從入門到實用](https://ithelp.ithome.com.tw/users/20107461/ironman/1372)
---
##### 學程式不只是學習某個語言或框架,
##### 更重要是學習怎麼自學更多
![](https://i.imgur.com/dhYvv2w.png)
{"metaMigratedAt":"2023-06-15T00:26:46.836Z","metaMigratedFrom":"YAML","title":"北科大專題課程-1 .Net Core","breaks":true,"contributors":"[{\"id\":\"51ff12a4-2c72-4ebf-8d92-b365963be44a\",\"add\":3896,\"del\":754}]"}