د Laravel UI د پیل کولو دمخه، د هغې یو له مهمو ځانګړتیاوو څخه مخکې ملاتړ وdefiلپاره شپه Vue.js له Laravel v5.3 څخه تر v6 پورې. Vue یو عصري جاواسکریپټ فرنټ اینډ چوکاټ دی چې د کاروونکي انٹرفیس جوړولو لپاره کارول کیږي.
دلته ستاسو د پروژو لپاره د بشپړ کاري فلو رامینځته کولو لپاره د Vue سره Laravel کارولو ځینې اصلي ګټې دي:
د سرچینې کوډ په یوه پروژه کې یوځای شوی، د دې پر ځای چې د شالید او مخکینۍ برخې لپاره جلا پروژې ولري
نصب او تنظیم کول ساده دي
یو واحد ویش کولی شي دواړه چوکاټونه په ګډه اداره کړي
una د واحد پاڼې غوښتنلیک (د لنډ لپاره SPA) په متحرک ډول د ویب سرور څخه نوي ډیټا په ویب پا pageه کې بار کوي پرته لدې چې ټوله پاڼه تازه کړي.
د مشهورو ویب پاڼو مثالونه چې SPAs کاروي عبارت دي له gmail.com او youtube.com - په بل عبارت، SPAs په پراخه کچه هر اړخیز دي. ډیری اداري ډشبورډونه چې تاسو یې هره ورځ کار کوئ د SPA په کارولو سره جوړ شوي.
د SPAs ګټې:
د کاروونکي تجربه خورا انعطاف وړ ده
په براوزر کې د کیش ډاټا
د چټک بارولو وخت
د SPAs زیانونه:
کیدای شي SEO سره موافقت وکړي (د لټون انجن اصلاح کول)
احتمالي امنیتي ستونزې
دا د براوزر ډیری سرچینې مصرفوي
دا پوسټ به وښیې چې څنګه د ترسره کولو ایپ رامینځته کړي چې کاروونکو ته اجازه ورکوي چې د حساب لپاره لاسلیک وکړي او دندې اضافه کړي.
د دې ښوونې لپاره، Laravel 9 کارول کیږي، کوم چې PHP 8.1 او Vue 3 ته اړتیا لري؛ موږ هم اړتیا لرو چې PHP او NGINX نصب کړو.
موږ د لاندې کمانډ سره پیل کوو:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboبیا، موږ به د جاواسکریپټ انحصارونه نصب کړو.
npm installموږ اړتیا لرو مخکې له دې چې موږ خپلې پروژې ته Vue اضافه کړو ځینې کڅوړې نصب کړو.
همچنان ، پلگ ان ویو باید نصب شي ، ځکه چې Laravel 9 د ویبپیک مکس پرځای د ویټ سره کښته کوي ، کوم چې د جاواسکریپټ لپاره پخوانی لارویل بنډلر و. اوس یې کوو:
npm install vue@next vue-loader@next @vitejs/plugin-vueپه نوم فایل خلاص کړئ vite.config.js او اضافه کړئ vue() ترتیب ته:
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 ایپ لپاره د app.js فایل او بوټسټریپ سنیپیټ ایډیټ کړئ:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")په نوم یو فایل جوړ کړئ App.vue او لاندې اضافه کړئ:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>په نهایت کې ، فایل خلاص کړئ welcome.blade.php په فولډر کې موقعیت لري resources/views او لاندې اضافه کړئ:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>زموږ د اپلیکیشن لیدو لپاره ، موږ اړتیا لرو خپل Vue ایپ او لاریول سرور په دوه مختلف ټرمینلونو / کمانډ لاینونو کې پیل کړو:
npm run dev
php artisan serveزموږ د ترسره کولو ایپ رامینځته کولو لپاره ، موږ اړتیا لرو نورې فایلونه جوړ کړو. Vue به ډیری پاڼې رامینځته کړي، په عمده توګه:
د Laravel پای نقطو سره د خبرو اترو لپاره، موږ اړتیا لرو Axios نصب کړو:
npm install axiosد کڅوړې کارول vue-router، د روټینګ بیلابیل ستراتیژیانې شتون لري چې په Vue کې کارول کیدی شي؛ دا ستراتیژۍ په نوم هم پیژندل کیږي history models.
کله چې یو کاروونکي غوښتنه کوي route لکه http://localhost:8000/home، کوم چې به د 404 تېروتنه بیرته راګرځوي کله چې پاڼه تازه شي، موږ کولی شو په لارویل باندې تکیه وکړو ترڅو د بیرته راستنیدو کومې لارې کشف کړو او بیا د بلیډ فایل خدمت وکړو چې زموږ اپلیکیشن لري.
د دې دلیل لپاره، موږ به د HTML5 حالت وکاروو:
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')
}
],
})پدې مثال کې موږ د تصدیق کولو په کارولو سره اداره کوو Laravel Sanctum، بیا نښه په محلي ذخیره کې خوندي کیږي.
د نورو غوښتنو د بریالي کیدو لپاره ، نښه په سر کې ضمیمه شوې ، کوم چې به هغه کارونکي ته اجازه ورکړي چې غوښتنه یې د لارویل لخوا وپیژندل شي.
دلته د دواړو لپاره اړوند کوډ بلاکونه دي:
<!--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
تاسو شاید علاقه هم ولرئ ...
د انګلستان CMA د مصنوعي استخباراتو په بازار کې د لوی ټیک چلند په اړه خبرداری خپور کړی. هلته…
د "شنو خونو" فرمان، چې د اروپایي اتحادیې لخوا د ودانیو د انرژۍ موثریت لوړولو لپاره جوړ شوی، خپل مقننه پروسه پای ته رسولې ده ...
په ایټالیا کې د ای کامرس په اړه د Casaleggio Associati کلنی راپور وړاندې شو. د "AI-Commerce: د مصنوعي استخباراتو سره د ای کامرس سرحدونه" تر سرلیک لاندې راپور.…
د دوامداره ټیکنالوژیکي نوښت او چاپیریال او خلکو هوساینې ته ژمنتیا پایله. Bandalux Airpure® وړاندې کوي، یوه خیمه ...