Статті

Vue і Laravel: створіть односторінкову програму

Laravel є одним із найпопулярніших фреймворків PHP, який використовують розробники, давайте сьогодні подивимося, як створити односторінкову програму за допомогою VueJs.

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

Навіщо встановлювати Laravel і Vue разом?

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

Вихідний код об’єднано в один проект, замість того, щоб мати окремі проекти для серверної та зовнішньої частини
Встановлення та налаштування прості
Один дистрибутив може керувати обома фреймворками разом

Що таке SPA? (односторінкова заявка)

Una односторінковий додаток (скорочено SPA) динамічно завантажує нові дані з веб-сервера на веб-сторінку без необхідності оновлювати всю сторінку.

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

Переваги 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 до нашого проекту.

Крім того, необхідно встановити плагін-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

Щоб створити нашу програму справ, нам потрібно створити інші файли. 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 Sanctum, то маркер зберігається в локальному сховищі.

Щоб інші запити були успішними, маркер об’єднується в заголовок, що дозволить 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

Вас також може зацікавити ...