Laravel. Блог. Likes, dislikes на Vue. Не закончено!

Сайт: https://vuejs.org/v2/guide/installation.html

CDN: https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js

Вид: \resources\views\user\blog.blade.php

@extends('user/app')

@section('bg-img', asset('user/img/home-bg.jpg'))

@section('title', 'Bitfumes blog')

@section('sub-heading', 'Learn together and grow together')

@section('head')

<style>

.fa-thumbs-up:hover {

color: red;

}

</style>

@endsection

@section('main-content')

<!-- Main Content -->

<div class="container">

<div class="row" id="app">

<div class="col-lg-8 col-md-10 mx-auto">

<div class="post-preview">

@foreach ($posts as $post)

<a href="{{ route('post', $post->slug) }}">

<h2 class="post-title">

{{ $post->title }}

</h2>

<h3 class="post-subtitle">

{{ $post->subtitle }}

</h3>

</a>

<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> {{ $post->created_at->diffForHumans() }}

<a href="#">

<small>0</small>

<i class="fa fa-thumbs-up" aria-hidden="true"></i>

</a>

</p>

@endforeach

</div>

<hr>

<!-- Pager -->

<ul class="pager">

<li class="next">

{{ $posts->links() }}

</li>

</ul>

</div>

</div>

</div>

<hr>

@endsection

Откроем: \resources\assets\js\app.js

require('./bootstrap');

window.Vue = require('vue');


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

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

Переименуем \resources\assets\js\components\Example.vue в

\resources\assets\js\components\posts.vue

Далее вырезаем цикл с постами со страницы \resources\views\user\blog.blade.php

и вставляем в шаблон сюда: \resources\assets\js\components\posts.vue

Перепишем шаблон.

<template>
<div class="post-preview">
<a href="{{ slug }}">
<h2 class="post-title">
{{ title }}
</h2>
<h3 class="post-subtitle">
{{ subtitle }}
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> {{ created_at }}
<a href="#">
<small>0</small>
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</p>
</div>
</template>

<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>

Компилируем файлы NPM.

Для этого в строке windows набираем:

npm install

а затем:

npm run watch

Установка NPM: http://blog.set.co.ua/2016/07/npm-bower-openserver.html

Также инсталируем Vue.

Ссылка: https://vuejs.org/v2/guide/installation.html

Для этого в строке windows набираем: npm install vue

Далее \resources\views\user\blog.blade.php

в этот файл включим скрипты

@extends('user/app')

@section('bg-img', asset('user/img/home-bg.jpg'))

@section('title', 'Bitfumes blog')

@section('sub-heading', 'Learn together and grow together')

@section('head')

<style>

.fa-thumbs-up:hover {

color: red;

}

</style>

@endsection

@section('main-content')

<!-- Main Content -->

<div class="container">

<div class="row" id="app">

<div class="col-lg-8 col-md-10 mx-auto">

@foreach ($posts as $post)

<div class="post-preview">

<a href="{{ route('post', $post->slug) }}">

<h2 class="post-title">

{{ $post->title }}

</h2>

<h3 class="post-subtitle">

{{ $post->subtitle }}

</h3>

</a>

<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> {{ $post->created_at->diffForHumans() }}

<a href="#">

<small>0</small>

<i class="fa fa-thumbs-up" aria-hidden="true"></i>

</a>

</p>

</div>

@endforeach

<hr>

<!-- Pager -->

<ul class="pager">

<li class="next">

{{ $posts->links() }}

</li>

</ul>

</div>

</div>

</div>

<hr>

@endsection

@section('footer')

<script src="{{ asset('js/app.js') }}"></script>

@endsection

Откроем: \resources\assets\js\app.js

require('./bootstrap');

window.Vue = require('vue');


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

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

Зайдем на сайт и откроем консоль разработчика клавишей F12.

Устраним ошибки: "CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token"

Откроем страницу https://laravel.com/docs/5.5/csrf#csrf-x-csrf-token

Скопируем: <meta name="csrf-token" content="{{ csrf_token() }}">

Вставим в файл \resources\views\user\blog.blade.php

@extends('user/app')

@section('bg-img', asset('user/img/home-bg.jpg'))

@section('title', 'Bitfumes blog')

@section('sub-heading', 'Learn together and grow together')

@section('head')

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>

.fa-thumbs-up:hover {

color: red;

}

</style>

@endsection

@section('main-content')

<!-- Main Content -->

<div class="container">

<div class="row" id="app">

<div class="col-lg-8 col-md-10 mx-auto">

@foreach ($posts as $post)

<div class="post-preview">

<a href="{{ route('post', $post->slug) }}">

<h2 class="post-title">

{{ $post->title }}

</h2>

<h3 class="post-subtitle">

{{ $post->subtitle }}

</h3>

</a>

<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> {{ $post->created_at->diffForHumans() }}

<a href="#">

<small>0</small>

<i class="fa fa-thumbs-up" aria-hidden="true"></i>

</a>

</p>

</div>

@endforeach

<hr>

<!-- Pager -->

<ul class="pager">

<li class="next">

{{ $posts->links() }}

</li>

</ul>

</div>

</div>

</div>

<hr>

@endsection

@section('footer')

<script src="{{ asset('js/app.js') }}"></script>

@endsection

Продолжим с \resources\views\user\blog.blade.php

Идем в файл \resources\assets\js\components\posts.vue

Идем в контроллер \app\Http\Controllers\User\PostController.php

Напишем там новую функцию.

public function getAllPosts() {
return $posts = post::where('status', 1)->orderBy('created_at', 'DESC')->paginate(2);
}
}

Напишем маршрут в web.php

Route::post('getPosts', 'PostController@getAllPosts');