如何將 Laravel 5.4 后端與 Angular 5 前端連接起來

Question

我正在開發一個項目，我需要在 angular 5 中開發前端，並使用 mySql 數據庫在 laravel 5.4 中開發后端業務邏輯。 我是這項技術的新手，不知道如何在這兩個框架之間開發數據流連接。

如果你告訴我解決這個問題的最簡單和最通用的方法，那將會很有幫助。

Answer 1

與任何其他技術一樣，您需要使用 API。

在你的 Laravel 項目中：

你的 Laravel 項目應該有模型、控制器和控制器中每個方法的路由路徑文件，對嗎？ 如果您不知道路由在哪里，那么在您的項目根目錄中有一個名為“路由”的專用文件夾。

在此文件夾中，您將擁有兩個重要文件：api.php 和 web.php。 這兩者的工作方式完全相同，但 api.php 會自動將 '/api' 添加到路由的開頭。

路由看起來像一個鏈接，例如：“yourdomain.com/api/person/name/jondoe”。 每個路由都必須通過 HTTP 方法訪問，通常是 GET、POST、PUT 或 DELETE。

示例：假設您需要您的用戶查看人員列表。 您可能有一個 Person 模型和一個 PersonController，其中包含一些名為 displayAllPeople() 的函數，該函數將從您的數據庫中選擇人員。 在您的 api.php 文件中，您將添加如下內容：

Route::get('/people', 'PersonController@displayAllPeople');

您可以在瀏覽器中進行測試。 嘗試訪問http://yourdomain.com/api/people 。 您應該會看到函數返回數據的 JSON 輸出。 在此示例中，是人員列表。 現在我們要做的就是讓你的 Angular 項目調用這個 API 路由。

在您的 Angular 項目中：

還記得您在后端創建的 Person 模型嗎？ Angular 也會訪問該模型，因此您必須在此處創建一個 Person.ts 模型。 雖然這不是必需的，但使用與后端模型相同的屬性創建此模型是一個很好的做法。

現在您需要一項服務。 該服務是一個文件，它將為您訪問該 Laravel 路由。 如果您使用的是 Angular CLI，只需運行以下命令：

ng generate service person

這將為您創建一個 person.service.ts 文件。 在此文件中，您將編寫用於選擇人員、更新、保存、刪除人員等的所有功能。 您的函數將如下所示：

findAll(): Observable<Person[]> {
    return this.http.get<Person[]>('yourdomain.com/api/people');
}

每當您調用 findAll() 函數時，您都將訪問 Laravel 路由，該路由將從您的數據庫中返回 People。 你可以用任何你想要的操作來做到這一點。 只要確保您遵循 HTTP 標准。

如果您想將一些數據從前端發送到后端，這也適用，例如您想在數據庫中保存一些新的 Person。 您需要一個 POST 調用來發送您的新 Person 模型，該模型將由您的 Laravel 的控制器函數接收，然后將其保存在數據庫中。