Laravel UI istifadəyə verilməzdən əvvəl onun əsas xüsusiyyətlərindən biri əvvəlcədən dəstək ididefiüçün gecə Vue.js Laravel v5.3-dən v6-ya. Vue, istifadəçi interfeyslərini qurmaq üçün istifadə edilən müasir JavaScript frontend çərçivəsidir.
Layihələriniz üçün tam iş axını yaratmaq üçün Vue ilə Laraveldən istifadə etməyin əsas üstünlüklərindən bəziləri bunlardır:
Mənbə kodu backend və frontend üçün ayrı layihələrə malik olmaq əvəzinə, bir layihədə birləşdirilir
Quraşdırma və konfiqurasiya sadədir
Tək paylama hər iki çərçivəni birlikdə idarə edə bilər
bir tək səhifəlik proqram (qısaca SPA) bütün səhifəni yeniləmədən veb serverdən yeni məlumatları dinamik şəkildə veb səhifəyə yükləyir.
SPA-lardan istifadə edən məşhur veb-saytlara misal olaraq gmail.com və youtube.com-u göstərmək olar – başqa sözlə, SPA-lar əsasən hər yerdə mövcuddur. Gündəlik işləyə biləcəyiniz idarəetmə panellərinin əksəriyyəti SPA istifadə edərək qurulur.
SPA-ların üstünlükləri:
İstifadəçi təcrübəsi daha çevikdir
Brauzerdə məlumatların önbelleği
Sürətli yükləmə vaxtı
SPA-ların çatışmazlıqları:
SEO-nu poza bilər (axtarış motorunun optimallaşdırılması)
Potensial təhlükəsizlik problemləri
Bir çox brauzer resursunu istehlak edir
Bu yazı istifadəçilərə hesab üçün qeydiyyatdan keçməyə və tapşırıqlar əlavə etməyə imkan verən görüləcək işlər proqramının necə hazırlanacağını nümayiş etdirəcək.
Bu dərslik üçün PHP 9 və Vue 8.1 tələb edən Laravel 3 istifadə olunur; bizdə də PHP və NGINX quraşdırılmış olmalıdır.
Aşağıdakı əmrlə başlayırıq:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboSonra JavaScript asılılıqlarını quraşdıracağıq.
npm installLayihəmizə Vue əlavə etməzdən əvvəl bəzi paketləri quraşdırmalıyıq.
Həmçinin, plagin-vue quraşdırılmalıdır, çünki Laravel 9 JavaScript üçün əvvəlki Laravel paketi olan webpack-mix deyil, Vite ilə göndərilir. İndi edək:
npm install vue@next vue-loader@next @vitejs/plugin-vueadlı faylı açın vite.config.js və əlavə edin vue() konfiqurasiya üçün:
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 tətbiqi üçün app.js faylını və açılış snippetini redaktə edin:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")adlı fayl yaradın App.vue və aşağıdakıları əlavə edin:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Nəhayət, faylı açın welcome.blade.php qovluğunda yerləşir resources/views və aşağıdakıları əlavə edin:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Tətbiqimizi önizləmək üçün Vue tətbiqimizi və Laravel serverimizi iki fərqli terminalda/əmr xəttində işə salmalıyıq:
npm run dev
php artisan serveGörüləcək işlər proqramımızı yaratmaq üçün başqa fayllar yaratmalıyıq. Vue birdən çox səhifə yaradacaq, əsasən:
Laravel son nöqtələri ilə əlaqə saxlamaq üçün Axios-u quraşdırmalıyıq:
npm install axiosPaketdən istifadə vue-router, Vue-də istifadə edilə bilən müxtəlif marşrutlaşdırma strategiyaları var; bu strategiyalar kimi də tanınır history models.
İstifadəçi tələb etdikdə route səhifə yeniləndikdə 8000 xətası qaytaracaq http://localhost:404/home kimi, biz hər hansı ehtiyat marşrutları aşkar etmək üçün Laravel-ə etibar edə bilərik və sonra tətbiqimizi ehtiva edən Blade faylına xidmət edə bilərik.
Bu səbəbdən biz HTML5 rejimindən istifadə edəcəyik:
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 nümunədə biz identifikasiyadan istifadə edirik Laravel ziyarətgahı, sonra token yerli yaddaşda saxlanılır.
Digər sorğuların uğur qazanması üçün token başlığa birləşdirilir ki, bu da sorğu edən istifadəçinin Laravel tərəfindən müəyyən edilməsinə imkan verəcək.
Budur hər ikisi üçün əlaqəli kod blokları:
<!--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ə də maraqlı ola bilər ...
Coveware by Veeam kiber qəsb hallarına cavab xidmətləri göstərməyə davam edəcək. Coveware məhkəmə və remediasiya imkanları təklif edəcək...
Proqnozlaşdırılan texniki xidmət zavodun idarə edilməsinə innovativ və proaktiv yanaşma ilə neft və qaz sektorunda inqilab edir.…
Böyük Britaniyanın CMA süni intellekt bazarında Big Tech-in davranışı ilə bağlı xəbərdarlıq edib. Orada…
Avropa İttifaqı tərəfindən binaların enerji səmərəliliyini artırmaq üçün tərtib edilən "Yaşıl Evlər" Fərmanı qanunvericilik prosesini yekunlaşdırdı ...