Use laravel5.3 vue to create favorites function-JS Tutorial-php.cn

This time I will bring you how to use laravel5.3 vue to create the favorites function, and use laravel5.3 vue to create the favorites function. What are the precautions?The following is a practical case, let’s take a look one time.

The following is the example code of laravel5.3 vue to implement the favorites function

{
 "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'); to 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');
});

Copy after login

1.0.3 Modify resource/assets/js/app.js

Change the original el: 'body' to el: '#app'

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

Copy after login

1.1 Install npm module

(If you haven't done this before)

npm install

laravel5.3 vue 怎么实现收藏夹功能

1.2 Create model and migrate

We need a User model (shipped with laravel), a Post model and a Favorite model along with their respective migration files. 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 files.

1.3 Modify posts migration table and favorites up method

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

Copy after login

The favorites table contains two columns:

user_id is 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 already created it before, 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 router

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

Copy after login

2.2 Many-to-many relationship between articles and users

Since a user can mark many articles as favorites, and an article can be marked as favorites by many users, the relationship between the user 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 AppModelsPost, so be sure to introduce use AppModelsPost;

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

Copy after login

in the header. 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 rows are 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 methods to the article controller

Note that the header must be introduced use 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();
 }
}

Copy after login

2.5 Integrate axios module

•Install axios

npm install axios --save

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

import axios from 'axios';
window.axios = axios;

Copy after login

at the end 2.6 Create 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: ['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>

Copy after login

2.7 Introducing components into the view

在视图组件使用之前，我们先引入字体文件 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" />

Copy after login

并在 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>

Copy after login

使用组件

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

Copy after login

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

Copy after login

2.8 使用组件

引入 Favorite.vue 组件 resources/assets/js/app.js

Vue.component('favorite', require('./components/Favorite.vue'));

Copy after login

编译

npm run dev

Copy after login

3. 完成我的收藏夹

3.1 创建用户控制器

php artisan make:controller UsersController

Copy after login

修改

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'));
 }
}

Copy after login

添加视图文件

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

Copy after login

然后重新向一下根目录 routes/web.php 添加一条路由

Route::get('/', 'ArticleController@index');

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！