Laravel UI ಅನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ಅದರ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದು ಪೂರ್ವ ಬೆಂಬಲವಾಗಿತ್ತುdefiರಾತ್ರಿ Vue.js Laravel v5.3 ರಿಂದ v6 ವರೆಗೆ. Vue ಎಂಬುದು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮುಂಭಾಗದ ಚೌಕಟ್ಟಾಗಿದ್ದು, ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಸಂಪೂರ್ಣ ವರ್ಕ್‌ಫ್ಲೋ ಅನ್ನು ರಚಿಸಲು ವ್ಯೂ ಜೊತೆಗೆ ಲಾರಾವೆಲ್ ಬಳಸುವ ಕೆಲವು ಮುಖ್ಯ ಪ್ರಯೋಜನಗಳು ಇಲ್ಲಿವೆ:
ಮೂಲ ಕೋಡ್ ಅನ್ನು ಬ್ಯಾಕೆಂಡ್ ಮತ್ತು ಮುಂಭಾಗಕ್ಕಾಗಿ ಪ್ರತ್ಯೇಕ ಯೋಜನೆಗಳ ಬದಲಿಗೆ ಒಂದು ಯೋಜನೆಯಾಗಿ ಸಂಯೋಜಿಸಲಾಗಿದೆ
ಅನುಸ್ಥಾಪನೆ ಮತ್ತು ಸಂರಚನೆ ಸರಳವಾಗಿದೆ
ಒಂದೇ ವಿತರಣೆಯು ಎರಡೂ ಚೌಕಟ್ಟುಗಳನ್ನು ಒಟ್ಟಿಗೆ ನಿರ್ವಹಿಸಬಹುದು
ಉನಾ ಒಂದೇ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ (ಸಂಕ್ಷಿಪ್ತವಾಗಿ SPA) ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡದೆಯೇ ವೆಬ್ ಸರ್ವರ್‌ನಿಂದ ವೆಬ್ ಪುಟಕ್ಕೆ ಹೊಸ ಡೇಟಾವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ.
SPA ಗಳನ್ನು ಬಳಸುವ ಜನಪ್ರಿಯ ವೆಬ್‌ಸೈಟ್‌ಗಳ ಉದಾಹರಣೆಗಳಲ್ಲಿ gmail.com ಮತ್ತು youtube.com ಸೇರಿವೆ - ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, SPA ಗಳು ಹೆಚ್ಚಾಗಿ ಸರ್ವತ್ರವಾಗಿವೆ. ನೀವು ದೈನಂದಿನ ಆಧಾರದ ಮೇಲೆ ಕೆಲಸ ಮಾಡಬಹುದಾದ ಹೆಚ್ಚಿನ ನಿರ್ವಾಹಕ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳನ್ನು SPA ಬಳಸಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.
SPA ಗಳ ಪ್ರಯೋಜನಗಳು:
ಬಳಕೆದಾರರ ಅನುಭವವು ಹೆಚ್ಚು ಮೃದುವಾಗಿರುತ್ತದೆ
ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಗ್ರಹ ಡೇಟಾ
ವೇಗದ ಲೋಡ್ ಸಮಯ
SPA ಗಳ ಅನಾನುಕೂಲಗಳು:
ಎಸ್ಇಒ ರಾಜಿ ಮಾಡಿಕೊಳ್ಳಬಹುದು (ಸರ್ಚ್ ಇಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್)
ಸಂಭಾವ್ಯ ಭದ್ರತಾ ಸಮಸ್ಯೆಗಳು
ಇದು ಬಹಳಷ್ಟು ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತದೆ
ಖಾತೆಗೆ ಸೈನ್ ಅಪ್ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಲು ಬಳಕೆದಾರರನ್ನು ಅನುಮತಿಸುವ ಮಾಡಬೇಕಾದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ಅಭಿವೃದ್ಧಿಪಡಿಸುವುದು ಎಂಬುದನ್ನು ಈ ಪೋಸ್ಟ್ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಈ ಟ್ಯುಟೋರಿಯಲ್‌ಗಾಗಿ, 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 ಅಪ್ಲಿಕೇಶನ್ ಮತ್ತು 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
ನೀವು ಸಹ ಆಸಕ್ತಿ ಹೊಂದಿರಬಹುದು ...
ಸಸ್ಯ ನಿರ್ವಹಣೆಗೆ ನವೀನ ಮತ್ತು ಪೂರ್ವಭಾವಿ ವಿಧಾನದೊಂದಿಗೆ ಮುನ್ಸೂಚಕ ನಿರ್ವಹಣೆ ತೈಲ ಮತ್ತು ಅನಿಲ ವಲಯದಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟು ಮಾಡುತ್ತಿದೆ.
ಕೃತಕ ಬುದ್ಧಿಮತ್ತೆ ಮಾರುಕಟ್ಟೆಯಲ್ಲಿ ಬಿಗ್ ಟೆಕ್ ನ ವರ್ತನೆಯ ಬಗ್ಗೆ UK CMA ಎಚ್ಚರಿಕೆ ನೀಡಿದೆ. ಅಲ್ಲಿ…
ಕಟ್ಟಡಗಳ ಶಕ್ತಿಯ ದಕ್ಷತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಯುರೋಪಿಯನ್ ಯೂನಿಯನ್ ರೂಪಿಸಿದ "ಕೇಸ್ ಗ್ರೀನ್" ತೀರ್ಪು, ಅದರ ಶಾಸಕಾಂಗ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಮುಕ್ತಾಯಗೊಳಿಸಿದೆ…
ಇಟಲಿಯಲ್ಲಿ ಇಕಾಮರ್ಸ್ ಕುರಿತು ಕ್ಯಾಸಲೆಗ್ಗಿಯೊ ಅಸೋಸಿಯಾಟಿಯ ವಾರ್ಷಿಕ ವರದಿಯನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲಾಗಿದೆ. "AI-ಕಾಮರ್ಸ್: ಕೃತಕ ಬುದ್ಧಿಮತ್ತೆಯೊಂದಿಗೆ ಇಕಾಮರ್ಸ್‌ನ ಗಡಿಗಳು" ಎಂಬ ಶೀರ್ಷಿಕೆಯ ವರದಿ.…