Artikoloj

Vue kaj Laravel: kreu Unupaĝan Aplikon

Laravel estas unu el la plej popularaj PHP-kadroj uzataj de programistoj, ni vidu hodiaŭ kiel fari Unupaĝan Aplikon kun VueJs.

Antaŭ la lanĉo de Laravel UI, unu el ĝiaj ĉefaj trajtoj estis antaŭsubtenodefinite for Vue.js de Laravel v5.3 ĝis v6. Vue estas moderna Ĝavasvada fasadkadro uzata por konstrui uzantinterfacojn.

Kial instali Laravel kaj Vue kune?

Jen kelkaj el la ĉefaj avantaĝoj de uzi Laravel kun Vue por krei kompletan laborfluon por viaj projektoj:

La fontkodo estas kombinita en unu projekton, anstataŭ havi apartajn projektojn por la backend kaj fasado
Instalado kaj agordo estas simplaj
Ununura distribuo povas administri ambaŭ kadrojn kune

Kio estas SPA? (unupaĝa aplikaĵo)

una unupaĝa aplikaĵo (mallonge SPA) dinamike ŝarĝas novajn datumojn de retservilo en retpaĝon sen devi refreŝigi la tutan paĝon.

Ekzemploj de popularaj retejoj kiuj uzas SPAojn inkluzivas gmail.com kaj youtube.com - alivorte, SPAoj estas plejparte ĉieaj. Plej multaj el la administraj paneloj, kun kiuj vi povus labori ĉiutage, estas konstruitaj per SPA.

Avantaĝoj de SPAoj:

La sperto de uzanto estas pli fleksebla
Cache datumoj en la retumilo
Rapida ŝarĝa tempo

Malavantaĝoj de SPAoj:

Eble kompromiti SEO (serĉilo-optimumigo)
Eblaj sekurecaj problemoj
Ĝi konsumas multajn retumilajn rimedojn

Projekta agordo en Laravel

Ĉi tiu afiŝo montros kiel disvolvi agadprogramon, kiu ebligas al uzantoj registriĝi por konto kaj aldoni taskojn.

Por ĉi tiu lernilo, Laravel 9 estas uzata, kiu postulas PHP 8.1 kaj Vue 3; ni ankaŭ bezonas instali PHP kaj NGINX.

Ni komencas per la sekva komando:

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

Poste ni instalos la JavaScript-dependojn.

npm install

Ni devas instali kelkajn pakaĵojn antaŭ ol ni povas aldoni Vue al nia projekto.

Ankaŭ, kromaĵo-vue devas esti instalita, ĉar Laravel 9 ekspediĝas kun Vite, prefere ol webpack-mix, kiu estis la antaŭa Laravel-pakaĵo por JavaScript. Ni faru ĝin nun:

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

Malfermu la nomitan dosieron vite.config.js kaj aldonu vue() al agordo:

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

Redaktu la app.js dosieron kaj bootstrap fragmenton por la Vue 3-aplikaĵo:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Kreu dosieron nomitan App.vue kaj aldonu la jenon:

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

   }
}
</script>

Fine, malfermu la dosieron welcome.blade.php lokita en la dosierujo resources/views kaj aldonu la jenon:

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

Por antaŭrigardi nian apon, ni devas komenci nian Vue-aplon kaj Laravel-servilon sur du malsamaj terminaloj/komandlinioj:

npm run dev


php artisan serve

Por krei nian agadprogramon, ni devas krei aliajn dosierojn. Vue kreos plurajn paĝojn, ĉefe:

de aliro
por la registriĝo
Hejmpaĝo

Por komuniki kun Laravel-finpunktoj, ni devas instali Axios:

npm install axios

vue routing

Uzante la pakaĵon vue-router, ekzistas diversaj vojstrategioj, kiuj povas esti uzataj en Vue; ĉi tiuj strategioj ankaŭ estas konataj kiel history models.

Kiam uzanto petas route kiel http://localhost:8000/home, kiu resendos 404-eraron kiam la paĝo estas refreŝigita, ni povas fidi je Laravel por detekti iujn ajn rezervajn itinerojn kaj poste servi la Blade-dosieron, kiu enhavas nian apon.

Tial ni uzos HTML5-reĝimon:

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

En ĉi tiu ekzemplo ni pritraktas aŭtentikigon uzante Laravel Sanctum, tiam la ĵetono estas konservita en loka stokado.

Por ke aliaj petoj sukcesu, la ĵetono estas kunfandita en la kaplinion, kio permesos al la uzanto faranta la peton esti identigita de Laravel.

Jen la rilataj kodblokoj por ambaŭ:

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

Vi eble ankaŭ interesiĝos pri ...