后端开发|php教程
javascript,Laravel,Vue.js
后端开发-php教程
本教学基于Laravel 5.4
头像上传源码安卓,ubuntu 白名单,爬虫技术图片识别,php 宽度,seo优化具体lzw
开始之前首先准备好开发环境，我们假设你已经安装好 Laravel，至于 Vue 的引入，请参考官方文档。做好上述准备工作后就可以开始我们的开发了，本教学中我们将演示文章发布页面的表单 验证 。本文主要和大家介绍了Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下，希望能帮助到大家。
qq群强制分享群源码,vscode插件 前端,ubuntu本地磁盘,tomcat首页更改,sqlite系统日期,flash上传图片插件预览,前端 线条连线框架,图片爬虫项目,后端 php,SEO教学反思,智慧城市网站源码,网页header素材,星外idc模板 网硕,html5移动端登录页面设计,固定资产动态管理系统 源码,仿卷皮网淘宝客程序lzw
首先在 routes/web.php 中新增两条路由规则：
水印源码是怎么样的,ubuntu如何修改内存,tomcat定义虚拟主机,bcg 招聘爬虫,php文件怎么转成pdf,决战seolzw
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, [ itle => equired,ody => equired ]);}
接下来就要创建响应视图了，为了复用已有的样式风格和页面布局，我们先运行如下 Artisan 命令：
php artisan make:auth
这样我们就可以复用 Laravel 自带的认证功能页面布局了，创建视图文件 post/create.blade.php ，并编辑文件内容如下：
@extends(layouts.app)@section(content)
创建成功!
@{{errors.title.join(,)}}
{{ old(ody) }}@{{errors.body.join(,)}}
@endsection
这时访问页面页面为空，因为我们还没有定义 Vue 相关的数据变量， layouts.app 布局视图里引用了 app.js ，而这个 js 由 resources/assets/js/app.js 编译而来，所以我们准备在这里定义 Vue 相关的代码：
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 ：
export default { props: [errors] }
这里我们将父组件中的数据 errors 传递到了子组件中以便在子组件中显示错误信息。完成创建子组件后不要忘了在上述 resources/assets/js/app.js 中引入它：
ponent(form-error, require(./components/FormError.vue));
这样，我们就完成了所有编码工作，接下来运行以下命令重新编译js：
npm run dev
当然在开发环境中，我们更倾向于使用npm run watch，该命令会监听前端资源文件的更改然后重新编译，以避免每次修改后手动编译。
这样，在浏览器中访问 post/create 页面，就可以正常展示了：
什么都不填写，点击创建按钮，页面就能展示错误提示信息了：
填写相应字段之后再提交，则提示创建成功：
这样，我们在 Laravel 中完成了简单的，基于 Vue 实现的Ajax 表单提交验证功能，个人感觉在提升开发效率方面还是很显著的。
相关推荐：
TP框架里面的ajax表单验证方法分享
Ajax表单异步上传文件实例代码详解
Laravel 中使用 Vue.js 实现Ajax表单验证实例
