L'auteur de cet article présente laravel5.3 vue pour implémenter la fonction favoris. Cet article vous le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer.
Ce qui suit est une introduction à laravel5.3 vue pour implémenter la fonction favoris via cet article. Le code spécifique est le suivant :
{ "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 le fichier gulp. js
Modifiez le require('laravel-elixir-vue'); d'origine en 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/actifs /js/app.js
Changer l'original el: 'body' en 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 (inclus avec laravel), d'un modèle Post et d'un modèle Favorite avec 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 modèle
favori et un fichier de migration.
1.3 Modifier la méthode up de la table de migration des publications et des favoris
Ajouter 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 L'ID utilisateur de l'article collecté.
post_id L'ID de la publication collectée.
Ensuite, effectuez la migration de la table
php artisan migrate
1.4 Authentification de l'utilisateur
Parce que nous l'avons déjà créé auparavant, il n'est donc pas nécessaire ici Doit être créé à nouveau.
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 les routes/web.php<.>
2.1 Créer un routeurAuth::routes(); Route::post('favorite/{post}', 'ArticleController@favoritePost'); Route::post('unfavorite/{post}', 'ArticleController@unFavoritePost'); Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');
public function favorites() { return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps(); }
<?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(); } }
import axios from 'axios'; window.axios = axios;
// 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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
// 加在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()) <p class="panel-footer"> <favorite :post={{ $list->id }} :favorited={{ $list->favorited() ? 'true' : 'false' }} ></favorite> </p>
pour présenter le composant Favorite .vue resources/assets/js/app.js
public function favorited() { return (bool) Favorite::where('user_id', Auth::id()) ->where('post_id', $this->id) ->first(); }
Compile
Vue.component('favorite', require('./components/Favorite.vue'));
npm run dev
3. Compléter mes favoris
3.1 Créer un contrôleur utilisateur
Modifier
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
Route::get('/', 'ArticleController@index');
Recommandations associées :
js Firefox ajouter aux favoris le code de fonction compatible avec Firefox et les astuces IE_javascript
JavaScript ajouter la fonction aux favoris (compatible avec IE, Firefox, Chrome)_javascript Conseils
Code JS natif pour ajouter des compétences favorites_javascript
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!