Morioh
Login
Alexander Karachunov

Alexander Karachunov

1 year ago

Как реализовать систему лайков и дизлайков с помощью Vue.js и Laravel

В этом уроке вы узнаете, как реализовать систему лайков и неприязней с помощью Vue js в приложении laravel 8. Этот туториал покажет вам, как создать простую систему лайков и дизлайков, которую пользователи смогут использовать для выражения своего мнения о вашем контенте.

Чтобы реализовать систему симпатий и антипатий с помощью Vue js в приложении laravel 8, мы выполняем следующие шаги.

  • Шаг 1: Установите приложение Laravel 8
  • Шаг 2: Подключение приложения к базе данных
  • Шаг 3: Запустите команду Make auth
  • Шаг 4: Создайте модель и миграцию
  • Шаг 5: Конфигурация NPM
  • Шаг 6: Добавьте маршруты
  • Шаг 7: Создайте контроллер по команде
  • Шаг 8: Создайте компонент Vue
  • Шаг 9: Создание представлений Blade и инициализация компонентов Vue
  • Шаг 10: Запустите сервер разработки

Шаг 1: Установите приложение Laravel 8

На этом этапе вам необходимо установить последнюю версию приложения laravel. Откройте терминал или командную строку и выполните следующую команду:

 composer create-project --prefer-dist laravel/laravel blog

Шаг 2: Подключение приложения к базе данных

После успешной установки приложения laravel 8 перейдите в корневой каталог проекта и откройте файл .env . Затем настройте учетные данные базы данных в файле .env следующим образом:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Шаг 3: Запустите команду Make auth

На этом шаге выполните следующие команды на терминале, чтобы авторизоваться в приложении laravel 8:

cd blog
 
composer require laravel/ui --dev
 
php artisan ui vue --auth

Этот пакет laravel laravel/ui предоставляет быстрый способ создать все маршруты, контроллеры и представления с аутентификацией.

Шаг 4: Создайте модель и миграцию

На этом шаге вам нужно выполнить следующую команду на терминале, чтобы создать модель и фабрику:

php artisan make:model Post -fm

Эта команда создаст одно имя модели post.php , а также создаст один файл миграции для таблицы сообщений .

Теперь откройте файл миграции create_postss_table.php из  базы данных > миграции  и замените  функцию up()  следующим кодом:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('user_id');
            $table->unsignedBigInteger('like')->default(0);
            $table->unsignedBigInteger('dislike')->default(0);
            $table->timestamps();
      });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Затем перенесите таблицу с помощью следующей команды:

php artisan migrate

Затем перейдите к app/Post.php и обновите следующий код в вашей модели Post.php следующим образом:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'title', 'description'
    ];
 
    public function getRouteKeyName()
    {
        return 'slug';
    }
}

Затем перейдите к базе данных/фабрикам и откройте PostFactory.php . Затем обновите в нем следующий код следующим образом:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
 
use App\Models\Post;
use Faker\Generator as Faker;
 
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1
    ];
});

а затем выполните следующую команду на терминале, чтобы сгенерировать поддельные данные с помощью подделки следующим образом:

php artisan tinker
//and then
factory(\App\Models\Post::class,20)->create()
exit

Шаг 5: Конфигурация NPM

На этом этапе вам необходимо настроить Vue и установить зависимости Vue с помощью NPM. Поэтому выполните следующую команду в командной строке:

php artisan preset vue

Установите все зависимости Vue:

npm install

Шаг 6: Добавьте маршруты

Следующий шаг, перейдите в папку маршрутов , откройте файл web.php и добавьте в свой файл следующие маршруты:

маршруты/web.php

use App\Http\Controllers\PostController;
 
Route::get('post', [PostController::class, 'index']);
Route::get('post/{slug?}', [PostController::class, 'show'])->name('post');
 
Route::post('like', [PostController::class, 'getlike']);
Route::post('like/{id}', [PostController::class, 'like']);
 
Route::post('dislike', [PostController::class, 'getDislike']);
Route::post('dislike/{id}', [PostController::class, 'dislike']);

Шаг 7: Создайте контроллер по команде

Следующий шаг, откройте командную строку и выполните следующую команду на терминале, чтобы создать контроллер мастером:

php artisan make:controller PostController

После этого перейдите  app\Http\Controllers и откройте файл PostController.php . Затем обновите следующий код в файле PostController.php :

<?php
namespace App\Http\Controllers;
 
