Greinar

Vue og Laravel: búðu til forrit á einni síðu

Laravel er einn af vinsælustu PHP rammanum sem forritarar nota, við skulum sjá í dag hvernig á að búa til Single Page Application með VueJs.

Áður en Laravel UI var sett á markað var einn af helstu eiginleikum þess forstuðningurdefikvöld fyrir Vue.js frá Laravel v5.3 til v6. Vue er nútímalegt JavaScript framenda ramma sem notað er til að byggja notendaviðmót.

Af hverju að setja Laravel og Vue saman?

Hér eru nokkrir helstu kostir þess að nota Laravel með Vue til að búa til fullkomið verkflæði fyrir verkefnin þín:

Frumkóðinn er sameinaður í eitt verkefni, í stað þess að hafa aðskilin verkefni fyrir bakenda og framenda
Uppsetning og uppsetning eru einföld
Ein dreifing getur stjórnað báðum ramma saman

Hvað er SPA? (forrit á einni síðu)

a einni síðu umsókn (SPA í stuttu máli) hleður nýjum gögnum frá vefþjóni inn á vefsíðu án þess að þurfa að endurnýja alla síðuna.

Dæmi um vinsælar vefsíður sem nota heilsulindir eru gmail.com og youtube.com - með öðrum orðum, heilsulindir eru að mestu alls staðar nálægar. Flest stjórnenda mælaborðin sem þú gætir unnið með daglega eru byggð með SPA.

Kostir heilsulinda:

Upplifun notenda er sveigjanlegri
Skyndiminni gögn í vafranum
Fljótur hleðslutími

Ókostir heilsulinda:

Getur komið í veg fyrir SEO (leitarvélabestun)
Hugsanleg öryggisvandamál
Það eyðir miklum vafraauðlindum

Uppsetning verkefnis í Laravel

Þessi færsla mun sýna hvernig á að þróa verkefnaforrit sem gerir notendum kleift að skrá sig fyrir reikning og bæta við verkefnum.

Fyrir þessa kennslu er Laravel 9 notað, sem krefst PHP 8.1 og Vue 3; við þurfum líka að hafa PHP og NGINX uppsett.

Við byrjum á eftirfarandi skipun:

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

Næst munum við setja upp JavaScript ósjálfstæði.

npm install

Við þurfum að setja upp nokkra pakka áður en við getum bætt Vue við verkefnið okkar.

Einnig verður að setja upp plugin-vue, þar sem Laravel 9 er sent með Vite, frekar en webpack-mix, sem var fyrri Laravel búnturinn fyrir JavaScript. Gerum það núna:

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

Opnaðu skrána sem heitir vite.config.js og bæta við vue() að uppsetningu:

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

Breyttu app.js skránni og ræsibútinum fyrir Vue 3 appið:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Búðu til skrá sem heitir App.vue og bæta við eftirfarandi:

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

   }
}
</script>

Að lokum skaltu opna skrána welcome.blade.php staðsett í möppunni resources/views og bæta við eftirfarandi:

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

Til að forskoða appið okkar þurfum við að ræsa Vue appið okkar og Laravel netþjóninn á tveimur mismunandi útstöðvum/skipanalínum:

npm run dev


php artisan serve

Til að búa til verkefnaforritið okkar þurfum við að búa til aðrar skrár. Vue mun búa til margar síður, aðallega:

af aðgangi
fyrir skráninguna
Heimasíða

Til að eiga samskipti við Laravel endapunkta þurfum við að setja upp Axios:

npm install axios

vue leiðsögn

Að nota pakkann vue-router, það eru ýmsar leiðaraðferðir sem hægt er að nota í Vue; þessar aðferðir eru einnig þekktar sem history models.

Þegar notandi biður um route eins og http://localhost:8000/home, sem mun skila 404 villu þegar síðan er endurnýjuð, getum við reitt okkur á Laravel til að greina allar fallleiðir og þjóna síðan Blade skránni sem inniheldur appið okkar.

Af þessum sökum munum við nota HTML5 ham:

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

Í þessu dæmi sjáum við um auðkenningu með því að nota Laravel Sanctum, þá er táknið vistað í staðbundinni geymslu.

Til að aðrar beiðnir nái fram að ganga er táknið sameinað í hausinn, sem gerir notandanum sem leggur fram beiðnina kleift að auðkenna Laravel.

Hér eru tengdir kóðablokkir fyrir báða:

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

Þú gætir líka haft áhuga á ...