Laravel+Vuejs实现Task增删改查功能(转)

1.创建一条资源路由,如下图

2.执行命令php artisan make:controller TaskController --resource,此时,在app/Http/Controllers目录下生成一个TaskController资源控制器,在index方法获取所有的tasks,如下图:

3.在app/resources/view/task目录下创建index.blade.php文件,如下:

4.laravel实现的tasks列表功能效果,如下:

5.简单的tasks列表展示完成,但是我们要用vuejs实现该功能,首先,直接加载vuejs压缩包,并实例化Vue(el:body表示整个body区域属于vuejs控制).

6.把列表展示部分提取出来,放在template标签里面,如下:

7.接下来要实现的就是如何用vuejs绑定数据到tempate模版,不废话,直接贴代码:

这里用vue的component组件,第一个模版替换自定义的tasks-app标签,(最好是这种形式,如果是tasks标签随着以后发展可能会加入新标签,避免与之冲突),第二参数是一个json数据:template是指定哪个模板替换原有自定义标签,data就是数据,返回的是task空数据。我们绑定这个数据都模板,循环li标签这里用vue里的v-for,因为laravel的模板变量标签是{{ }}与vuejs的语法冲突,所以在前面加{{ }}前加@laravel就不会解析模板标签。

8.因为绑定data里面的tasks数据为空,所以页面展示效果就是没有内容的列表页,如下:

9.接下来需要做,如何用vuejs从后台获取数据,绑定到tasks上面?

1
直接用jquery库实现get请求获取tasks数据,同时绑定到data数据tasks上。

10.创建tasks的API路由,同时创建TaskApiControler资源控制器,如下:


11.此时,tasks列表页的效果又回到我们最开始用laravel实现tasks列表效果相同。

12.接下来实现用vuejs实现删除task,同时删除数据记录。不过在这之前加载vuejs的一个插件vue-resource,该插件用法见:vue-resource。在component组件里添加deleteTask方法同时绑定到删除按钮上该删除事件,代码如下:

注意:用vue-resource插件注册一个资源路由,跟laravel里面的资源路由用法差不多,绑定到删除按钮传递一个task一条记录到deleteTask方法,执行resource.delete方法到后台,实际对应后台的删除路由,后台删除控制器代码如下:

13.在视图里点击删除按钮,会实现删除功能同时删除数据库纪录,但这里报错(不要方!!!因为没有Laravel没有获取token值),加如下两行代码即可:

1
删除数据库的记录vuejs同时执行$remove删除tasks 里面的该条记录

14.接下来实现添加task,在template增加一个form 表单,在vue的component组件添加createTask方法,并且在input用v-model绑定数据notes,同时在data初始化一个notes:



1
创建Task成功,但是需要优化效果,这里简单优化两个地方,一个是创建成功现实在最前面,另一个是清空input框数据。具体修改代码如下:


注意:这里的orderBy是vuejs的排序,-1代表倒序。

15.最后的效果,如下:

编辑功能如添加功能,稍作修改即可。整个功能实现完成!初学VueJs使用的不是很好,欢迎指正!(转)


注:本文章转自公众号:chengxuyuanbiji,本文转载已取得授权。另转载请注明出处,一切权益归原作者所有。
扫描以下二维码关注 chengxuyuanbiji 公众号,掌握最新Laravel及相关前端扩展技术知识。