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 ...
Is-settur navali huwa qawwa ekonomika globali vera, li navigat lejn suq ta’ 150 biljun...
It-Tnejn li għadda, il-Financial Times ħabbret ftehim mal-OpenAI. FT tagħti liċenzja għall-ġurnaliżmu ta’ klassi dinjija tagħha...
Miljuni ta 'nies iħallsu għal servizzi ta' streaming, iħallsu miżati ta 'abbonament ta' kull xahar. Hija opinjoni komuni li inti...
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...