Atik

Vue ak Laravel: kreye yon aplikasyon paj sèl

Laravel se youn nan kad PHP ki pi popilè yo itilize pa devlopè yo, ann wè jodi a ki jan yo fè yon Aplikasyon Single Page ak VueJs.

Anvan lansman Laravel UI, youn nan karakteristik prensipal li yo te pre sipòdefinite pou vue.js soti nan Laravel v5.3 rive nan v6. Vue se yon kad modèn JavaScript ki itilize pou konstwi entèfas itilizatè.

Poukisa enstale Laravel ak Vue ansanm?

Men kèk nan benefis prensipal yo nan itilize Laravel ak Vue pou kreye yon workflow konplè pou pwojè ou yo:

Kòd sous la konbine nan yon sèl pwojè, olye pou yo gen pwojè separe pou backend la ak entèfas
Enstalasyon ak konfigirasyon yo senp
Yon distribisyon sèl ka jere tou de kad ansanm

Ki sa ki se yon SPA? (aplikasyon yon sèl paj)

yon aplikasyon yon sèl paj (SPA pou kout) dinamik chaje nouvo done ki sòti nan yon sèvè entènèt nan yon paj entènèt san yo pa gen rafrechi tout paj la.

Men kèk egzanp sou sit entènèt popilè ki itilize SPA yo enkli gmail.com ak youtube.com - nan lòt mo, SPA yo lajman omniprésente. Pifò nan tablodbò admin ou ta ka travay avèk yo sou yon baz chak jou yo bati lè l sèvi avèk SPA.

Avantaj nan SPA:

Eksperyans itilizatè a pi fleksib
Cache done nan navigatè a
Tan chaje rapid

Dezavantaj nan SPA:

Ka konpwomi SEO (optimize motè rechèch)
Pwoblèm sekirite potansyèl yo
Li konsome anpil resous navigatè

Konfigirasyon pwojè nan Laravel

Pòs sa a pral montre kijan pou devlope yon aplikasyon pou fè ki pèmèt itilizatè yo enskri pou yon kont epi ajoute travay.

Pou leson patikilye sa a, yo itilize Laravel 9, ki mande PHP 8.1 ak Vue 3; nou bezwen tou gen PHP ak NGINX enstale.

Nou kòmanse ak lòd sa a:

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

Apre sa, nou pral enstale depandans JavaScript yo.

npm install

Nou bezwen enstale kèk pakè anvan nou ka ajoute Vue nan pwojè nou an.

Epitou, plugin-vue dwe enstale, depi Laravel 9 bato ak Vite, olye ke webpack-mix, ki te anvan Laravel bundler pou JavaScript. Ann fè li kounye a:

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

Louvri dosye a rele vite.config.js epi ajoute vue() nan konfigirasyon:

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

Edite fichye app.js ak snippet bootstrap pou app Vue 3 la:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Kreye yon dosye ki rele App.vue epi ajoute sa ki annapre yo:

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

   }
}
</script>

Finalman, louvri dosye a welcome.blade.php ki sitiye nan katab la resources/views epi ajoute sa ki annapre yo:

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

Pou preview aplikasyon nou an, nou bezwen kòmanse aplikasyon Vue nou an ak sèvè Laravel sou de tèminal / liy lòd diferan:

npm run dev


php artisan serve

Pou kreye aplikasyon pou fè nou an, nou bezwen kreye lòt dosye. Vue pral kreye plizyè paj, sitou:

nan aksè
pou enskripsyon an
Yon paj lakay

Pou kominike ak pwen final Laravel, nou bezwen enstale Axios:

npm install axios

Vue routage

Sèvi ak pake a vue-router, gen plizyè estrateji routage ki ka itilize nan Vue; estrateji sa yo konnen tou kòm history models.

Lè yon itilizatè mande route tankou http://localhost:8000/home, ki pral retounen yon erè 404 lè paj la rafrechi, nou ka konte sou Laravel pou detekte nenpòt wout sekou epi sèvi ak dosye Blade ki gen aplikasyon nou an.

Pou rezon sa a, nou pral itilize mòd HTML5:

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

Nan egzanp sa a nou okipe otantifikasyon lè l sèvi avèk Laravel Sanctum, Lè sa a, jeton an sove nan depo lokal yo.

Pou lòt demann yo reyisi, jeton an fizyone nan header la, ki pral pèmèt itilizatè a fè demann lan dwe idantifye pa Laravel.

Men blòk kòd ki asosye pou tou de:

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

Ou ta ka enterese tou nan ...