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-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:
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:
Laravel so'nggi nuqtalari bilan bog'lanish uchun biz Axiosni o'rnatishimiz kerak:
npm install axios
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 ...
Smart Lock Market atamasi ishlab chiqarish, tarqatish va foydalanishni o'rab turgan sanoat va ekotizimni anglatadi ...
Dasturiy ta'minot muhandisligida dizayn naqshlari dasturiy ta'minotni loyihalashda tez-tez uchraydigan muammolarni hal qilishning maqbul echimidir. men kabi…
Sanoat markalash - bu keng qamrovli atama bo'lib, u sirtda doimiy belgilar yaratish uchun ishlatiladigan bir nechta texnikani o'z ichiga oladi ...
Quyidagi oddiy Excel makro misollari VBA Tahmini o'qish vaqti yordamida yozilgan: 3 daqiqa Misol...