Мақолаҳо

Vue ва Laravel: як барномаи ягонаи саҳифа эҷод кунед

Laravel яке аз маъмултарин чаҳорчӯбаҳои PHP мебошад, ки таҳиягарон истифода мебаранд, биёед имрӯз бубинем, ки чӣ гуна як Аризаи Саҳифаро бо VueJs созем.

Пеш аз ба кор андохтани UI Laravel, яке аз хусусиятҳои асосии он дастгирии пешакӣ будdefiшаб барои 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-ро ба лоиҳаи худ илова кунем, мо бояд якчанд бастаҳоро насб кунем.

Инчунин, plugin-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 ва сервери Ларавелро дар ду терминал/хати фармонҳои гуногун оғоз кунем:

npm run dev


php artisan serve

Барои сохтани барномаи корҳои мо, мо бояд файлҳои дигар эҷод кунем. Vue саҳифаҳои сершумор эҷод мекунад, асосан:

дастрасии
барои бақайдгирӣ
Саҳифаи хонагӣ

Барои муошират бо нуқтаҳои ниҳоии Laravel, мо бояд Axios -ро насб кунем:

npm install axios

масири vue

Истифодаи баста vue-router, стратегияҳои гуногуни масир вуҷуд доранд, ки метавонанд дар Vue истифода шаванд; ин стратегияҳо низ маълуманд history models.

Вақте ки корбар дархост мекунад route ба монанди http://localhost:8000/home, ки ҳангоми навсозии саҳифа хатои 404-ро бармегардонад, мо метавонем ба Ларавел такя кунем, то ҳама гуна масирҳои бозпасро ошкор созем ва сипас ба файли 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')
        }
    ],
})

Дар ин мисол мо бо истифода аз аутентификатсия кор мекунем Ларавел Санктум, пас нишона дар анбори маҳаллӣ захира карда мешавад.

Барои муваффақ шудан ба дархостҳои дигар, токен ба сарлавҳа муттаҳид карда мешавад, ки ба корбар имкон медиҳад, ки дархостро Ларавел муайян кунад.

Дар ин ҷо блокҳои коди алоқаманд барои ҳарду ҳастанд:

<!--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

Шумо инчунин метавонед манфиатдор дар ...