Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

本教程基于Laravel 5.4

开始之前首先准备好开发环境，我们假设你已经安装好 Laravel，至于 Vue 的引入，请参考官方文档。

做好上述准备工作后就可以开始我们的开发了，本教程中我们将演示文章发布页面的表单 验证 。

首先在 routes/web.php 中新增两条路由规则：

Route::get('post/create', 'PostController@create');Route::post('post/save', 'PostController@save');

然后在项目根目录下运行 Artisan 命令创建控制器 PostController ：

php artisan make:controller PostController

在生成的控制器中新增两个方法用于处理路由请求：

public function create() {  return view('post.create');}public function save(Request $request) {  // 设置验证规则  $this->validate($request, [     'title' => 'required',     'body' => 'required'   ]);}

接下来就要创建响应视图了，为了复用已有的样式风格和页面布局，我们先运行如下 Artisan 命令：

php artisan make:auth

这样我们就可以复用 Laravel 自带的认证功能页面布局了，创建视图文件 post/create.blade.php ，并编辑文件内容如下：

@extends('layouts.app')@section('content')  <div class="container">    <!--创建成功显示消息-->    <div class="alert alert-success" v-if="submitted">      创建成功!    </div>    <!--页面提交之后阻止刷新-->    <form @submit.prevent="createPost" method="POST">      <legend>创建文章</legend>      <!--如果title字段验证失败则添加.has-error-->      <div class="form-group" :class="{'has-error':errors.title}">        <label>文章标题</label>        <input type="text" name="title" class="form-control" v-model="post.title" value="{{ old('title') }}">        <!--如果验证失败通过FormError组件显示错误信息-->        <form-error v-if="errors.title" :errors="errors">          @{{errors.title.join(',')}}        </form-error>      </div>      <!--如果body字段验证失败则添加.has-error-->      <div class="form-group" :class="{'has-error':errors.body}">        <label>文章正文</label>        <textarea name="body" class="form-control" rows="5" v-model="post.body">{{ old('body') }}</textarea>        <!--如果验证失败通过FormError组件显示错误信息-->        <form-error v-if="errors.body" :errors="errors">          @{{errors.body.join(',')}}        </form-error>      </div>      <button type="submit" class="btn btn-primary">创建文章</button>    </form>  </div>@endsection

这时访问页面页面为空，因为我们还没有定义 Vue 相关的数据变量， layouts.app 布局视图里引用了 app.js ，而这个 js 由 resources/assets/js/app.js 编译而来，所以我们准备在这里定义 Vue 相关的代码：