Artikel

Vue sareng Laravel: ngadamel Aplikasi Halaman Tunggal

Laravel mangrupikeun salah sahiji kerangka PHP anu pang populerna anu dianggo ku pamekar, hayu urang tingali ayeuna kumaha cara ngadamel Aplikasi Halaman Tunggal sareng VueJs.

Sateuacan peluncuran Laravel UI, salah sahiji fitur utami nyaéta pra dukungandefipeuting keur Vue.js ti Laravel v5.3 mun v6. Vue mangrupakeun kerangka frontend JavaScript modern dipaké pikeun ngawangun interfaces pamaké.

Naha masang Laravel sareng Vue babarengan?

Ieu sababaraha kauntungan utama ngagunakeun Laravel sareng Vue pikeun nyiptakeun alur kerja lengkep pikeun proyék anjeun:

Kodeu sumber digabungkeun kana hiji proyék, tinimbang ngabogaan proyék misah pikeun backend na frontend
Instalasi jeung konfigurasi anu basajan
Distribusi tunggal tiasa ngatur duanana kerangka babarengan

Naon ari SPA? (aplikasi hiji halaman)

Una aplikasi kaca tunggal (SPA pondokna) sacara dinamis ngamuat data anyar tina pangladén wéb kana halaman wéb tanpa kedah nga-refresh sadayana halaman.

Conto situs wéb populér anu nganggo SPA kalebet gmail.com sareng youtube.com - dina basa sanés, SPA umumna aya dimana-mana. Kaseueuran dasbor admin anu anjeun tiasa damel sareng unggal dintenna diwangun nganggo SPA.

Keunggulan SPA:

Pangalaman pangguna langkung fleksibel
Data cache dina browser
waktos loading gancang

Kelemahan SPA:

Bisa kompromi SEO (search engine optimization)
Masalah kaamanan poténsial
Éta meakeun seueur sumber panyungsi

Konfigurasi proyék di Laravel

Pos ieu bakal nunjukkeun kumaha cara ngembangkeun aplikasi anu kedah dilakukeun anu ngamungkinkeun para pangguna ngadaptarkeun akun sareng nambihan tugas.

Pikeun tutorial ieu, Laravel 9 dipaké, nu merlukeun PHP 8.1 jeung Vue 3; urang ogé kudu boga PHP jeung NGINX dipasang.

Urang mimitian ku paréntah di handap ieu:

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

Salajengna, urang bakal masang dependensi JavaScript.

npm install

Urang kedah masang sababaraha bungkusan sateuacan urang tiasa nambihan Vue kana proyék urang.

Ogé, plugin-vue kudu dipasang, saprak Laravel 9 kapal kalawan Vite, tinimbang webpack-campuran, nu tadina Laravel bundler pikeun JavaScript. Hayu urang ngalakukeun ayeuna:

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

Buka file anu disebut vite.config.js jeung nambahan vue() pikeun 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',
        ]),
    ],
});

Édit file app.js sareng snippet bootstrap pikeun aplikasi Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Jieun file disebut App.vue sareng tambahkeun ieu:

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

   }
}
</script>

Tungtungna, buka file welcome.blade.php ayana dina polder resources/views sareng tambahkeun ieu:

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

Pikeun nilik aplikasi urang, urang kedah ngamimitian aplikasi Vue sareng server Laravel dina dua terminal/garis paréntah anu béda:

npm run dev


php artisan serve

Pikeun nyieun aplikasi anu kedah dilakukeun, urang kedah nyiptakeun file anu sanés. Vue bakal nyieun sababaraha kaca, utamana:

tina aksés
pikeun pendaptaran
Hiji halaman imah

Pikeun komunikasi sareng titik tungtung Laravel, urang kedah pasang Axios:

npm install axios

vue routing

Ngagunakeun pakét vue-router, Aya rupa-rupa strategi routing nu bisa dipaké dina Vue; strategi ieu ogé katelah history models.

Lamun pamaké requests route siga http: // localhost: 8000 / home, anu bakal ngabalikeun kasalahan 404 nalika halamanna disegerkeun, urang tiasa ngandelkeun Laravel pikeun ngadeteksi rute mundur teras ngalayanan file Blade anu ngandung aplikasi kami.

Ku sabab kitu, urang bakal ngagunakeun 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')
        }
    ],
})

Dina conto ieu urang nanganan auténtikasi ngagunakeun Laravel Sanctum, teras token disimpen dina panyimpenan lokal.

Pikeun requests séjén suksés, token ieu dihijikeun kana lulugu, nu bakal ngidinan pamaké nyieun pamundut nu bisa diidentipikasi ku Laravel.

Ieu blok kode anu aya hubunganana pikeun duanana:

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

Anjeun panginten tiasa ogé resep ...