如何连接 Laravel 5.4 后端与 Angular 5 前端

Question

我正在开展一个项目，我需要在 angular 5 中开发前端，在 laravel 5.4 中使用 mySql 数据库开发后端业务逻辑。我是这项技术的新手，不知道如何开发这两个框架之间的数据流连接。

如果你能告诉我解决这个问题的最简单和最通用的方法，我会很有帮助。

Answer 1

与任何其他技术一样，您需要使用 API。

在您的 Laravel 项目中：

您的 Laravel 项目应该有模型、控制器和控制器中每个方法的路由路径文件，对吗？如果您不知道路线在哪里，在项目的根目录下有一个名为 "routes" 的专用文件夹。

在此文件夹中，您将有两个重要文件：api.php 和 web.php。这两者的工作方式完全相同，但 api.php 会自动将 '/api' 添加到路线的开头。

一条路线看起来像link，例如："yourdomain.com/api/person/name/jondoe"。每个路由都必须通过 HTTP 方法访问，通常是 GET、POST、PUT 或 DELETE。

示例：假设您需要您的用户查看人员列表。您可能会有一个 Person 模型和一个 PersonController，其中包含一些名为 displayAllPeople() 的函数，并且此函数将 select 来自您数据库的人员。在您的 api.php 文件中，您将添加如下内容：

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

您可以在浏览器中进行测试。尝试访问 http://yourdomain.com/api/people。您应该会看到函数的 return 数据的 JSON 输出。在此示例中，是人员列表。现在我们要做的就是让你的 Angular 项目调用这个 API 路由。

在您的 Angular 项目中：

还记得您在后端创建的 Person 模型吗？ Angular 也将访问该模型，因此您必须在此处创建一个 Person.ts 模型。虽然这不是工作所必需的，但最好使用与后端模型相同的属性创建此模型。

现在您需要一项服务。该服务是一个文件，它将为您访问 Laravel 路由。如果您使用 Angular CLI，只需运行命令：

ng generate service person

这将为您创建一个 person.service.ts 文件。在此文件中，您将编写 select 人的所有功能，更新、保存、删除人等。您的函数将如下所示：

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

无论何时调用 findAll() 函数，您都将访问 Laravel 路由，这将从您的数据库中 return People。您可以通过任何您想要的操作来做到这一点。请确保您遵循 HTTP 标准。

如果你想将一些数据从前端发送到后端，这也适用，比如你想在数据库中保存一些新的 Person。您需要一个 POST 调用来发送您的新 Person 模型，该模型将由您的 Laravel 的 Controller 函数接收，然后将其保存在数据库中。

How to connect Laravel 5.4 backend with Angular 5 Frontend