Рейтинг постов (UpVote) в Laravel

Добавлено: 28/09/2019 10:43 |  Обновлено: 28/09/2019 11:13 |  Добавил: nick |  Просмотры: 139 Комментарии: 2
Вводная часть
Задача примера – реализовать возможность голосовать за понравившиеся посты. При этом посты автоматически сортируются по количеству голосов. Сортировка постов и действие кнопки голосования происходит без перезагрузки страницы, для этого используется Vue.js и Axios.
Демонстрационное видео (в формате webm) На картинке вы можете видеть посты с зеленой рамкой. Такая рамка появляется у каждого поста, достигшего число голосований равное 30. Естественно, число можно сделать любое другое.

Содержание:

  1. Работа с бэкендом
  2. Работа с фронтендом

Работа с бэкендом

В данном примере я использую БД SQLite, но вы можете использовать любую другую.

Для того, чтобы фреймворк «понял», что мы хотим работать с SQLite, нужно изменить настройки соединения с БД в файле .env. Откроем его, и в строке DB_CONNECTION пропишем значение sqlite. Остальные строки данной секции (DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD) нужно удалить. Получится так:
DB_CONNECTION=sqlite
Нужно также создать файл БД database.sqlite в папке database проекта.

Далее маршруты. Откроем файл web.php (папка routes) и добавим в него следующие маршруты:
Route::get('/', 'PostController@index')->name('main');
Route::get('/api/posts', 'PostController@posts')->name('posts.index');
Route::post('/api/{post}/vote', 'PostController@vote');
Первый маршрут отвечает за первоначальный вывод списка постов на страницу.

Второй маршрут используется для загрузки списка постов с сервера с помощью Axios и сортировки их с помощью Vue.js.

Третий маршрут используется для того, чтобы сохранить результат голосования в БД на сервере. Для этого также используется Axios.

Теперь создадим контроллер, отвечающий за обработку этих маршрутов – PostController. Для этого используем следующую команду:
php artisan make:controller PostController
Откроем созданный файл контроллера (app/Http/Controllers.PostController.php). Добавим 3 метода, отвечающих за обработку добавленных ранее маршрутов.
public function index() {
    $posts = Post::all();
	return view('index', ['posts' => $posts]);
}

public function posts() {
    $posts = Post::all();
	return $posts;
}

public function vote(Request $request, Post $post)
{
  $post->votes = $post->votes+1;
  $post->save();
  return $post->votes;
}
Далее создадим модель Post и миграцию с помощью команды: php artisan make:model Post –migration В файле модели ничего трогать не будем. Откроем файл миграции – create_posts_table.php. Заменим содержимое метода up() на следующее:
Schema::create('posts', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('title');
    $table->text('body');
    $table->unsignedBigInteger('votes')->default(0);
    $table->timestamps();
}); 
В метод down() добавим строчку:
Schema::dropIfExists('posts'); 
Далее создадим фабрику PostFactory для того, чтобы можно было создавать новые посты автоматически. Для создания фабрики используем следующую команду:
php artisan make:factory PostFactory
Откроем файл фабрики (database/factories/ PostFactory.php) и отредактируем его. В итоге его содержимое должно быть следующим:
define(Post::class, function (Faker $faker) {
    return [
        'title' => $faker->sentence,
        'body'  => $faker->paragraph,
        'votes'  => $faker->randomDigit
    ];
});
Как видно по коду, мы будем заполнять автоматически-генерируемыми данными 3 поля: название поста (title), описание поста (body) и количество голосов за пост (votes).

Далее создадим таблицу постов в БД с помощью команды:
php artisan migrate
Теперь нужно заполнить эту таблицу данными. Создадим 10 постов автоматически с помощью tinker. Запустим его с помощью команды:
php artisan tinker
И создадим 10 постов с помощью команды:
factory(App\Post::class, 10)->create();
На этом работу с бэкендом мы закончили.
К содержанию

Оставьте свой комментарий

Комментарии