Qabel it-tnedija ta 'Laravel UI, waħda mill-karatteristiċi ewlenin tagħha kienet l-appoġġ minn qabeldefinite għal Vue.js minn Laravel v5.3 sa v6. Vue huwa qafas ta' frontend JavaScript modern użat biex jinbnew interfaces tal-utent.
Hawn huma xi wħud mill-benefiċċji ewlenin tal-użu ta 'Laravel ma' Vue biex toħloq fluss tax-xogħol sħiħ għall-proġetti tiegħek:
Il-kodiċi tas-sors huwa kkombinat fi proġett wieħed, minflok ma jkollu proġetti separati għall-backend u l-frontend
L-installazzjoni u l-konfigurazzjoni huma sempliċi
Distribuzzjoni waħda tista' timmaniġġja ż-żewġ oqfsa flimkien
a applikazzjoni ta' paġna waħda (SPA fil-qosor) jgħabbi b'mod dinamiku dejta ġdida minn server tal-web f'paġna web mingħajr ma jkollok bżonn taġġorna l-paġna kollha.
Eżempji ta’ websajts popolari li jużaw SPAs jinkludu gmail.com u youtube.com – fi kliem ieħor, SPAs huma ġeneralment kullimkien. Ħafna mid-dashboards tal-amministrazzjoni li tista' taħdem magħhom kuljum huma mibnija bl-użu tal-SPA.
Vantaġġi ta 'SPAs:
L-esperjenza tal-utent hija aktar flessibbli
Cache data fil-browser
Ħin mgħaġġel tat-tagħbija
Żvantaġġi ta' SPAs:
Jista' jikkomprometti SEO (search engine optimization)
Kwistjonijiet ta' sigurtà potenzjali
Jikkonsma ħafna riżorsi tal-browser
Din il-kariga se turi kif tiżviluppa app għall-affarijiet li tippermetti lill-utenti jiffirmaw għal kont u jżidu l-kompiti.
Għal dan it-tutorja, jintuża Laravel 9, li jeħtieġ PHP 8.1 u Vue 3; jeħtieġ ukoll li jkollna PHP u NGINX installati.
Nibdew bil-kmand li ġej:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboSussegwentement, aħna ser ninstallaw id-dipendenzi JavaScript.
npm installGħandna bżonn ninstallaw xi pakketti qabel ma nistgħu nżidu Vue mal-proġett tagħna.
Ukoll, il-plugin-vue għandu jiġi installat, peress li Laravel 9 jibgħat ma 'Vite, aktar milli webpack-mix, li kien il-bundler Laravel preċedenti għal JavaScript. Ejja nagħmluha issa:
npm install vue@next vue-loader@next @vitejs/plugin-vueIftaħ il-fajl imsejjaħ vite.config.js u żid vue() għall-konfigurazzjoni:
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',
]),
],
});Editja l-fajl app.js u snippet bootstrap għall-app Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Oħloq fajl imsejjaħ App.vue u żid dan li ġej:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Fl-aħħarnett, iftaħ il-fajl welcome.blade.php jinsab fil-folder resources/views u żid dan li ġej:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Biex tipprevedi l-app tagħna, irridu nibdew l-app Vue tagħna u s-server Laravel fuq żewġ terminals/linji ta’ kmand differenti:
npm run dev
php artisan serveBiex noħolqu l-app tagħna għall-affarijiet, irridu noħolqu fajls oħra. Vue se toħloq bosta paġni, prinċipalment:
Biex nikkomunikaw ma 'endpoints ta' Laravel, irridu ninstallaw Axios:
npm install axiosBl-użu tal-pakkett vue-router, hemm diversi strateġiji ta 'routing li jistgħu jintużaw f'Vue; dawn l-istrateġiji huma magħrufa wkoll bħala history models.
Meta utent jitlob route bħal http://localhost:8000/home, li se jirritorna żball 404 meta l-paġna tiġi aggornata, nistgħu nistrieħu fuq Laravel biex jiskopru xi rotot ta 'riżerva u mbagħad iservu l-fajl Blade li fih l-app tagħna.
Għal din ir-raġuni, se nużaw il-modalità 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')
}
],
})F'dan l-eżempju nittrattaw l-awtentikazzjoni bl-użu Laravel Sanctum, imbagħad it-token jiġi ffrankat fil-ħażna lokali.
Għal talbiet oħra biex jirnexxu, it-token jiġi magħqud fl-header, li jippermetti li l-utent li jagħmel it-talba jiġi identifikat minn Laravel.
Hawn huma l-blokki tal-kodiċi assoċjati għat-tnejn:
<!--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
Jista 'jkun ukoll interessat fi ...
Coveware minn Veeam se jkompli jipprovdi servizzi ta' rispons għal inċidenti ta' estorsjoni ċibernetika. Coveware se joffri forensiċi u kapaċitajiet ta' rimedju...
Il-manutenzjoni ta’ tbassir qed tirrivoluzzjona s-settur taż-żejt u l-gass, b’approċċ innovattiv u proattiv għall-ġestjoni tal-impjant...
Is-CMA tar-Renju Unit ħarġet twissija dwar l-imġieba ta 'Big Tech fis-suq tal-intelliġenza artifiċjali. Hemm…
Id-Digriet "Case Green", ifformulat mill-Unjoni Ewropea biex itejjeb l-effiċjenza enerġetika tal-bini, ikkonkluda l-proċess leġiżlattiv tiegħu bi...