Laravel UI লঞ্চের আগে, এর অন্যতম প্রধান বৈশিষ্ট্য ছিল প্রি-সাপোর্টdefiজন্য রাত Vue.js লারাভেল v5.3 থেকে v6 পর্যন্ত। Vue হল একটি আধুনিক জাভাস্ক্রিপ্ট ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়।
আপনার প্রকল্পগুলির জন্য একটি সম্পূর্ণ ওয়ার্কফ্লো তৈরি করতে Vue এর সাথে লারাভেল ব্যবহার করার কিছু প্রধান সুবিধা এখানে রয়েছে:
ব্যাকএন্ড এবং ফ্রন্টএন্ডের জন্য আলাদা প্রজেক্ট থাকার পরিবর্তে সোর্স কোডটি একটি প্রজেক্টে একত্রিত করা হয়
ইনস্টলেশন এবং কনফিগারেশন সহজ
একটি একক বিতরণ উভয় ফ্রেমওয়ার্ক একসাথে পরিচালনা করতে পারে
উনা একক-পৃষ্ঠার আবেদন (সংক্ষেপে এসপিএ) সমগ্র পৃষ্ঠাটি রিফ্রেশ না করেই একটি ওয়েব সার্ভার থেকে একটি ওয়েব পৃষ্ঠায় গতিশীলভাবে নতুন ডেটা লোড করে৷
SPA ব্যবহার করে এমন জনপ্রিয় ওয়েবসাইটগুলির উদাহরণগুলির মধ্যে রয়েছে gmail.com এবং youtube.com - অন্য কথায়, SPAগুলি মূলত সর্বব্যাপী। বেশিরভাগ অ্যাডমিন ড্যাশবোর্ডের সাথে আপনি প্রতিদিন কাজ করতে পারেন SPA ব্যবহার করে তৈরি।
SPA এর সুবিধা:
ব্যবহারকারীর অভিজ্ঞতা আরও নমনীয়
ব্রাউজারে ক্যাশে ডেটা
দ্রুত লোডিং সময়
SPA এর অসুবিধা:
SEO (সার্চ ইঞ্জিন অপ্টিমাইজেশান) আপস করতে পারে
সম্ভাব্য নিরাপত্তা সমস্যা
এটা ব্রাউজার সম্পদ অনেক খরচ
এই পোস্টটি প্রদর্শন করবে কীভাবে একটি করণীয় অ্যাপ তৈরি করতে হয় যা ব্যবহারকারীদের একটি অ্যাকাউন্টের জন্য সাইন আপ করতে এবং কাজগুলি যোগ করতে দেয়।
এই টিউটোরিয়ালের জন্য, Laravel 9 ব্যবহার করা হয়েছে, যার জন্য PHP 8.1 এবং Vue 3 প্রয়োজন; আমাদের পিএইচপি এবং এনজিআইএনএক্স ইনস্টল করা দরকার।
আমরা নিম্নলিখিত কমান্ড দিয়ে শুরু করি:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboএর পরে, আমরা জাভাস্ক্রিপ্ট নির্ভরতা ইনস্টল করব।
npm installআমরা আমাদের প্রকল্পে Vue যোগ করার আগে আমাদের কিছু প্যাকেজ ইনস্টল করতে হবে।
এছাড়াও, প্লাগইন-ভিউ ইন্সটল করা আবশ্যক, যেহেতু লারাভেল 9 ওয়েবপ্যাক-মিক্সের পরিবর্তে Vite এর সাথে শিপ করে, যা জাভাস্ক্রিপ্টের পূর্ববর্তী লারাভেল বান্ডলার ছিল। আসুন এটা এখনই করি:
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 একাধিক পৃষ্ঠা তৈরি করবে, প্রধানত:
লারাভেল এন্ডপয়েন্টের সাথে যোগাযোগ করতে, আমাদের Axios ইনস্টল করতে হবে:
npm install axiosপ্যাকেজ ব্যবহার করে vue-router, বিভিন্ন রাউটিং কৌশল রয়েছে যা Vue-তে ব্যবহার করা যেতে পারে; এই কৌশল হিসাবে পরিচিত হয় history models.
যখন একজন ব্যবহারকারী অনুরোধ করে route যেমন http://localhost:8000/home, যেটি পৃষ্ঠাটি রিফ্রেশ করার সময় একটি 404 ত্রুটি ফিরিয়ে দেবে, আমরা যেকোন ফলব্যাক রুট সনাক্ত করতে Laravel-এর উপর নির্ভর করতে পারি এবং তারপরে আমাদের অ্যাপ ধারণ করে ব্লেড ফাইলটি পরিবেশন করতে পারি।
এই কারণে, আমরা 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')
}
],
})এই উদাহরণে আমরা ব্যবহার করে প্রমাণীকরণ পরিচালনা করি লারাভেল অভয়ারণ্য, তারপর টোকেন স্থানীয় স্টোরেজে সংরক্ষিত হয়।
অন্যান্য অনুরোধগুলি সফল হওয়ার জন্য, টোকেনটিকে হেডারে একত্রিত করা হয়েছে, যা ব্যবহারকারীকে লারাভেল দ্বারা শনাক্ত করার জন্য অনুরোধ করার অনুমতি দেবে।
এখানে উভয়ের জন্য সংশ্লিষ্ট কোড ব্লক রয়েছে:
<!--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
তুমিও আগ্রহী হতে পার ...
অ্যাপল ভিশন প্রো কমার্শিয়াল ভিউয়ার ব্যবহার করে ক্যাটানিয়া পলিক্লিনিকে একটি চক্ষুরোগ অপারেশন করা হয়েছিল...
রঙের মাধ্যমে সূক্ষ্ম মোটর দক্ষতার বিকাশ শিশুদের লেখার মতো জটিল দক্ষতার জন্য প্রস্তুত করে। রঙ…
নৌ সেক্টর একটি সত্যিকারের বৈশ্বিক অর্থনৈতিক শক্তি, যা 150 বিলিয়ন বাজারের দিকে নেভিগেট করেছে...
গত সোমবার, ফাইন্যান্সিয়াল টাইমস ওপেনএআই-এর সাথে একটি চুক্তি ঘোষণা করেছে। FT তার বিশ্বমানের সাংবাদিকতার লাইসেন্স দেয়...