laravel+vue多对多关联表进行点赞关注等功能

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了laravel+vue多对多关联表进行点赞关注等功能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
  • 难以掩饰此刻的心情,经过一天的奋战终于搞懂laravel多对多关联的方法以及如何在vue组件上实现点赞与关注等功能(这里只做点赞,关注大同小异)。

首先配置laravel与vue,我另外一篇文章又说道

1:先配置表结构 ,三张表分别为:文章表posts 用户表user 点赞表zans
(点赞表用于关联文章与用户,可以叫做user_posts,这样可以少配置底层,这里用zans清晰一点)

clipboard.png

clipboard.png
clipboard.png

然后laravel命令行artisan命令生成表

2:配置路由

laravel+vue多对多关联表进行点赞关注等功能

路由分为两个 第一个路由用于进入页面VUE使用mounted自动获取赞的个数和赞的状态(赞或取消赞)
第二个路由用于VUE直接请求改变赞的状态

3:生成控制器与MODULE文件 这里我就不演示了
但是发几点注意的地方
(1)

laravel+vue多对多关联表进行点赞关注等功能


定义模型之后一定要定义fillable不然你会掉进坑里- - 它的作用是定义这个表可以注入哪些数据
他还有个相反的属性 这里用不到

(2)MOULE名字是单数 数据表名字是复数 别搞错

4.下面第四部 开始我的表演

(1). 定义最初始的关联关系 user(用户)与post(文章)的关联关系,

第一个参数是当前user模型对象对应的post模型对象的类名,
 第二个参数是二者之间关联表的名字:zans,不要忘记加时间戳

laravel+vue多对多关联表进行点赞关注等功能

(2). 借助第一步定义好的关联关系 调用最核心的toggle方法,即如果存在数据删除 如果不存在就创建。并且传入参数post_id。就可以在操作后于关联表zans中自动生成id,user_id,post_id等数据。

laravel+vue多对多关联表进行点赞关注等功能

这个关系定义完成之后 我们就可以去控制其中完成点赞动作的代码

laravel+vue多对多关联表进行点赞关注等功能

控制器定义完毕 去视图层传递数值与激活VUE组件

laravel+vue多对多关联表进行点赞关注等功能

视图层定义完成 去Vue组件中进行最后访问路由接口渲染赞

双向绑定 实时渲染赞

laravel+vue多对多关联表进行点赞关注等功能

laravel+vue多对多关联表进行点赞关注等功能

定义props接收view中传递的post_id值

laravel+vue多对多关联表进行点赞关注等功能

请求接口 传递参数 获取数据

laravel+vue多对多关联表进行点赞关注等功能

实现点赞功能

laravel+vue多对多关联表进行点赞关注等功能


.]

(3).
如何保证点赞刷新不会返回到之前的状态 就要在模型中定义另一个方法去判断zans关联表中是否存在数据 来实现

继续调用user_post关联方法 查询post_id是否存在于关联表中 开头的!!号是会让该语句返回一个布尔值 从而进行判断

laravel+vue多对多关联表进行点赞关注等功能

控制器返回true与false供前端判断

laravel+vue多对多关联表进行点赞关注等功能

前端利用mounted生命周期方法进入页面即请求接口传递数据去获取布尔值
判断关联表中是否存在数据来渲染赞

laravel+vue多对多关联表进行点赞关注等功能

刷新后依然不变 已经成功

laravel+vue多对多关联表进行点赞关注等功能

5.
附上数据库截图
posts:

laravel+vue多对多关联表进行点赞关注等功能

users:

laravel+vue多对多关联表进行点赞关注等功能

zans

laravel+vue多对多关联表进行点赞关注等功能

很开心 很开心 继续努力

脚本宝典总结

以上是脚本宝典为你收集整理的laravel+vue多对多关联表进行点赞关注等功能全部内容,希望文章能够帮你解决laravel+vue多对多关联表进行点赞关注等功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue