摘要：要定義這種關(guān)系，請(qǐng)打開(kāi)模型并添加一個(gè)注意模型的命名空間是所以注意要頭部引入第二個(gè)參數(shù)是數(shù)據(jù)透視表收藏夾的名稱。這將允許插入或更新行時(shí)，數(shù)據(jù)透視表上的時(shí)間戳和列將受到影響。

?

本篇是接著laravel中使用WangEditor及多圖上傳(下篇) 
所以我們這里不演示怎么新建項(xiàng)目了。
?

?
下載之前的項(xiàng)目，完成安裝。
?

?

為了避免后面踩到vue版本的坑，請(qǐng)務(wù)必閱讀此部分
?

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

?

將原來(lái)的require("laravel-elixir-vue");
修改為require("laravel-elixir-vue-2");
?

const elixir = require("laravel-elixir");
?
require("laravel-elixir-vue-2");
?
/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */
?
elixir(mix => {
    mix.sass("app.scss")
       .webpack("app.js");
});

?
?

將原來(lái)的el: "body"改為el: "#app"
?

const app = new Vue({
    el: "#app"
});

?

（如果之前沒(méi)有執(zhí)行此操作）
?

npm  install

?

?
?

我們需要一個(gè)User模型（laravel附帶），一個(gè)Post模型和一個(gè)Favorite模型以及它們各自的遷移文件。
因?yàn)槲覀冎皠?chuàng)建過(guò)了Post的模型，所以我們只需要?jiǎng)?chuàng)建一個(gè)Favorite模型即可。
?

php artisan make:model AppModelsFavorite -m

?

?
這會(huì)創(chuàng)建一個(gè)Favorite模型以及遷移文件。
?

給posts表在id字段后面新增一個(gè)user_id字段
?

php artisan make:migration add_userId_to_posts_table --table=posts

修改database/migrations/2018_01_18_145843_add_userId_to_posts_table.php

    public function up()
    {
        Schema::table("posts", function (Blueprint $table) {
            $table->integer("user_id")->unsigned()->after("id");
        });
    }

?
database/migrations/2018_01_18_142146_create_favorites_table.php
?

    public function up()
    {
        Schema::create("favorites", function (Blueprint $table) {
            $table->increments("id");
            $table->integer("user_id")->unsigned();
            $table->integer("post_id")->unsigned();
            $table->timestamps();
        });
    }

?
該favorites表包含兩列：
?

user_id 被收藏文章的用戶ID。
post_id 被收藏的帖子的ID。

?
然后進(jìn)行表遷移

php artisan migrate

?

因?yàn)槲覀冎熬鸵呀?jīng)創(chuàng)建過(guò)了，所以這里就不需要重復(fù)創(chuàng)建了。

如果你沒(méi)有創(chuàng)建過(guò)用戶認(rèn)證模塊，則需要執(zhí)行php artisan make:auth
?

修改routes/web.php

?

?
Auth::routes();
?
Route::post("favorite/{post}", "ArticleController@favoritePost");
Route::post("unfavorite/{post}", "ArticleController@unFavoritePost");
?
Route::get("my_favorites", "UsersController@myFavorites")->middleware("auth");

?

由于用戶可以將許多文章標(biāo)記為收藏夾，并且一片文章可以被許多用戶標(biāo)記為收藏夾，所以用戶與最收藏的文章之間的關(guān)系將是多對(duì)多的關(guān)系。要定義這種關(guān)系，請(qǐng)打開(kāi)User模型并添加一個(gè)favorites()
?
app/User.php

注意post模型的命名空間是 AppModelsPost
所以注意要頭部引入use AppModelsPost;
?

    public function favorites()
    {
        return $this->belongsToMany(Post::class, "favorites", "user_id", "post_id")->withTimeStamps();
    }

?
第二個(gè)參數(shù)是數(shù)據(jù)透視表（收藏夾）的名稱。第三個(gè)參數(shù)是要定義關(guān)系（User）的模型的外鍵名稱（user_id），而第四個(gè)參數(shù)是要加入的模型（Post）的外鍵名稱（post_id）。
?
注意到我們鏈接withTimeStamps()到belongsToMany()。這將允許插入或更新行時(shí)，數(shù)據(jù)透視表上的時(shí)間戳（create_at和updated_at）列將受到影響。
?
?

因?yàn)槲覀冎皠?chuàng)建過(guò)了，這里也不需要?jiǎng)?chuàng)建了。

如果你沒(méi)有創(chuàng)建過(guò)，請(qǐng)執(zhí)行php artisan make:controller ArticleController
?

注意要頭部要引入use IlluminateSupportFacadesAuth;
?

favorites()->attach($post->id);
        return back();
    }
?
    public function unFavoritePost(Post $post)
    {
        Auth::user()->favorites()->detach($post->id);
        return back();
    }
}

?

安裝axios

?

npm install axios --save

?

引入axios模塊

resource/assets/js/bootstrap.js
在最后加入
?

import axios from "axios";
window.axios = axios;

?

?

// resources/assets/js/components/Favorite.vue
?

?

?

在視圖組件使用之前，我們先引入字體文件
resource/views/layouts/app.blade.php
頭部引入字體文件
?

?
并在app.blade.php
添加我的收藏夾鏈接
?

// 加在logout-form之后

    {{ csrf_field() }}

?
我的收藏夾

?
使用組件
?

// resources/views/home/article/index.blade.php
?
if (Auth::check())
    

        id }}
            :favorited={{ $list->favorited() ? "true" : "false" }}
        >
    
endif

?
然后我們要?jiǎng)?chuàng)建favorited()
打開(kāi)app/Models/Post.php增加favorited()方法

注意要在頭部引用命名空間
use AppModelsFavorite;
use IlluminateSupportFacadesAuth;
?

    public function favorited()
    {
        return (bool) Favorite::where("user_id", Auth::id())
                            ->where("post_id", $this->id)
                            ->first();
    }

?

引入Favorite.vue組件
resources/assets/js/app.js
?

Vue.component("favorite", require("./components/Favorite.vue"));

?
編譯

npm run dev

?

?

效果圖
?

?

?

?

php artisan make:controller UsersController

?
修改app/Http/Controllers/UsersController.php
?

favorites;
        return view("users.my_favorites", compact("myFavorites"));
    }
}

?
添加視圖文件

// resources/views/users/my_favorites.blade.php
?
extends("layouts.app")
?
@section("content")

    

        

            

                
My Favorites
            
            @forelse ($myFavorites as $myFavorite)
                

                    

                        
                            {{ $myFavorite->title }}
                        
                    
?
                    

                        
                    
                    @if (Auth::check())
                        

                            id }}
                                :favorited={{ $myFavorite->favorited() ? "true" : "false" }}
                            >
                        
                    @endif
                
            @empty
                
You have no favorite posts.
            @endforelse
         
    

@endsection

?
然后重新向一下根目錄
routes/web.php 添加一條路由
?

Route::get("/", "ArticleController@index");

?
最后效果圖

?

參考資料 
Implement a Favoriting Feature Using Laravel and Vue.js 
laravel 5.4 vue 收藏文章
github地址 https://github.com/pandoraxm/laravel-vue-favorites
原文鏈接 https://www.bear777.com/blog/laravel5-3-vue