Maison > interface Web > js tutoriel > Utilisez laravel5.3 vue pour créer une fonction de favoris

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

php中世界最好的语言
Libérer: 2018-04-13 11:51:14
original
1526 Les gens l'ont consulté

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中文网其它相关文章!

推荐阅读:

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal