Laravel UI کے آغاز سے پہلے، اس کی اہم خصوصیات میں سے ایک پری سپورٹ تھی۔defiکے لئے رات Vue.js Laravel v5.3 سے v6 تک۔ Vue ایک جدید JavaScript فرنٹ اینڈ فریم ورک ہے جو صارف انٹرفیس بنانے کے لیے استعمال ہوتا ہے۔
آپ کے پروجیکٹس کے لیے مکمل ورک فلو بنانے کے لیے Vue کے ساتھ Laravel کے استعمال کے کچھ اہم فوائد یہ ہیں:
پسدید اور فرنٹ اینڈ کے لیے الگ الگ پروجیکٹ رکھنے کے بجائے سورس کوڈ کو ایک پروجیکٹ میں ملایا جاتا ہے۔
تنصیب اور ترتیب آسان ہے۔
ایک ہی تقسیم دونوں فریم ورک کو ایک ساتھ منظم کر سکتی ہے۔
ایک ایک صفحے کی درخواست (مختصر کے لیے SPA) پورے صفحے کو ریفریش کیے بغیر ویب سرور سے نئے ڈیٹا کو متحرک طور پر کسی ویب صفحہ میں لوڈ کرتا ہے۔
SPAs استعمال کرنے والی مشہور ویب سائٹس کی مثالوں میں gmail.com اور youtube.com شامل ہیں – دوسرے لفظوں میں، SPAs بڑی حد تک ہر جگہ موجود ہیں۔ زیادہ تر ایڈمن ڈیش بورڈز جن کے ساتھ آپ روزانہ کی بنیاد پر کام کر سکتے ہیں SPA کا استعمال کرتے ہوئے بنائے گئے ہیں۔
SPAs کے فوائد:
صارف کا تجربہ زیادہ لچکدار ہے۔
براؤزر میں ڈیٹا کیش کریں۔
تیز لوڈنگ کا وقت
SPAs کے نقصانات:
SEO سے سمجھوتہ کر سکتا ہے (سرچ انجن آپٹیمائزیشن)
ممکنہ سیکورٹی کے مسائل
یہ براؤزر کے بہت سارے وسائل استعمال کرتا ہے۔
یہ پوسٹ دکھائے گی کہ کس طرح ایک ٹو ڈو ایپ تیار کی جائے جو صارفین کو اکاؤنٹ کے لیے سائن اپ کرنے اور کاموں کو شامل کرنے کی اجازت دیتی ہے۔
اس ٹیوٹوریل کے لیے Laravel 9 استعمال کیا جاتا ہے، جس کے لیے PHP 8.1 اور Vue 3 کی ضرورت ہوتی ہے۔ ہمیں پی ایچ پی اور این جی این ایکس انسٹال کرنے کی بھی ضرورت ہے۔
ہم مندرجہ ذیل کمانڈ کے ساتھ شروع کرتے ہیں:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboاگلا، ہم جاوا اسکرپٹ پر انحصار انسٹال کریں گے۔
npm installVue کو اپنے پروجیکٹ میں شامل کرنے سے پہلے ہمیں کچھ پیکجز انسٹال کرنے کی ضرورت ہے۔
نیز، پلگ ان ویو کو انسٹال کرنا ضروری ہے، کیونکہ لاریول 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 ایپ اور Laravel سرور کو دو مختلف ٹرمینلز/کمانڈ لائنوں پر شروع کرنے کی ضرورت ہے:
npm run dev
php artisan serveاپنی ٹو ڈو ایپ بنانے کے لیے، ہمیں دوسری فائلیں بنانے کی ضرورت ہے۔ Vue متعدد صفحات بنائے گا، بنیادی طور پر:
Laravel کے اختتامی نقطوں کے ساتھ بات چیت کرنے کے لیے، ہمیں Axios کو انسٹال کرنے کی ضرورت ہے:
npm install axiosپیکج کا استعمال کرتے ہوئے vue-router, وہاں مختلف روٹنگ حکمت عملی ہیں جو Vue میں استعمال کی جا سکتی ہیں؛ ان حکمت عملیوں کو بھی کہا جاتا ہے۔ history models.
جب کوئی صارف درخواست کرتا ہے۔ route جیسے http://localhost:8000/home، جو صفحہ کے ریفریش ہونے پر 404 ایرر لوٹائے گا، ہم کسی بھی فال بیک روٹس کا پتہ لگانے کے لیے Laravel پر بھروسہ کر سکتے ہیں اور پھر Blade فائل کو پیش کر سکتے ہیں جس میں ہماری ایپ موجود ہے۔
اس وجہ سے، ہم 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، پھر ٹوکن مقامی اسٹوریج میں محفوظ ہو جاتا ہے۔
دوسری درخواستوں کے کامیاب ہونے کے لیے، ٹوکن کو ہیڈر میں ضم کر دیا جاتا ہے، جو درخواست کرنے والے صارف کو Laravel کے ذریعے شناخت کرنے کی اجازت دے گا۔
یہاں دونوں کے لیے متعلقہ کوڈ بلاکس ہیں:
<!--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
آپ کو بھی دلچسپی ہو سکتی ہے ...
Veeam کی طرف سے Coveware سائبر بھتہ خوری کے واقعات کے ردعمل کی خدمات فراہم کرتا رہے گا۔ Coveware فرانزک اور تدارک کی صلاحیتیں پیش کرے گا…
پیشن گوئی کی دیکھ بھال تیل اور گیس کے شعبے میں انقلاب برپا کر رہی ہے، پلانٹ کے انتظام کے لیے ایک جدید اور فعال نقطہ نظر کے ساتھ۔
UK CMA نے مصنوعی ذہانت کے بازار میں بگ ٹیک کے رویے کے بارے میں ایک انتباہ جاری کیا ہے۔ وہاں…
عمارتوں کی توانائی کی کارکردگی کو بڑھانے کے لیے یورپی یونین کی طرف سے تیار کردہ "گرین ہاؤسز" فرمان نے اپنے قانون سازی کے عمل کو اس کے ساتھ ختم کیا ہے…