Bago ang paglunsad ng Laravel UI, isa sa mga pangunahing tampok nito ay ang pre supportdefigabi para sa Vue.js mula sa Laravel v5.3 hanggang v6. Ang Vue ay isang modernong JavaScript frontend framework na ginagamit upang bumuo ng mga user interface.
Narito ang ilan sa mga pangunahing benepisyo ng paggamit ng Laravel sa Vue upang lumikha ng kumpletong daloy ng trabaho para sa iyong mga proyekto:
Ang source code ay pinagsama sa isang proyekto, sa halip na magkaroon ng magkahiwalay na proyekto para sa backend at frontend
Ang pag-install at pagsasaayos ay simple
Ang isang pamamahagi ay maaaring pamahalaan ang parehong mga framework nang magkasama
isang solong-pahinang aplikasyon (SPA sa madaling salita) dynamic na naglo-load ng bagong data mula sa isang web server papunta sa isang web page nang hindi kinakailangang i-refresh ang buong page.
Kasama sa mga halimbawa ng mga sikat na website na gumagamit ng mga SPA ang gmail.com at youtube.com – sa madaling salita, ang mga SPA ay nasa lahat ng dako. Karamihan sa mga admin dashboard na maaari mong gamitin sa araw-araw ay binuo gamit ang SPA.
Mga kalamangan ng mga SPA:
Ang karanasan ng gumagamit ay mas nababaluktot
I-cache ang data sa browser
Mabilis na oras ng paglo-load
Mga disadvantages ng mga SPA:
Maaaring ikompromiso ang SEO (search engine optimization)
Mga potensyal na isyu sa seguridad
Kumokonsumo ito ng maraming mapagkukunan ng browser
Ipapakita ng post na ito kung paano bumuo ng isang to-do app na nagbibigay-daan sa mga user na mag-sign up para sa isang account at magdagdag ng mga gawain.
Para sa tutorial na ito, ginagamit ang Laravel 9, na nangangailangan ng PHP 8.1 at Vue 3; kailangan din nating magkaroon ng PHP at NGINX na naka-install.
Nagsisimula kami sa sumusunod na utos:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboSusunod, i-install namin ang mga dependency ng JavaScript.
npm installKailangan naming mag-install ng ilang mga pakete bago namin maidagdag ang Vue sa aming proyekto.
Gayundin, dapat na naka-install ang plugin-vue, dahil ang Laravel 9 ay nagpapadala ng Vite, sa halip na webpack-mix, na dating Laravel bundler para sa JavaScript. Gawin na natin ngayon:
npm install vue@next vue-loader@next @vitejs/plugin-vueBuksan ang file na tinatawag vite.config.js at idagdag vue() sa pagsasaayos:
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',
]),
],
});I-edit ang app.js file at bootstrap snippet para sa Vue 3 app:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Lumikha ng isang file na tinatawag na App.vue at idagdag ang sumusunod:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Sa wakas, buksan ang file welcome.blade.php matatagpuan sa folder resources/views at idagdag ang sumusunod:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Upang i-preview ang aming app, kailangan naming simulan ang aming Vue app at Laravel server sa dalawang magkaibang terminal/command line:
npm run dev
php artisan serveUpang lumikha ng aming to-do app, kailangan naming gumawa ng iba pang mga file. Ang Vue ay lilikha ng maraming pahina, pangunahin:
Para makipag-ugnayan sa mga endpoint ng Laravel, kailangan naming i-install ang Axios:
npm install axiosGamit ang pakete vue-router, mayroong iba't ibang mga diskarte sa pagruruta na maaaring gamitin sa Vue; ang mga estratehiyang ito ay kilala rin bilang history models.
Kapag humiling ang isang user route tulad ng http://localhost:8000/home, na magbabalik ng 404 error kapag na-refresh ang page, maaari tayong umasa sa Laravel upang matukoy ang anumang fallback na ruta at pagkatapos ay ihatid ang Blade file na naglalaman ng aming app.
Para sa kadahilanang ito, gagamitin namin ang HTML5 mode:
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')
}
],
})Sa halimbawang ito pinangangasiwaan namin ang pagpapatunay gamit ang Laravel Sanctum, pagkatapos ay ise-save ang token sa lokal na imbakan.
Para magtagumpay ang iba pang mga kahilingan, ang token ay isasama sa header, na magbibigay-daan sa user na gumagawa ng kahilingan na makilala ni Laravel.
Narito ang mga nauugnay na bloke ng code para sa pareho:
<!--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
Maaaring interesado ka rin sa ...
Noong nakaraang Lunes, inihayag ng Financial Times ang isang deal sa OpenAI. Nilisensyahan ng FT ang world-class na pamamahayag nito...
Milyun-milyong tao ang nagbabayad para sa mga serbisyo ng streaming, na nagbabayad ng buwanang bayad sa subscription. Karaniwang opinyon na ikaw ay…
Ang Coveware ng Veeam ay patuloy na magbibigay ng mga serbisyo sa pagtugon sa insidente ng cyber extortion. Mag-aalok ang Coveware ng mga kakayahan sa forensics at remediation...
Binabago ng predictive maintenance ang sektor ng langis at gas, na may makabago at proactive na diskarte sa pamamahala ng halaman.…