Ìwé

Vue ati Laravel: ṣẹda Ohun elo Oju-iwe Kanṣoṣo kan

Laravel jẹ ọkan ninu awọn ilana PHP olokiki julọ ti awọn olupilẹṣẹ lo, loni jẹ ki a wo bii o ṣe le ṣe Ohun elo Oju-iwe Kanṣoṣo pẹlu VueJs.

Ṣaaju ifilọlẹ Laravel UI, ọkan ninu awọn ẹya akọkọ rẹ jẹ atilẹyin iṣaajudefinished fun Vue.js Laravel v5.3 si v6. Vue jẹ ilana iwaju iwaju JavaScript ti ode oni ti a lo lati kọ awọn atọkun olumulo.

Kí nìdí fi sori ẹrọ Laravel ati Vue jọ?

Eyi ni diẹ ninu awọn anfani bọtini ti lilo Laravel pẹlu Vue lati ṣẹda ṣiṣan iṣẹ pipe fun awọn iṣẹ akanṣe rẹ:

Awọn koodu orisun ti wa ni idapo sinu ọkan ise agbese, dipo ti nini lọtọ ise agbese fun awọn backend ati frontend
Fifi sori ẹrọ ati iṣeto ni o rọrun
Pipin kan ṣoṣo le mu awọn ilana mejeeji papọ

Kini SPA kan? (ohun elo oju-iwe kan)

una nikan-iwe ohun elo (SPA fun kukuru) n gbe data tuntun lati ọdọ olupin wẹẹbu kan si oju-iwe wẹẹbu kan laisi nini lati sọ gbogbo oju-iwe naa sọtun.

Awọn apẹẹrẹ ti awọn oju opo wẹẹbu olokiki ti o lo awọn SPA pẹlu gmail.com ati youtube.com: Ni awọn ọrọ miiran, awọn SPA wa ni ibigbogbo. Pupọ awọn dasibodu abojuto ti o le ṣiṣẹ pẹlu lojoojumọ ni a ṣẹda nipa lilo SPA.

Awọn anfani ti awọn SPA:

Iriri olumulo jẹ irọrun diẹ sii
Kaṣe data ninu rẹ browser
Yara ikojọpọ akoko

Awọn alailanfani ti awọn SPA:

Le ṣe adehun SEO (iṣapejuwe ẹrọ wiwa)
O pọju aabo awon oran
O nlo ọpọlọpọ awọn orisun ẹrọ aṣawakiri

Iṣeto ni ise agbese ni Laravel

Ifiweranṣẹ yii yoo ṣe afihan bi o ṣe le ṣe agbekalẹ ohun elo lati-ṣe ti o gba awọn olumulo laaye lati forukọsilẹ fun akọọlẹ kan ati ṣafikun awọn iṣẹ ṣiṣe.

Ikẹkọ yii nlo Laravel 9, eyiti o nilo PHP 8.1 ati Vue 3; a tun nilo lati fi PHP ati NGINX sori ẹrọ.

Jẹ ki a bẹrẹ pẹlu aṣẹ atẹle:

composer create-project --prefer-dist laravel/laravel laravel-vue-combo

Nigbamii, a yoo fi awọn igbẹkẹle JavaScript sori ẹrọ.

npm install

A nilo lati fi sori ẹrọ diẹ ninu awọn idii ṣaaju ki a to le ṣafikun Vue si iṣẹ akanṣe wa.

Ni afikun, itanna-vue gbọdọ wa ni fi sori ẹrọ, bi awọn ọkọ oju omi Laravel 9 pẹlu Vite, dipo apopọ wẹẹbu, eyiti o jẹ lapapo iṣaaju Laravel fun JavaScript. Jẹ ki a ṣe ni bayi:

npm install vue@next vue-loader@next @vitejs/plugin-vue

Ṣii faili ti a npe ni vite.config.js ati afikun vue() si iṣeto:

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',
        ]),
    ],
});

Ṣatunkọ faili app.js ati snippet fun Vue 3 app bootstrap:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Ṣẹda faili ti a npe ni App.vue ki o si fi awọn wọnyi kun:

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

Ni ipari, ṣii faili naa welcome.blade.php eyi ti o wa ninu folda resources/views ki o si fi awọn wọnyi kun:

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

Lati ṣe awotẹlẹ ohun elo wa, a nilo lati ṣe ifilọlẹ app Vue wa ati olupin Laravel lori awọn ebute oriṣiriṣi/awọn laini aṣẹ meji:

npm run dev


php artisan serve

Lati ṣẹda ohun elo lati-ṣe, a nilo lati ṣẹda awọn faili diẹ sii. Vue yoo ṣẹda awọn oju-iwe pupọ, ni pataki:

ti wiwọle
fun ìforúkọsílẹ
Oju-iwe ile kan

Lati ṣe ibasọrọ pẹlu awọn aaye ipari Laravel, a nilo lati fi sori ẹrọ Axios:

npm install axios

Vue afisona

Lilo package vue-router, orisirisi awọn ilana afisona ti o le ṣee lo ni Vue; awọn ilana wọnyi tun mọ bi history models.

Nigbati olumulo kan ba beere route bii http://localhost:8000/home, eyi ti yoo da aṣiṣe 404 pada nigbati oju-iwe naa ba ni itunu, a le gbẹkẹle Laravel lati ṣawari eyikeyi awọn ipa-ọna ipadabọ ati lẹhinna sin faili Blade ti o ni app wa.

Fun idi eyi, a yoo lo ipo 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')
        }
    ],
})

Ninu apẹẹrẹ yii a mu ijẹrisi nipa lilo Laravel Sanctum, lẹhinna aami ti wa ni ipamọ si ibi ipamọ agbegbe.

Fun awọn ibeere miiran lati ṣaṣeyọri, ami naa ti dapọ si akọsori, eyiti yoo gba olumulo laaye lati ṣe idanimọ nipasẹ Laravel.

Ni isalẹ ni awọn bulọọki koodu ti o somọ fun awọn mejeeji:

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

O tun le nifẹ si ...