摘要：至于一對(duì)一和一對(duì)多這兩種關(guān)系，可以觸類旁通。注意文件的下載或來源，請(qǐng)自行獲取。接下來，我們使用取得文章的標(biāo)簽，這個(gè)就是我們聲明多對(duì)多關(guān)系的方法。

原文來自 https://laravist.com/article/18

Laravist是我剛剛上線的Laravel社區(qū)，有任何與Laravel相關(guān)的問題可以到這里來問我，我會(huì)盡力去幫大家解決問題，后期會(huì)嘗試錄制一些視頻教程，形式大概是這樣的

https://laravist.com/lesson/1

在開始正文之前，我們首先來說說在實(shí)際的開發(fā)中，經(jīng)常會(huì)接觸到幾種常見的對(duì)應(yīng)關(guān)系模式：

One-To-One //一對(duì)一

One-To-Many //一對(duì)多

Many-To-Many //多對(duì)多

不知道你對(duì)這些概念是一種什么樣的感受，如果是不太理解的。你可以將這些概念應(yīng)用到生活中，理解起來就很簡(jiǎn)單了，就舉一個(gè)與我們?cè)诰W(wǎng)上經(jīng)常見到的例子：

User-To-Profile // One-To-One

User-To-Articles // One-To-Many

Article-To-Comments // One-To-Many

Articles-To-Tags // Many-To-Many

翻譯過來就是：

一個(gè)用戶對(duì)應(yīng)一個(gè)用戶檔案

一個(gè)用戶可以發(fā)表多篇文章

一篇文章可以有多個(gè)評(píng)論

而文章和標(biāo)簽確實(shí)多對(duì)多的關(guān)系，一篇文章可以有多個(gè)標(biāo)簽；一個(gè)標(biāo)簽可以屬于多篇文章

在這些關(guān)系模型中，最難實(shí)現(xiàn)的就是Many-To-Many這種多對(duì)多的關(guān)系，但是我們這個(gè)簡(jiǎn)單地博客并沒有用戶管理，也就是并沒有開放讓用戶注冊(cè)，所以我們?cè)谶@里還是要挑戰(zhàn)一下難度，實(shí)現(xiàn)Articles-To-Tags這種Many-To-Many關(guān)系，借助Laravel的強(qiáng)大的Eloquent，實(shí)現(xiàn)這個(gè)功能還是比較順心的。至于一對(duì)一和一對(duì)多這兩種關(guān)系，可以觸類旁通。

要實(shí)現(xiàn)Articles-To-Tags這種Many-To-Many關(guān)系，我們需要tags表和Tag模型，所以我們分別來創(chuàng)建之。

php artisan make:migration create_tags_table --create=tags

打開生成的migration文件，為up()方法增加一行代碼：

public function up()
{
    Schema::create("tags", function (Blueprint $table) {
        $table->increments("id");
        $table->string("name");
        $table->timestamps();
    });
}

這里我們?cè)黾恿?b>$table->string("name");這一行，這個(gè)字段表示為tags table添加一個(gè)name字段，代表標(biāo)簽的名字。

接下來，我們?yōu)?b>tags表創(chuàng)建一個(gè)Tag模型:

php artisan make:model Tag

生成了Tag模型之后，我們先不用去管Tag.php文件，因?yàn)槲覀冞€需要一張關(guān)系表article_tag，這個(gè)表只存tag_id和article_id，所以我們來創(chuàng)建之：

php artisan make:migration create_article_tag_table --create=article_tag

打開migration文件來為之加上tag_id和article_id這兩個(gè)字段：

 public function up()
    {
        Schema::create("article_tag", function (Blueprint $table) {
            $table->increments("id");
            $table->integer("article_id")->unsigned()->index();
            $table->foreign("article_id")->references("id")->on("articles")->onDelete("cascade");
            $table->integer("tag_id")->unsigned()->index();
            $table->foreign("tag_id")->references("id")->on("tags")->onDelete("cascade");
            $table->timestamps();
        });
    }

這里貌似就添加tag_id和article_id這兩個(gè)字段，但是用了很多行代碼，我們只要是理解下面這個(gè)：

$table->foreign("article_id")->references("id")->on("articles")->onDelete("cascade");

foreign()：外鍵
references()：參照字段
on()：參照表
onDelete()：刪除時(shí)的執(zhí)行動(dòng)作
這里是跟著刪除，比如刪除了某篇文章，我們將article_tag中包含article_id一樣的記錄也刪除

最后，執(zhí)行migration生成article_tag表：

php artisan migrate

OK，生成這兩個(gè)表之后，我們就可以正式開始我們的工作了。

Articles和Tags是多對(duì)多的關(guān)系，所以我們需要在Article.php中聲明下面的關(guān)系：

public function tags()
    {
        return $this->belongsToMany("AppTag");
    }

在Tag.php，也同樣：

 public function articles()
    {
        return $this->belongsToMany("AppArticle");
    }

我們使用$this->belongsToMany()來表明Eloquent的關(guān)系，這里需要注意的是如果你的外鍵并不是article_id和tag_id，你需要在第三個(gè)參數(shù)進(jìn)行設(shè)置，寫成類似下面這樣：

 public function articles()
    {
        return $this->belongsToMany("AppArticle","conversation_id");
    }

OK，這樣，我們的多對(duì)多關(guān)系就聲明完畢了。

在開始之前，我們使用tinker生成幾個(gè)tag，過程就不演示了，最后是這樣的：

然后，為了更好地用戶體驗(yàn)，我們引入Select2，這個(gè)對(duì)選擇多個(gè)選項(xiàng)的時(shí)候表現(xiàn)得異常完美。

Select2 用法：https://select2.github.io/examples.html

我們?cè)赼pp.blade.php引入Select2的css文件和js文件：

在標(biāo)簽內(nèi)，我們還引入了jquery，因?yàn)閟elect2依賴于jquery，所以。注意文件的下載或來源，請(qǐng)自行獲取。

引入之后，我們就可以在文件創(chuàng)建的頁面依舊使用我們的Form來生成我們的選擇框了，來到articles/create.blade.php文件，在published_at下面添加一個(gè)輸入表單：

        {!! Form::label("tag_list","選擇標(biāo)簽") !!}
        {!! Form::select("tag_list[]",$tags,null,["class"=>"form-control js-example-basic-multiple","multiple"=>"multiple"]) !!}

這里需要注意的是tag_list[]，如果我們只是使用tag_list,就只能選到一個(gè)標(biāo)簽，如果我們需要選擇多個(gè)，我們需要已數(shù)組的形式來儲(chǔ)存我們的標(biāo)簽，還有一個(gè)就是指定一下"multiple"=>"multiple"，就是開啟支持多選模式。然后$tags就是我們需要從數(shù)據(jù)庫獲tags表取到得數(shù)據(jù)，所以自然而然，我們到ArticleController中的create()方法中，稍微修改一下代碼：

public function create()
    {
        $tags = Tag::lists("name", "id");
        //為了在界面中顯示標(biāo)簽name，id為了在保存文章的時(shí)候使用。
        return view("articles.create",compact("tags"));
    }

這里我們使用lists()方法將Tag中(對(duì)于tags數(shù)據(jù)表)name和id以一個(gè)Eluqoent的方式返回，你可以使用dd($tags)，來看看。恩，這個(gè)時(shí)候來看看我們的create頁面：

這時(shí)候我們發(fā)現(xiàn)，樣式并沒有Select2那么好看，那是因?yàn)槲覀冞€沒有初始化Select2，所以我們?cè)赾reate.blade.php寫幾行簡(jiǎn)單地js代碼：

