Ngaphambi kokwethulwa kwe-Laravel UI, esinye sezici zayo eziyinhloko kwakuwukusekelwa kwangaphambilidefinite for I-Vue.js kusuka ku-Laravel v5.3 kuya ku-v6. I-Vue iwuhlaka lwesimanje olungaphambili lwe-JavaScript olusetshenziswa ukwakha izixhumanisi zomsebenzisi.
Nazi ezinye zezinzuzo eziyinhloko zokusebenzisa i-Laravel nge-Vue ukuze udale ukuhamba komsebenzi okuphelele kwamaphrojekthi akho:
Ikhodi yomthombo ihlanganiswa ibe iphrojekthi eyodwa, esikhundleni sokuba namaphrojekthi ahlukene we-backend ne-frontend
Ukufaka nokumisa kulula
Ukusabalalisa okukodwa kungaphatha zombili izinhlaka ndawonye
Una uhlelo lokusebenza lwekhasi elilodwa (I-SPA ngamafuphi) ilayisha ngokuguqukayo idatha entsha isuka kuseva yewebhu iye ekhasini lewebhu ngaphandle kokuvuselela lonke ikhasi.
Izibonelo zamawebhusayithi adumile asebenzisa ama-SPA zifaka i-gmail.com ne-youtube.com - ngamanye amazwi, ama-SPA atholakala yonke indawo. Iningi lamadeshibhodi omphathi ongasebenza nawo nsuku zonke akhiwe kusetshenziswa i-SPA.
Izinzuzo zama-SPAs:
Okuhlangenwe nakho komsebenzisi kuyavumelana nezimo
Idatha yenqolobane kusiphequluli
Isikhathi sokulayisha esisheshayo
Ukungalungi kwama-SPA:
Ingase ibeke engcupheni i-SEO (ukwenziwa kahle kwenjini yokusesha)
Izinkinga zokuphepha ezingaba khona
Idla izinsiza eziningi zesiphequluli
Lokhu okuthunyelwe kuzobonisa indlela yokuthuthukisa uhlelo lokusebenza oluvumela abasebenzisi ukuthi babhalisele i-akhawunti futhi bengeze imisebenzi.
Kulesi sifundo, kusetshenziswa i-Laravel 9, edinga i-PHP 8.1 kanye ne-Vue 3; sidinga futhi ukufaka i-PHP ne-NGINX.
Siqala ngomyalo olandelayo:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboOkulandelayo, sizofaka ukuncika kwe-JavaScript.
npm installSidinga ukufaka amaphakheji ngaphambi kokuthi sengeze i-Vue kuphrojekthi yethu.
Futhi, i-plugin-vue kufanele ifakwe, njengoba i-Laravel 9 ihamba nge-Vite, kune-webpack-mix, okwakuyi-bundler yangaphambilini ye-Laravel ye-JavaScript. Masikwenze manje:
npm install vue@next vue-loader@next @vitejs/plugin-vueVula ifayela elibizwa vite.config.js bese wengeza vue() ukumisa:
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',
]),
],
});Hlela ifayela le-app.js kanye namazwibela e-bootstrap ohlelo lokusebenza lwe-Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Dala ifayela elibizwa App.vue bese wengeza okulandelayo:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Ekugcineni, vula ifayela welcome.blade.php etholakala kufolda resources/views bese wengeza okulandelayo:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Ukuhlola kuqala uhlelo lwethu lokusebenza, sidinga ukuqala uhlelo lwethu lokusebenza lwe-Vue kanye neseva ye-Laravel kumatheminali/imigqa yomyalo emibili ehlukene:
npm run dev
php artisan serveUkuze sidale uhlelo lwethu lokusebenza, sidinga ukudala amanye amafayela. I-Vue izodala amakhasi amaningi, ikakhulukazi:
Ukuze uxhumane nama-Laravel endpoints, sidinga ukufaka i-Axios:
npm install axiosUkusebenzisa iphakheji vue-router, kunamasu ahlukahlukene omzila angasetshenziswa ku-Vue; la masu ayaziwa nangokuthi history models.
Lapho umsebenzisi ecela route njenge-http://localhost:8000/home, okuzobuyisela iphutha le-404 lapho ikhasi livuselelwa, singathembela ku-Laravel ukuze ithole noma yimiphi imizila yokubuyela emuva bese inikezela ngefayela le-Blade eliqukethe uhlelo lwethu lokusebenza.
Ngalesi sizathu, sizosebenzisa imodi ye-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')
}
],
})Kulesi sibonelo siphatha ukufakazela ubuqiniso sisebenzisa I-Laravel Sanctum, bese ithokheni igcinwa kwisitoreji sendawo.
Ukuze ezinye izicelo ziphumelele, ithokheni ihlanganiswa enhlokweni, okuzovumela umsebenzisi owenza isicelo ukuthi abonakale nguLaravel.
Nawa amabhulokhi ekhodi ahlotshaniswa nakho kokubili:
<!--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
Ungahle ube nentshisekelo ku ...
I-Coveware ye-Veeam izoqhubeka nokuhlinzeka ngezinsizakalo zokuphendula izigameko zokuntshontshwa kwe-inthanethi. I-Coveware izohlinzeka ngama-forensics kanye nekhono lokulungisa…
Ukulungiswa okuqagelayo kuguqula umkhakha kawoyela negesi, ngendlela emisha nesebenzayo yokuphatha izitshalo.…
I-CMA yase-UK ikhiphe isexwayiso mayelana nokuziphatha kwe-Big Tech emakethe yezobunhloli bokwenziwa. Lapho…
Isinqumo esithi "Case Green", esakhiwe yi-European Union ukuze kuthuthukiswe ukusebenza kahle kwamandla ezakhiwo, siphothule inqubo yaso yomthetho ngokuthi...