上一篇講了前後端 MVC 結構的不同，這篇深入講一下 前端 與 後端 是如何溝通合作。

在開始之前可以先看篇好文：菜雞也看得懂的前後端分離架構基本概念

前、後端分離

概念

前後端分離是一種軟體架構模式，它將一個Web應用程序的前端和後端部分分開開發、部署和維護。這種架構模式的主要特點是：

1. 前端 / 客戶端（Client-side）：
   • 前端是指Web應用程序中運行在用戶端（通常是瀏覽器）的部分。
   • 前端包括用戶界面、用戶體驗、瀏覽器渲染和用戶互動。
   • 前端開發使用HTML、CSS和JavaScript等技術，通常使用前端框架（如React、Angular、Vue.js）來構建動態和交互性的網頁應用程序。
2. 後端 / 伺服器端（Server-side）：
   • 後端是指Web應用程序中運行在伺服器端的部分。
   • 後端包括業務邏輯處理、數據庫管理、安全性、用戶身份驗證和API設計等。
   • 後端開發使用後端語言和框架（如Node.js、Python、Ruby on Rails、Django、Laravel等）。

前後端分離的優點包括：

• 專業化：允許前端和後端團隊專注於自己的領域，提高效率。
• 可擴展性：易於擴展和維護，因為前端和後端是獨立的。
• 重用性：前端和後端代碼可以在不同的項目中重用。
• 性能：前端可以在客戶端上快速執行，減輕伺服器負載。

前後端分離下，request 的流程

1. 當使用者發出請求 ( request ) 後，會由前端接收 request，進行一些驗證、狀態、並整理要給後端的資料後
2. 前端向後端發出 api request (打 api)，每個 api 都是不同的功能，前端發送請求到後端所定義的 api 網址，後端會給予那個網址所能取得的資料
3. 收到後端回傳的資料後，前端再次渲染 html 頁面，將資料放入版面中挖好的框框裡
4. 使用者看到畫面

上圖可以看到，有些使用者請求是不需要後端資料庫的，例如讓使用者填寫空白表單，或是讓使用者有頁面編輯先前已經拿到的資料，都是使用者編輯完後，才送出最終資料給後端進行新增、修改動作。（這個觀念常讓菜鳥後端在開發上卡住，到底前端會給我什麼、我要給前端什麼？）

Laravel 中的全端、純後端

整體概念可以參考昨天的發文：Laravel 與 MVC 架構：Model、View、Controller

那前、後端之間要如何溝通？

API ( Application Programming Interface ) 是什麼？

API（應用程序編程接口）是一組定義了軟體組件之間交互操作的規則和協議。它允許不同的軟體系統、應用程序或服務之間相互通信和協作，使它們能夠共享數據和功能。API通常定義了可用於訪問某個軟體組件的方法和數據格式，並提供了一個標準的界面，以使開發者能夠使用這個組件的功能，而無需了解其內部實現細節。

可以把 API 想像成一個電視遙控器按鈕

1. 接口和通信：API定義了不同軟體組件之間的接口，以便它們能夠互相通信。這些接口可以是函數調用、HTTP請求、數據庫查詢等。(遙控器可以跟電視通訊、操控電視）
2. 功能共享：API允許開發者在其應用程序中使用其他軟體組件的功能，而不必重新實現這些功能。這提高了代碼的重用性和效率。(有些智慧電視除了遙控器，甚至可以使用滑鼠、手機等進行操作)
3. 數據共享：API允許不同應用程序之間共享數據。例如，社交媒體網站的API可以允許第三方應用程序訪問用戶的社交媒體資訊。
4. 服務集成：API使不同的服務能夠集成在一起，創建更大的應用程序。例如，支付服務的API可以被集成到電子商務網站中，以實現線上支付功能。（電視遙控器上有很多按鈕，有連接netflix、youtube、第四臺……)
5. 跨平台支援：API使不同平台之間的交互變得更容易。例如，移動應用程序可以使用Web API訪問伺服器上的數據，而不必了解伺服器的具體實現。
6. 安全性：API可以實現安全性措施，例如身份驗證和授權，以確保只有授權的用戶能夠訪問API的功能和數據。

