Sebelum peluncuran Laravel UI, salah satu fitur utamanya adalah pre supportdefimalam untuk Vue.js dari Laravel v5.3 ke v6. Vue adalah framework frontend JavaScript modern yang digunakan untuk membangun antarmuka pengguna.
Berikut adalah beberapa manfaat utama menggunakan Laravel dengan Vue untuk membuat alur kerja lengkap untuk proyek Anda:
Kode sumber digabungkan menjadi satu proyek, alih-alih memiliki proyek terpisah untuk backend dan frontend
Instalasi dan konfigurasi sederhana
Distribusi tunggal dapat mengelola kedua kerangka kerja secara bersamaan
sebuah aplikasi satu halaman (disingkat SPA) secara dinamis memuat data baru dari server web ke halaman web tanpa harus me-refresh seluruh halaman.
Contoh situs web populer yang menggunakan SPA adalah gmail.com dan youtube.com – dengan kata lain, SPA ada di mana-mana. Sebagian besar dasbor admin yang mungkin Anda gunakan setiap hari dibuat menggunakan SPA.
Keuntungan SPA:
Pengalaman pengguna lebih fleksibel
Data cache di browser
Waktu pemuatan cepat
Kekurangan SPA:
Dapat membahayakan SEO (pengoptimalan mesin telusur)
Potensi masalah keamanan
Ini menghabiskan banyak sumber daya browser
Posting ini akan menunjukkan cara mengembangkan aplikasi agenda yang memungkinkan pengguna mendaftar akun dan menambahkan tugas.
Untuk tutorial ini, Laravel 9 digunakan, yang membutuhkan PHP 8.1 dan Vue 3; kita juga perlu menginstal PHP dan NGINX.
Kita mulai dengan perintah berikut:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboSelanjutnya, kita akan menginstal dependensi JavaScript.
npm installKita perlu menginstal beberapa paket sebelum kita dapat menambahkan Vue ke proyek kita.
Juga, plugin-vue harus diinstal, karena Laravel 9 dikirimkan dengan Vite, bukan webpack-mix, yang merupakan bundler Laravel sebelumnya untuk JavaScript. Ayo kita lakukan sekarang:
npm install vue@next vue-loader@next @vitejs/plugin-vueBuka file bernama vite.config.js dan tambahkan vue() ke konfigurasi:
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',
]),
],
});Edit file app.js dan cuplikan bootstrap untuk aplikasi Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Buat file bernama App.vue dan tambahkan yang berikut ini:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Terakhir, buka file tersebut welcome.blade.php terletak di folder resources/views dan tambahkan yang berikut ini:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Untuk mempratinjau aplikasi kita, kita perlu memulai aplikasi Vue dan server Laravel kita di dua terminal/baris perintah yang berbeda:
npm run dev
php artisan serveUntuk membuat aplikasi agenda kami, kami perlu membuat file lain. Vue akan membuat banyak halaman, terutama:
Untuk berkomunikasi dengan Laravel endpoint, kita perlu menginstal Axios:
npm install axiosMenggunakan paket vue-router, ada berbagai strategi routing yang bisa digunakan di Vue; strategi ini juga dikenal sebagai history models.
Saat pengguna meminta route seperti http://localhost:8000/home, yang akan mengembalikan error 404 saat halaman di-refresh, kita dapat mengandalkan Laravel untuk mendeteksi rute fallback dan kemudian menyajikan file Blade yang berisi aplikasi kita.
Untuk alasan ini, kami akan menggunakan mode 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')
}
],
})Dalam contoh ini kami menangani otentikasi menggunakan Tempat Suci Laravel, kemudian token disimpan di penyimpanan lokal.
Agar permintaan lain berhasil, token digabungkan ke dalam header, yang memungkinkan pengguna membuat permintaan untuk diidentifikasi oleh Laravel.
Berikut adalah blok kode terkait untuk keduanya:
<!--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
Anda mungkin juga tertarik dengan ...
Microsoft Excel adalah alat referensi untuk analisis data, karena menawarkan banyak fitur untuk mengatur kumpulan data,…
Walliance, SIM dan platform di antara para pemimpin di Eropa dalam bidang Real Estate Crowdfunding sejak 2017, mengumumkan penyelesaian…
Filament adalah kerangka pengembangan Laravel yang "dipercepat", menyediakan beberapa komponen full-stack. Hal ini dirancang untuk menyederhanakan proses…
«Saya harus kembali untuk menyelesaikan evolusi saya: Saya akan memproyeksikan diri saya ke dalam komputer dan menjadi energi murni. Setelah menetap di…
Google DeepMind memperkenalkan versi yang lebih baik dari model kecerdasan buatannya. Model baru yang ditingkatkan tidak hanya menyediakan…
Laravel, yang terkenal dengan sintaksisnya yang elegan dan fitur-fiturnya yang canggih, juga memberikan landasan yang kokoh untuk arsitektur modular. Di sana…
Cisco dan Splunk membantu pelanggan mempercepat perjalanan mereka menuju Security Operations Center (SOC) masa depan dengan…
Ransomware telah mendominasi berita selama dua tahun terakhir. Kebanyakan orang menyadari bahwa serangan…