Utilisez laravel5.3 vue pour créer une fonction de favoris

Cette fois, je vais vous présenter la fonction favoris utilisant laravel5.3 vue. Quelles sont les précautions concernant l'utilisation de laravel5.3 vue pour créer la fonction favoris. Prenons un cas pratique. regarde.

Ce qui suit est l'exemple de code pour laravel5.3 vue pour implémenter la fonction favoris

{
 "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 Modifier gulpfile.js

Remplacez le require('laravel-elixir-vue'); d'origine par 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 Modifier ressource/assets/js/app.js

Remplacez l'el d'origine : 'body' par el : '#app'

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

1.1 Installer le module npm

(Si vous ne l'avez jamais fait auparavant)

npm  install

1.2 Créer un modèle et migrer

Nous avons besoin d'un modèle User (livré avec Laravel), d'un modèle Post et d'un modèle Favorite ainsi que de leurs fichiers de migration respectifs. Parce que nous avons déjà créé un modèle Post, il nous suffit de créer un modèle Favoris.

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

Cela créera un favori

Fichiers de modèle et de migration.

1.3 Modifier la table de migration des publications et la méthode de mise en favoris

Ajoutez un champ user_id après le champ id à la table des publications

php artisan make:migration add_userId_to_posts_table --table=posts

Modifier la base de données/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();
 });
 }

Le tableau des favoris contient deux colonnes :

user_id est l'ID utilisateur de l'article collecté.

post_id L'ID de la publication collectée.

Effectuez ensuite la migration de table

php artisan migrate

1.4 Authentification de l'utilisateur

Comme nous l’avons déjà créé auparavant, il n’est pas nécessaire de le recréer ici.

Si vous n'avez pas créé de module d'authentification utilisateur, vous devez exécuter php artisan make:auth

2. Complétez la fonction Favoris

Modifier routes/web.php

2.1 Créer un routeur

Auth::routes();
Route::post('favorite/{post}', 'ArticleController@favoritePost');
Route::post('unfavorite/{post}', 'ArticleController@unFavoritePost');
Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');

2.2 Relation plusieurs-à-plusieurs entre les articles et les utilisateurs

Puisqu'un utilisateur peut marquer de nombreux articles comme favoris et qu'un article peut être marqué comme favori par de nombreux utilisateurs, la relation entre l'utilisateur et les articles les plus favoris sera une relation plusieurs-à-plusieurs. Pour définir cette relation, ouvrez le modèle User et ajoutez une application favorites()/User.php

Notez que l' espace de noms du modèle de publication est AppModelsPost, alors assurez-vous d'introduire use AppModelsPost;

public function favorites()
 {
 return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps();
 }

dans l'en-tête Le deuxième paramètre est le nom du tableau croisé dynamique (favori). Le troisième paramètre est le nom de la clé étrangère (user_id) du modèle pour définir la relation (User), et le quatrième paramètre est le nom de la clé étrangère (post_id) du modèle (Post) à ajouter. Notez que nous avons lié withTimeStamps() à appartiennentToMany(). Cela permettra lorsqu'une ligne est insérée ou mise à jour, les colonnes Timestamp (create_at et update_at) du tableau croisé dynamique seront affectées.

2.3 Créer un contrôleur d'article

Puisque nous l’avons déjà créé, il n’est pas nécessaire de le créer ici.

Si vous ne l'avez pas créé auparavant, veuillez exécuter php artisan make:controller ArticleController

2.4 Ajouter les méthodes favoritePost et unFavoritePost au contrôleur d'article

Notez que l'en-tête doit être introduit en utilisant IlluminateSupportFacadesAuth;

<?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(&#39;home.article.index&#39;, compact(&#39;data&#39;));
 }
 public function show($id)
 {
 $data = Post::find($id);
 return view(&#39;home.article.list&#39;, compact(&#39;data&#39;));
 }
 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 Intégrer le module axios

•Installer axios

npm install axios --save

•Introduisez le module axios resource/assets/js/bootstrap.js et ajoutez

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

à la fin 2.6 Créer un composant Favoris

// 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 Introduction des composants dans la vue

在视图组件使用之前，我们先引入字体文件 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(&#39;/logout&#39;) }}" method="POST" style="display: none;">
 {{ csrf_field() }}
</form>
<a href="{{ url(&#39;my_favorites&#39;) }}" rel="external nofollow" >我的收藏夹</a>

使用组件

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

endif

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

注意要在头部引用命名空间 use AppModelsFavorite; use IlluminateSupportFacadesAuth;

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

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular17里的自定义指令使用详解

JS里EventLoop的使用详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!