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.
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
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
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-comboKeyinchalik, biz JavaScript bog'liqliklarini o'rnatamiz.
npm installLoyihamizga 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-vueChaqirilgan faylni oching vite.config.js va qo'shing vue() konfiguratsiyaga:
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 serveVazifalar ilovasini yaratish uchun biz boshqa fayllarni yaratishimiz kerak. Vue bir nechta sahifalarni yaratadi, asosan:
Laravel so'nggi nuqtalari bilan bog'lanish uchun biz Axiosni o'rnatishimiz kerak:
npm install axiosPaketdan 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 ...
Veeam tomonidan ishlab chiqarilgan Coveware kiber tovlamachilik hodisalariga javob berish xizmatlarini taqdim etishda davom etadi. Coveware sud tibbiyoti va remediatsiya imkoniyatlarini taklif qiladi ...
Bashoratli texnik xizmat ko'rsatish zavodlarni boshqarishga innovatsion va proaktiv yondashuv bilan neft va gaz sektorini inqilob qilmoqda.…
Buyuk Britaniya CMA Big Tech kompaniyasining sun'iy intellekt bozoridagi xatti-harakatlari haqida ogohlantirish e'lon qildi. U yerda…
Evropa Ittifoqi tomonidan binolarning energiya samaradorligini oshirish uchun ishlab chiqilgan "Yashil uylar" qarori qonunchilik jarayonini yakunladi ...