use App\Models\Post;
use Facades\App\Repository\Posts;
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->get();
        return view('posts',['posts' => $posts ]);
    }
 
    public function show(Post $slug)
    {
        return view('single-post',['post' => $slug ]);
    }
 
    public function getlike(Request $request)
    {
        $post = Post::find($request->post);
        return response()->json([
            'post'=>$post,
        ]);
    }
 
    public function like(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->like;
        $post->like = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }    
 
    public function getDislike(Request $request)
    {
        $post = Post::find($request->post);
        return response()->json([
            'post'=>$post,
        ]);
    }
 
    public function dislike(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->dislike;
        $post->dislike = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }
}

Шаг 8: Создайте компонент Vue

Следующим шагом перейдите в  resources/assets/js/components папку и создайте файлы с именами  LikeComponent.vue и DisLikeComponent.vue .

Теперь обновите следующий код в файле компонентов LikeComponent.vue :

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="likePost" class="fa fa-thumbs-up" aria-hidden="true"></i>({{ totallike }})</a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                totallike:'',
            }
        },
        methods:{
            likePost(){
                axios.post('/like/'+this.post,{post:this.post})
                .then(response =>{
                    this.getlike()
                    $('#success').html(response.data.message)
                })
                .catch()
            },
            getlike(){
                axios.post('/like',{post:this.post})
                .then(response =>{
                    console.log(response.data.post.like)
                    this.totallike = response.data.post.like
                })
            }
        },
        mounted() {
            this.getlike()
        }
    }
</script>

Затем обновите следующий код в файле DisLikeComponent.vue следующим образом:

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="disLikePost" class="fa fa-thumbs-down" aria-hidden="true"></i>({{ totalDislike }})</a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                totalDislike:'',
            }
        },
        methods:{
            disLikePost(){
                axios.post('/dislike/'+this.post,{post:this.post})
                .then(response =>{
                    this.getDislike()
                    $('#success').html(response.data.message)
                })
                .catch()
            },
            getDislike(){
                axios.post('/dislike',{post:this.post})
                .then(response =>{
                    console.log(response.data.post.dislike)
                    this.totalDislike = response.data.post.dislike
                })
            }
        },
        mounted() {
            this.getDislike()
        }
    }
</script>

Теперь откройте  resources/assets/js/app.js и включите  компоненты LikeComponent.vue и DisLikeComponent.vue  следующим образом:

require('./bootstrap');
 
window.Vue = require('vue');
 
Vue.component('like-component', require('./components/LikeComponent.vue').default);
 
Vue.component('dis-like-component', require('./components/DisLikeComponent.vue'));
 
const app = new Vue({
    el: '#app',
});

Шаг 9: Создание представлений Blade и инициализация компонентов Vue

На этом этапе перейдите к ресурсам/представлениям и создайте одну папку с именем layouts . Внутри этой папки создайте один файл представления блейда с именем app.blade.php .

Затем перейдите к ресурсам/представлениям/макетам и откройте файл app.blade.php . Затем обновите следующий код в файле app.blade.php следующим образом:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>Laravel 8 Vue JS Like Dislike Example - Tutsmake.com</title>
 
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    @stack('fontawesome')
 
</head>
<body>
    <div id="app">
 
        <main class="py-4">
            @yield('content')
        </main>
 
    </div>
</body>
</html>

Затем перейдите к resources/views/ и создайте файл с одним именем posts.blade.php. Затем обновите следующий код в файле posts.blade.php следующим образом:

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Post Lists</div>
 
                <div class="card-body">
                    <ul>
                        @foreach ($posts as $item)
                         <a href="{{ route('post',$item->slug) }}"><li>{{ $item->title }}</li></a>
                        @endforeach
                    </ul>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

Опять же, перейдите к resources/views/ и создайте файл с одним именем single-post.blade.php. Затем обновите следующий код в файле single-post.blade.php следующим образом:

@extends('layouts.app')
@push('fontawesome')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endpush
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Post Detail</div>
 
                <div class="card-body">
                    <ul>
                       
                         <li>{{ $post->title }}</li>
                         <like-component :post="{{ $post->id }}"></like-component>
                         <dis-like-component :post="{{ $post->id }}"></dis-like-component>
                          
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Шаг 10: Запустите сервер разработки

Теперь выполните следующую команду на терминале, чтобы запустить сервер разработки:

npm run dev
 
or 
 
npm run watch

С помощью этого пошагового руководства вы теперь можете реализовать систему симпатий и антипатий Vue js в приложении laravel 8.

1.65 GEEK