Sebelum pelancaran Laravel UI, salah satu ciri utamanya ialah pra sokongandefimalam untuk Vue.js daripada Laravel v5.3 hingga v6. Vue ialah rangka kerja bahagian hadapan JavaScript moden yang digunakan untuk membina antara muka pengguna.
Berikut ialah beberapa faedah utama menggunakan Laravel dengan Vue untuk mencipta aliran kerja yang lengkap untuk projek anda:
Kod sumber digabungkan menjadi satu projek, bukannya mempunyai projek berasingan untuk bahagian belakang dan bahagian hadapan
Pemasangan dan konfigurasi adalah mudah
Pengedaran tunggal boleh mengurus kedua-dua rangka kerja bersama-sama
yang aplikasi satu halaman (Pendek kata SPA) memuatkan data baharu secara dinamik daripada pelayan web ke halaman web tanpa perlu memuat semula keseluruhan halaman.
Contoh tapak web popular yang menggunakan SPA termasuk gmail.com dan youtube.com – dengan kata lain, SPA banyak terdapat di mana-mana. Kebanyakan papan pemuka pentadbir yang mungkin anda gunakan setiap hari dibina menggunakan SPA.
Kelebihan SPA:
Pengalaman pengguna lebih fleksibel
Cache data dalam penyemak imbas
Masa memuatkan cepat
Kelemahan SPA:
Boleh menjejaskan SEO (pengoptimuman enjin carian)
Isu keselamatan yang berpotensi
Ia menggunakan banyak sumber pelayar
Siaran ini akan menunjukkan cara membangunkan apl tugasan yang membolehkan pengguna mendaftar untuk akaun dan menambah tugasan.
Untuk tutorial ini, Laravel 9 digunakan, yang memerlukan PHP 8.1 dan Vue 3; kita juga perlu memasang PHP dan NGINX.
Kita mulakan dengan arahan berikut:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboSeterusnya, kami akan memasang kebergantungan JavaScript.
npm installKami perlu memasang beberapa pakej sebelum kami boleh menambah Vue pada projek kami.
Selain itu, plugin-vue mesti dipasang, kerana Laravel 9 dihantar dengan Vite, bukannya webpack-mix, yang merupakan pengikat Laravel sebelumnya untuk JavaScript. Jom buat sekarang:
npm install vue@next vue-loader@next @vitejs/plugin-vueBuka fail yang dipanggil vite.config.js dan tambah vue() kepada 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 fail app.js dan coretan bootstrap untuk apl Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Buat fail dipanggil App.vue dan tambah yang berikut:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Akhirnya, buka fail welcome.blade.php terdapat dalam folder resources/views dan tambah yang berikut:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Untuk pratonton apl kami, kami perlu memulakan apl Vue dan pelayan Laravel kami pada dua terminal/baris arahan yang berbeza:
npm run dev
php artisan serveUntuk membuat apl tugasan kami, kami perlu membuat fail lain. Vue akan membuat berbilang halaman, terutamanya:
Untuk berkomunikasi dengan titik akhir Laravel, kami perlu memasang Axios:
npm install axiosMenggunakan pakej vue-router, terdapat pelbagai strategi penghalaan yang boleh digunakan dalam Vue; strategi ini juga dikenali sebagai history models.
Apabila pengguna meminta route seperti http://localhost:8000/home, yang akan mengembalikan ralat 404 apabila halaman dimuat semula, kami boleh bergantung pada Laravel untuk mengesan sebarang laluan sandaran dan kemudian menyampaikan fail Blade yang mengandungi apl kami.
Atas sebab ini, kami akan menggunakan mod 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 mengendalikan pengesahan menggunakan Laravel Sanctum, maka token disimpan dalam storan tempatan.
Untuk permintaan lain berjaya, token digabungkan ke dalam pengepala, yang akan membolehkan pengguna membuat permintaan untuk dikenal pasti oleh Laravel.
Berikut ialah blok kod yang berkaitan untuk kedua-duanya:
<!--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 berminat dengan ...
Sektor tentera laut adalah kuasa ekonomi global yang sebenar, yang telah menavigasi ke arah pasaran 150 bilion...
Isnin lalu, Financial Times mengumumkan perjanjian dengan OpenAI. FT melesenkan kewartawanannya bertaraf dunia…
Berjuta-juta orang membayar untuk perkhidmatan penstriman, membayar yuran langganan bulanan. Adalah menjadi pendapat umum bahawa anda…
Coveware oleh Veeam akan terus menyediakan perkhidmatan tindak balas insiden pemerasan siber. Coveware akan menawarkan keupayaan forensik dan pemulihan…