本教程基于Laravel 5.4

开始之前首先准备好开发环境，我们假设你已经安装好拉弗尔，至于某视频剪辑软件的引入，请参考官方文档。

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

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

route : get(' post/create '，' email protected ')；Route:post('post/save '，'电子邮件保护')；然后在项目根目录下运行技工命令创建控制器后控制器：

php artisan make:controller后控器在生成的控制器中新增两个方法用于处理路由请求：

公共函数create(){ return view(' post。create’)；}公共函数保存（请求$request) { //设置验证规则$this-validate($request，[ 'title'='required '，' body '=' required '])；}接下来就要创建响应视图了，为了复用已有的样式风格和页面布局，我们先运行如下技工命令：

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

@ extends('布局。app ')@ section(' content ')div class=' container '！-创建成功显示消息-div class=' alert alert-success ' v-if=' submit '创建成功！/div！-页面提交之后阻止刷新-表单@提交。protect=' createPost '方法='POST '图例创建文章/传奇！-如果标题字段验证失败则添加has-error-div class=' form-group ' : class=' { ' has-error ' :错误。标题}”标签文章标题/label输入类型=' text ' name=' title ' class=' form-control ' v-model=' post。title ' value=' { { old(' title ')} '！-如果验证失败通过前错误组件显示错误信息-形式错误v-if='错误。title ' : errors=' errors ' @ { { errors }。标题。join('，')} /form-error /div！-如果身体字段验证失败则添加has-error-div class=' form-group ' : class=' { ' has-error ' :错误。' body } '标签文章正文/label文本区域名称=' body ' class=' form-control ' row=' 5 ' v-model=' post。正文“{ old(' body ')}/文本区域！-如果验证失败通过前错误组件显示错误信息-形式错误v-if='错误。body ' : errors=' errors ' @ { { errors }。尸体。join('，')}/form-error/div按钮类型=' submit ' class=' BTN BTN-primary '创建文章/按钮/表单/div@endsection这时访问页面页面为空，因为我们还没有定义某视频剪辑软件相关的数据变量，布局。应用布局视图里引用了app.js，而这个射流研究…由资源/资产/js/app.js编译而来，所以我们准备在这里定义某视频剪辑软件相关的代码：

var app=new Vue({ el: '#app '，data: { post: { title: ' '，body: '' }，错误：[]，submitted: false }，方法： { create post : function(){ var self=this；axios.post('/post/save '，self.post).然后（函数(回应){ //表单提交成功，重置帖子数据并设置提交为true self.post={ title: ' '，body: ' '，}；//清除以前的表单错误self . errors=self . submit=true })。捕捉(函数（错误){ //表单提交失败，将表单错误传递给错误数组自我。错误=错误。回应。数据；});} }});我们在视图文件里还看到了形式错误，这其实是某视频剪辑软件里面的子组件，我们可以在资源/资产/js/组件目录下创建这个新的组件文件，该目录下提供了一个样例示例。vue，我们可以参照该样例编写一个新的FormError.vue:

template span class=' help-block ' slot/slot/span/template script export default { prop s 3360[' errors ']}/script在这里，我们将父组件中的数据错误传递给子组件，以显示子组件中的错误信息。创建子组件后，不要忘记将其引入上述资源/资产/js/app.js中：

Vue.component('form-error '，require('。/components/FOrmror . vue’)；这样，我们就完成了所有的编码工作，然后运行下面的命令来重新编译js:

当然，在开发环境中，我们更喜欢使用npm run watch，它将监控前端资源文件的变化，并重新编译它们，以避免每次修改后的手动编译。

这样，在浏览器中访问post/create页面，就可以正常显示了：

不填写任何内容，单击“创建”按钮，页面将显示错误消息：

提交前填写相应字段，表示创建成功：

这样，我们在Laravel中完成了基于Vue的Ajax表单提交的简单验证功能，个人觉得在提高开发效率方面还是比较显著的。