товары

Vue и Laravel: создайте одностраничное приложение

Laravel — одна из самых популярных сред PHP, используемых разработчиками, давайте сегодня посмотрим, как создать одностраничное приложение с помощью VueJs.

До запуска пользовательского интерфейса Laravel одной из его основных функций была предварительная поддержкаdefiночь для Vue.js с Laravel v5.3 до v6. Vue — это современный интерфейсный фреймворк JavaScript, используемый для создания пользовательских интерфейсов.

Зачем устанавливать Laravel и Vue вместе?

Вот некоторые из основных преимуществ использования Laravel с Vue для создания полного рабочего процесса для ваших проектов:

Исходный код объединен в один проект вместо отдельных проектов для бэкэнда и фронтенда.
Установка и настройка просты
Один дистрибутив может управлять обоими фреймворками вместе.

Что такое СПА? (одностраничное приложение)

Una одностраничное приложение (сокращенно SPA) динамически загружает новые данные с веб-сервера на веб-страницу без необходимости обновления всей страницы.

Примеры популярных веб-сайтов, использующих SPA, включают gmail.com и youtube.com — другими словами, SPA широко распространены повсеместно. Большинство панелей администратора, с которыми вы можете работать ежедневно, построены с использованием SPA.

Преимущества СПА:

Пользовательский опыт стал более гибким
Кэшировать данные в браузере
Быстрое время загрузки

Недостатки СПА:

Может поставить под угрозу SEO (поисковая оптимизация)
Возможные проблемы с безопасностью
Потребляет много ресурсов браузера

Конфигурация проекта в Laravel

В этом посте будет показано, как разработать приложение для ведения дел, которое позволяет пользователям регистрировать учетную запись и добавлять задачи.

В этом руководстве используется Laravel 9, для которого требуются PHP 8.1 и Vue 3; нам также необходимо установить PHP и NGINX.

Начнем со следующей команды:

composer create-project --prefer-dist laravel/laravel laravel-vue-combo

Далее мы установим зависимости JavaScript.

npm install

Нам нужно установить некоторые пакеты, прежде чем мы сможем добавить Vue в наш проект.

Кроме того, должен быть установлен plugin-vue, так как Laravel 9 поставляется с Vite, а не с webpack-mix, который был предыдущим сборщиком Laravel для JavaScript. Давай сделаем это сейчас:

npm install vue@next vue-loader@next @vitejs/plugin-vue

Откройте файл под названием vite.config.js и добавить vue() к конфигурации:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Отредактируйте файл app.js и фрагмент начальной загрузки для приложения Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Создайте файл с именем App.vue и добавьте следующее:

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

Наконец, откройте файл welcome.blade.php находится в папке resources/views и добавьте следующее:

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

Чтобы просмотреть наше приложение, нам нужно запустить наше приложение Vue и сервер Laravel на двух разных терминалах/командных строках:

npm run dev


php artisan serve

Чтобы создать наше приложение to-do, нам нужно создать другие файлы. Vue создаст несколько страниц, в основном:

доступа
для регистрации
Домашняя страница

Для связи с конечными точками Laravel нам нужно установить Axios:

npm install axios

vue-маршрутизация

Использование пакета vue-router, в Vue можно использовать различные стратегии маршрутизации; эти стратегии также известны как history models.

Когда пользователь запрашивает route Например, http://localhost:8000/home, который вернет ошибку 404 при обновлении страницы, мы можем положиться на то, что Laravel обнаружит любые резервные маршруты, а затем предоставит файл Blade, содержащий наше приложение.

По этой причине мы будем использовать режим HTML5:

Route::get('/{vue_capture?}', function() {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('./pages/Login.vue')
        },
        {
            path: '/register',
            component: () => import('./pages/Register.vue')
        },
        {
            path: '/home',
            component: () => import('./pages/Home.vue')
        }
    ],
})

В этом примере мы обрабатываем аутентификацию, используя Святилище Ларавеля, то токен сохраняется в локальном хранилище.

Для успешного выполнения других запросов токен объединяется с заголовком, что позволяет Laravel идентифицировать пользователя, делающего запрос.

Вот связанные блоки кода для обоих:

<!--Login.vue-->
<template>
    <div class="mx-auto w-4/12 mt-10 bg-blue-200 p-4 rounded-lg">
        <div
            class="bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-2 flex flex-col"
        >
            <h1 class="text-gray-600 py-5 font-bold text-3xl"> Login </h1>
            <ul class="list-disc text-red-400" v-for="(value, index) in errors" :key="index" v-if="typeof errors === 'object'">
                <li>{{value[0]}}</li>
            </ul>
            <p class="list-disc text-red-400" v-if="typeof errors === 'string'">{{errors}}</p>
            <form method="post" @submit.prevent="handleLogin">
            <div class="mb-4">
                <label
                    class="block text-grey-darker text-sm font-bold mb-2"
                    for="username"
                >
                    Email Address
                </label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
                    id="username"
                    type="text"
                    v-model="form.email"
                    required
                />
            </div>
            <div class="mb-4">
                <label
                    class="block text-grey-darker text-sm font-bold mb-2"
                    for="password"
                >
                    Password
                </label>
                <input
                    class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
                    id="password"
                    type="password"
                    v-model="form.password"
                    required
                />
            </div>
            <div class="flex items-center justify-between">
                <button
                    class="bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
                    type="submit"
                >
                    Sign In
                </button>
                <router-link
                    class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
                    to="register"
                >
                    Sign Up
                </router-link>
            </div>
            </form>
        </div>
    </div>
</template>

export default {
    setup() {
        const errors = ref()
        const router = useRouter();
        const form = reactive({
            email: '',
            password: '',
        })
        const handleLogin = async () => {
            try {
                const result = await axios.post('/api/auth/login', form)
                if (result.status === 200 && result.data && result.data.token) {
                    localStorage.setItem('APP_DEMO_USER_TOKEN', result.data.token)
                    await router.push('home')
                }
            } catch (e) {
                if(e && e.response.data && e.response.data.errors) {
                    errors.value = Object.values(e.response.data.errors)
                } else {
                    errors.value = e.response.data.message || ""
                }
            }
        }

        return {
            form,
            errors,
            handleLogin,
        }
    }
}

Ercole Palmeri

Вам также может быть интересно ...