Artikler

Vue og Laravel: lag en enkeltsideapplikasjon

Laravel er et av de mest populære PHP-rammeverkene som brukes av utviklere, la oss se i dag hvordan du lager en enkeltsideapplikasjon med VueJs.

Før lanseringen av Laravel UI var en av hovedfunksjonene forhåndsstøttedefinatt for Vue.js fra Laravel v5.3 til v6. Vue er et moderne JavaScript-frontend-rammeverk som brukes til å bygge brukergrensesnitt.

Hvorfor installere Laravel og Vue sammen?

Her er noen av hovedfordelene ved å bruke Laravel med Vue for å lage en komplett arbeidsflyt for prosjektene dine:

Kildekoden er kombinert til ett prosjekt, i stedet for å ha separate prosjekter for backend og frontend
Installasjon og konfigurasjon er enkel
En enkelt distribusjon kan administrere begge rammeverkene sammen

Hva er et SPA? (enkeltsideapplikasjon)

en applikasjon med én side (SPA forkortet) laster dynamisk inn nye data fra en webserver til en nettside uten å måtte oppdatere hele siden.

Eksempler på populære nettsteder som bruker SPA-er inkluderer gmail.com og youtube.com – med andre ord er SPA-er stort sett allestedsnærværende. De fleste av admin-dashboardene du kan jobbe med på daglig basis er bygget ved hjelp av SPA.

Fordeler med SPA:

Brukeropplevelsen er mer fleksibel
Buffer data i nettleseren
Rask lastetid

Ulemper med SPA:

Kan kompromittere SEO (søkemotoroptimalisering)
Potensielle sikkerhetsproblemer
Det bruker mye nettleserressurser

Prosjektkonfigurasjon i Laravel

Dette innlegget vil demonstrere hvordan man utvikler en gjøremålsapp som lar brukere registrere seg for en konto og legge til oppgaver.

For denne opplæringen brukes Laravel 9, som krever PHP 8.1 og Vue 3; vi må også ha PHP og NGINX installert.

Vi starter med følgende kommando:

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

Deretter installerer vi JavaScript-avhengighetene.

npm install

Vi må installere noen pakker før vi kan legge Vue til prosjektet vårt.

Plugin-vue må også installeres, siden Laravel 9 leveres med Vite, i stedet for webpack-mix, som var den forrige Laravel-bunten for JavaScript. La oss gjøre det nå:

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

Åpne filen som heter vite.config.js og legg til vue() til konfigurasjon:

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

Rediger app.js-filen og bootstrap-kodebiten for Vue 3-appen:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Lag en fil som heter App.vue og legg til følgende:

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

   }
}
</script>

Til slutt åpner du filen welcome.blade.php ligger i mappen resources/views og legg til følgende:

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

For å forhåndsvise appen vår må vi starte Vue-appen og Laravel-serveren på to forskjellige terminaler/kommandolinjer:

npm run dev


php artisan serve

For å lage gjøremålsappen vår må vi lage andre filer. Vue vil opprette flere sider, hovedsakelig:

av tilgang
for registreringen
En hjemmeside

For å kommunisere med Laravel-endepunkter, må vi installere Axios:

npm install axios

vue ruting

Bruker pakken vue-router, er det ulike rutingstrategier som kan brukes i Vue; disse strategiene er også kjent som history models.

Når en bruker ber om route som http://localhost:8000/home, som vil returnere en 404-feil når siden oppdateres, kan vi stole på at Laravel oppdager eventuelle reserveruter og deretter serverer Blade-filen som inneholder appen vår.

Av denne grunn vil vi bruke HTML5-modus:

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

I dette eksemplet håndterer vi autentisering ved hjelp av Laravel Sanctum, så lagres tokenet i lokal lagring.

For at andre forespørsler skal lykkes, blir tokenet slått sammen i overskriften, som gjør at brukeren som sender forespørselen, kan identifiseres av Laravel.

Her er de tilknyttede kodeblokkene for begge:

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

Du kan også være interessert i ...