Преди стартирането на Laravel UI, една от основните му характеристики беше предварителна поддръжкаdefiвечер за Vue.js от Laravel v5.3 до v6. Vue е модерна JavaScript фронтенд рамка, използвана за изграждане на потребителски интерфейси.
Ето някои от основните предимства на използването на Laravel с Vue за създаване на пълен работен процес за вашите проекти:
Изходният код се комбинира в един проект, вместо да има отделни проекти за бекенда и предния край
Инсталацията и конфигурацията са прости
Една единствена дистрибуция може да управлява двете рамки заедно
а едностранично приложение (накратко SPA) динамично зарежда нови данни от уеб сървър в уеб страница, без да се налага да опреснявате цялата страница.
Примери за популярни уебсайтове, които използват SPA, включват gmail.com и youtube.com – с други думи, 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
Може да се интересувате и от ...
Coveware от Veeam ще продължи да предоставя услуги за реакция при инциденти с кибер изнудване. Coveware ще предлага криминалистика и възможности за възстановяване...
Прогнозната поддръжка революционизира сектора на петрола и газа с иновативен и проактивен подход към управлението на инсталациите.…
CMA на Обединеното кралство издаде предупреждение относно поведението на Big Tech на пазара на изкуствен интелект. Там…
Указът „Case Green“, формулиран от Европейския съюз за повишаване на енергийната ефективност на сградите, приключи своя законодателен процес с...