Ma mua o ka hoʻomaka ʻana o Laravel UI, ʻo kekahi o kāna mau hiʻohiʻona nui ke kākoʻo muadefiahiahi no Vue.js mai Laravel v5.3 a i v6. ʻO Vue kahi papa hana mua JavaScript hou i hoʻohana ʻia e kūkulu i nā mea hoʻohana.
Eia kekahi o nā pōmaikaʻi nui o ka hoʻohana ʻana iā Laravel me Vue e hana i kahi kahe hana piha no kāu mau papahana:
Hoʻohui ʻia ke code kumu i hoʻokahi papahana, ma kahi o ka loaʻa ʻana o nā papahana kaʻawale no ka hope a me ka hope
He maʻalahi ka hoʻonohonoho a me ka hoʻonohonoho
Hiki i ka mahele hoʻokahi ke hoʻokele pū i nā framework ʻelua
Una palapala noi ʻaoʻao hoʻokahi (SPA no ka pōkole) hoʻouka ikaika i nā ʻikepili hou mai kahi kikowaena pūnaewele i kahi ʻaoʻao pūnaewele me ka ʻole e hōʻoluʻolu i ka ʻaoʻao holoʻokoʻa.
ʻO nā hiʻohiʻona o nā pūnaewele kaulana e hoʻohana ana i nā SPA me gmail.com a me youtube.com - ma nā ʻōlelo ʻē aʻe, nui nā SPA ma nā wahi āpau. Hoʻokumu ʻia ka hapa nui o nā dashboard admin āu e hana pū ai i kēlā me kēia lā me ka hoʻohana ʻana iā SPA.
Nā pōmaikaʻi o nā SPA:
ʻOi aku ka maʻalahi o ka ʻike mea hoʻohana
Hoʻopili i ka ʻikepili ma ka polokalamu kele pūnaewele
Ka manawa hoʻouka wikiwiki
Nā hemahema o nā SPA:
Hiki ke hoʻololi i ka SEO (search engine optimization)
Nā pilikia palekana kūpono
Hoʻopau ia i ka nui o nā kumuwaiwai polokalamu kele pūnaewele
E hōʻike ana kēia pou pehea e hoʻomohala ai i kahi polokalamu hana e hiki ai i nā mea hoʻohana ke kau inoa no kahi moʻokāki a hoʻohui i nā hana.
No kēia kumu aʻo, hoʻohana ʻia ʻo Laravel 9, e koi ana iā PHP 8.1 a me Vue 3; pono mākou e hoʻokomo iā PHP a me NGINX.
Hoʻomaka mākou me kēia kauoha:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboA laila, e hoʻokomo mākou i nā mea hilinaʻi JavaScript.
npm installPono mākou e hoʻokomo i kekahi mau pūʻolo ma mua o ka hiki ke hoʻohui iā Vue i kā mākou papahana.
Eia kekahi, pono e hoʻokomo ʻia ka plugin-vue, ʻoiai ʻo Laravel 9 nā moku me Vite, ma mua o ka webpack-mix, ʻo ia ka Laravel bundler mua no JavaScript. E hana kākou i kēia manawa:
npm install vue@next vue-loader@next @vitejs/plugin-vueE wehe i ka faila i kapa ʻia vite.config.js a hoʻohui vue() i ka hoʻonohonoho ʻana:
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',
]),
],
});Hoʻoponopono i ka faila app.js a me ka snippet bootstrap no ka polokalamu Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")E hana i kahi faila i kapa ʻia App.vue a hoʻohui i kēia mau mea:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>ʻO ka hope, wehe i ka faila welcome.blade.php aia ma ka waihona resources/views a hoʻohui i kēia mau mea:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>No ka nānā ʻana i kā mākou app, pono mākou e hoʻomaka i kā mākou Vue app a me Laravel server ma nā ʻaoʻao ʻelua / laina kauoha:
npm run dev
php artisan serveNo ka hana ʻana i kā mākou hana hana, pono mākou e hana i nā faila ʻē aʻe. E hana ʻo Vue i nā ʻaoʻao he nui, ka mea nui:
No ke kamaʻilio ʻana me Laravel endpoints, pono mākou e hoʻokomo iā Axios:
npm install axiosKe hoʻohana nei i ka pūʻolo vue-router, aia nā hoʻolālā alahele like ʻole i hiki ke hoʻohana ʻia ma Vue; ʻike ʻia kēia mau hoʻolālā history models.
Ke noi ka mea hoʻohana route e like me http://localhost:8000/home, e hoʻihoʻi i kahi hewa 404 i ka wā e hōʻoluʻolu ʻia ka ʻaoʻao, hiki iā mākou ke hilinaʻi iā Laravel e ʻike i nā ala hāʻule a laila lawelawe i ka faila Blade i loaʻa i kā mākou app.
No kēia kumu, e hoʻohana mākou i ke ʻano 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')
}
],
})Ma kēia hiʻohiʻona mākou e mālama i ka hōʻoia me ka hoʻohana ʻana Laravel Sanctum, a laila mālama ʻia ka hōʻailona ma kahi waihona kūloko.
No nā noi ʻē aʻe e kūleʻa, hoʻohui ʻia ka hōʻailona i ke poʻo, e ʻae i ka mea hoʻohana e hana i ka noi e ʻike ʻia e Laravel.
Eia nā poloka code pili no ʻelua:
<!--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
E hoihoi paha ʻoe i ...
He mana hoʻokele waiwai maoli ka ʻāpana moana, kahi i hoʻokele i kahi mākeke 150 biliona ...
I ka Pōʻakahi i hala, ua hoʻolaha ka Financial Times i kahi kuʻikahi me OpenAI. Laikini ʻo FT i kāna nūpepa papa honua…
E uku ana nā miliona o ka poʻe no nā lawelawe streaming, e uku ana i nā uku kau inoa o kēlā me kēia mahina. He manaʻo maʻamau ʻoe…
E hoʻomau ʻo Coveware e Veeam i ka hoʻolako ʻana i nā lawelawe pane ʻana i ka hanana cyber extortion. E hāʻawi ʻo Coveware i nā forensics a me nā mana hoʻoponopono…