Նախքան Laravel UI-ի գործարկումը, դրա հիմնական առանձնահատկություններից մեկը նախնական աջակցությունն էրdefiգիշերը համար Vue.js Laravel v5.3-ից մինչև v6: Vue-ը ժամանակակից JavaScript-ի ճակատային շրջանակ է, որն օգտագործվում է օգտատերերի միջերեսներ ստեղծելու համար:
Ահա Vue-ի հետ Laravel-ի օգտագործման հիմնական առավելությունները՝ ձեր նախագծերի համար ամբողջական աշխատանքային հոսք ստեղծելու համար.
Աղբյուրի կոդը համակցվում է մեկ նախագծի մեջ, փոխարենը առանձին նախագծեր ունենալու հետնամասի և ճակատային մասի համար
Տեղադրումն ու կազմաձևումը պարզ են
Մեկ բաշխումը կարող է կառավարել երկու շրջանակները միասին
ա մեկ էջանոց հավելված (Կարճ՝ SPA) դինամիկ կերպով նոր տվյալներ է բեռնում վեբ սերվերից վեբ էջի մեջ՝ առանց ամբողջ էջը թարմացնելու:
Հանրաճանաչ կայքերի օրինակներ, որոնք օգտագործում են SPA-ներ, ներառում են gmail.com-ը և youtube.com-ը, այլ կերպ ասած՝ SPA-ները հիմնականում ամենուր են: Ադմինիստրատորների վահանակների մեծ մասը, որոնց հետ կարող եք աշխատել ամեն օր, կառուցված են SPA-ի միջոցով:
SPA-ի առավելությունները.
Օգտագործողի փորձը ավելի ճկուն է
Քեշի տվյալները դիտարկիչում
Արագ բեռնման ժամանակ
SPA-ի թերությունները.
Կարող է վտանգել SEO-ն (որոնողական համակարգի օպտիմալացում)
Անվտանգության հնարավոր խնդիրներ
Այն սպառում է շատ բրաուզերի ռեսուրսներ
Այս գրառումը ցույց կտա, թե ինչպես մշակել անելիքների հավելված, որը թույլ է տալիս օգտվողներին գրանցվել հաշիվ և ավելացնել առաջադրանքներ:
Այս ձեռնարկի համար օգտագործվում է Laravel 9, որը պահանջում է PHP 8.1 և Vue 3; մենք նաև պետք է տեղադրենք PHP և NGINX:
Մենք սկսում ենք հետևյալ հրամանով.
composer create-project --prefer-dist laravel/laravel laravel-vue-comboՀաջորդը, մենք կտեղադրենք JavaScript-ի կախվածությունները:
npm installՄենք պետք է որոշ փաթեթներ տեղադրենք, նախքան կարողանանք Vue ավելացնել մեր նախագծին:
Բացի այդ, plugin-vue-ն պետք է տեղադրվի, քանի որ Laravel 9-ը առաքվում է Vite-ով, այլ ոչ թե webpack-mix-ով, որը JavaScript-ի Laravel-ի նախորդ փաթեթն էր: Եկեք դա անենք հիմա.
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 հատվածը 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-ի վերջնակետերի հետ հաղորդակցվելու համար մենք պետք է տեղադրենք 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, ապա նշանը պահվում է տեղական պահեստում:
Այլ հարցումների հաջողության համար նշանը միաձուլվում է վերնագրի մեջ, ինչը թույլ կտա հարցում կատարող օգտվողին նույնականացնել 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
Ձեզ կարող է հետաքրքրել նաև ...
Veeam-ի Coveware-ը կշարունակի տրամադրել կիբեր շորթման միջադեպերի արձագանքման ծառայություններ: Coveware-ը կառաջարկի դատաբժշկական և վերականգնման հնարավորություններ…
Կանխատեսելի սպասարկումը հեղափոխություն է անում նավթի և գազի ոլորտում՝ կայանի կառավարման նորարարական և ակտիվ մոտեցմամբ:…
Մեծ Բրիտանիայի CMA-ն նախազգուշացում է տարածել արհեստական ինտելեկտի շուկայում Big Tech-ի վարքագծի վերաբերյալ: Այնտեղ…
Շենքերի էներգաարդյունավետության բարձրացման նպատակով Եվրոպական միության կողմից ձևակերպված «Քեյս Գրին» հրամանագիրը իր օրենսդրական գործընթացն ավարտել է…