Maqolalar

Vue va Laravel: bitta sahifali ilova yarating

Laravel - ishlab chiquvchilar tomonidan qo'llaniladigan eng mashhur PHP ramkalaridan biri, keling, VueJs bilan qanday qilib bitta sahifali dasturni yaratishni ko'rib chiqamiz.

Laravel UI ishga tushirilishidan oldin uning asosiy xususiyatlaridan biri oldindan qo'llab-quvvatlash edidefiuchun kech Vue.js Laravel v5.3 dan v6 gacha. Vue - bu foydalanuvchi interfeyslarini yaratish uchun foydalaniladigan zamonaviy JavaScript frontend ramkasi.

Nima uchun Laravel va Vue-ni birga o'rnatish kerak?

Loyihalaringiz uchun to'liq ish oqimini yaratish uchun Laravelni Vue bilan ishlatishning asosiy afzalliklaridan ba'zilari:

Manba kodi backend va frontend uchun alohida loyihalarga ega bo'lish o'rniga bitta loyihaga birlashtirilgan
O'rnatish va sozlash oddiy
Bitta tarqatish ikkala ramkani birgalikda boshqarishi mumkin

SPA nima? (bitta sahifali ilova)

Una bir sahifali ilova (qisqacha SPA) butun sahifani yangilamasdan dinamik ravishda veb-serverdan veb-sahifaga yangi ma'lumotlarni yuklaydi.

SPA-lardan foydalanadigan mashhur veb-saytlarga misollar gmail.com va youtube.com-ni o'z ichiga oladi - boshqacha qilib aytganda, SPAlar asosan hamma joyda mavjud. Siz har kuni ishlashingiz mumkin bo'lgan boshqaruv panellarining aksariyati SPA yordamida yaratilgan.

SPA-ning afzalliklari:

Foydalanuvchi tajribasi yanada moslashuvchan
Brauzerdagi ma'lumotlarni keshlash
Tez yuklash vaqti


SPAlarning kamchiliklari:

SEO-ni buzishi mumkin (qidiruv tizimini optimallashtirish)
Potentsial xavfsizlik muammolari
U juda ko'p brauzer resurslarini sarflaydi

Laravelda loyiha konfiguratsiyasi

Ushbu post foydalanuvchilarga akkauntga ro'yxatdan o'tish va vazifalar qo'shish imkonini beruvchi vazifalar ilovasini qanday ishlab chiqishni ko'rsatib beradi.

Ushbu qo'llanma uchun Laravel 9 ishlatiladi, bu PHP 8.1 va Vue 3 ni talab qiladi; bizda PHP va NGINX ham o'rnatilgan bo'lishi kerak.

Biz quyidagi buyruq bilan boshlaymiz:

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

Keyinchalik, biz JavaScript bog'liqliklarini o'rnatamiz.

npm install

Loyihamizga Vue qo'shishdan oldin ba'zi paketlarni o'rnatishimiz kerak.

Bundan tashqari, plagin-vue o'rnatilishi kerak, chunki Laravel 9 JavaScript uchun oldingi Laravel paketi bo'lgan webpack-mix emas, balki Vite bilan birga keladi. Keling, buni hozir qilaylik:

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

Chaqirilgan faylni oching vite.config.js va qo'shing vue() konfiguratsiyaga:

Innovatsion axborot byulleteni
Innovatsiyalar haqidagi eng muhim yangiliklarni o'tkazib yubormang. Ularni elektron pochta orqali olish uchun ro'yxatdan o'ting.
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 ilovasi uchun app.js faylini va bootstrap snippetini tahrirlang:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

deb nomlangan fayl yarating App.vue va quyidagilarni qo'shing:

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

   }
}
</script>

Nihoyat, faylni oching welcome.blade.php papkada joylashgan resources/views va quyidagilarni qo'shing:

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

Ilovamizni oldindan ko'rish uchun Vue ilovamiz va Laravel serverimizni ikkita turli terminal/buyruqlar qatorida ishga tushirishimiz kerak:

npm run dev


php artisan serve

Vazifalar ilovasini yaratish uchun biz boshqa fayllarni yaratishimiz kerak. Vue bir nechta sahifalarni yaratadi, asosan:

  • kirish imkoniyati
  • ro'yxatdan o'tish uchun
  • Bosh sahifa


Laravel so'nggi nuqtalari bilan bog'lanish uchun biz Axiosni o'rnatishimiz kerak:

npm install axios

vue marshrutlash

Paketdan foydalanish vue-router, Vue-da ishlatilishi mumkin bo'lgan turli marshrutlash strategiyalari mavjud; bu strategiyalar sifatida ham tanilgan history models.

Foydalanuvchi so'raganda route http://localhost:8000/home kabi sahifa yangilanganda 404 xatoni qaytaradi, biz Laravel-ga tayanib, har qanday zaxira yo'nalishlarini aniqlashimiz va keyin ilovamizni o'z ichiga olgan Blade fayliga xizmat ko'rsatishimiz mumkin.

Shuning uchun biz HTML5 rejimidan foydalanamiz:

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

Ushbu misolda biz autentifikatsiyani ishlatamiz Laravel ziyoratgohi, keyin token mahalliy xotirada saqlanadi.

Boshqa so'rovlar muvaffaqiyatli bo'lishi uchun token sarlavhaga birlashtiriladi, bu so'rovni yuborgan foydalanuvchini Laravel tomonidan aniqlash imkonini beradi.

Mana ikkalasi uchun bog'langan kod bloklari:

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

Siz ham qiziqishingiz mumkin ...

Innovatsion axborot byulleteni
Innovatsiyalar haqidagi eng muhim yangiliklarni o'tkazib yubormang. Ularni elektron pochta orqali olish uchun ro'yxatdan o'ting.

So'nggi maqolalar

Smart Lock Market: bozor tadqiqoti hisoboti chop etildi

Smart Lock Market atamasi ishlab chiqarish, tarqatish va foydalanishni o'rab turgan sanoat va ekotizimni anglatadi ...

27 Marzo 2024

Dizayn naqshlari nima: ularni nima uchun ishlatish, tasnifi, ijobiy va salbiy tomonlari

Dasturiy ta'minot muhandisligida dizayn naqshlari dasturiy ta'minotni loyihalashda tez-tez uchraydigan muammolarni hal qilishning maqbul echimidir. men kabi…

26 Marzo 2024

Sanoat belgilarining texnologik evolyutsiyasi

Sanoat markalash - bu keng qamrovli atama bo'lib, u sirtda doimiy belgilar yaratish uchun ishlatiladigan bir nechta texnikani o'z ichiga oladi ...

25 Marzo 2024

VBA bilan yozilgan Excel makrolariga misollar

Quyidagi oddiy Excel makro misollari VBA Tahmini o'qish vaqti yordamida yozilgan: 3 daqiqa Misol...

25 Marzo 2024