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的知识。为了发送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文件,我们将使用以下命令:
当我们运行这个命令时,将会生成以下输出: