使用Laravel和Vue.js实现收藏夹功能

These days, various web applications are in one way or the other implementing a kind of favorite/like/recommend feature on the websites. These can be seen on sites like Medium, Facebook, Laracasts, and even here on scotch.io and school.scotch.io.

如今，各种Web应用程序都以一种方式或另一种方式在网站上实现一种“喜欢/喜欢/推荐”功能。 这些内容可以在Medium，Facebook，Laracasts等网站上看到，甚至在scotch.io和school.scotch.io上也可以看到。

In this tutorial, I'll be showing you how to implement a favorites feature using Vue.js in your Laravel application. Though we'll be using the term favorites in this tutorial, this can be replaced with likes, recommends depending on your application.

在本教程中，我将向您展示如何在Laravel应用程序中使用Vue.js实现收藏夹功能。 尽管在本教程中我们将使用“ 收藏夹 ”一词，但可以根据喜欢的应用程序将其替换为“ likes” （ 推荐） 。

我们将要建设的 ( What We'll Be Building )

We'll be building a simple Posts app. This app will comprise of users and posts. Users will be able to create posts and as well mark posts as favorites. Finally, users will be able to see all the posts they marked as favorites.

我们将构建一个简单的Posts应用程序。 该应用程序将包含用户和帖子。 用户将能够创建帖子并将帖子标记为收藏。 最后，用户将能够看到他们标记为收藏的所有帖子。

The app will have a User model and a Post model, there will be an authentication system which will allow only authenticated users mark/unmark posts as favorites. We'll make use of VueJs and Axios to make marking/un-marking posts as favorites dynamic, that is without reloading the page.

该应用程序将具有用户模型和帖子模型，还将有一个身份验证系统，该系统仅允许经过身份验证的用户将帖子标记/取消标记为收藏。 我们将利用VueJ和Axios使动态标记/取消标记为收藏夹的帖子动态化，即无需重新加载页面。

Before we start building, let's take a quick look at what the Posts app will look like when we are done.

在开始构建之前，让我们快速看一下完成后的Posts应用程序。

让我们开始吧 ( Let's Get started )

We'll start by creating a new Laravel project, the name of the project will be laravel-vue-favorite.

我们将从创建一个新的Laravel项目开始，该项目的名称将为laravel-vue-favorite 。

laravel new laravel-vue-favorite

This will create a new Laravel 5.4 (which is the current version as at the time of this tutorial) project.

这将创建一个新的Laravel 5.4（这是本教程时的当前版本）项目。

安装NPM依赖项 ( Installing NPM Dependencies )

In a fresh installation of Laravel, Laravel provides some frontend frameworks and libraries with some basic setup to integrate these packages together. Among the frameworks and libraries are Bootstrap, VueJs and Axios, which we will be using in this tutorial. But we still need to install these dependencies through NPM:

在Laravel的全新安装中，Laravel提供了一些前端框架和库以及一些基本设置，以将这些软件包集成在一起。 在框架和库中有Bootstrap ， VueJs和Axios ，我们将在本教程中使用它们。 但是我们仍然需要通过NPM安装这些依赖项：

npm install

Also, we'll make use of Laravel Mix to compile and build our CSS and JavaScript. The command above will also install all Laravel Mix dependencies.

另外，我们将使用Laravel Mix来编译和构建CSS和JavaScript。 上面的命令还将安装所有Laravel Mix依赖项。

模型与迁移 ( Models And Migrations )

For our Posts app, we'll need a User model (which comes with Laravel), a Post model and a Favorite model and their respective migration files.

对于我们的Posts应用程序，我们需要一个User模型（Laravel随附），一个Post模型和一个Favorite模型以及它们各自的迁移文件。

php artisan make:model Post -m
php artisan make:model Favorite -m

These will create a Post model and a Favorite model along with their migration files respectively. Open the posts table migration file and update the up() with:

这些将分别创建一个Post模型和一个Favorite模型及其迁移文件。 打开posts表迁移文件，并使用以下命令更新up() ：

/**
 * Define posts table schema
 */
public function up()
{
     
    Schema::create('posts', function (Blueprint $table) {
     
        $table->increments('id');
        $table->integer('user_id')->unsigned();
        $table->string('title');
        $table->text('body');
        $table->timestamps();
    });
}

The posts table will contain an id, user_id (ID of the user that created the post), title, body, and some timestamps columns.

posts表将包含一个id ， user_id （创建该帖子的用户的ID）， title ， body和一些timestamps列。

Next, open the favorites table migration file and update the up() with:

接下来，打开“ favorites表迁移文件，并使用以下命令更新up() ：

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

The favorites table will be a pivot table. It will contain two columns: user_id which will hold the ID of the user that favorited a post and post_id which will the ID of the post that was favorited.

favorites表将是数据透视表。 它包含两列： user_id将保存喜欢的帖子的用户的ID，而post_id将保存喜欢的帖子的ID。

For the users table migration, we'll be using the default Laravel provided.

对于users表迁移，我们将使用提供的默认Laravel。

Before we run our migrations, let's setup our database. Add your database details to the .env file:

在运行迁移之前，让我们设置数据库。 将数据库详细信息添加到.env文件：

DB_DATABASE=laravue
DB_USERNAME=root
DB_PASSWORD=root

Remember to update with your own database details. Now we can go on and run our migrations:

请记住使用您自己的数据库详细信息进行更新。 现在我们可以继续进行迁移了：

php artisan migrate

数据库播种器 ( Database Seeder )

We'll also generate some seed data which we can test our app with. To generate dummy data, we'll make use of Laravel Model Factories. Laravel model factories make use of the Faker PHP library.

我们还将生成一些种子数据，可以用来测试我们的应用程序。 为了生成虚拟数据，我们将使用Laravel模型工厂 。 Laravel模型工厂使用Faker PHP库。

We'll generate dummy data of Users and Posts. When you open the database/factories/ModelFactory.php file, you will see that Laravel provides a User model factory, which means we only need to create a Post model factory. Add the snippets below to database/factories/ModelFactory.php just after the User model factory:

我们将生成用户和帖子的虚拟数据。 当您打开database/factories/ModelFactory.php文件时，您会看到Laravel提供了一个User模型工厂，这意味着我们只需要创建一个Post模型工厂。 在User模型工厂之后，将以下代码段添加到database/factories/ModelFactory.php ：

// database/factories/ModelFactory.php

$factory->define(App\Post::class, function (Faker\Generator $faker)