在@endsection緊接著的上一行加上上面的代碼，這里我們使用jquery的選擇器，然后調(diào)用select2();來初始化我們的選擇框，再來看看效果：

很完美，我們將整個(gè)UI完善得還不錯(cuò)，我們用dd();來看看我們表單提交過來的是什么，在ArticleController中的store()方法中添加一行代碼：

dd($request->all());

我們來看看效果：

我們看到得tag_list是一個(gè)數(shù)組，里面的值并不是我們選擇的標(biāo)簽的name，而是標(biāo)簽的id，這樣我們就可以使用laravel提供的attach()來添加我們的標(biāo)簽了，這個(gè)attach()接受一個(gè)id的數(shù)組，這里正好！，所以我們來稍微來修改一下store()方法：

 public function store(RequestsStoreArticleRequest $request)
    {
        $input = $request->all();
        $input["intro"] = mb_substr($request->get("content"),0,64);
        $article = Article::create($input);
        $article->tags()->attach($request->input("tag_list"));
        return redirect("/");
    }

我們這里首先將Article::create($input)賦予$article變量(Eloquent對(duì)象)，然后使用$article->tags()->attach()來添加標(biāo)簽，并將我們的標(biāo)簽數(shù)組傳給attach()方法，我們來看看有沒有成功：

這里的文章是發(fā)表成功了，我們?cè)賮砜纯次覀兊臉?biāo)簽是否添加成功，來看看我們的article_tag表：

是添加了三個(gè)標(biāo)簽，但是我們發(fā)現(xiàn)這個(gè)created_at和updated_at貌似有點(diǎn)問題，我們來修復(fù)一下，在Article.php中的tags()方法中：

public function tags()
    {
        return $this->belongsToMany("AppTag")->withTimestamps();
    }

我們?cè)诤竺嬷苯邮褂?b>withTimestamps()來同步我們的時(shí)間，我們?cè)賮碓囈辉嚕?/p>

再來看看我們的數(shù)據(jù)庫：

看到最后的兩個(gè)記錄，很完美。

我們既然有了標(biāo)簽，我們?yōu)槭裁床粊韺⑺故境鰜砟?？?b>articles/index.blade.php中，我們來將文件的標(biāo)簽輸出一下：

     {{ $article->title }}


    
{{ $article->published_at->diffForHumans() }}
    @if($article->tags)
        @foreach($article->tags as $tag)
            
{{ $tag->name }}
        @endforeach
    @endif

我們?cè)?b>

標(biāo)簽下面增加一個(gè)

列表，然后是首先將發(fā)表日期published_at輸出了，這里我們使用了Carbon的diffForHumans()方法，這個(gè)方法就會(huì)產(chǎn)生幾分鐘之前，幾個(gè)小時(shí)之前的效果，這里也可以體會(huì)我們之前需要將published_at這個(gè)對(duì)象作為Carbon對(duì)象來對(duì)待了，如果是簡(jiǎn)單地字符串，是不能調(diào)用Carbon的diffForHumans()方法的。

接下來，我們使用$article->tags取得文章的標(biāo)簽，這個(gè)tags就是我們聲明多對(duì)多關(guān)系的tags()方法。我們來看看效果：

我們發(fā)現(xiàn)我們的多少分鐘之前都是英文，那是因?yàn)槲覀儧]有設(shè)置Carbon，我們來修復(fù)一下，在app/Providers/AppServiceProvider.php中的boot()方法添加下面這一行：

CarbonCarbon::setLocale("zh");

然后刷新，見證一下奇跡吧：

總結(jié)

到這里我們利用laravel提供的attach()方法將基本的多對(duì)多關(guān)系實(shí)現(xiàn)了，并且還稍微美化了一下輸出，將published_at字段完美呈現(xiàn)。接下來我打算說一說怎么實(shí)現(xiàn)修改文章了，這是一個(gè)必走的流程嘛。所以。。。

最后，Happy Hacking