Laravel UI іске қосылғанға дейін оның негізгі мүмкіндіктерінің бірі алдын ала қолдау болдыdefiкеш Vue.js Laravel v5.3-тен v6-ға дейін. Vue — пайдаланушы интерфейстерін құру үшін пайдаланылатын заманауи JavaScript фронтонды құрылымы.
Жобаларыңыз үшін толық жұмыс процесін жасау үшін Laravel-ті Vue-мен пайдаланудың кейбір негізгі артықшылықтары:
Бастапқы код сервер мен фронт үшін бөлек жобалардың орнына бір жобаға біріктірілген
Орнату және конфигурациялау қарапайым
Жалғыз тарату екі жақтауды бірге басқара алады
Una бір беттік қолданба (қысқаша SPA) веб-серверден жаңа деректерді веб-бетке бүкіл бетті жаңартусыз динамикалық түрде жүктейді.
SPA пайдаланатын танымал веб-сайттардың мысалдарына gmail.com және youtube.com жатады – басқаша айтқанда, SPAs негізінен барлық жерде кездеседі. Күнделікті жұмыс істеуге болатын әкімші бақылау тақталарының көпшілігі SPA көмегімен жасалған.
SPA артықшылықтары:
Пайдаланушы тәжірибесі неғұрлым икемді
Браузердегі деректерді кэштеу
Жылдам жүктеу уақыты
СПА-ның кемшіліктері:
SEO-ға зиян келтіруі мүмкін (іздеу жүйесін оңтайландыру)
Потенциалды қауіпсіздік мәселелері
Ол көптеген браузер ресурстарын тұтынады
Бұл пост пайдаланушыларға тіркелгіге тіркелуге және тапсырмалар қосуға мүмкіндік беретін тапсырма қолданбасын қалай әзірлеу керектігін көрсетеді.
Бұл оқулық үшін PHP 9 және Vue 8.1 талап ететін Laravel 3 пайдаланылады; бізде PHP және NGINX орнатылған болуы керек.
Біз келесі пәрменнен бастаймыз:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboӘрі қарай, біз JavaScript тәуелділіктерін орнатамыз.
npm installЖобамызға Vue қосу үшін кейбір пакеттерді орнату керек.
Сондай-ақ, плагин-vue орнатылуы керек, өйткені Laravel 9 JavaScript үшін алдыңғы Laravel бумашысы болған webpack-mix емес, Vite-мен жеткізіледі. Қазір жасайық:
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',
]),
],
});Vue 3 қолданбасы үшін app.js файлын және жүктеу үзіндісін өңдеңіз:
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 бет жаңартылған кезде 8000 қатесін қайтаратын http://localhost:404/home сияқты, біз кез келген резервтік маршруттарды анықтау үшін 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 арқылы анықтауға мүмкіндік береді.
Міне, екеуі үшін де байланысты код блоктары:
<!--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
Сізді қызықтыруы мүмкін ...
Өткен дүйсенбіде Financial Times OpenAI-мен келісім туралы жариялады. FT өзінің әлемдік деңгейдегі журналистикасына лицензия береді…
Миллиондаған адамдар ай сайынғы абоненттік төлемді төлей отырып, ағынды қызметтерге ақы төлейді. Жалпы пікір, сіз…
Veeam ұсынған Coveware кибербопсалау оқиғаларына жауап беру қызметтерін көрсетуді жалғастырады. Coveware криминалистикалық және қалпына келтіру мүмкіндіктерін ұсынады ...
Болжалды техникалық қызмет көрсету зауытты басқаруға инновациялық және белсенді көзқараспен мұнай және газ секторында төңкеріс жасайды.…