Cikkek

Vue és Laravel: egyoldalas alkalmazás létrehozása

A Laravel az egyik legnépszerűbb PHP keretrendszer, amelyet a fejlesztők használnak, lássuk ma, hogyan készítsünk egyoldalas alkalmazást VueJ-kkel.

A Laravel UI megjelenése előtt az egyik fő funkciója az előzetes támogatás voltdefiestére Vue.js Laravel v5.3-ról v6-ra. A Vue egy modern JavaScript frontend keretrendszer, amelyet felhasználói felületek létrehozására használnak.

Miért telepítse együtt a Laravel-t és a Vue-t?

Íme néhány fő előnye a Laravel és a Vue használatának a projektjei teljes munkafolyamatának létrehozásához:

A forráskód egyetlen projektben van egyesítve, ahelyett, hogy külön projektek lennének a háttér- és az előtér számára
A telepítés és a konfiguráció egyszerű
Egyetlen disztribúció mindkét keretrendszert együtt kezelheti

Mi az a SPA? (egyoldalas jelentkezés)

egy egyoldalas alkalmazás (röviden SPA) dinamikusan tölti be az új adatokat egy webszerverről a weboldalra anélkül, hogy a teljes oldalt frissíteni kellene.

A gyógyfürdőket használó népszerű webhelyek közé tartozik például a gmail.com és a youtube.com – más szóval, a SPA-k nagyrészt mindenütt jelen vannak. A legtöbb adminisztrátori irányítópult, amellyel napi szinten dolgozhat, az SPA használatával készült.

A SPA-k előnyei:

A felhasználói élmény rugalmasabb
Adatok gyorsítótárazása a böngészőben
Gyors betöltési idő

A gyógyfürdők hátrányai:

Kompromittizálhatja a SEO-t (keresőoptimalizálás)
Lehetséges biztonsági problémák
Nagyon sok böngésző erőforrást fogyaszt

Projektkonfiguráció a Laravelben

Ez a bejegyzés bemutatja, hogyan lehet olyan teendő alkalmazást fejleszteni, amely lehetővé teszi a felhasználók számára, hogy regisztráljanak fiókot, és feladatokat adjanak hozzá.

Ehhez az oktatóanyaghoz a Laravel 9-et használjuk, amelyhez PHP 8.1 és Vue 3 szükséges; telepítenünk kell a PHP-t és az NGINX-et is.

A következő paranccsal kezdjük:

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

Ezután telepítjük a JavaScript-függőségeket.

npm install

Telepítenünk kell néhány csomagot, mielőtt hozzáadhatnánk a Vue-t a projektünkhöz.

Ezenkívül telepíteni kell a plugin-vue-t, mivel a Laravel 9 a Vite-vel érkezik, nem pedig a webpack-mix-szel, amely a JavaScript előző Laravel-csomagolója volt. Tegyük meg most:

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

Nyissa meg a nevű fájlt vite.config.js és add hozzá vue() konfigurációhoz:

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

Szerkessze az app.js fájlt és a bootstrap kódrészletet a Vue 3 alkalmazáshoz:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Hozzon létre egy fájlt, melynek neve App.vue és add hozzá a következőket:

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

   }
}
</script>

Végül nyissa meg a fájlt welcome.blade.php mappában található resources/views és add hozzá a következőket:

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

Alkalmazásunk előnézetéhez el kell indítanunk a Vue alkalmazást és a Laravel szervert két különböző terminálon/parancssorban:

npm run dev


php artisan serve

A teendő alkalmazásunk létrehozásához más fájlokat kell létrehoznunk. A Vue több oldalt hoz létre, főleg:

hozzáférés
a regisztrációhoz
Egy kezdőlap

A Laravel végpontokkal való kommunikációhoz telepítenünk kell az Axiost:

npm install axios

vue routing

A csomag használata vue-router, különféle útválasztási stratégiák használhatók a Vue-ban; ezeket a stratégiákat más néven history models.

Amikor egy felhasználó kéri route mint például a http://localhost:8000/home, amely 404-es hibát ad vissza az oldal frissítésekor, a Laravelre támaszkodhatunk, hogy felismerje a tartalék útvonalakat, majd kiszolgálja az alkalmazásunkat tartalmazó Blade fájlt.

Emiatt a HTML5 módot fogjuk használni:

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

Ebben a példában a hitelesítést a használatával kezeljük Laravel Sanctum, akkor a token a helyi tárhelyen kerül mentésre.

A többi kérés sikeressége érdekében a tokent beolvasztja a fejlécbe, ami lehetővé teszi, hogy a kérést benyújtó felhasználót a Laravel azonosítsa.

Itt vannak a társított kódblokkok mindkettőhöz:

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

Esetleg ezek is érdekelhetnek ...