Voor die bekendstelling van Laravel UI was een van die belangrikste kenmerke voorafondersteuningdefinag vir Vue.js van Laravel v5.3 tot v6. Vue is 'n moderne JavaScript-frontend-raamwerk wat gebruik word om gebruikerskoppelvlakke te bou.
Hier is 'n paar van die belangrikste voordele van die gebruik van Laravel met Vue om 'n volledige werkvloei vir u projekte te skep:
Die bronkode word in een projek gekombineer, in plaas daarvan om aparte projekte vir die agterkant en voorkant te hê
Installasie en konfigurasie is eenvoudig
'n Enkele verspreiding kan beide raamwerke saam bestuur
'n enkelbladsy-toepassing (SPA vir kort) laai nuwe data van 'n webbediener dinamies na 'n webblad sonder om die hele bladsy te verfris.
Voorbeelde van gewilde webwerwe wat SPA's gebruik, sluit in gmail.com en youtube.com – met ander woorde, SPA's is grootliks alomteenwoordig. Die meeste van die administrasie-kontroleskerms waarmee u daagliks kan werk, word met SPA gebou.
Voordele van SPA's:
Die gebruikerservaring is meer buigsaam
Kas data in die blaaier
Vinnige laai tyd
Nadele van SPA's:
Kan SEO (soekenjinoptimalisering) in gevaar stel
Potensiële sekuriteitskwessies
Dit verbruik baie blaaierhulpbronne
Hierdie plasing sal demonstreer hoe om 'n doen-toepassing te ontwikkel wat gebruikers in staat stel om vir 'n rekening aan te meld en take by te voeg.
Vir hierdie tutoriaal word Laravel 9 gebruik, wat PHP 8.1 en Vue 3 vereis; ons moet ook PHP en NGINX geïnstalleer hê.
Ons begin met die volgende opdrag:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboVervolgens sal ons die JavaScript-afhanklikhede installeer.
npm installOns moet 'n paar pakkette installeer voordat ons Vue by ons projek kan voeg.
Ook, plugin-vue moet geïnstalleer word, aangesien Laravel 9 met Vite gestuur word, eerder as webpack-mix, wat die vorige Laravel-bundel vir JavaScript was. Kom ons doen dit nou:
npm install vue@next vue-loader@next @vitejs/plugin-vueMaak die lêer genaamd oop vite.config.js en voeg by vue() na konfigurasie:
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',
]),
],
});Wysig die app.js-lêer en selflaai-brokkie vir die Vue 3-toepassing:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Skep 'n lêer genaamd App.vue en voeg die volgende by:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Laastens, maak die lêer oop welcome.blade.php geleë in die gids resources/views en voeg die volgende by:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Om 'n voorskou van ons toepassing te maak, moet ons ons Vue-toepassing en Laravel-bediener op twee verskillende terminale/opdraglyne begin:
npm run dev
php artisan serveOm ons doen-toepassing te skep, moet ons ander lêers skep. Vue sal verskeie bladsye skep, hoofsaaklik:
Om met Laravel-eindpunte te kommunikeer, moet ons Axios installeer:
npm install axiosGebruik die pakket vue-router, daar is verskeie roetestrategieë wat in Vue gebruik kan word; hierdie strategieë staan ook bekend as history models.
Wanneer 'n gebruiker versoek route soos http://localhost:8000/home, wat 'n 404-fout sal gee wanneer die bladsy verfris word, kan ons op Laravel staatmaak om enige terugvalroetes op te spoor en dan die Blade-lêer te bedien wat ons toepassing bevat.
Om hierdie rede sal ons HTML5-modus gebruik:
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')
}
],
})In hierdie voorbeeld hanteer ons verifikasie deur gebruik te maak van Laravel Sanctum, dan word die teken in plaaslike berging gestoor.
Vir ander versoeke om te slaag, word die teken saamgevoeg in die kopskrif, wat die gebruiker wat die versoek rig sal toelaat om deur Laravel geïdentifiseer te word.
Hier is die gepaardgaande kodeblokke vir beide:
<!--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 sal dalk ook belangstel in ...
Die ontwikkeling van fyn motoriese vaardighede deur inkleur berei kinders voor vir meer komplekse vaardighede soos skryf. Om in te kleur...
Die vlootsektor is 'n ware globale ekonomiese moondheid, wat na 'n 150 miljard-mark navigeer het ...
Verlede Maandag het die Financial Times 'n ooreenkoms met OpenAI aangekondig. FT lisensieer sy wêreldklas-joernalistiek ...
Miljoene mense betaal vir stromingsdienste en betaal maandelikse intekengeld. Dit is algemene opinie dat jy...