Laravel UI लाँच करण्यापूर्वी, त्याच्या मुख्य वैशिष्ट्यांपैकी एक प्री सपोर्ट होताdefiसाठी रात्री Vue.js Laravel v5.3 पासून v6 पर्यंत. Vue एक आधुनिक JavaScript फ्रंटएंड फ्रेमवर्क आहे जो वापरकर्ता इंटरफेस तयार करण्यासाठी वापरला जातो.
तुमच्या प्रकल्पांसाठी संपूर्ण वर्कफ्लो तयार करण्यासाठी Vue सह Laravel वापरण्याचे काही मुख्य फायदे येथे आहेत:
बॅकएंड आणि फ्रंटएंडसाठी वेगळे प्रकल्प न ठेवता, स्त्रोत कोड एका प्रोजेक्टमध्ये एकत्र केला जातो
स्थापना आणि कॉन्फिगरेशन सोपे आहे
एकच वितरण दोन्ही फ्रेमवर्क एकत्र व्यवस्थापित करू शकते
una एकल-पृष्ठ अनुप्रयोग (थोडक्यात SPA) संपूर्ण पृष्ठ रीफ्रेश न करता वेब सर्व्हरवरून डायनॅमिकपणे वेब पृष्ठावर नवीन डेटा लोड करते.
SPA वापरणाऱ्या लोकप्रिय वेबसाइट्सच्या उदाहरणांमध्ये gmail.com आणि youtube.com यांचा समावेश होतो – दुसऱ्या शब्दांत, SPA मोठ्या प्रमाणात सर्वव्यापी आहेत. तुम्ही दररोज ज्या अॅडमिनसह काम करू शकता त्यापैकी बहुतांश अॅडमिन डॅशबोर्ड SPA वापरून तयार केले जातात.
SPA चे फायदे:
वापरकर्ता अनुभव अधिक लवचिक आहे
ब्राउझरमध्ये कॅशे डेटा
जलद लोडिंग वेळ
SPA चे तोटे:
SEO तडजोड करू शकते (शोध इंजिन ऑप्टिमायझेशन)
संभाव्य सुरक्षा समस्या
हे ब्राउझर संसाधनांचा भरपूर वापर करते
हे पोस्ट टू-डू अॅप कसे विकसित करायचे ते दाखवेल जे वापरकर्त्यांना खात्यासाठी साइन अप करू देते आणि कार्ये जोडू देते.
या ट्यूटोरियलसाठी, Laravel 9 वापरले जाते, ज्यासाठी PHP 8.1 आणि Vue 3 आवश्यक आहे; आम्हाला PHP आणि NGINX देखील स्थापित करणे आवश्यक आहे.
आम्ही खालील आदेशासह प्रारंभ करतो:
composer create-project --prefer-dist laravel/laravel laravel-vue-combo
पुढे, आम्ही JavaScript अवलंबित्व स्थापित करू.
npm install
आम्ही आमच्या प्रकल्पात Vue जोडण्यापूर्वी आम्हाला काही पॅकेजेस स्थापित करणे आवश्यक आहे.
तसेच, प्लगइन-व्ह्यू स्थापित करणे आवश्यक आहे, कारण Laravel 9 वेबपॅक-मिक्स ऐवजी Vite सह पाठवते, जे JavaScript साठी पूर्वीचे Laravel बंडलर होते. चला आता करूया:
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 वर विसंबून राहू शकतो आणि नंतर आमचे अॅप असलेली ब्लेड फाइल सर्व्ह करू शकतो.
या कारणासाठी, आम्ही 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 द्वारे ओळखता येईल.
येथे दोन्हीसाठी संबंधित कोड ब्लॉक्स आहेत:
<!--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 अब्जांच्या बाजारपेठेकडे नेव्हिगेट केले आहे...
गेल्या सोमवारी, फायनान्शिअल टाईम्सने OpenAI सह करार जाहीर केला. FT ने त्याच्या जागतिक दर्जाच्या पत्रकारितेचा परवाना…
लाखो लोक स्ट्रीमिंग सेवांसाठी पैसे देतात, मासिक सदस्यता शुल्क भरतात. असे सामान्य मत आहे की आपण…
Veeam द्वारे Coveware सायबर खंडणी घटना प्रतिसाद सेवा प्रदान करणे सुरू ठेवेल. Coveware फॉरेन्सिक आणि उपाय क्षमता प्रदान करेल…