Tupu mmalite nke Laravel UI, otu n'ime njirimara ya bụ nkwado mbụdefiakwadoro maka View.js sitere na Laravel v5.3 ruo v6. Vue bụ usoro ihu ihu Javascript ọgbara ọhụrụ ejiri wuo ebe ndị ọrụ.
Nke a bụ ụfọdụ uru dị na iji Laravel na Vue mepụta usoro ọrụ zuru oke maka ọrụ gị:
A na-ejikọta koodu isi mmalite n'ime otu ọrụ, kama inwe ọrụ dị iche iche maka azụ azụ na frontend
Nwụnye na nhazi dị mfe
Otu nkesa nwere ike ijikwa usoro abụọ ahụ ọnụ
una ngwa otu ibe (SPA maka nkenke) na-ebunye data ọhụrụ sitere na sava weebụ n'ike n'ike n'ime ibe weebụ na-enweghị iweghachite ibe ahụ dum.
Ọmụmaatụ nke webụsaịtị ewu ewu na-eji SPA gụnyere gmail.com na youtube.com – na okwu ndị ọzọ, SPA bụ ebe niile. A na-ewu ọtụtụ dashboard admin ị nwere ike ịrụ ọrụ kwa ụbọchị site na iji SPA.
Uru nke SPA:
Ahụmahụ onye ọrụ na-agbanwe karịa
Data cache na ihe nchọgharị
Oge nbudata ngwa ngwa
Ọdịmma nke SPA:
Nwere ike imebi SEO (njikarịcha search engine)
Okwu nchekwa enwere ike
Ọ na-eri ọtụtụ ihe nchọgharị
Ngosipụta a ga-egosipụta otu esi emepụta ngwa ime ihe na-enye ndị ọrụ ohere ịdebanye aha maka akaụntụ wee tinye ọrụ.
Maka nkuzi a, a na-eji Laravel 9, nke chọrọ PHP 8.1 na Vue 3; anyị kwesịkwara itinye PHP na NGINX.
Anyị ji iwu a malite:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboỌzọ, anyị ga-etinye ndabere Javascript.
npm installAnyị kwesịrị ịwụnye ụfọdụ ngwugwu tupu anyị enwee ike itinye Vue na ọrụ anyị.
Ọzọkwa, plugin-vue ga-arụnyere, ebe ọ bụ na Laravel 9 ụgbọ mmiri na Vite, kama webpack-mix, nke bụ gara aga Laravel bundler maka JavaScript. Ka anyị mee ya ugbu a:
npm install vue@next vue-loader@next @vitejs/plugin-vueMepee faịlụ a na-akpọ vite.config.js ma tinye vue() na nhazi:
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',
]),
],
});Dezie faịlụ app.js na snippet bootstrap maka ngwa Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Mepụta faịlụ a na-akpọ App.vue ma tinye ihe ndia:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>N'ikpeazụ, mepee faịlụ ahụ welcome.blade.php dị na nchekwa resources/views ma tinye ihe ndia:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Ka ịhụchalụ ngwa anyị, anyị kwesịrị ibido ngwa Vue anyị na sava Laravel na ọdụ abụọ dị iche iche:
npm run dev
php artisan serveIji mepụta ngwa anyị ga-eme, anyị kwesịrị ịmepụta faịlụ ndị ọzọ. Vue ga-emepụta ọtụtụ ibe, tumadi:
Iji kwurịta okwu na njedebe Laravel, anyị kwesịrị ịwụnye Axios:
npm install axiosIji ngwugwu vue-router, e nwere dị iche iche routing atumatu nwere ike iji na Vue; a na-akpọkwa atụmatụ ndị a history models.
Mgbe onye ọrụ rịọrọ route dị ka http://localhost:8000/home, nke ga-eweghachite njehie 404 mgbe ihu akwụkwọ ahụ dị ọhụrụ, anyị nwere ike ịdabere na Laravel iji chọpụta ụzọ ọdịda ọ bụla wee jee ozi faịlụ Blade nke nwere ngwa anyị.
Maka nke a, anyị ga-eji ọnọdụ 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')
}
],
})N'ihe atụ a, anyị na-ejikwa nyocha site na iji Laravel Sanctum, mgbe ahụ, a na-echekwa akara ngosi na nchekwa mpaghara.
Maka arịrịọ ndị ọzọ ka ọ gaa nke ọma, a na-ejikọta akara ahụ n'ime nkụnye eji isi mee, nke ga-eme ka onye ọrụ na-arịọ arịrịọ Laravel mara ya.
Nke a bụ ngọngọ koodu ejikọtara maka ha abụọ:
<!--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
I nwekwara ike inwe mmasị na ...
UK CMA enyela ịdọ aka ná ntị gbasara omume Big Tech na ahịa ọgụgụ isi. Ebe ahụ…
Iwu “Case Green”, nke European Union chepụtara iji kwalite nrụpụta ike nke ụlọ, ejirila…
Akwụkwọ akụkọ Casaleggio Associati na-eme kwa afọ na Ecommerce na Italy ewepụtara. Akuko nke isiokwu ya bu “AI-Commerce: the frontiers of Ecommerce with Artificial Intelligence”…
Nsonaazụ nke teknụzụ ọhụrụ na ntinye aka na gburugburu ebe obibi na ọdịmma ndị mmadụ. Bandalux na-enye Airpure®, ụlọikwuu…