Artikel

Vue lan Laravel: nggawe Aplikasi Kaca Tunggal

Laravel minangka salah sawijining kerangka PHP sing paling populer digunakake dening pangembang, ayo ndeleng dina iki carane nggawe Aplikasi Kaca Tunggal nganggo VueJs.

Sadurunge diluncurake Laravel UI, salah sawijining fitur utama yaiku pre supportdefiwengi kanggo Vue.js saka Laravel v5.3 kanggo v6. Vue minangka kerangka frontend JavaScript modern sing digunakake kanggo mbangun antarmuka panganggo.

Napa nginstal Laravel lan Vue bebarengan?

Mangkene sawetara keuntungan utama nggunakake Laravel karo Vue kanggo nggawe alur kerja lengkap kanggo proyek sampeyan:

Kode sumber digabungake dadi siji proyek, tinimbang duwe proyek kapisah kanggo backend lan frontend
Instalasi lan konfigurasi sing prasaja
Distribusi siji bisa ngatur loro kerangka bebarengan

Apa iku SPA? (aplikasi single page)

Una aplikasi siji-kaca (singkatane SPA) kanthi dinamis mbukak data anyar saka server web menyang kaca web tanpa kudu refresh kabeh kaca.

Conto situs web populer sing nggunakake SPA kalebu gmail.com lan youtube.com - kanthi tembung liyane, SPA umume ana ing ngendi wae. Umume dashboard admin sing bisa digunakake saben dina dibangun nggunakake SPA.

Keuntungan saka SPA:

Pengalaman pangguna luwih fleksibel
Data cache ing browser
Wektu loading cepet

Kekurangan SPA:

Bisa kompromi SEO (optimasi mesin telusur)
Potensi masalah keamanan
Iku nganggo akeh sumber daya browser

Konfigurasi proyek ing Laravel

Kiriman iki bakal nuduhake carane nggawe aplikasi sing kudu ditindakake sing ngidini pangguna ndhaptar akun lan nambah tugas.

Kanggo tutorial iki, Laravel 9 digunakake, sing mbutuhake PHP 8.1 lan Vue 3; kita uga kudu duwe PHP lan NGINX diinstal.

Kita miwiti karo printah ing ngisor iki:

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

Sabanjure, kita bakal nginstal dependensi JavaScript.

npm install

Kita kudu nginstal sawetara paket sadurunge bisa nambah Vue menyang proyek kita.

Uga, plugin-vue kudu diinstal, amarga Laravel 9 dikirim karo Vite, tinimbang webpack-mix, sing dadi bundler Laravel sadurunge kanggo JavaScript. Ayo saiki:

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

Bukak file sing diarani vite.config.js lan nambah vue() kanggo konfigurasi:

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

Owahi file app.js lan cuplikan bootstrap kanggo aplikasi Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Gawe file sing diarani App.vue lan nambah ing ngisor iki:

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

   }
}
</script>

Pungkasan, bukak file kasebut welcome.blade.php dumunung ing folder resources/views lan nambah ing ngisor iki:

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

Kanggo pratinjau app, kita kudu miwiti aplikasi Vue lan server Laravel ing rong terminal / baris perintah sing beda:

npm run dev


php artisan serve

Kanggo nggawe aplikasi sing kudu ditindakake, kita kudu nggawe file liyane. Vue bakal nggawe pirang-pirang kaca, utamane:

saka akses
kanggo registrasi
A kaca ngarep

Kanggo komunikasi karo titik pungkasan Laravel, kita kudu nginstal Axios:

npm install axios

routing vue

Nggunakake paket vue-router, ana macem-macem Sastranegara nuntun sing bisa digunakake ing Vue; Sastranegara iki uga dikenal minangka history models.

Nalika pangguna njaluk route kaya http: // localhost: 8000 / home, sing bakal ngasilake kesalahan 404 nalika kaca kasebut dianyari, kita bisa ngandelake Laravel kanggo ndeteksi rute mundur lan banjur ngladeni file Blade sing ngemot aplikasi kita.

Kanggo alasan iki, kita bakal nggunakake mode 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')
        }
    ],
})

Ing conto iki kita nangani otentikasi nggunakake Laravel Sanctum, banjur token disimpen ing panyimpenan lokal.

Kanggo panjalukan liyane supaya bisa sukses, token kasebut digabungake menyang header, sing bakal ngidini pangguna nggawe panjaluk kasebut diidentifikasi dening Laravel.

Ing ngisor iki blok kode sing ana gandhengane kanggo loro:

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

Sampeyan bisa uga kasengsem ing ...