Straipsniai

„Vue“ ir „Laravel“: sukurkite vieno puslapio programą

„Laravel“ yra viena iš populiariausių kūrėjų naudojamų PHP struktūrų, šiandien pažiūrėkime, kaip sukurti vieno puslapio programą naudojant „VueJ“.

Prieš paleidžiant Laravel vartotojo sąsają, viena iš pagrindinių jos funkcijų buvo išankstinis palaikymasdefivakarienė už Vue.js nuo Laravel v5.3 iki v6. „Vue“ yra moderni „JavaScript“ sąsajos sistema, naudojama vartotojo sąsajoms kurti.

Kodėl „Laravel“ ir „Vue“ įdiegti kartu?

Štai keletas pagrindinių „Laravel“ su „Vue“ pranašumų kuriant visą savo projektų darbo eigą:

Šaltinio kodas sujungiamas į vieną projektą, o ne atskiri backend ir frontend projektai
Diegimas ir konfigūravimas yra paprasti
Vienas platinimas gali valdyti abi sistemas kartu

Kas yra SPA? (vieno puslapio programa)

A vieno puslapio aplikacija (trumpai SPA) dinamiškai įkelia naujus duomenis iš žiniatinklio serverio į tinklalapį, neatnaujinant viso puslapio.

Populiarių svetainių, kuriose naudojami SPA, pavyzdžiai yra gmail.com ir youtube.com – kitaip tariant, SPA yra beveik visur. Dauguma administratoriaus prietaisų skydelių, su kuriais galite dirbti kasdien, yra sukurti naudojant SPA.

SPA privalumai:

Vartotojo patirtis yra lankstesnė
Saugokite duomenis naršyklėje
Greitas įkrovimo laikas

SPA trūkumai:

Gali pakenkti SEO (optimizavimas paieškos sistemoms)
Galimos saugumo problemos
Tai sunaudoja daug naršyklės išteklių

Projekto konfigūracija Laravel

Šis įrašas parodys, kaip sukurti užduočių programą, leidžiančią vartotojams prisiregistruoti gauti paskyrą ir pridėti užduočių.

Šiai pamokai naudojama Laravel 9, kuriai reikalinga PHP 8.1 ir Vue 3; taip pat turime įdiegti PHP ir NGINX.

Pradedame nuo šios komandos:

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

Tada įdiegsime „JavaScript“ priklausomybes.

npm install

Turime įdiegti kai kuriuos paketus, kad galėtume įtraukti Vue į savo projektą.

Be to, reikia įdiegti „plugin-vue“, nes „Laravel 9“ pristatomas su „Vite“, o ne „webpack-mix“, kuris buvo ankstesnis „Laravel“ „JavaScript“ paketas. Padarykime tai dabar:

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

Atidarykite failą pavadinimu vite.config.js ir pridėkite vue() į konfigūraciją:

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

Redaguokite „Vue 3“ programos failą app.js ir įkrovos fragmentą:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Sukurkite failą pavadinimu App.vue ir pridėkite:

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

   }
}
</script>

Galiausiai atidarykite failą welcome.blade.php esančiame aplanke resources/views ir pridėkite:

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

Norėdami peržiūrėti programą, turime paleisti „Vue“ programą ir „Laravel“ serverį dviejuose skirtinguose terminaluose / komandų eilutėse:

npm run dev


php artisan serve

Norėdami sukurti užduočių programą, turime sukurti kitus failus. „Vue“ sukurs kelis puslapius, daugiausia:

prieigos
už registraciją
Pagrindinis puslapis

Norėdami susisiekti su Laravel galutiniais taškais, turime įdiegti Axios:

npm install axios

vue maršrutizavimas

Naudojant paketą vue-router, yra įvairių maršruto parinkimo strategijų, kurias galima naudoti Vue; šios strategijos taip pat žinomos kaip history models.

Kai vartotojas prašo route pvz., http://localhost:8000/home, kuris grąžins 404 klaidą, kai puslapis bus atnaujintas, galime pasikliauti Laravel, kad aptiktų visus atsarginius maršrutus ir tada pateiks Blade failą, kuriame yra mūsų programa.

Dėl šios priežasties naudosime HTML5 režimą:

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

Šiame pavyzdyje autentifikavimą atliekame naudodami Laravel Sanctum, tada prieigos raktas išsaugomas vietinėje saugykloje.

Kad kitos užklausos būtų sėkmingos, prieigos raktas sujungiamas į antraštę, o tai leis Laravel identifikuoti užklausą pateikiantį vartotoją.

Čia yra abiejų susijusių kodų blokai:

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

Galbūt jus taip pat domina ...