Heim >Web-Frontend >js-Tutorial >Verwenden Sie laravel5.3 vue, um eine Favoritenfunktion zu erstellen
Dieses Mal werde ich Ihnen die Favoritenfunktion mit laravel5.3 vue vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von laravel5.3 vue zum Erstellen der Favoritenfunktion? einmal schauen.
Das Folgende ist der Beispielcode für laravel5.3 vue zur Implementierung der Favoritenfunktion{ "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 ändern
Ändern Sie die ursprüngliche Anforderung ('laravel-elixir-vue'); in 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 Ressource/assets/js/app.js ändern
Ändern Sie den ursprünglichen el: 'body' in el: '#app'const app = new Vue({ el: '#app' });1.1 NPM-Modul installieren (Falls Sie dies noch nicht getan haben)
npm install
1.2 Modell erstellen und migrieren Wir benötigen ein Benutzermodell (im Lieferumfang von Laravel enthalten), ein Post-Modell und ein Lieblingsmodell sowie die jeweiligen Migrationsdateien. Da wir zuvor ein Post-Modell erstellt haben, müssen wir nur ein Favoriten-Modell erstellen.
php artisan make:model App\Models\Favorite -mDadurch wird ein Favorit erstellt Modell- und Migrationsdateien. 1.3 Ändern Sie die Migrationstabelle für Beiträge und die Methode zum Hochladen von Favoriten Fügen Sie nach dem ID-Feld ein user_id-Feld zur Beitragstabelle hinzu
php artisan make:migration add_userId_to_posts_table --table=postsDatenbank/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(); }); }ändern Die Favoritentabelle enthält zwei Spalten: user_id ist die Benutzer-ID des gesammelten Artikels. post_id Die ID des gesammelten Beitrags. Führen Sie dann die Tabellenmigration durch
php artisan migrate
1.4 Benutzerauthentifizierung
Da wir es bereits zuvor erstellt haben, ist es hier nicht erforderlich, es erneut zu erstellen. Wenn Sie kein Benutzerauthentifizierungsmodul erstellt haben, müssen Sie php artisan make:auth ausführen2. Vervollständigen Sie die Favoritenfunktion
Ändern Sie „routes/web.php“ 2.1 Router erstellenAuth::routes(); Route::post('favorite/{post}', 'ArticleController@favoritePost'); Route::post('unfavorite/{post}', 'ArticleController@unFavoritePost'); Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');2.2 Viele-zu-viele-Beziehung zwischen Artikeln und Benutzern Da ein Benutzer viele Artikel als Favoriten markieren kann und ein Artikel von vielen Benutzern als Favoriten markiert werden kann, ist die Beziehung zwischen dem Benutzer und den Artikeln mit den meisten Favoriten eine Viele-zu-Viele-Beziehung. Um diese Beziehung zu definieren, öffnen Sie das Benutzermodell und fügen Sie eine favorites() app/User.php hinzu Beachten Sie, dass der
Namespace des Post-Modells AppModelsPost ist. Stellen Sie daher sicher, dass Sie use AppModelsPost;
public function favorites() { return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps(); }in der Kopfzeile einführen Der zweite Parameter ist der Name der Pivot-Tabelle (Favorit). Der dritte Parameter ist der Fremdschlüsselname (user_id) des Modells zur Definition der Beziehung (User), und der vierte Parameter ist der Fremdschlüsselname (post_id) des hinzuzufügenden Modells (Post). Beachten Sie, dass wir „withTimeStamps()“ mit „gehörtToMany()“ verknüpfen. Dies ermöglicht, dass beim Einfügen oder Aktualisieren von Zeilen die Spalten
Timestamp (create_at und update_at) in der Pivot-Tabelle betroffen sind.
2.3 Artikel-Controller erstellen
Da wir es bereits erstellt haben, besteht keine Notwendigkeit, es hier zu erstellen. Wenn Sie es noch nicht erstellt haben, führen Sie bitte php artisan make:controller ArticleController aus 2.4 Fügen Sie dem Artikel-Controller die Methoden favoritePost und unFavoritePost hinzu Beachten Sie, dass der Header mit 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('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(); } }eingeführt werden muss 2.5 Axios-Modul integrieren •Axios installieren
npm install axios --save
import axios from 'axios'; window.axios = axios;hinzu
2.6 Komponente „Favoriten erstellen“
// 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 Komponenten in die Ansicht einführen
在视图组件使用之前,我们先引入字体文件 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()) <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中文网其它相关文章!
推荐阅读:
Das obige ist der detaillierte Inhalt vonVerwenden Sie laravel5.3 vue, um eine Favoritenfunktion zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!