Foar de lansearring fan Laravel UI wie ien fan har haadfunksjes pre-stipedefinit foar Vue.js fan Laravel v5.3 oant v6. Vue is in modern JavaSkript frontend ramt brûkt om brûkersynterfaces te bouwen.
Hjir binne guon fan 'e wichtichste foardielen fan it brûken fan Laravel mei Vue om in folsleine workflow foar jo projekten te meitsjen:
De boarnekoade wurdt kombinearre yn ien projekt, ynstee fan aparte projekten foar de efterkant en frontend
Ynstallaasje en konfiguraasje binne ienfâldich
In inkele distribúsje kin beide kaders tegearre beheare
una single-side applikaasje (SPA foar koart) laadt dynamysk nije gegevens fan in webserver yn in webside sûnder de folsleine side te ferfarskjen.
Foarbylden fan populêre websiden dy't SPA's brûke omfetsje gmail.com en youtube.com - mei oare wurden, SPA's binne foar it grutste part ubiquitous. De measte fan 'e admin-dashboards wêrmei't jo miskien wurkje op deistige basis binne boud mei SPA.
Foardielen fan SPA's:
De brûkersûnderfining is fleksibeler
Cache gegevens yn 'e browser
Snelle laden tiid
Neidielen fan SPA's:
Kin SEO (sykmasino-optimisaasje) kompromittearje
Potinsjele feiligens problemen
It verbruikt in protte browserboarnen
Dizze post sil demonstrearje hoe't jo in te dwaan-app ûntwikkelje kinne wêrmei brûkers kinne oanmelde foar in akkount en taken tafoegje.
Foar dizze tutorial wurdt Laravel 9 brûkt, dy't PHP 8.1 en Vue 3 fereasket; wy moatte ek PHP en NGINX ynstalleare hawwe.
Wy begjinne mei it folgjende kommando:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboFolgjende sille wy de JavaScript-ôfhinklikens ynstallearje.
npm installWy moatte wat pakketten ynstallearje foardat wy Vue kinne tafoegje oan ús projekt.
Ek moat plugin-vue ynstalleare wurde, om't Laravel 9 wurdt ferstjoerd mei Vite, ynstee fan webpack-mix, dat wie de foarige Laravel-bundler foar JavaScript. Litte wy it no dwaan:
npm install vue@next vue-loader@next @vitejs/plugin-vueIepenje de triem neamd vite.config.js en tafoegje vue() nei konfiguraasje:
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',
]),
],
});Bewurkje it app.js-bestân en bootstrap-snippet foar de Vue 3-app:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Meitsje in triem neamd App.vue en foegje it folgjende ta:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>As lêste, iepenje de triem welcome.blade.php leit yn de map resources/views en foegje it folgjende ta:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Om ús app te besjen, moatte wy ús Vue-app en Laravel-tsjinner op twa ferskillende terminals / kommandorigels begjinne:
npm run dev
php artisan serveOm ús to-do-app te meitsjen, moatte wy oare bestannen oanmeitsje. Vue sil meardere siden oanmeitsje, benammen:
Om te kommunisearjen mei Laravel-einpunten, moatte wy Axios ynstallearje:
npm install axiosIt brûken fan it pakket vue-router, der binne ferskate routing strategyen dy't brûkt wurde kinne yn Vue; dizze strategyen binne ek bekend as history models.
As in brûker freget route lykas http://localhost:8000/home, dy't in 404-flater sil weromjaan as de side wurdt fernijd, kinne wy fertrouwe op Laravel om alle fallback-rûtes te detektearjen en dan it Blade-bestân tsjinje dat ús app befettet.
Om dizze reden sille wy HTML5-modus brûke:
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')
}
],
})Yn dit foarbyld behannelje wy autentikaasje mei Laravel Sanctum, dan wurdt it token bewarre yn lokale opslach.
Foar oare oanfragen om te slagjen, wurdt it token gearfoege yn 'e koptekst, wêrtroch de brûker it fersyk kin identifisearje troch Laravel.
Hjir binne de byhearrende koadeblokken foar 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
Jo kinne ek ynteressearje yn ...
De marinesektor is in wiere wrâldwide ekonomyske macht, dy't navigearre is nei in merk fan 150 miljard ...
Ofrûne moandei kundige de Financial Times in deal oan mei OpenAI. FT lisinsje har sjoernalistyk fan wrâldklasse ...
Miljoenen minsken betelje foar streamingtsjinsten, beteljen moanlikse abonnemintskosten. It is gewoane miening dat jo ...
Coveware troch Veeam sil trochgean mei it leverjen fan antwurdtsjinsten foar cyberafpersing ynsidint. Coveware sil forensyske en sanearjen mooglikheden oanbiede ...