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

?

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

?
下載之前的項目，完成安裝。
?

?

為了避免后面踩到vue版本的坑，請務必閱讀此部分
?

{
  "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"
  }
}

?

將原來的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");
});

?
?

將原來的el: "body"改為el: "#app"
?

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

?

（如果之前沒有執行此操作）
?

npm  install

?

?
?

我們需要一個User模型（laravel附帶），一個Post模型和一個Favorite模型以及它們各自的遷移文件。
因為我們之前創建過了Post的模型，所以我們只需要創建一個Favorite模型即可。
?

php artisan make:model AppModelsFavorite -m

?

?
這會創建一個Favorite模型以及遷移文件。
?

給posts表在id字段后面新增一個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。

?
然后進行表遷移

php artisan migrate

?

因為我們之前就已經創建過了，所以這里就不需要重復創建了。

如果你沒有創建過用戶認證模塊，則需要執行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");

?

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

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

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

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

因為我們之前創建過了，這里也不需要創建了。

如果你沒有創建過，請執行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

?
然后我們要創建favorited()
打開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