Laravel Vue JS Axios Post 请求

在本节中，我们将学习如何使用 Vue JS 发送 Axios post 请求。我们将使用 Laravel 来实现。在我们的应用程序中，可以使用任何版本的 Laravel，例如 Laravel 5、6、7 和 8。我们将使用 CSRF 令牌，以便可以发送 post 表单输入数据。使用控制器方法，我们可以访问输入数据。如果我们在 Angular JS 或 Vue JS 中开发项目，我们必须了解 Axios 包，以便进行 PUT、POST、GET 和 DELETE 的 HTTP 请求。为了发送 post 请求，我们将在下面的表单中使用一个输入数据。

当用户提交表单时，Laravel 控制器方法将获取表单的所有数据。我们还将使用 post 方法来发送 CRSF 令牌。为此，将创建控制器方法，然后返回请求数据。之后，我们将使用前端来打印数据。使用前端，用户可以轻松地看到输出。使用 Axios 和 Vue JS，我们将创建一个表单，然后提交该表单。执行此操作的步骤如下：

步骤 1

在此步骤中，我们将安装全新的 Laravel 应用程序。以下命令对于获取全新的 Laravel 5.6 应用程序非常有用。我们将使用 CMD 或终端，然后运行如下所述的命令：

步骤 2

在此步骤中，我们将创建路由。为此，将创建一个 post 路由，之后将返回所有 post 表单数据。我们将使用该文件并添加一个新路由，如下所示：

routes/web.php

步骤 3

在此步骤中，我们将创建新控制器。我们将创建一个新控制器，名为 PostController。我们将使用 formSubmit 方法创建它。请求数据将通过此方法返回。创建控制器的代码如下所示：

app/Http/Controllers/PostController.php

步骤 4

在此步骤中，我们将执行 NPM 配置。为此，我们将首先安装 Vue JS 设置，然后安装 NPM。安装两者的命令如下所述：

安装 vue

安装 npm

步骤 5

在此步骤中，我们将编写 app.js 和组件。为此，我们将首先使用 app.js 并在其中编写代码。之后，我们将创建 Vue JS 的组件。创建这两个文件后，我们将以下代码添加到这些文件中

resources/assets/js/app.js

步骤 6

在此步骤中，我们将更新 welcome.blade.php 文件。app.js 文件将在此文件中使用，如下所述：

resources/views/welcome.blade.php

现在，我们的上述代码已准备好运行。为了运行上述代码以更新 app.js 文件，我们将使用以下命令：

当我们运行此命令时，将生成以下输出