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, რომელიც იყო წინა Laravel bundler 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 ფაილი და ჩატვირთვის სნიპეტი 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
შესაძლოა დაგაინტერესოთ ...
საზღვაო სექტორი ნამდვილი გლობალური ეკონომიკური ძალაა, რომელიც 150 მილიარდი ბაზრისკენ მიისწრაფვის...
გასულ ორშაბათს, Financial Times-მა გამოაცხადა გარიგება OpenAI-თან. FT ლიცენზირებს თავის მსოფლიო დონის ჟურნალისტიკას…
მილიონობით ადამიანი იხდის სტრიმინგის სერვისებს, იხდის ყოველთვიურ სააბონენტო გადასახადს. გავრცელებული აზრია, რომ თქვენ…
Coveware by Veeam გააგრძელებს კიბერ გამოძალვის ინციდენტებზე რეაგირების სერვისების მიწოდებას. Coveware შემოგთავაზებთ სასამართლო ექსპერტიზისა და გამოსწორების შესაძლებლობებს…