開新專案

以下是本範例專案選擇的選項:

  • 1
  • 2
    • 由於顯示的邏輯已由Vue前端做掉，因此這邊就不勾選MVC選項
  • 3

專案結構

  • /App_Data
    • 放置一些後端的設定檔
    • appSettings.config
      • 裡頭可以在不重新build程式下，設定一些參數值
      • 這邊僅設定vue build過之檔案要放置在哪
  • /App_Start
    • WebApiConfig.cs
      • 設定api routing之設定
  • /Controller
    • BoardController.cs
      • 用來處理api request之controller
    • RedirectController.cs
      • 用來處理不是/api/開頭的request
      • 主要用來回傳vue build過之檔案
  • /Models
    • 用來放置一些商業邏輯之檔案，或資料格式之定義
    • Task.cs
    • Board.cs
      • 用來存放Todo list跟Done list之內容
    • GlobalData.cs
      • 用來模擬DB儲存資料
  • Global.asax
  • Web.config

開發

本專案之後端部分設計的比較簡單，像是session，連接DB，權限控管...等等都沒有設計

若要開發一個正式系統，上述的內容都要謹慎考慮

但若要開發一個含有權限控管之API，最簡單的做法如下:

  • 設計自定義之Authorization attribute，到session中檢查權限
  • 將User之登入狀況，權限，儲存於session中
  • 關於user之權限設定，絕對不要相信來自前端的任何設定，後端絕對不要輕易相信來自前端的任何數值

只要在Vue前端的部分使用axios呼叫API時，有使用credentials

那這些request就會自動將session key值帶入cookies並進行存取

axios設定之範例code如下:

let ax = axios.create()
ax.defaults.withCredentials = true

部署

以下是部署的步驟:

  • 1
  • 2
    • 後端publish檔案後，預設會放到bin\Release\Publish
  • 3
    • 接著在bin\Release\Publish建立wwwroot資料夾
    • 將vue build到/dist中之檔案放到bin\Release\Publish\wwwroot中
  • 4
    • 這邊為了方便起見，直接將bin\Release\Publish設為IIS讀取的路徑
  • 5
    • IIS上之站台建立後，要確定能看到wwwroot
  • 6
    • 接著輸入網址 http://localhost:8088/NoBackendHome 或 http://localhost:8088/wwwroot/NoBackendHome 就能看到畫面了

之後若前端進行改版，就只要更新wwwroot中之檔案即可

而後端若進行改版，只要不要異動到wwwroot中之檔案就好

到此就算完成了一個前端使用vue，後端使用C#技術之極小型系統了!