Artiklar

Vue och Laravel: skapa en ensidig applikation

Laravel är ett av de mest populära PHP-ramverken som används av utvecklare, låt oss se idag hur man gör en Single Page Application med VueJs.

Före lanseringen av Laravel UI var en av dess huvudfunktioner förstöddefinatt för Vue.js från Laravel v5.3 till v6. Vue är ett modernt JavaScript-gränssnitt som används för att bygga användargränssnitt.

Varför installera Laravel och Vue tillsammans?

Här är några av de viktigaste fördelarna med att använda Laravel med Vue för att skapa ett komplett arbetsflöde för dina projekt:

Källkoden kombineras till ett projekt, istället för att ha separata projekt för backend och frontend
Installation och konfiguration är enkel
En enda distribution kan hantera båda ramverken tillsammans

Vad är ett SPA? (ensidig applikation)

en applikation på en sida (SPA förkortas) laddar dynamiskt ny data från en webbserver till en webbsida utan att behöva uppdatera hela sidan.

Exempel på populära webbplatser som använder SPA inkluderar gmail.com och youtube.com – med andra ord, SPA är i stort sett överallt. De flesta av administratörspanelerna du kanske arbetar med dagligen är byggda med SPA.

Fördelar med SPA:

Användarupplevelsen är mer flexibel
Cache data i webbläsaren
Snabb laddningstid

Nackdelar med SPA:

Kan äventyra SEO (sökmotoroptimering)
Potentiella säkerhetsproblem
Det förbrukar mycket webbläsarresurser

Projektkonfiguration i Laravel

Det här inlägget kommer att visa hur man utvecklar en att göra-app som låter användare registrera sig för ett konto och lägga till uppgifter.

För denna handledning används Laravel 9, vilket kräver PHP 8.1 och Vue 3; vi måste också ha PHP och NGINX installerade.

Vi börjar med följande kommando:

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

Därefter installerar vi JavaScript-beroendena.

npm install

Vi måste installera några paket innan vi kan lägga till Vue till vårt projekt.

Dessutom måste plugin-vue installeras, eftersom Laravel 9 levereras med Vite, snarare än webpack-mix, som var den tidigare Laravel-buntaren för JavaScript. Låt oss göra det nu:

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

Öppna filen som heter vite.config.js och lägg till vue() till konfiguration:

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

Redigera app.js-filen och bootstrap-kodavsnittet för Vue 3-appen:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Skapa en fil som heter App.vue och lägg till följande:

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

   }
}
</script>

Öppna slutligen filen welcome.blade.php finns i mappen resources/views och lägg till följande:

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

För att förhandsgranska vår app måste vi starta vår Vue-app och Laravel-server på två olika terminaler/kommandorader:

npm run dev


php artisan serve

För att skapa vår att göra-app måste vi skapa andra filer. Vue kommer att skapa flera sidor, främst:

av tillgång
för registreringen
En hemsida

För att kommunicera med Laravel endpoints måste vi installera Axios:

npm install axios

vue routing

Använder paketet vue-router, det finns olika routingstrategier som kan användas i Vue; dessa strategier är också kända som history models.

När en användare begär route som http://localhost:8000/home, som returnerar ett 404-fel när sidan uppdateras, kan vi lita på att Laravel upptäcker eventuella reservrutter och sedan serverar Blade-filen som innehåller vår app.

Av denna anledning kommer vi att använda HTML5-läge:

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 det här exemplet hanterar vi autentisering med hjälp av Laravel Sanctum, sedan sparas token i lokal lagring.

För att andra förfrågningar ska lyckas slås token samman i rubriken, vilket gör att användaren som gör förfrågan kan identifieras av Laravel.

Här är de associerade kodblocken för båda:

<!--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 kanske också är intresserad av ...