Pele ho qala Laravel UI, e 'ngoe ea likarolo tsa eona tsa mantlha e ne e le tšehetso ea peledefinite bakeng sa Vue.js ho tloha Laravel v5.3 ho ea ho v6. Vue ke moralo oa sejoale-joale oa JavaScript o sebelisoang ho aha lihokelo tsa basebelisi.
Mona ke tse ling tsa melemo ea mantlha ea ho sebelisa Laravel le Vue ho theha tšebetso e felletseng ea merero ea hau:
Khoutu ea mohloli e kopantsoe ho morero o le mong, ho e-na le ho ba le merero e arohaneng bakeng sa backend le frontend
Ho kenya le ho hlophisa ho bonolo
Kabo e le 'ngoe e ka tsamaisa meralo ka bobeli hammoho
Una tshebediso ya leqephe le le leng (SPA ka nako e khuts'oane) e kenya data e ncha ho tsoa ho seva sa marang-rang ho ea leqepheng la webo ntle le ho khatholla leqephe lohle.
Mehlala ea liwebsaete tse tsebahalang tse sebelisang li-SPA li kenyelletsa gmail.com le youtube.com - ka mantsoe a mang, li-SPA li fumaneha hohle hohle. Boholo ba li-dashboards tsa admin tseo u ka sebetsang le tsona letsatsi le letsatsi li hahiloe ka SPA.
Melemo ea li-SPA:
Boiphihlelo ba mosebelisi bo fetoha habonolo
Cache data ho sebatli
Nako ea ho kenya kapele
Mathata a li-SPA:
E kanna ea sekisetsa SEO (ts'ebetso ea enjine ea ho batla)
Litaba tse ka bang teng tsa tshireletso
E ja lisebelisoa tse ngata tsa sebatli
Poso ena e tla bonts'a mokhoa oa ho etsa sesebelisoa sa ho etsa se lumellang basebelisi ho ingolisa bakeng sa ak'haonte le ho eketsa mesebetsi.
Bakeng sa thupelo ena, ho sebelisoa Laravel 9, e hlokang PHP 8.1 le Vue 3; hape re hloka ho kenya PHP le NGINX.
Re qala ka taelo e latelang:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboKa mor'a moo, re tla kenya litšepiso tsa JavaScript.
npm installRe hloka ho kenya liphutheloana pele re ka eketsa Vue morerong oa rona.
Hape, plugin-vue e tlameha ho kengoa, kaha Laravel 9 e tsamaea ka likepe tse nang le Vite, ho fapana le webpack-mix, eo e neng e le bundler ea pele ea Laravel bakeng sa JavaScript. Ha re e etse hona joale:
npm install vue@next vue-loader@next @vitejs/plugin-vueBula faele e bitsoang vite.config.js le ho eketsa vue() ho lokisa:
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',
]),
],
});Fetola faele ea app.js le snippet ea bootstrap bakeng sa sesebelisoa sa Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Theha faele e bitsoang App.vue 'me u kenye tse latelang:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Qetellong, bula faele welcome.blade.php e fumanehang foldareng resources/views 'me u kenye tse latelang:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Ho bona sesebelisoa sa rona esale pele, re hloka ho qala sesebelisoa sa rona sa Vue le seva ea Laravel liteisheneng tse peli tse fapaneng / mela ea litaelo:
npm run dev
php artisan serveHo theha app ea rona eo re lokelang ho e etsa, re hloka ho theha lifaele tse ling. Vue e tla theha maqephe a mangata, haholo-holo:
Ho buisana le li-endpoints tsa Laravel, re hloka ho kenya Axios:
npm install axiosHo sebelisa sephutheloana vue-router, ho na le mekhoa e fapaneng ea ho tsamaisa e ka sebelisoang ho Vue; maano ana a boetse a tsejoa e le history models.
Ha mosebedisi a kopa route joalo ka http://localhost:8000/home, e tla khutlisa phoso ea 404 ha leqephe le nchafatsoa, re ka itšetleha ka Laravel ho bona litsela life kapa life tse oelang morao ebe re sebeletsa faele ea Blade e nang le sesebelisoa sa rona.
Ka lebaka lena, re tla sebelisa mokhoa oa 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')
}
],
})Mohlaleng ona re sebetsana le netefatso ka ho sebelisa Laravel Sanctum, joale letšoao le bolokiloe polokelong ea sebaka seo.
E le hore likōpo tse ling li atlehe, letšoao le kopantsoe hloohong, e leng se tla lumella mosebedisi ea etsang kopo hore a khethoe ke Laravel.
Mona ke li-block tsa khoutu tse amanang le tsona ka bobeli:
<!--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
U kanna oa khahloa ke ...
Coveware ke Veeam e tla tsoelapele ho fana ka litšebeletso tsa karabelo ea liketsahalo tsa bosholu ba cyber. Coveware e tla fana ka bokhoni ba forensics le tokiso…
Tlhokomelo ea esale pele e tlisa phetoho lefapheng la oli le khase, ka mokhoa o mocha le o sebetsang oa taolo ea limela.…
UK CMA e fane ka temoso mabapi le boitšoaro ba Big Tech 'marakeng oa bohlale ba maiketsetso. Mono…
Taelo ea "Case Green", e entsoeng ke European Union ho ntlafatsa ts'ebetso ea matla ea meaho, e phethetse ts'ebetso ea eona ea molao ka…