artikuluak

Vue eta Laravel: sortu orrialde bakarreko aplikazioa

Laravel garatzaileek erabiltzen duten PHP esparru ezagunenetako bat da, ikus dezagun gaur nola egin orrialde bakarreko aplikazio bat VueJs-ekin.

Laravel UI abian jarri aurretik, bere ezaugarri nagusietako bat aurre-laguntza zendefiamaitutzat Vue.js Laravel v5.3tik v6ra. Vue erabiltzailearen interfazeak eraikitzeko erabiltzen den JavaScript frontend marko moderno bat da.

Zergatik instalatu Laravel eta Vue elkarrekin?

Hona hemen Laravel Vue-rekin erabiltzearen abantaila nagusietako batzuk zure proiektuetarako lan-fluxu osoa sortzeko:

Iturburu-kodea proiektu bakarrean konbinatzen da, backend eta frontend-erako proiektu bereiziak izan beharrean
Instalazioa eta konfigurazioa sinpleak dira
Banaketa bakar batek bi esparruak batera kudea ditzake

Zer da SPA bat? (orri bakarreko aplikazioa)

a orrialde bakarreko aplikazioa (SPA laburbilduz) web zerbitzari bateko datu berriak dinamikoki kargatzen ditu web orri batean orri osoa freskatu beharrik gabe.

SPAak erabiltzen dituzten webgune ezagunen adibideak gmail.com eta youtube.com dira, hau da, SPAak nonahikoak dira. Egunero lan egin dezakezun administrazio-panel gehienak SPA erabiliz eraikitzen dira.

SPAen abantailak:

Erabiltzaileen esperientzia malguagoa da
Cache datuak arakatzailean
Kargatzeko denbora azkarra

SPAen desabantailak:

SEO (bilatzaileen optimizazioa) arriskuan jarri dezake
Balizko segurtasun-arazoak
Arakatzailearen baliabide asko kontsumitzen ditu

Proiektuaren konfigurazioa Laravel-en

Argitalpen honek erabiltzaileei kontu bat erregistratzeko eta zereginak gehitzeko aukera ematen dien egiteko-aplikazio bat nola garatu erakutsiko du.

Tutorial honetarako, Laravel 9 erabiltzen da, PHP 8.1 eta Vue 3 behar dituena; PHP eta NGINX ere instalatuta eduki behar ditugu.

Hurrengo komandoarekin hasiko gara:

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

Ondoren, JavaScript menpekotasunak instalatuko ditugu.

npm install

Pakete batzuk instalatu behar ditugu Vue gure proiektuan gehitu aurretik.

Gainera, plugin-vue instalatu behar da, Laravel 9 Vite-rekin bidaltzen baita, webpack-mix baino, JavaScript-erako aurreko Laravel bundler zena. Egin dezagun orain:

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

Ireki deitutako fitxategia vite.config.js eta gehitu vue() konfiguratzeko:

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

Editatu Vue 3 aplikaziorako app.js fitxategia eta bootstrap zatia:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Sortu izeneko fitxategi bat App.vue eta gehitu ondorengoa:

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

   }
}
</script>

Azkenik, ireki fitxategia welcome.blade.php karpetan kokatzen da resources/views eta gehitu ondorengoa:

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

Gure aplikazioa aurreikusteko, gure Vue aplikazioa eta Laravel zerbitzaria abiarazi behar ditugu bi terminal/komando-lerro ezberdinetan:

npm run dev


php artisan serve

Gure egitekoen aplikazioa sortzeko, beste fitxategi batzuk sortu behar ditugu. Vue-k hainbat orrialde sortuko ditu, batez ere:

sarbidearena
izena emateko
Hasierako orri bat

Laravel amaierako puntuekin komunikatzeko, Axios instalatu behar dugu:

npm install axios

vue bideratzea

Paketea erabiliz vue-router, Vue-n erabil daitezkeen hainbat bideratze estrategia daude; estrategia hauek bezala ere ezagutzen dira history models.

Erabiltzaile batek eskatzen duenean route bezalako http://localhost:8000/home, orria freskatzen denean 404 errore bat itzuliko duena, Laravel-en fidatu gaitezke bidegabeko edozein bide detektatzeko eta gero gure aplikazioa duen Blade fitxategia hornitzeko.

Horregatik, HTML5 modua erabiliko dugu:

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

Adibide honetan autentifikazioa erabiliz kudeatzen dugu Laravel Santutegia, ondoren tokena tokiko biltegian gordetzen da.

Beste eskaera batzuk arrakasta izateko, tokena goiburuan batzen da, eta horri esker, eskaera egiten duen erabiltzailea Laravel-ek identifikatu ahal izango du.

Hona hemen bientzako lotutako kode blokeak:

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

Agian ere interesatuko zaizu ...