• 难以掩饰此刻的心情，经过一天的奋战终于搞懂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

很开心 很开心 继续努力