How to implement favorites using vue-JS Tutorial-php.cn

This article mainly introduces laravel5.3 vue to implement the favorites function. This article introduces it to you in great detail through example code. Friends who need it can refer to it.

The following will introduce laravel5.3 to you through this article. vue implements the favorites function. The specific code is as follows:

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

Copy after login

1.0.2 Modify gulpfile.js

Change the original require('laravel-elixir-vue' ); Modify to require('laravel-elixir-vue-2');

const elixir = require(&#39;laravel-elixir&#39;);
require(&#39;laravel-elixir-vue-2&#39;);
/*
 |--------------------------------------------------------------------------
 | 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(&#39;app.scss&#39;)
 .webpack(&#39;app.js&#39;);
});

Copy after login

1.0.3 Modify resource/assets/js/app.js

The original el: 'body' is changed to el: '#app'

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

Copy after login

1.1 Install npm module

(if this operation has not been performed before)

npm install

1.2 Creating models and migration

We need a User model (included with laravel), a Post model and a Favorite model and their respective migration file. Because we have created a Post model before, we only need to create a Favorite model.

php artisan make:model App\Models\Favorite -m

Copy after login

This will create a Favorite

model and migration file.

1.3 Modify the up method of posts migration table and favorites

Add a user_id field after the id field to the posts table

php artisan make:migration add_userId_to_posts_table --table=posts

Copy after login

Modify database/migrations/2018_01_18_145843_add_userId_to_posts_table.php

public function up()
 {
 Schema::table(&#39;posts&#39;, function (Blueprint $table) {
  $table->integer(&#39;user_id&#39;)->unsigned()->after(&#39;id&#39;);
 });
 }
database/migrations/2018_01_18_142146_create_favorites_table.php  
public function up()
 {
 Schema::create(&#39;favorites&#39;, function (Blueprint $table) {
  $table->increments(&#39;id&#39;);
  $table->integer(&#39;user_id&#39;)->unsigned();
  $table->integer(&#39;post_id&#39;)->unsigned();
  $table->timestamps();
 });
 }

Copy after login

The favorites table contains two columns:

user_id The user ID of the collected article.

post_id The ID of the collected post.

Then perform table migration

php artisan migrate

1.4 User authentication

Because we have done it before It has already been created, so there is no need to create it again here.

If you have not created a user authentication module, you need to execute php artisan make:auth

2. Complete the favorites function

Modify routes/web.php

2.1 Create a router

Auth::routes();
Route::post(&#39;favorite/{post}&#39;, &#39;ArticleController@favoritePost&#39;);
Route::post(&#39;unfavorite/{post}&#39;, &#39;ArticleController@unFavoritePost&#39;);
Route::get(&#39;my_favorites&#39;, &#39;UsersController@myFavorites&#39;)->middleware(&#39;auth&#39;);

Copy after login

2.2 Many-to-many relationship between articles and users

Since users can mark many articles as Favorites, and an article can be marked as favorites by many users, so the relationship between users and the most favorited articles will be a many-to-many relationship. To define this relationship, open the User model and add a favorites() app/User.php

Note that the namespace of the post model is App\Models\Post, so be sure to introduce use App\Models\ in the header Post;

public function favorites()
 {
 return $this->belongsToMany(Post::class, &#39;favorites&#39;, &#39;user_id&#39;, &#39;post_id&#39;)->withTimeStamps();
 }

Copy after login

The second parameter is the name of the pivot table (favorite). The third parameter is the foreign key name (user_id) of the model to define the relationship (User), and the fourth parameter is the foreign key name (post_id) of the model (Post) to be added. Notice that we link withTimeStamps() to belongsToMany(). This will allow when a row is inserted or updated, the timestamp (create_at and updated_at) columns on the pivot table will be affected.

2.3 Create article controller

Because we have created it before, there is no need to create it here.

If you have not created it before, please execute php artisan make:controller ArticleController

2.4 Add favoritePost and unFavoritePost two methods in the article controller

Note that the header must be introduced use Illuminate\Support\Facades\Auth;

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

Copy after login

2.5 Integrate axios module

•Install axios

npm install axios --save

•Introduce axios module resource/assets/js/bootstrap.js and add at the end

import axios from &#39;axios&#39;;
window.axios = axios;

Copy after login

2.6 Create a favorites component

// 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: [&#39;post&#39;, &#39;favorited&#39;],

 data: function() {
  return {
  isFavorited: &#39;&#39;,
  }
 },
 mounted() {
  this.isFavorited = this.isFavorite ? true : false;
 },
 computed: {
  isFavorite() {
  return this.favorited;
  },
 },
 methods: {
  favorite(post) {
  axios.post(&#39;/favorite/&#39;+post)
   .then(response => this.isFavorited = true)
   .catch(response => console.log(response.data));
  },
  unFavorite(post) {
  axios.post(&#39;/unfavorite/&#39;+post)
   .then(response => this.isFavorited = false)
   .catch(response => console.log(response.data));
  }
 }
 }
</script>

Copy after login

2.7 View Introducing components

Before using the view component, we first introduce the font file resource/views/layouts/app.blade.php and introduce the font file

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Copy after login

in the head of app.blade .php Add my favorites link

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

Copy after login

Use components

// resources/views/home/article/index.blade.php
if (Auth::check())
 <p class="panel-footer">
 <favorite
  :post={{ $list->id }}
  :favorited={{ $list->favorited() ? &#39;true&#39; : &#39;false&#39; }}
 ></favorite>
 </p>

Copy after login

endif

Then we need to create favorited() Open app/Models/Post.php Add favorited() Method

Note to reference the namespace in the header use App\Models\Favorite; use Illuminate\Support\Facades\Auth;

public function favorited()
 {
 return (bool) Favorite::where(&#39;user_id&#39;, Auth::id())
    ->where(&#39;post_id&#39;, $this->id)
    ->first();
 }

Copy after login

2.8 Use components

Introducing Favorite.vue component resources/assets/js/app.js

Vue.component(&#39;favorite&#39;, require(&#39;./components/Favorite.vue&#39;));

Copy after login

Compilation

npm run dev

Copy after login

Rendering

##3. Complete my favorites

##3.1 Create user controller

php artisan make:controller UsersController

Copy after login

Modify

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(&#39;users.my_favorites&#39;, compact(&#39;myFavorites&#39;));
 }
}

Copy after login

Add view file

// resources/views/users/my_favorites.blade.php

extends(&#39;layouts.app&#39;)

@section(&#39;content&#39;)
<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() ? &#39;true&#39; : &#39;false&#39; }}
    ></favorite>
   </p>
   @endif
  </p>
  @empty
  <p>You have no favorite posts.</p>
  @endforelse
  </p>
 </p>
</p>
@endsection

Copy after login

Then add a route to the root directory routes/web.php

Route::get(&#39;/&#39;, &#39;ArticleController@index&#39;);

Copy after login

Finally The renderings

above are what I compiled for you. I hope it will be helpful to you in the future.

How to process arrays through v-for in vue

##Referencing bmob js-sdk in VUE (detailed tutorial)

Should we add new when creating objects in js?

What are the usages of html-webpack-plugin?

The above is the detailed content of How to implement favorites using vue. For more information, please follow other related articles on the PHP Chinese website!