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

Dadurch 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=posts

Datenbank/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ühren

2. Vervollständigen Sie die Favoritenfunktion

Ändern Sie „routes/web.php“

2.1 Router erstellen

Auth::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(&#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();
 }
}

eingeführt werden muss 2.5 Axios-Modul integrieren

•Axios installieren

npm install axios --save

•Führen Sie das Axios-Modul „resource/assets/js/bootstrap.js“ ein und fügen Sie am Ende

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(&#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的使用详解

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!