Vue і Laravel: створіть односторінкову програму
Laravel є одним із найпопулярніших фреймворків PHP, який використовують розробники, давайте сьогодні подивимося, як створити односторінкову програму за допомогою VueJs.
До запуску Laravel UI однією з його головних функцій була підтримка за замовчуванням для Vue.js з Laravel v5.3 на v6. Vue — це сучасна інтерфейсна платформа JavaScript, яка використовується для створення інтерфейсів користувача.
Навіщо встановлювати Laravel і Vue разом?
Ось деякі з основних переваг використання Laravel із Vue для створення повного робочого процесу для ваших проектів:
Вихідний код об’єднано в один проект, замість того, щоб мати окремі проекти для серверної та зовнішньої частини
Встановлення та налаштування прості
Один дистрибутив може керувати обома фреймворками разом
Що таке SPA? (односторінкова заявка)
Una односторінковий додаток (скорочено SPA) динамічно завантажує нові дані з веб-сервера на веб-сторінку без необхідності оновлювати всю сторінку.
Приклади популярних веб-сайтів, які використовують SPA, включають gmail.com і youtube.com – іншими словами, SPA широко поширені всюди. Більшість інформаційних панелей адміністратора, з якими ви можете працювати щодня, створено за допомогою SPA.
Переваги SPA:
Взаємодія з користувачем більш гнучка
Кешувати дані в браузері
Швидкий час завантаження
Недоліки SPA:
Може скомпрометувати SEO (пошукову оптимізацію)
Потенційні проблеми безпеки
Це споживає багато ресурсів браузера
Конфігурація проекту в Laravel
У цьому дописі буде продемонстровано, як розробити програму справ, яка дозволить користувачам реєструвати обліковий запис і додавати завдання.
Для цього підручника використовується 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 axiosvue маршрутизація
Використання пакета 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
Вас також може зацікавити ...
