一個線上應用服務系統，目前來說大抵都會分成前端與後端

前端專職顯示以及跟Customer互動

後端專職商業邏輯的運算，以及資料的儲存

Why前後端分離

問題點: 高耦合、業務邏輯交雜

後端系統很容易看到MVC架構，以C# .net MVC為例

MVC中的V(即View)即專責在準備要顯示給Customer的內容上

當在開發View的部分時，如果是使用像Razor這樣的語法開發

那後端可能改個class name，即使資料格式沒動到，也會影響到View

又或者新增一個頁面，就必須跟著更新router，bundler的設定，等等等

前端跟後端很大程度上是綁在一起的

後端光是開發一個功能，可能就要擔心會影響到前端的什麼東西

若系統已經開發的很大的話，光維護就會耗費相當大的精力

好處: 權責分離，職責專精

前後端分離後，中間僅透過API進行資料的交換，那事情便會單純許多

前後端兩邊的邊界，就是API的資料格式

後端可以專注在資料的處理，只要確定有滿足資料格式的定義

而前端可以專注在顯示邏輯的開發，降低對資料源，業務核心邏輯的處理

這大大的降低了前後兩端開發所要考慮的範疇

職責變的專精，大幅降低牽一髮動全身的風險

系統架構

這邊稍微舉例前後端可能需要注意之事項

前端 <----> 後端 <----> DB

前端

• UI/UX
  • 顯示邏輯
  • 跟user互動
• Routing
  • SPA
  • 網址對應組件
• Vuex
  • 共用資料集散地，類似前端的資料庫
• API介接
• PWA
• ...

後端

AP

• 專注在Data的處理
  • 資料的傳輸
    • 對前端
    • 對DB
    • 對第三方
  • 機密資料的運作
  • 狀態的儲存/處理
    • session
• 若有MVC架構的話
  • Model
    • 進行商業邏輯運算
    • 對DB的Model
    • 對前端的Model
      • 第三方
      • Client端
  • View
    • 不再進行傳統顯示邏輯的開發
    • 直接回傳Vue Build(編譯)過的靜態檔
    • SSR
      • 若有SEO的需求的話，需要在回傳vue build過的檔案前，再多預先render給爬蟲的資料
  • Controler
    • 流程的處理
    • 各式API的處理

DB

資料的實際儲存地

但為了簡化教學範例的複雜度，這邊會在AP上宣告靜態物件來模擬DB的資料儲存

若要在正式系統上使用靜態物件儲存資料，請務必要小心謹慎，避免預期外之資料存取

開發環境

範例專案

範例專案請到此下載

前端

• Node.js
• Vue
  • 在安裝好node.js後，開啟commad line執行

    npm install -g @vue/cli
    

  • 詳細內容可以參考官網
• IDE
  • Visual Studio Code
    • Vue Syntax Highlighter
      • vs code預設是看不懂vue的code的，若想要讓vue語法能有對應的顏色提示，需要安裝相關外掛
      • 這邊我是使用 Flatland Monokai Theme

後端

• C#
• Visual Studio Community

範例專案目標

• 製作一個TodoList，跟一個DoneList，每個list中可以放入Task
• Task上可以記錄Title跟Content
• 網頁上方要有Nav可以顯示所有的頁面(總共4個)
• 在網頁不關掉下，任意點選Nav上之連結，資料不能遺失
• 隨意輸入網址，要能夠跳到404 not found的頁面
• 為方便示範，將同樣的功能分成需要後端支援，跟不需要後端支援
  • 不需要後端:
    • 分兩頁，一頁可以編輯，一頁不可編輯
    • 網頁關掉後重開，不需要能看到剛剛的資料
  • 需要後端:
    • 分兩頁，一頁可以編輯，一頁不可編輯
    • 網頁關掉後重開，需要能看到剛剛的資料
• 操作起來的效果如下

接下來

下一篇文章，將開始前端部份的說明