- 难以掩饰此刻的心情,经过一天的奋战终于搞懂laravel多对多关联的方法以及如何在vue组件上实现点赞与关注等功能(这里只做点赞,关注大同小异)。
首先配置laravel与vue,我另外一篇文章又说道
1:先配置表结构 ,三张表分别为:文章表posts 用户表user 点赞表zans
(点赞表用于关联文章与用户,可以叫做user_posts,这样可以少配置底层,这里用zans清晰一点)
然后laravel命令行artisan命令生成表
2:配置路由
路由分为两个 第一个路由用于进入页面VUE使用mounted自动获取赞的个数和赞的状态(赞或取消赞)
第二个路由用于VUE直接请求改变赞的状态
3:生成控制器与MODULE文件 这里我就不演示了
但是发几点注意的地方
(1)
定义模型之后一定要定义fillable不然你会掉进坑里- - 它的作用是定义这个表可以注入哪些数据
他还有个相反的属性 这里用不到
(2)MOULE名字是单数 数据表名字是复数 别搞错
4.下面第四部 开始我的表演
(1). 定义最初始的关联关系 user(用户)与post(文章)的关联关系,
第一个参数是当前user模型对象对应的post模型对象的类名,
第二个参数是二者之间关联表的名字:zans,不要忘记加时间戳
(2). 借助第一步定义好的关联关系 调用最核心的toggle方法,即如果存在数据删除 如果不存在就创建。并且传入参数post_id。就可以在操作后于关联表zans中自动生成id,user_id,post_id等数据。
这个关系定义完成之后 我们就可以去控制其中完成点赞动作的代码
控制器定义完毕 去视图层传递数值与激活VUE组件
视图层定义完成 去Vue组件中进行最后访问路由接口渲染赞
双向绑定 实时渲染赞
定义props接收view中传递的post_id值
请求接口 传递参数 获取数据
实现点赞功能
.]
(3).
如何保证点赞刷新不会返回到之前的状态 就要在模型中定义另一个方法去判断zans关联表中是否存在数据 来实现
继续调用user_post关联方法 查询post_id是否存在于关联表中 开头的!!号是会让该语句返回一个布尔值 从而进行判断
控制器返回true与false供前端判断
前端利用mounted生命周期方法进入页面即请求接口传递数据去获取布尔值
判断关联表中是否存在数据来渲染赞
刷新后依然不变 已经成功
5.
附上数据库截图
posts:
users:
zans
很开心 很开心 继续努力