如何将 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 的控制器函数接收，然后将其保存在数据库中。