laravel5.3vue实现收藏功能本文是laravel中WangEditor和多图上传的使用（下），这里不演示如何新建项目。1.Laravel项目安装下载之前的项目并完成安装。1.0之前（之前）写的为了避免后面踩到vue版本的坑，请务必阅读这部分1.0.1修改package.json{"private":true,"scripts":{"prod":"gulp--production","dev":"gulpwatch"},"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"}}1.0.2修改gulpfile.js改为原来的require('laravel-elixir-vue');修改为require('laravel-elixir-vue-2');constelixir=require('laravel-elixir');require('laravel-elixir-vue-2');/*|------------------------------------------------------------------------|Elixir资产管理|--------------------------------------------------------------------||Elixir提供了一个干净、流畅的API来定义一些基本的Gulp任务|为您的Laravel应用程序。默认情况下，我们正在编译Sass|申请我们的文件化，以及发布供应商资源。|*/elixir(mix=>{mix.sass('app.scss').webpack('app.js');});1.0.3修改resource/assets/js/app.js改原el:'body'toel:'#app'constapp=newVue({el:'#app'});1.1安装npm模块（如果之前没有执行此操作）npminstall1.2创建模型并迁移我们需要一个User模型（包含在laravel中）、一个Post模型和一个Favorite模型以及它们各自的迁移文件。因为我们之前已经创建过Post模型，所以我们只需要创建一个Favorite模型即可。phpartisanmake:modelApp\Models\Favorite-m这将创建一个Favorite模型和迁移文件。1.3修改posts迁移表和收藏夹的up方法在posts表id字段后添加user_id字段phpartisanmake:migrationadd_userId_to_posts_table--table=postsmodifydatabase/migrations/2018_01_18_145843_add_userId_to_posts_table.phppublicfunctionup(){Schema::table('posts',function(Blueprint$table){$table->integer('user_id')->unsigned()->after('id');});}数据库/迁移/2018_01_18_142146_create_favorites_table。phppublicfunctionup(){Schema::create('favorites',function(Blueprint$table){$table->increments('id');$table->integer('user_id')->unsigned();$table->integer('post_id')->unsigned();$table->timestamps();});}收藏夹表包含两列：user_id是收藏帖子的用户ID。post_id被添加为书签的帖子的ID。然后进行表迁移phpartisanmigrate1.4用户认证因为之前我们已经创建过了，这里就不用再创建了。如果还没有创建用户认证模块，需要执行phpartisanmake:auth2。完成收藏夹功能，修改routes/web.php2.1创建一个routerAuth::routes();Route::post('favorite/{post}','ArticleController@favoritePost');Route::post('unfavorite/{post}','ArticleController@unFavoritePost');Route::get('my_favorites','UsersController@myFavorites')->middleware('auth');2.2文章与用户的多对多关系由于用户可以将多篇文章标记为收藏，而一篇文章又可以被许多用户标记为收藏，因此用户与最喜欢的文章之间的关系将是多对多的关系。要定义这个关系，请打开User模型，添加一个favorites()app/User.php注意post模型的命名空间是App\Models\Post所以注意header引入useApp\Models\Post;publicfunctionfavorites(){return$this->belongsToMany(Post::class,'favorites','user_id','post_id')->withTimeStamps();}第二个参数是数据透视表的名称（收藏夹）。第三个参数是定义关系（User）的模型的外键名（user_id），而第四个参数是要加入（Post）的模型的外键名（post_id）。请注意，我们将withTimeStamps()链接到belongsToMany()。这将允许在插入或更新行时，数据透视表上的时间戳（create_at和updated_at）列将受到影响。2.3创建一个articlecontroller因为我们之前已经创建过了，这里就不用再创建了。如果还没有创建，请执行phpartisanmake:controllerArticleController2.4为文章控制器添加favoritePost和unFavoritePost方法。注意header要引入useIlluminate\Support\Facades\Auth;favorites()->attach($post->id);返回（）；}publicfunctionunFavoritePost(Post$post){Auth::user()->favorites()->detach($post->id);返回（）；}}2.5集成axios模块安装axiosnpminstallaxios--saveimportaxiosmoduleresource/assets/js/bootstrap.js最后添加importaxiosfrom'axios';window.axios=axios;2.6创建收藏插件//resources/assets/js/components/Favorite.vue
