# 北科大專題課程-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}]"}
    1424 views