Makaleler

Vue ve Laravel: Tek Sayfa Uygulaması oluşturun

Laravel, geliştiriciler tarafından kullanılan en popüler PHP çerçevelerinden biridir, bugün VueJ'lerle Tek Sayfa Uygulamasının nasıl yapıldığını görelim.

Laravel UI piyasaya sürülmeden önce ana özelliklerinden biri ön destekti.defigece için Vue.js laravel v5.3'ten v6'ya. Vue, kullanıcı arabirimleri oluşturmak için kullanılan modern bir JavaScript ön uç çerçevesidir.

Neden Laravel ve Vue'yu birlikte kuruyorsunuz?

Projeleriniz için eksiksiz bir iş akışı oluşturmak üzere Laravel'i Vue ile kullanmanın başlıca avantajlarından bazıları şunlardır:

Kaynak kodu, arka uç ve ön uç için ayrı projelere sahip olmak yerine tek bir projede birleştirilir.
Kurulum ve konfigürasyon basittir
Tek bir dağıtım, her iki çerçeveyi birlikte yönetebilir

SPA nedir? (tek sayfa uygulaması)

bir tek sayfalık uygulama (kısaca SPA), tüm sayfayı yenilemek zorunda kalmadan yeni verileri bir web sunucusundan bir web sayfasına dinamik olarak yükler.

SPA'ları kullanan popüler web sitelerinin örnekleri arasında gmail.com ve youtube.com yer alır - başka bir deyişle, SPA'lar büyük ölçüde her yerde bulunur. Günlük olarak çalışabileceğiniz yönetici panolarının çoğu, SPA kullanılarak oluşturulmuştur.

SPA'ların Avantajları:

Kullanıcı deneyimi daha esnektir
Verileri tarayıcıda önbelleğe alma
hızlı yükleme süresi

SPA'ların dezavantajları:

SEO'dan ödün verebilir (arama motoru optimizasyonu)
Potansiyel güvenlik sorunları
Çok fazla tarayıcı kaynağı tüketir

Laravel'de proje konfigürasyonu

Bu gönderi, kullanıcıların bir hesaba kaydolmasına ve görev eklemesine olanak tanıyan bir yapılacaklar uygulamasının nasıl geliştirileceğini gösterecek.

Bu eğitim için, PHP 9 ve Vue 8.1 gerektiren Laravel 3 kullanılmıştır; ayrıca PHP ve NGINX'in kurulu olması gerekiyor.

Aşağıdaki komutla başlıyoruz:

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

Ardından, JavaScript bağımlılıklarını yükleyeceğiz.

npm install

Vue'yu projemize eklemeden önce bazı paketleri kurmamız gerekiyor.

Ayrıca, Laravel 9, JavaScript için önceki Laravel paketleyicisi olan webpack-mix yerine Vite ile birlikte gönderildiğinden, plugin-vue yüklenmelidir. Haydi şimdi yapalım:

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

adlı dosyayı açın. vite.config.js ve Ekle vue() yapılandırmaya:

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

Vue 3 uygulaması için app.js dosyasını ve önyükleme snippet'ini düzenleyin:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

adlı bir dosya oluşturun. App.vue ve şunları ekleyin:

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

   }
}
</script>

Son olarak dosyayı açın welcome.blade.php klasörde bulunan resources/views ve şunları ekleyin:

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

Uygulamamızı önizlemek için Vue uygulamamızı ve Laravel sunucumuzu iki farklı terminalde/komut satırında başlatmamız gerekiyor:

npm run dev


php artisan serve

Yapılacaklar uygulamamızı oluşturmak için başka dosyalar oluşturmamız gerekiyor. Vue, çoğunlukla aşağıdakiler olmak üzere birden fazla sayfa oluşturacaktır:

erişim
kayıt için
bir ana sayfa

Laravel uç noktalarıyla iletişim kurmak için Axios'u kurmamız gerekiyor:

npm install axios

vue yönlendirme

paketi kullanma vue-router, Vue'da kullanılabilecek çeşitli yönlendirme stratejileri vardır; bu stratejiler aynı zamanda history models.

Bir kullanıcı talep ettiğinde route sayfa yenilendiğinde bir 8000 hatası döndürecek olan http://localhost:404/home gibi, herhangi bir geri dönüş yolunu algılamak ve ardından uygulamamızı içeren Blade dosyasını sunmak için Laravel'e güvenebiliriz.

Bu nedenle HTML5 modunu kullanacağız:

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

Bu örnekte, kullanarak kimlik doğrulamasını ele alıyoruz. Laravel Tapınağı, ardından belirteç yerel depolamaya kaydedilir.

Diğer isteklerin başarılı olması için belirteç, istekte bulunan kullanıcının Laravel tarafından tanımlanmasına izin verecek şekilde başlıkta birleştirilir.

Her ikisi için de ilişkili kod blokları şunlardır:

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

Şunlarla da ilgilenebilirsiniz ...

Etiketler: yapıLaravelphpSEOyazılımyazılım tasarımıyazılım geliştirmeYazılım Mühendisliğivue.js

13 Mart 2023 11:57

sonraki Microsoft'un Bing'i yeni yapay zeka destekli sohbet robotu özelliğini tanıtıyor »

önceki « GPT 4 bu hafta yayınlanacak - Microsoft Almanya CTO'su bazı ayrıntıları sızdırdı

Son Makaleler

Makaleler

İyi bir analiz için verileri ve formülleri Excel'de en iyi şekilde nasıl organize edebilirsiniz?

Microsoft Excel, veri analizi için referans aracıdır, çünkü veri kümelerini düzenlemek için birçok özellik sunar,…

14 Mayıs 2024

Makaleler

İki önemli Walliance Equity Kitlesel Fonlama projesi için olumlu sonuç: Jesolo Wave Island ve Milano Via Ravenna

2017 yılından bu yana Gayrimenkul Kitlesel Fonlaması alanında Avrupa'nın liderleri arasında yer alan Walliance, SIM ve platform, tamamlandığını duyurdu…

13 Mayıs 2024