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


Posted in Javascript onJanuary 21, 2018

下面通过本文给大家介绍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

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

1.2 创建模型及迁移

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

php artisan make:model App\Models\Favorite -m

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

​​ 这会创建一个 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()
 {
 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

1.4 用户认证

因为我们之前就已经创建过了,所以这里就不需要重复创建了。

如果你没有创建过用户认证模块,则需要执行 php artisan make:auth ​

2. 完成搜藏夹功能

修改 routes/web.php

2.1 创建路由器

Auth::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 所以注意要头部引入 use App\Models\Post; ​

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)列将受到影响。 ​ ​

2.3 创建文章控制器

因为我们之前创建过了,这里也不需要创建了。

如果你没有创建过,请执行 php artisan make:controller ArticleController ​

2.4 在文章控制器添加 favoritePost 和 unFavoritePost 两个方法

注意要头部要引入 use Illuminate\Support\Facades\Auth; ​

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
use Illuminate\Support\Facades\Auth;
class ArticleController extends Controller
{
 public function index()
 {
 $data = Post::paginate(5);
 return view('home.article.index', compact('data'));
 }
 public function show($id)
 {
 $data = Post::find($id);
 return view('home.article.list', compact('data'));
 }
 public function favoritePost(Post $post)
 {
 Auth::user()->favorites()->attach($post->id);
 return back();
 }
 public function unFavoritePost(Post $post)
 {
 Auth::user()->favorites()->detach($post->id);
 return back();
 }
}

​2.5 集成 axios 模块

•安装axios ​

npm install axios --save

​•引入axios模块 resource/assets/js/bootstrap.js 在最后加入 ​

import axios from 'axios';
window.axios = axios;

2.6 创建收藏夹组件

// resources/assets/js/components/Favorite.vue
<template>
 <span>
 <a href="#" rel="external nofollow" rel="external nofollow" v-if="isFavorited" @click.prevent="unFavorite(post)">
  <i class="fa fa-heart"></i>
 </a>
 <a href="#" rel="external nofollow" rel="external nofollow" v-else @click.prevent="favorite(post)">
  <i class="fa fa-heart-o"></i>
 </a>
 </span>
</template>
<script>
 export default {
 props: ['post', 'favorited'],
​
 data: function() {
  return {
  isFavorited: '',
  }
 },
 mounted() {
  this.isFavorited = this.isFavorite ? true : false;
 },
 computed: {
  isFavorite() {
  return this.favorited;
  },
 },
 methods: {
  favorite(post) {
  axios.post('/favorite/'+post)
   .then(response => this.isFavorited = true)
   .catch(response => console.log(response.data));
  },
  unFavorite(post) {
  axios.post('/unfavorite/'+post)
   .then(response => this.isFavorited = false)
   .catch(response => console.log(response.data));
  }
 }
 }
</script>

2.7 视图中引入组件

在视图组件使用之前,我们先引入字体文件 resource/views/layouts/app.blade.php 头部引入字体文件 ​

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

​ 并在 app.blade.php 添加 我的收藏夹 链接 ​

// 加在logout-form之后
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
 {{ csrf_field() }}
</form>​
<a href="{{ url('my_favorites') }}" rel="external nofollow" >我的收藏夹</a>

​ 使用组件 ​

// resources/views/home/article/index.blade.php​
if (Auth::check())
 <div class="panel-footer">
 <favorite
  :post={{ $list->id }}
  :favorited={{ $list->favorited() ? 'true' : 'false' }}
 ></favorite>
 </div>

endif

​ 然后我们要创建 favorited() 打开 app/Models/Post.php 增加 favorited() 方法

注意要在头部引用命名空间 use App\Models\Favorite; use Illuminate\Support\Facades\Auth; ​

public function favorited()
 {
 return (bool) Favorite::where('user_id', Auth::id())
    ->where('post_id', $this->id)
    ->first();
 }​

2.8 使用组件

引入 Favorite.vue 组件 resources/assets/js/app.js ​

Vue.component('favorite', require('./components/Favorite.vue'));

编译

npm run dev

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

效果图 ​

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

3. 完成 我的收藏夹

3.1 创建用户控制器​

php artisan make:controller UsersController

​ 修改

app/Http/Controllers/UsersController.php ​ 
<?php​
namespace App\Http\Controllers;​
use Illuminate\Http\Request;​
use Illuminate\Support\Facades\Auth;​
class UsersController extends Controller
{
 public function myFavorites()
 {
 $myFavorites = Auth::user()->favorites;
 return view('users.my_favorites', compact('myFavorites'));
 }
}

​ 添加视图文件

// resources/views/users/my_favorites.blade.php
​
extends('layouts.app')
​
@section('content')
<div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2">
  <div class="page-header">
  <h3>My Favorites</h3>
  </div>
  @forelse ($myFavorites as $myFavorite)
  <div class="panel panel-default">
   <div class="panel-heading">
   <a href="/article/{{ $myFavorite->id }}" rel="external nofollow" >
    {{ $myFavorite->title }}
   </a>
   </div>
​
   <div class="panel-body" style="max-height:300px;overflow:hidden;">
   <img src="/uploads/{!! ($myFavorite->cover)[0] !!}" style="max-width:100%;overflow:hidden;" alt="">
   </div>
   @if (Auth::check())
   <div class="panel-footer">
    <favorite
    :post={{ $myFavorite->id }}
    :favorited={{ $myFavorite->favorited() ? 'true' : 'false' }}
    ></favorite>
   </div>
   @endif
  </div>
  @empty
  <p>You have no favorite posts.</p>
  @endforelse
  </div>
 </div>
</div>
@endsection

​ 然后重新向一下根目录 routes/web.php 添加一条路由 ​

Route::get('/', 'ArticleController@index');

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

最后效果图

总结

以上所述是小编给大家介绍的laravel5.3 vue 实现收藏夹功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
浅谈Node 异步IO和事件循环
May 05 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 #Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 #Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 #Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 #Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 #Javascript
基于Vue的ajax公共方法(详解)
Jan 20 #Javascript
You might like
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php strftime函数的详细用法
2018/06/21 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
原生js仿浏览器滚动条效果
2017/03/02 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
Angular实现响应式表单
2017/08/04 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Django数据库表反向生成实例解析
2018/02/06 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
使用Django清空数据库并重新生成
2020/04/03 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python通过字典映射函数实现switch
2020/11/06 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
Hibernate持久层技术
2013/12/16 面试题
大学专科生推荐信范文
2013/11/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
安全教育月活动总结
2014/05/05 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers