Para fillimit të Laravel UI, një nga karakteristikat kryesore të tij ishte mbështetja paraprakedefinatën për Vue.js nga Laravel v5.3 në v6. Vue është një kornizë moderne JavaScript frontend që përdoret për të ndërtuar ndërfaqe të përdoruesit.
Këtu janë disa nga përfitimet kryesore të përdorimit të Laravel me Vue për të krijuar një rrjedhë të plotë pune për projektet tuaja:
Kodi burimor është i kombinuar në një projekt, në vend që të ketë projekte të veçanta për pjesën e pasme dhe frontin
Instalimi dhe konfigurimi janë të thjeshta
Një shpërndarje e vetme mund të menaxhojë të dy kornizat së bashku
një aplikacion me një faqe (shkurt SPA) ngarkon në mënyrë dinamike të dhëna të reja nga një server në internet në një faqe interneti pa pasur nevojë të rifreskoni të gjithë faqen.
Shembuj të faqeve të internetit të njohura që përdorin SPA përfshijnë gmail.com dhe youtube.com – me fjalë të tjera, SPA-të janë kryesisht të kudogjendura. Shumica e paneleve të administratorit me të cilët mund të punoni çdo ditë janë ndërtuar duke përdorur SPA.
Përparësitë e SPA:
Përvoja e përdoruesit është më fleksibël
Cache e të dhënave në shfletues
Koha e shpejtë e ngarkimit
Disavantazhet e SPA-ve:
Mund të komprometojë SEO (optimizimi i motorit të kërkimit)
Çështjet e mundshme të sigurisë
Ai konsumon shumë burime të shfletuesit
Ky postim do të demonstrojë se si të zhvillohet një aplikacion për të bërë që i lejon përdoruesit të regjistrohen për një llogari dhe të shtojnë detyra.
Për këtë tutorial përdoret Laravel 9, i cili kërkon PHP 8.1 dhe Vue 3; ne gjithashtu duhet të kemi të instaluar PHP dhe NGINX.
Ne fillojmë me komandën e mëposhtme:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboMë pas, ne do të instalojmë varësitë JavaScript.
npm installDuhet të instalojmë disa paketa përpara se të shtojmë Vue në projektin tonë.
Gjithashtu, plugin-vue duhet të instalohet, pasi Laravel 9 dërgohet me Vite, në vend të webpack-mix, i cili ishte grupi i mëparshëm i Laravel për JavaScript. Le ta bëjmë tani:
npm install vue@next vue-loader@next @vitejs/plugin-vueHapni skedarin e thirrur vite.config.js dhe shtoni vue() te konfigurimi:
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',
]),
],
});Redaktoni skedarin app.js dhe fragmentin e bootstrap për aplikacionin Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Krijo një skedar të quajtur App.vue dhe shtoni sa vijon:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Në fund, hapni skedarin welcome.blade.php ndodhet në dosje resources/views dhe shtoni sa vijon:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Për të parë paraprakisht aplikacionin tonë, ne duhet të nisim aplikacionin tonë Vue dhe serverin Laravel në dy terminale/linja komandash të ndryshme:
npm run dev
php artisan servePër të krijuar aplikacionin tonë për të bërë, duhet të krijojmë skedarë të tjerë. Vue do të krijojë shumë faqe, kryesisht:
Për të komunikuar me pikat fundore të Laravel, duhet të instalojmë Axios:
npm install axiosDuke përdorur paketën vue-router, ka strategji të ndryshme rrugëtimi që mund të përdoren në Vue; këto strategji njihen edhe si history models.
Kur një përdorues kërkon route si http://localhost:8000/home, i cili do të kthejë një gabim 404 kur faqja të rifreskohet, ne mund të mbështetemi te Laravel për të zbuluar ndonjë rrugë kthimi dhe më pas të shërbejmë skedarin Blade që përmban aplikacionin tonë.
Për këtë arsye, ne do të përdorim modalitetin 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')
}
],
})Në këtë shembull ne trajtojmë vërtetimin duke përdorur Laravel Sanctum, atëherë token ruhet në ruajtjen lokale.
Që kërkesat e tjera të kenë sukses, token shkrihet në kokë, gjë që do të lejojë përdoruesin që bën kërkesën të identifikohet nga Laravel.
Këtu janë blloqet e kodit të lidhur për të dy:
<!--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
Ju gjithashtu mund të jeni të interesuar në ...
Coveware nga Veeam do të vazhdojë të ofrojë shërbime të reagimit ndaj incidenteve të zhvatjes kibernetike. Coveware do të ofrojë aftësi mjeko-ligjore dhe riparimi…
Mirëmbajtja parashikuese po revolucionon sektorin e naftës dhe gazit, me një qasje inovative dhe proaktive për menaxhimin e impiantit.…
CMA e Mbretërisë së Bashkuar ka lëshuar një paralajmërim për sjelljen e Big Tech në tregun e inteligjencës artificiale. Aty…
Dekreti "Case Green", i formuluar nga Bashkimi Evropian për të rritur efiçencën energjetike të ndërtesave, ka përfunduar procesin e tij legjislativ me…