Да запуску карыстацкага інтэрфейсу Laravel адной з яго асноўных функцый была папярэдняя падтрымкаdefiноч для Vue.js з Laravel v5.3 на v6. Vue - гэта сучасная інтэрфейсная структура JavaScript, якая выкарыстоўваецца для стварэння карыстальніцкіх інтэрфейсаў.
Вось некаторыя з асноўных пераваг выкарыстання Laravel з Vue для стварэння поўнага працоўнага працэсу для вашых праектаў:
Зыходны код аб'ядноўваецца ў адзін праект замест асобных праектаў для бэкэнда і інтэрфейсу
Ўстаноўка і канфігурацыя простыя
Адзін дыстрыбутыў можа кіраваць абодвума фрэймворкамі разам
Una аднастаронкавы дадатак (скарочана 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 у наш праект.
Акрамя таго, павінен быць усталяваны плагін-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 і фрагмент загрузкі для праграмы 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 ад Veeam працягне прадастаўляць паслугі рэагавання на інцыдэнты кібервымагальніцтва. Coveware будзе прапаноўваць судова-медыцынскую экспертызу і магчымасці выпраўлення…