ກ່ອນທີ່ຈະເປີດຕົວ Laravel UI, ຫນຶ່ງໃນລັກສະນະຕົ້ນຕໍຂອງມັນແມ່ນການສະຫນັບສະຫນູນກ່ອນdefiສໍາເລັດສໍາລັບການ Vuejs ຈາກ Laravel v5.3 ຫາ v6. Vue ແມ່ນກອບດ້ານຫນ້າຂອງ JavaScript ທີ່ທັນສະໄຫມທີ່ໃຊ້ເພື່ອສ້າງການໂຕ້ຕອບຜູ້ໃຊ້.
ນີ້ແມ່ນບາງຜົນປະໂຫຍດຕົ້ນຕໍຂອງການໃຊ້ Laravel ກັບ Vue ເພື່ອສ້າງຂະບວນການເຮັດວຽກທີ່ສົມບູນສໍາລັບໂຄງການຂອງທ່ານ:
ລະຫັດແຫຼ່ງຖືກລວມເຂົ້າເປັນໂຄງການຫນຶ່ງ, ແທນທີ່ຈະມີໂຄງການແຍກຕ່າງຫາກສໍາລັບ backend ແລະ frontend
ການຕິດຕັ້ງແລະການຕັ້ງຄ່າແມ່ນງ່າຍດາຍ
ການແຈກຢາຍດຽວສາມາດຈັດການທັງສອງກອບຮ່ວມກັນ
Una ຄໍາຮ້ອງສະຫມັກຫນ້າດຽວ (SPA ສັ້ນ) ໂຫຼດຂໍ້ມູນໃໝ່ຈາກເວັບເຊີບເວີເຂົ້າໃນໜ້າເວັບແບບເຄື່ອນໄຫວໂດຍບໍ່ຈໍາເປັນຕ້ອງໂຫຼດຂໍ້ມູນໜ້າທັງໝົດຄືນໃໝ່.
ຕົວຢ່າງຂອງເວັບໄຊທ໌ທີ່ນິຍົມໃຊ້ SPAs ລວມມີ gmail.com ແລະ youtube.com - ໃນຄໍາສັບຕ່າງໆອື່ນໆ, SPAs ແມ່ນມີຢູ່ທົ່ວທຸກແຫ່ງ. ກະດານຄວບຄຸມສ່ວນໃຫຍ່ທີ່ທ່ານອາດຈະເຮັດວຽກກັບປະຈໍາວັນແມ່ນຖືກສ້າງຂຶ້ນໂດຍໃຊ້ SPA.
ຂໍ້ດີຂອງ SPAs:
ປະສົບການຂອງຜູ້ໃຊ້ມີຄວາມຍືດຫຍຸ່ນຫຼາຍ
ຂໍ້ມູນ cache ໃນ browser
ເວລາໂຫຼດໄວ
ຂໍ້ເສຍຂອງ SPAs:
ອາດຈະປະນີປະນອມ SEO (ການເພີ່ມປະສິດທິພາບຂອງເຄື່ອງຈັກຊອກຫາ)
ບັນຫາຄວາມປອດໄພທີ່ເປັນໄປໄດ້
ມັນບໍລິໂພກຊັບພະຍາກອນຂອງຕົວທ່ອງເວັບຫຼາຍ
ໂພສນີ້ຈະສະແດງວິທີການພັດທະນາແອັບ to-do ທີ່ອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສະໝັກບັນຊີ ແລະເພີ່ມໜ້າວຽກ.
ສໍາລັບການສອນນີ້, Laravel 9 ຖືກນໍາໃຊ້, ເຊິ່ງຕ້ອງການ PHP 8.1 ແລະ Vue 3; ພວກເຮົາຍັງຈໍາເປັນຕ້ອງມີ PHP ແລະ NGINX ຕິດຕັ້ງ.
ພວກເຮົາເລີ່ມຕົ້ນດ້ວຍຄໍາສັ່ງຕໍ່ໄປນີ້:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboຕໍ່ໄປ, ພວກເຮົາຈະຕິດຕັ້ງ JavaScript dependencies.
npm installພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ຕິດຕັ້ງບາງແພັກເກັດກ່ອນທີ່ພວກເຮົາສາມາດເພີ່ມ Vue ກັບໂຄງການຂອງພວກເຮົາ.
ນອກຈາກນີ້, plugin-vue ຕ້ອງໄດ້ຮັບການຕິດຕັ້ງ, ນັບຕັ້ງແຕ່ Laravel 9 ເຮືອກັບ Vite, ແທນທີ່ຈະ webpack-mix, ເຊິ່ງເປັນຊຸດ Laravel ກ່ອນຫນ້ານີ້ສໍາລັບ JavaScript. ໃຫ້ເຮັດມັນດຽວນີ້:
npm install vue@next vue-loader@next @vitejs/plugin-vueເປີດໄຟລ໌ທີ່ເອີ້ນວ່າ vite.config.js ແລະເພີ່ມ vue() ການຕັ້ງຄ່າ:
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',
]),
],
});ແກ້ໄຂໄຟລ໌ app.js ແລະ bootstrap snippet ສໍາລັບແອັບຯ Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")ສ້າງໄຟລ໌ທີ່ເອີ້ນວ່າ App.vue ແລະເພີ່ມສິ່ງຕໍ່ໄປນີ້:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>ສຸດທ້າຍ, ເປີດໄຟລ໌ welcome.blade.php ຕັ້ງຢູ່ໃນໂຟນເດີ resources/views ແລະເພີ່ມສິ່ງຕໍ່ໄປນີ້:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>ເພື່ອເບິ່ງຕົວຢ່າງແອັບຂອງພວກເຮົາ, ພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ເລີ່ມແອັບ Vue ແລະເຊີບເວີ Laravel ຂອງພວກເຮົາໃນສອງເຄື່ອງໝາຍປາຍທາງ/ສາຍຄຳສັ່ງທີ່ແຕກຕ່າງກັນ:
npm run dev
php artisan serveເພື່ອສ້າງແອັບຯທີ່ຕ້ອງເຮັດຂອງພວກເຮົາ, ພວກເຮົາຈໍາເປັນຕ້ອງສ້າງໄຟລ໌ອື່ນໆ. Vue ຈະສ້າງຫຼາຍຫນ້າ, ຕົ້ນຕໍແມ່ນ:
ເພື່ອຕິດຕໍ່ສື່ສານກັບ Laravel endpoints, ພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ຕິດຕັ້ງ Axios:
npm install axiosການນໍາໃຊ້ຊຸດ vue-router, ມີຍຸດທະສາດການເດີນທາງຕ່າງໆທີ່ສາມາດນໍາໃຊ້ໃນ Vue; ຍຸດທະສາດເຫຼົ່ານີ້ຍັງຖືກເອີ້ນວ່າ history models.
ເມື່ອຜູ້ໃຊ້ຮ້ອງຂໍ route ເຊັ່ນ: http://localhost:8000/home, ເຊິ່ງຈະສົ່ງຄືນຂໍ້ຜິດພາດ 404 ເມື່ອຫນ້າເວັບຖືກປັບປຸງໃຫມ່, ພວກເຮົາສາມາດອີງໃສ່ Laravel ເພື່ອກວດຫາເສັ້ນທາງທີ່ຫຼຸດລົງແລະຫຼັງຈາກນັ້ນໃຫ້ບໍລິການໄຟລ໌ Blade ທີ່ມີແອັບຯຂອງພວກເຮົາ.
ສໍາລັບເຫດຜົນນີ້, ພວກເຮົາຈະນໍາໃຊ້ຮູບແບບ 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')
}
],
})ໃນຕົວຢ່າງນີ້, ພວກເຮົາຈັດການການພິສູດຢືນຢັນໂດຍໃຊ້ Laravel Sanctum, ຫຼັງຈາກນັ້ນ token ໄດ້ຖືກບັນທຶກໄວ້ໃນບ່ອນເກັບຮັກສາທ້ອງຖິ່ນ.
ສໍາລັບການຮ້ອງຂໍອື່ນສໍາເລັດ, token ໄດ້ຖືກລວມເຂົ້າໄປໃນ header, ເຊິ່ງຈະຊ່ວຍໃຫ້ຜູ້ໃຊ້ສາມາດກໍານົດການຮ້ອງຂໍໃຫ້ Laravel.
ນີ້ແມ່ນບລັອກລະຫັດທີ່ກ່ຽວຂ້ອງສໍາລັບທັງສອງ:
<!--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
ທ່ານອາດຈະສົນໃຈ ...
ການປະຕິບັດງານຂອງ ophthalmoplasty ໂດຍໃຊ້ເຄື່ອງເບິ່ງການຄ້າ Apple Vision Pro ໄດ້ຖືກປະຕິບັດຢູ່ທີ່ Catania Polyclinic…
ການພັດທະນາທັກສະດ້ານມໍເຕີທີ່ດີຜ່ານການໃສ່ສີເຮັດໃຫ້ເດັກນ້ອຍມີທັກສະທີ່ຊັບຊ້ອນເຊັ່ນ: ການຂຽນ. ໃສ່ສີ…
ຂະແໜງການທະເລແມ່ນກຳລັງເສດຖະກິດໂລກທີ່ແທ້ຈິງ, ໄດ້ເດີນທາງໄປສູ່ຕະຫຼາດ 150 ຕື້...
ວັນຈັນທີ່ຜ່ານມາ, Financial Times ໄດ້ປະກາດຂໍ້ຕົກລົງກັບ OpenAI. FT ອະນຸຍາດໃຫ້ນັກຂ່າວລະດັບໂລກຂອງຕົນ…