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或终端，然后运行以下命令：

composer create-project --prefer-dist laravel/laravel blog

步骤2：

在这一步中，我们将要 创建路由 . 为此，将创建一个 POST 路由，并返回所有的 POST 表单数据。我们将使用该文件并添加一个新路由，就像这样：

routes/web.php

Route::post('formSubmit','PostController@formSubmit');

步骤3：

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

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function formSubmit(Request  $request) { return response()->json([$ request->all()]);
    }
}

步骤4：

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

安装vue：

php artisan preset vue

安装 npm：

npm install

步骤5：

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

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

resources/assets/js/components/ExampleComponent.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"> Laravel Vue Axios Post </div>

                    <div class="card-body">
                        <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Description:</strong>
                        <textarea class="form-control" v-model="description"></textarea>

                        <button class="btn btn-success">Submit</button>
                        </form>
                        <strong>Output:</strong>
                        <pre>
                        {{output}}
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
              name: '',
              description: '',
              output: ''
            };
        },
        methods: {
            formSubmit(e) {
                e.preventDefault();
                let currentObj = this;
                axios.post('/formSubmit', {
                    name: this.name,
                    description: this.description
                })
                .then(function (response) {
                    currentObj.output = response.data;
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script>

步骤6：

在这一步中，我们要更新welcome.blade.php文件。该文件将使用app.js文件，在文件中的使用方式如下所示：

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 5.6 Vue JS Axios post </title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

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