API可以用於各種不同的上下文中，包括Web應用程序、移動應用程序、桌面應用程序、嵌入式系統、雲端服務等。

RESTful API

RESTful API（Representational State Transfer API）是一種設計風格和架構模式，用於設計網絡應用程序中的 Web API（應用程序編程接口）。它是一種基於資源的設計方法，強調使用標準的HTTP協議方法來進行通信，並且具有以下主要特徵：

1. 資源（Resources）：在RESTful API中，每個資源都具有唯一的識別符號（通常是URL），並且可以通過這個識別符號來訪問。資源可以是任何東西，例如用戶、商品、文章等。

2. HTTP方法：通過 HTTP 方法（GET、POST、PUT、DELETE等），客戶端可以對資源的狀態進行操作，例如獲取、創建、更新或刪除資源。

3. 無狀態（Stateless）：RESTful API是無狀態的，這意味著每個HTTP請求都應該包含足夠的信息，以便伺服器可以理解請求，而不需要保存客戶端的狀態。每個請求都應該是獨立的，伺服器不應該依賴先前的請求。

4. 統一接口（Uniform Interface）：RESTful API使用統一的、一致的接口設計，包括使用HTTP方法來執行操作（GET用於讀取，POST用於創建，PUT用於更新，DELETE用於刪除等），並且使用URI（統一資源識別符號）來標識資源。

   // 未統一接口，命名雜亂無章，後面接手的人要一直猜 api 功能是什麼
   www.example.com**/ProductsList**
   www.example.com**/ProductsData**
   www.example.com**/createAProduct**
   www.example.com**/product**
   
   // 統一接口，套用彼此都知道的規則，後面接手的人要維護可以直接知道打哪個 api 、是什麼功能
   GET  方法： www.example.com**/product**           // 取得列表資料 index
   POST 方法： www.example.com**/product**           // 新增一筆資料 create
   GET  方法： www.example.com**/product**/create    // 取得新增資料的 html 表單
   

5. 無狀態通信（Stateless Communication）：客戶端和伺服器之間的通信不包含用戶狀態，每個請求都包含了足夠的信息，伺服器可以理解和處理請求。

6. 客戶端-伺服器架構（Client-Server Architecture）：RESTful API鼓勵客戶端和伺服器之間的分離，使它們可以獨立發展和演進。這也促進了伺服器的擴展性，因為多個客戶端可以使用相同的API訪問伺服器。

RESTful API通常使用HTTP標準方法（例如HTTP GET、POST、PUT和DELETE）來執行CRUD操作（創建、讀取、更新和刪除資源），並且以JSON或XML等格式返回數據。它是一種簡單、輕量級、可擴展和廣泛應用的API設計風格，常用於網絡應用程序、移動應用程序和服務端之間的通信。

References

1. 什麼是REST? 認識 RESTful API 路由語義化設計風格
2. 什麼是 RESTful API？
3. API 是什麼? RESTful API 又是什麼?

Laravel 菜鳥後端如何打 API?

因為篇幅跟時間有限，這裡給大家兩個方向，之後需要打 API 時可以先研究這兩點喔！

1. Postman 軟體

類似瀏覽器視窗，但是你可以選擇要用什麼 HTTP 方法送出請求、帶入什麼參數等，模擬前端打 api 的情境。(有機會再寫教學文XD)

2. 使用 Tymon/jwt-auth 套件 （會員系統和權限驗證使用)

因為 api 是不會記住你的登入狀態，如果網站功能是有會員權限限制的話，要每次把登入拿到的 token 一起提供。而後端通常會用 JWT token 進行驗證。

官方文件與安裝指令 https://jwt-auth.readthedocs.io/en/develop/laravel-installation/

Tymon/jwt-auth套件有兩個功能：

1. 取代 session 功能：在網頁前端登入後，網站會給予 session 放入 Header 中，讓我們到其他頁面不需一直登入；但如果是後端直接用 post 方法打 /login 沒有取得 session ，所以要使用套件，登入成功會收到一組 token、登入失敗收到 false
2. 資料加密：jwt 讓資料是經過 hash過的，且可反向轉換