Tefito

Vue me Laravel: hanga he Taupānga Wharangi Kotahi

Ko Laravel tetahi o nga anga PHP tino rongonui e whakamahia ana e nga kaiwhakawhanake, kia kite tatou i tenei ra me pehea te hanga Taupānga Wharangi Kotahi me nga VueJs.

I mua i te whakarewatanga o Laravel UI, ko tetahi o ona ahuatanga matua ko te tautoko i muadefiahiahi mo Tuhinga.js mai i Laravel v5.3 ki v6. Ko te Vue he angamahi mua JavaScript hou e whakamahia ana ki te hanga atanga kaiwhakamahi.

He aha te whakaurunga tahi a Laravel me Vue?

Anei etahi o nga tino painga o te whakamahi i a Laravel me Vue hei hanga rerengamahi katoa mo o kaupapa:

Ka honohia te waehere puna ki te kaupapa kotahi, kaua ki te whai kaupapa motuhake mo te tuara me te taha o mua
He ngawari te whakaurunga me te whirihoranga
Ka taea e te tohatoha kotahi te whakahaere tahi i nga anga e rua

He aha te SPA? (tono wharangi kotahi)

una tono wharangi kotahi (SPA mo te poto) ka utaina nga raraunga hou mai i te tūmau tukutuku ki te wharangi paetukutuku me te kore e whakamau i te wharangi katoa.

Ko nga tauira o nga paetukutuku rongonui e whakamahi ana i nga SPA ko gmail.com me youtube.com - i etahi atu kupu, ko nga SPA te nuinga o nga waahi katoa. Ko te nuinga o nga papatohu kaiwhakahaere ka mahi tahi koe ia ra, ka hangaia ma te whakamahi i te SPA.

Nga painga o nga SPA:

He ngawari ake te wheako kaiwhakamahi
Keteroki raraunga i roto i te pūtirotiro
Te wa uta tere

Nga ngoikoretanga o nga SPA:

Ka whakararu i te SEO (whakaarotautanga miihini rapu)
Nga take haumarutanga pea
Ka pau te maha o nga rauemi tirotiro

whirihoranga kaupapa i Laravel

Ma tenei pou e whakaatu me pehea te whakawhanake i tetahi taupānga mahi ka taea e nga kaiwhakamahi te haina mo tetahi kaute me te taapiri i nga mahi.

Mo tenei akoranga, ka whakamahia a Laravel 9, me PHP 8.1 me Vue 3; me whakauru ano tatou i te PHP me te NGINX.

Ka timata ma te whakahau e whai ake nei:

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

Whai muri, ka whakauruhia e matou nga whakawhirinakitanga JavaScript.

npm install

Me whakauru etahi kete i mua i te taapiri i a Vue ki ta maatau kaupapa.

Ano, me whakauru te mono-vue, mai i te mea ka tukuna a Laravel 9 me Vite, kaua ki te webpack-mix, ko ia te roopu Laravel o mua mo JavaScript. Me mahi inaianei:

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

Whakatuwheratia te kōnae e kiia nei vite.config.js me te tapiri vue() ki te whirihoranga:

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

Whakatikaina te kōnae app.js me te snippet bootstrap mo te taupānga Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Waihangatia he kōnae e kiia ana App.vue me te taapiri i nga mea e whai ake nei:

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

   }
}
</script>

Ka mutu, whakatuwheratia te konae welcome.blade.php kei roto i te kōpaki resources/views me te taapiri i nga mea e whai ake nei:

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

Hei arokite i ta maatau taupānga, me timata ta maatau taupānga Vue me te tūmau Laravel i runga i nga momo kapeka / raina whakahau e rua:

npm run dev


php artisan serve

Hei waihanga i ta maatau taupānga mahi, me hanga etahi atu konae. Ka hangaia e Vue nga wharangi maha, ko te nuinga:

o te uru
mo te rehitatanga
He whārangi kāinga

Hei korero ki nga pito mutunga o Laravel, me whakauru tatou i te Axios:

npm install axios

ararere vue

Te whakamahi i te kete vue-router, he maha nga rautaki ararere ka taea te whakamahi i Vue; e mohiotia ana enei rautaki ko history models.

Ina tono te kaiwhakamahi route Pērā i te http://localhost:8000/home, ka hoki mai he hapa 404 ina whakahoutia te wharangi, ka taea e tatou te whakawhirinaki ki a Laravel ki te kite i nga huarahi takahuri katahi ka mahi ki te konae Blade kei roto ta tatou taupānga.

Mo konei, ka whakamahia e matou te aratau 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')
        }
    ],
})

I tenei tauira ka whakahaerehia e matou te motuhēhēnga ma te whakamahi Laravel Sanctum, ka tiakina te tohu ki roto i te rokiroki rohe.

Mo etahi atu tono kia angitu, ka hanumi te tohu ki te pane, ka taea e te kaiwhakamahi te tono kia tohua e Laravel.

Anei nga poraka waehere e hono ana mo nga mea e rua:

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

Akene he hiahia koe ki ...