Talohan'ny nanombohan'ny Laravel UI, ny iray amin'ireo endri-javatra lehibe indrindra dia ny fanohanana mialohadefialina ho an'ny Vue.js avy amin'ny Laravel v5.3 ka hatramin'ny v6. Vue dia rafi-pamokarana JavaScript maoderina ampiasaina amin'ny fananganana fifandraisana amin'ny mpampiasa.
Ireto ny sasany amin'ireo tombony lehibe amin'ny fampiasana Laravel miaraka amin'i Vue hamoronana rindran-kira feno ho an'ny tetikasanao:
Ny kaody loharano dia mitambatra ho tetikasa iray, fa tsy manana tetikasa misaraka ho an'ny backend sy frontend
Tsotra ny fametrahana sy ny fanamafisana
Ny fizarana tokana dia afaka mitantana ireo rafitra roa miaraka
Una fampiharana pejy tokana (SPA raha fohifohy) dia mametaka angona vaovao avy amin'ny mpizara tranonkala ho ao anaty pejin-tranonkala nefa tsy mila manavao ny pejy iray manontolo.
Ohatra amin'ny tranokala malaza mampiasa SPA ny gmail.com sy ny youtube.com - amin'ny teny hafa, ny SPA dia hita eny rehetra eny. Ny ankamaroan'ny dashboards admin mety hiarahanao isan'andro dia aorina amin'ny SPA.
Ny tombony amin'ny SPA:
Ny traikefan'ny mpampiasa dia mora kokoa
Cache data ao amin'ny navigateur
Fotoana fandefasana haingana
Ny tsy fahampian'ny SPA:
Mety hampandefitra ny SEO (optimization motera fikarohana)
Olana fiarovana mety hitranga
Mandany loharanon-karena maro izy io
Ity lahatsoratra ity dia hampiseho ny fomba hamoronana fampiharana tokony hatao izay ahafahan'ny mpampiasa misoratra anarana amin'ny kaonty ary manampy asa.
Ho an'ity fampianarana ity dia ampiasaina ny Laravel 9, izay mitaky PHP 8.1 sy Vue 3; mila mametraka PHP sy NGINX ihany koa isika.
Manomboka amin'ny baiko manaraka isika:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboManaraka, hametraka ny JavaScript miankina.
npm installMila mametraka fonosana vitsivitsy isika vao afaka manampy Vue amin'ny tetikasantsika.
Ary koa, tsy maintsy apetraka ny plugin-vue, satria ny Laravel 9 dia mandeha miaraka amin'ny Vite, fa tsy ny webpack-mix, izay ilay bundler Laravel teo aloha ho an'ny JavaScript. Andao atao izao:
npm install vue@next vue-loader@next @vitejs/plugin-vueSokafy ny rakitra antsoina vite.config.js ary ampio vue() ho config:
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',
]),
],
});Ahitsio ny fisie app.js sy ny snippet bootstrap ho an'ny app Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Mamorona rakitra antsoina hoe App.vue ary ampio ireto manaraka ireto:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Farany, sokafy ny rakitra welcome.blade.php hita ao amin'ny lahatahiry resources/views ary ampio ireto manaraka ireto:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Mba hijerena ny fampiharana anay dia mila manomboka ny fampiharana Vue sy ny mpizara Laravel amin'ny terminal roa samy hafa isika:
npm run dev
php artisan serveMba hamoronana ny fampiharana ataontsika dia mila mamorona rakitra hafa isika. Hanangana pejy maromaro i Vue, indrindra indrindra:
Mba hifandraisana amin'ireo teboka farany Laravel dia mila mametraka Axios isika:
npm install axiosMampiasa ny fonosana vue-router, misy tetika zotra isan-karazany azo ampiasaina ao amin'ny Vue; ireo paikady ireo dia fantatra ihany koa amin'ny hoe history models.
Rehefa misy mpampiasa mangataka route toy ny http://localhost:8000/home, izay hamerina fahadisoana 404 rehefa havaozina ny pejy, afaka miantehitra amin'i Laravel isika hamantatra izay lalana miverina ary avy eo manompo ny rakitra Blade izay misy ny fampiharana.
Noho izany antony izany dia hampiasa fomba HTML5 izahay:
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')
}
],
})Amin'ity ohatra ity dia mitantana ny fanamarinana ny fampiasana Laravel Sanctum, dia voatahiry ao amin'ny fitahirizana eo an-toerana ny famantarana.
Ho an'ny fangatahana hafa hahomby, ny marika dia mitambatra ao amin'ny lohapejy, izay ahafahan'ny mpampiasa manao ny fangatahana ho fantatr'i Laravel.
Ireto ny sakana kaody mifandraika amin'izy roa:
<!--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
Mety ho liana amin'ny ...
Nisy fandidiana ophthalmoplasty tamin'ny alàlan'ny mpijery ara-barotra Apple Vision Pro natao tao amin'ny Catania Polyclinic…
Ny fampivelarana ny fahaiza-manao maotera tsara amin'ny alalan'ny fandokoana dia manomana ny ankizy amin'ny fahaiza-manao sarotra kokoa toy ny fanoratana. Loko…
Ny sehatry ny tafika an-dranomasina dia tena hery ara-toekarena manerantany, izay nivezivezy nankany amin'ny tsena 150 miliara...
Ny alatsinainy lasa teo, nanambara fifanarahana tamin'ny OpenAI ny Financial Times. Ny FT dia manome alalana ny asa fanaovan-gazety manerantany…