laravel5.3 vue 实现收藏夹功能实例详解

2020-06-16 06:28:01易采站长站整理

下面通过本文给大家介绍laravel5.3 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"
}
}

​1.0.2 修改 gulpfile.js

将原来的 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');
});

1.0.3 修改 resource/assets/js/app.js

将原来的 el: ‘body’ 改为 el: ‘#app’ ​


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

1.1 安装npm 模块

(如果之前没有执行此操作) ​

npm  install

 

1.2 创建模型及迁移

我们需要一个User模型(laravel附带),一个Post模型和一个Favorite模型以及它们各自的迁移文件。 因为我们之前创建过了 Post 的模型,所以我们只需要创建一个 Favorite 模型即可。 ​


php artisan make:model AppModelsFavorite -m

 

​​ 这会创建一个 Favorite

模型以及迁移文件。 ​

1.3 修改 posts 迁移表及 favorites 的 up 方法

给 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()