Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel
Code

使用Laravel RESTful后端构建React应用程序:第1部分,Laravel 5.5 API

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel Back End: Part 2, React

Chinese (Simplified) (中文(简体)) translation by Soleil (you can also view the original English article)

Laravel和React是用于构建现代Web应用程序的两种流行的Web开发技术。 Laravel显然是服务器端的PHP框架,而React是一个客户端JavaScript库。 本教程将介绍Laravel和React,将它们组合在一起以创建现代Web应用程序。

在现代Web应用程序中,服务器通过某些API(应用程序编程接口)端点管理后端的工作有限。 客户端向这些端点发送请求,服务器返回响应。 但是,服务器并不关心客户端如何呈现视图,这完全符合“分离关注”原则。 该架构允许开发人员为Web和不同设备构建强大的应用程序。

在本教程中,我们将使用最新版本的Laravel 5.5版来创建RESTful后端API。 前端将包含用React编写的组件。 我们将构建一个资源丰富的产品列表应用程序。 本教程的第一部分将更多地关注Laravel概念和后端。 让我们开始吧。

介绍

Laravel是为现代Web开发的PHP框架。 它具有一种富有表现力的语法,有利于约定优于配置范例。 Laravel具有开箱即用项目所需的所有功能。 但就个人而言,我喜欢Laravel,因为它将PHP开发转变为完全不同的体验和工作流程。

另一方面,React是由Facebook开发的用于构建单页应用程序的流行JavaScript库。 React可帮助您将视图细分为组件,其中每个组件都描述了应用程序UI的一部分。 基于组件的方法具有组件可重用性和模块化的额外好处。

为什么Laravel和React?

如果您正在为Web开发,则可能倾向于为服务器和客户端使用单个代码库。 然而,并非每家公司都允许开发人员自由使用他们选择的技术,并且有充分的理由。 对整个项目使用JavaScript堆栈是当前的常态,但没有什么能阻止您为服务器端和客户端选择两种不同的技术。

那么Laravel和React如何融合在一起呢? 实际上相当不错。 虽然Laravel已经证明支持Vue.js,这是另一个JavaScript框架,但我们将使用React作为前端,因为它更受欢迎。

先决条件

在开始之前,我将假设您对RESTful体系结构以及API端点的工作原理有基本的了解。 此外,如果您有React或Laravel的经验,您将能够充分利用本教程。

但是,如果您对这两个框架都不熟悉,请不要担心。 本教程是从初学者的角度编写的,你应该能够顺利地赶上来。 您可以在GitHub上找到该教程的源代码。

安装和设置Laravel项目

Laravel使用Composer来管理所有依赖项。 因此,在开始使用Laravel之前,请在您的计算机上下载并安装Composer。 您可能还需要配置路径环境变量,以便可以全局访问Composer。

运行以下命令以下载laravel安装程序。

如果您已正确配置$PATH变量并在路径中添加了〜/.composer/vendor/bin,那么您应该能够生成一个全新的Laravel项目,如下所示:

或者,您可以使用Composer在没有laravel安装程序的情况下创建新项目。

如果一切顺利,您应该能够在http://localhost:8000的开发服务器上提供应用程序。

注意:Artisan是一个命令行工具,在使用Laravel时你不能没有。 Artisan接受大量命令,可让您为应用程序生成代码。 运行php artisan list查看所有可用的artisan命令。

配置环境

您的应用程序将在根目录中包含.env文件。 此处声明所有特定于环境的配置信息。 如果您还没有为应用程序创建数据库,请将数据库详细信息添加到.env文件中。

了解模型,路由和控制器

Laravel是一个遵循模型 - 视图 - 控制器(MVC)架构的框架。 从广义上讲,MVC可以帮助您将数据库查询(模型)与关于如何处理请求(控制器)以及如何呈现布局(视图)的逻辑分开。 下图显示了典型Laravel应用程序的工作情况。

Overview of Laravels architecture for building RESTful API endpoints
Laravel的建筑。 控制器返回响应,因此不需要视图层。

由于我们使用Laravel构建API,因此我们将讨论限制在模型和控制器中。 我们将在本教程的第二部分中查看创建View的选项。

路由器

当服务器收到HTTP请求时,Laravel会尝试将其与在任何路由文件中注册的路由进行匹配。 所有路由文件都位于routes目录中。 routes / web.php承载Web界面的路由,而routes / api.php承载API的路由。 在api.php中注册的路由将以/api为前缀(如localhost:3000 / api)。 如果您需要更改此行为,则应该转到/app/Providers/RouteServiceProvider.php中的RouteServiceProvider类并在那里进行更改。

由于我们正在构建产品列表应用程序,因此以下是API的端点以及与这些端点关联的HTTP操作。

  • GET/products/:检索所有产品。
  • GET /product/{id}:检索与id匹配的产品。
  • POST /products:创建新产品并将其插入数据库。
  • PUT /products/{id}:更新与id匹配的现有产品。
  • DELETE /products/{id}:删除具有给定ID的产品。

让我们把术语说得对。 GET,POST,PUT和DELETE是构建RESTful服务所必需的HTTP谓词(更常见的称为HTTP方法)。 /products是与产品资源关联的URI。 HTTP方法请求服务器对给定资源执行所需的操作。

HTTP actions acting on the Product resource
GET,POST,PUT和DELETE是常用的REST操作

路由器允许您声明资源的路由以及以该资源为目标的HTTP方法。 这是一个返回一些硬编码数据的示例路由文件。

