Utilisez laravel5.3 vue pour créer une fonction de favoris-js tutoriel-php.cn

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"
 }
}

Copier après la connexion

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');
});

Copier après la connexion

1.0.3 Modifier ressource/assets/js/app.js

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

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

Copier après la connexion

1.1 Installer le module npm

(Si vous ne l'avez jamais fait auparavant)

npm install

laravel5.3 vue 怎么实现收藏夹功能

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

Copier après la connexion

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

Copier après la connexion

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();
 });
 }

Copier après la connexion

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');

Copier après la connexion

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();
 }

Copier après la connexion

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();
 }
}

Copier après la connexion

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;

Copier après la connexion

à 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>

Copier après la connexion

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" />

Copier après la connexion

并在 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>

Copier après la connexion

使用组件

// 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>

Copier après la connexion

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();
 }

Copier après la connexion

2.8 使用组件

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

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

Copier après la connexion

编译

npm run dev

Copier après la connexion

3. 完成我的收藏夹

3.1 创建用户控制器

php artisan make:controller UsersController

Copier après la connexion

修改

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'));
 }
}

Copier après la connexion

添加视图文件

// 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

Copier après la connexion

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

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

Copier après la connexion

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