LARAVEL + Vue.js: использование лезвия для отображения целых компонентов страницы vue.js в MPA, не подходит для SEO - PullRequest
Новая
       1

LARAVEL + Vue.js: использование лезвия для отображения целых компонентов страницы vue.js в MPA, не подходит для SEO

0 голосов
/ 14 сентября 2018

Итак, я думаю о структуре веб-страницы моего ресторана, которая будет использовать laravel в качестве бэкэнда (маршрутизация и отображение блэйдов в браузере, простая система аутентификации и сеансы) и vue.js для фронтэнда (У меня есть один экземпляр vue, в котором я регистрирую компоненты, каждый из которых представляет собой представление, целую страницу, большинство этих страниц имеют вложенные 2 или 3 компонента, такие как ползунок изображения, привязка к вершине, для извлечения я использую axios мои конечные точки API без обновления страницы, а также множество операций CRUD из панели администратора).

Вот так выглядит мое представление index.blade.php (www.domain.com/), у меня много представлений, например posts.index.blade.php ... 

@extends('layouts.master')
@section('content')
    <page-index></page-index)
@endsection

Как видите, я хочу рассматривать каждую страницу как vue.component со многими компонентами, вложенными в каждый компонент страницы).

У меня есть несколько вопросов о возможных осложнениях при использовании этой структуры.

При отображении представлений я всегда возвращаю объект json со всеми данными, которые я хочу визуализировать на блейде, поскольку каждая страница в основном является компонентом vue.js, загруженным через javascript. Как я смогу циклически просматривать блюда, события и сообщения, которые я взято из бэкэнда. Я хочу использовать директиву v-for, но как мой компонент может узнать о данных, передаваемых в blade-сервер? Я не хочу использовать axios при подключении для заполнения моих представлений ... это резко увеличит количество запросов, отправляемых на сервер.

Поскольку весь контент страницы отображается с помощью javascript, это не повлияет на SEO? сканеры afaik search не будут загружать контент, отображаемый в javascript.

Это хорошая практика, это лучший способ справиться с laravel + vue.js не-SPA? Это хорошая абстракция переднего и заднего плана?

Как я буду обрабатывать аутентификацию, выполняя запросы axios к конечным точкам входа в laravel.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Для передачи данных в компонент vue вы можете использовать реквизит .

IndexController.php 

    ...
    $events = [
        ['id' => 111, 'foo' => 'bar'],
        ['id' => 123, 'foo' => 'bar']
    ];

    return view('index')->with(compact('events')); // send events to blade
}

index.blade.php 

@extends('layouts.master')
@section('content')
    <page-index events="{{ json_encode($events) }}"></page-index> // send events to vue
@endsection

PageIndexComponent.vue 

<script>
    export default {
        props: ['events'], // get events from here
        mounted() {
            parsedEvents = JSON.parse(this.events);
        }
    }
</script>

Здесь вы можете выполнить цикл v-for с помощью parsedEvents.

Для SEO вы можете редактировать свои resources/views/layouts/master.blade.php: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="title" content="@hasSection('title')@yield('title')@else{{ config('app.name') }}@endif">
        <meta name="description" content="@hasSection('description')@yield('description')@else{{ config('app.name') }}@endif">
        <meta property="og:title" content="@hasSection('title')@yield('title')@else{{ config('app.name') }}@endif">
        <meta property="og:description" content="@hasSection('description')@yield('description')@else{{ config('app.name') }}@endif">
        <meta property="og:image" content="@hasSection('image')@yield('image')@else{{ asset('/images/avatar.jpg') }}@endif">
        <meta property="og:type" content="@yield('type')">
        <meta property="og:url" content="{{ url()->current() }}">
        <meta property="og:locale" content="en_US">
        ...

И в каждом представлении вы можете либо жестко закодировать свой заголовок, описание и т. Д., Либо отправить его с контроллеров: 

@extends('layouts.master')

@section('title', 'Events') // or something like $page_title received from controller
@section('description', 'All Events') // or $page_desc sent from controller
@section('image', 'http://imgurl.com/123.png') // etc, etc
@section('type', 'article')

@section('content')
    <page-index events="{{ json_encode($events) }}"></page-index)
@endsection
0 голосов
/ 14 сентября 2018

В вашей структуре приложения нужны файлы vue.js и идентификатор элемента, в котором он может отображать компоненты: 

<html>
    ...
   <head>...</head>
<body>
    @extends('layouts.master')
    @section('content')
     <div id="app">   //vue will read this id and render components
        <page-index></page-index>
     </div>
    @endsection

   <script src="/js/app.js"></scrip> 
   // this is where webpack usually place compiled js files. It will run vue.on element having id=app.

 </body>

Помните! Вы должны включить vueфайлы .js, в которых вы хотите использовать vue в приложении laravel

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...