Články

Vue a Laravel: vytvořte jednostránkovou aplikaci

Laravel je jedním z nejpopulárnějších PHP frameworků, které používají vývojáři, podívejme se dnes, jak vytvořit Single Page Application s VueJs.

Před spuštěním uživatelského rozhraní Laravel byla jednou z jeho hlavních funkcí předběžná podporadefinoc pro Vue.js z Laravel v5.3 na v6. Vue je moderní JavaScript frontend framework používaný k vytváření uživatelských rozhraní.

Proč instalovat Laravel a Vue společně?

Zde jsou některé z hlavních výhod používání Laravel s Vue k vytvoření kompletního pracovního postupu pro vaše projekty:

Zdrojový kód je sloučen do jednoho projektu, namísto samostatných projektů pro backend a frontend
Instalace a konfigurace jsou jednoduché
Jedna distribuce může spravovat oba rámce společně

Co je to SPA? (jednostránková aplikace)

A jednostránková aplikace (zkráceně SPA) dynamicky načítá nová data z webového serveru do webové stránky bez nutnosti obnovovat celou stránku.

Příklady oblíbených webových stránek, které využívají SPA, zahrnují gmail.com a youtube.com – jinými slovy, SPA jsou do značné míry všudypřítomné. Většina administračních panelů, se kterými můžete denně pracovat, je vytvořena pomocí SPA.

Výhody SPA:

Uživatelská zkušenost je flexibilnější
Uložte data do mezipaměti v prohlížeči
Rychlá doba načítání

Nevýhody SPA:

Může ohrozit SEO (optimalizace pro vyhledávače)
Potenciální bezpečnostní problémy
Spotřebovává to spoustu prostředků prohlížeče

Konfigurace projektu v Laravelu

Tento příspěvek ukáže, jak vyvinout aplikaci pro úkoly, která uživatelům umožní zaregistrovat si účet a přidávat úkoly.

Pro tento tutoriál je použit Laravel 9, který vyžaduje PHP 8.1 a Vue 3; také potřebujeme mít nainstalované PHP a NGINX.

Začneme následujícím příkazem:

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

Dále nainstalujeme závislosti JavaScriptu.

npm install

Než budeme moci přidat Vue do našeho projektu, musíme nainstalovat nějaké balíčky.

Také musí být nainstalován plugin-vue, protože Laravel 9 je dodáván s Vite, spíše než webpack-mix, což byl předchozí balíček Laravel pro JavaScript. Pojďme to udělat teď:

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

Otevřete soubor s názvem vite.config.js a přidat vue() do konfigurace:

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',
        ]),
    ],
});

Upravte soubor app.js a úryvek bootstrapu pro aplikaci Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Vytvořte soubor s názvem App.vue a přidejte následující:

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

   }
}
</script>

Nakonec soubor otevřete welcome.blade.php umístěný ve složce resources/views a přidejte následující:

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

Abychom si mohli prohlédnout naši aplikaci, musíme spustit naši aplikaci Vue a server Laravel na dvou různých terminálech/příkazových řádcích:

npm run dev


php artisan serve

Abychom vytvořili naši aplikaci pro úkoly, musíme vytvořit další soubory. Vue vytvoří více stránek, zejména:

přístupu
pro registraci
Domovská stránka

Abychom mohli komunikovat s koncovými body Laravel, musíme nainstalovat Axios:

npm install axios

vue směrování

Použití balíčku vue-router, existují různé strategie směrování, které lze ve Vue použít; tyto strategie jsou také známé jako history models.

Když uživatel požaduje route jako je http://localhost:8000/home, který po obnovení stránky vrátí chybu 404, můžeme se spolehnout na to, že Laravel detekuje jakékoli záložní trasy a poté obslouží soubor Blade, který obsahuje naši aplikaci.

Z tohoto důvodu použijeme režim 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')
        }
    ],
})

V tomto příkladu zpracováváme autentizaci pomocí Laravel Sanctum, pak se token uloží do místního úložiště.

Aby ostatní požadavky uspěly, je token sloučen do hlavičky, což umožní uživateli, který požadavek zadává, identifikovat Laravel.

Zde jsou přidružené bloky kódu pro oba:

<!--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

Také by vás mohlo zajímat ...