本教程基于laravel 5.4
开始之前首先准备好开发环境，我们假设你已经安装好 laravel，至于 vue 的引入，请参考官方文档。
做好上述准备工作后就可以开始我们的开发了，本教程中我们将演示文章发布页面的表单 验证 。
首先在 routes/web.php 中新增两条路由规则：
|
1
2
|
route::get('post/create', 'postcontroller@create');route::post('post/save', 'postcontroller@save'); |
然后在项目根目录下运行 artisan 命令创建控制器 postcontroller ：
|
1
|
php artisan make:controller postcontroller |
在生成的控制器中新增两个方法用于处理路由请求：
|
1
2
3
4
5
6
7
8
9
10
|
public function create() { return view('post.create');}public function save(request $request) { // 设置验证规则 $this->validate($request, [ 'title' => 'required', 'body' => 'required' ]);} |
接下来就要创建响应视图了，为了复用已有的样式风格和页面布局，我们先运行如下 artisan 命令：
|
1
|
php artisan make:auth |
这样我们就可以复用 laravel 自带的认证功能页面布局了，创建视图文件 post/create.blade.php ，并编辑文件内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
@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 相关的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var app = new vue({ el: '#app', data: { post: { title: '', body: '' }, errors: [], submitted: false }, methods: { createpost: function () { var self = this; axios.post('/post/save', self.post).then(function(response) { // form submission successful, reset post data and set submitted to true self.post = { title: '', body: '', }; // clear previous form errors self.errors = ''; self.submitted = true; }).catch(function (error) { // form submission failed, pass form errors to errors array self.errors = error.response.data; }); } }}); |
我们在视图文件里还看到了 form-error ，这其实是 vue 里面的子组件，我们可以在 resources/assets/js/components 目录下创建这个新的组件文件，该目录下提供了一个样例 example.vue ，我们可以参照该样例编写一个新的 formerror.vue ：
|
1
2
3
4
5
6
7
8
9
10
|
<template> <span class="help-block"> <slot></slot> </span></template><script> export default { props: ['errors'] }</script> |
这里我们将父组件中的数据 errors 传递到了子组件中以便在子组件中显示错误信息。完成创建子组件后不要忘了在上述 resources/assets/js/app.js 中引入它：
|
1
|
vue.component('form-error', require('./components/formerror.vue')); |
这样，我们就完成了所有编码工作，接下来运行以下命令重新编译js：
|
1
|
npm run dev |
当然在开发环境中，我们更倾向于使用 npm run watch ，该命令会监听前端资源文件的更改然后重新编译，以避免每次修改后手动编译。
这样，在浏览器中访问 post/create 页面，就可以正常展示了：
什么都不填写，点击创建按钮，页面就能展示错误提示信息了：
填写相应字段之后再提交，则提示创建成功：
这样，我们在 laravel 中完成了简单的，基于 vue 实现的ajax 表单提交验证功能，个人感觉在提升开发效率方面还是很显著的。
原文链接：http://www.tuicool.com/articles/EJBJjar