routes/api.php

如果要验证路由是否按预期工作,则应使用POSTMAN或curl等工具。

产品型号

产品资源需要一个可以与数据库交互的模型。 Model是位于数据库顶部的层,隐藏了所有特定于数据库的术语。 Laravel使用Eloquent ORM对数据库进行建模。

Laravel附带的Eloquent ORM提供了一个漂亮,简单的ActiveRecord实现,用于处理您的数据库。 每个数据库表都有一个相应的“模型”,用于与该表进行交互。 模型允许您查询表中的数据,以及在表中插入新记录。
— Laravel Docs

那么数据库模式定义呢? Laravel的迁移负责这一点。 Artisan有一个迁移命令,可以让您定义架构并在以后逐步更新它。 让我们为Product实体创建一个模型和一个迁移。

注意:那里有很多Artisan命令,很容易迷失。 因此,每个工匠命令都包含一个辅助屏幕,显示其他信息,例如可用的选项和参数。 要访问帮助页面,应在命令名称前面加上help。 运行以下帮助命令以查看-m选项代表什么:$ php artisan help make:model

这是生成的迁移文件。

database/migrations/timestamp_create_products_table.php

在将新表和列迁移到数据库时调用up方法,而在回滚迁移时调用down方法。 我们为一个包含三行的表创建了一个Schema:idcreated_atupdated_at$table->timestamps()方法负责维护created_atupdated_at列。 让我们在架构定义中添加几行。

我们用四个新列更新了模式。 Laravel的模式构建器支持各种列类型,如stringtextintegerboolean等。

要执行挂起的迁移,您必须运行以下命令:

按照惯例,Laravel假定Product模型与products表相关联。 但是,如果需要将模型与自定义表名关联,则可以使用$table属性声明表的名称。 然后,该模型将与名为custom_products的表相关联。

但是我们会保持简单并遵循惯例。 生成的Product模型位于app/目录中。 虽然模型类可能看起来是空的,但它配备了各种查询构建器方法,可用于查询数据库。 例如,您可以使用Product::all()来检索所有产品,或使用Product::find(1)来检索ID为1的特定产品。

Laravel模型具有针对质量分配漏洞的内置保护机制。 fillable属性用于声明可以安全批量分配的属性名称。

app/Product.php

上面的代码将titledescriptionpriceavailability属性列入白名单,并将其视为可分配的质量。 我们现在可以使用Product::create方法将新行插入到products表中。

数据库播种

Laravel允许您使用虚拟数据填充开发和生产数据库,然后可以使用这些数据来测试API端点。 您可以通过执行以下Artisan命令来创建种子类。

生成的播种器文件将放在database/seeds目录中。

要生成虚拟数据,您可以使用类似str_random(10)的函数来返回随机字符串。 但是,如果您需要的数据足够接近实际数据,您应该使用类似faker库的东西。 Faker是第三方库,随Laravel框架一起提供,用于生成虚假数据。

database/seeds/ProductsTableSeeder.php

执行db:seed artisan命令以填充数据库。

让我们回到routes/api.php并填写缺失的部分。

routes/api.php

控制器

路由文件当前承载用于路由和处理请求的逻辑。 我们可以将请求处理逻辑移动到Controller类,以便我们的代码更有条理,更易读。 让我们先生成一个控制器类。

Controller类包含对应于不同HTTP操作的各种方法(索引,显示,存储,更新和删除)。 我已经将请求处理逻辑从路由移动到控制器。

app/HTTP/Controllers/ProductsController.php

routes/api.php

如果你没有注意到,我已经将一个Product实例注入到控制器方法中。 这是Laravel隐式绑定的一个例子。 Laravel尝试将模型实例名称Product $ product与URI段名称{product}匹配。 如果找到匹配项,则会将Product Model的实例注入控制器操作。 如果数据库没有产品,则返回404错误。 最终结果与之前相同,但代码较少。

打开POSTMAN,产品的端点应该正常工作。 确保启用了Accept:application/json标头。

验证和异常处理

如果你转向一个不存在的资源,这就是你会看到的。

The error page displayed for the NotFoundHTTPException

NotFoundHTTPException是Laravel显示404错误的方式。 如果您希望服务器改为返回JSON响应,则必须更改默认的异常处理行为。 Laravel有一个专门用于异常处理的Handler类,位于app / Exceptions / Handler.php。 该类主要有两个方法:report()render()report 方法对于报告和记录异常事件很有用,而render方法用于在遇到异常时返回响应。 更新render方法以返回JSON响应:

app/Exceptions/Handler.php

Laravel还允许我们使用一组验证规则验证传入的HTTP请求,并在验证失败时自动返回JSON响应。 验证的逻辑将放在控制器内。 Illuminate\Http\Request对象提供了一个验证方法,我们可以使用它来定义验证规则。 让我们为store方法添加一些验证检查。

app/HTTP/Controllers/ProductsController.php

摘要

我们现在有一个用于产品列表应用程序的工作API。 但是,API缺乏基本功能,例如身份验证和限制对未授权用户的访问。 Laravel对身份验证提供了开箱即用的支持,并且为它构建API相对容易。 我鼓励您将身份验证API实现为练习。

对于那些刚刚开始使用Laravel或希望扩展您的知识,网站或带扩展的应用程序的人,我们可以在Envato Market上学习各种各样的东西。

现在我们已经完成了后端工作,我们将把重点转移到前端概念上。 请继续关注本系列的第二部分。 在评论区分享你的观点。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.