Articles

Vue agus Laravel: cruthaich Iarrtas Duilleag Singilte

Is e Laravel aon de na frèaman PHP as mòr-chòrdte a bhios luchd-leasachaidh a’ cleachdadh, chì sinn an-diugh mar a nì thu Iarrtas Duilleag Singilte le VueJs.

Mus deach Laravel UI a chuir air bhog, b’ e ro-thaic aon de na prìomh fheartan aigedefinite airson Vue.js bho Laravel v5.3 gu v6. Tha Vue na fhrèam aghaidh JavaScript ùr-nodha air a chleachdadh gus eadar-aghaidh luchd-cleachdaidh a thogail.

Carson a stàlaicheas Laravel agus Vue còmhla?

Seo cuid de na prìomh bhuannachdan bho bhith a’ cleachdadh Laravel le Vue gus sruth-obrach iomlan a chruthachadh airson do phròiseactan:

Tha an còd tùsail air a chur còmhla ann an aon phròiseact, an àite pròiseactan fa-leth a bhith aca airson an deireadh-sheachdain agus an aghaidh
Tha an stàladh agus an rèiteachadh sìmplidh
Faodaidh aon sgaoileadh an dà fhrèam a riaghladh còmhla

Dè a th' ann an SPA? (iarrtas aon-dhuilleag)

Una tagradh aon-dhuilleag (SPA airson goirid) gu dinamach a’ luchdachadh dàta ùr bho fhrithealaiche lìn gu duilleag lìn gun a bhith agad ris an duilleag gu lèir ùrachadh.

Am measg eisimpleirean de làraich-lìn mòr-chòrdte a bhios a’ cleachdadh SPAn tha gmail.com agus youtube.com – ann am faclan eile, tha SPAn uile-làthaireach gu ìre mhòr. Tha a’ mhòr-chuid de na deas-bhòrdan rianachd leis am faodadh tu obrachadh bho latha gu latha air an togail a’ cleachdadh SPA.

Buannachdan SPAn:

Tha eòlas an neach-cleachdaidh nas sùbailte
Dàta tasgadan sa bhrobhsair
Ùine luchdachadh luath

Eas-bhuannachdan SPA:

Dh’ fhaodadh e cron a dhèanamh air SEO (optimization einnsean sgrùdaidh)
Cùisean tèarainteachd a dh’fhaodadh a bhith ann
Bidh e ag ithe mòran de ghoireasan brabhsair

Rèiteachadh pròiseact ann an Laravel

Seallaidh an dreuchd seo mar a leasaicheas iad app ri dhèanamh a leigeas le luchd-cleachdaidh clàradh airson cunntas agus gnìomhan a chuir ris.

Airson an oideachadh seo, tha Laravel 9 air a chleachdadh, a dh 'fheumas PHP 8.1 agus Vue 3; feumaidh sinn cuideachd PHP agus NGINX a chuir a-steach.

Bidh sinn a’ tòiseachadh leis an òrdugh a leanas:

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

An uairsin, stàlaidhidh sinn na h-eisimeileachd JavaScript.

npm install

Feumaidh sinn cuid de phacaidean a chuir a-steach mus urrainn dhuinn Vue a chuir ris a’ phròiseact againn.

Cuideachd, feumar plugan-vue a chuir a-steach, leis gu bheil Laravel 9 a’ seòladh le Vite, seach webpack-mix, a bha na phasgan Laravel roimhe airson JavaScript. Dèanamaid a-nis e:

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

Fosgail am faidhle ris an canar vite.config.js agus cuir vue() gu rèiteachadh:

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

Deasaich am faidhle app.js agus criomag bootstrap airson an app Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Cruthaich faidhle ris an canar App.vue agus cuir na leanas ris:

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

   }
}
</script>

Mu dheireadh, fosgail am faidhle welcome.blade.php suidhichte sa phasgan resources/views agus cuir na leanas ris:

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

Gus ro-shealladh fhaighinn air an aplacaid againn, feumaidh sinn an app Vue agus an t-seirbheisiche Laravel againn a thòiseachadh air dà cheann-uidhe / loidhne-àithne eadar-dhealaichte:

npm run dev


php artisan serve

Gus an aplacaid ri dhèanamh againn a chruthachadh, feumaidh sinn faidhlichean eile a chruthachadh. Cruthaichidh Vue iomadh duilleag, gu h-àraidh:

de ruigsinneachd
airson a’ chlàraidh
Duilleag dachaigh

Gus conaltradh le puingean crìochnachaidh Laravel, feumaidh sinn Axios a chuir a-steach:

npm install axios

slighe vue

A 'cleachdadh a' phacaid vue-router, tha diofar ro-innleachdan slighe ann a dh'fhaodar a chleachdadh ann an Vue; tha na h-innleachdan sin air an ainmeachadh cuideachd history models.

Nuair a dh'iarras neach-cleachdaidh route mar http://localhost: 8000/home, a thilleas mearachd 404 nuair a thèid an duilleag ùrachadh, is urrainn dhuinn a bhith an urra ri Laravel gus slighean cùl-taic sam bith a lorg agus an uairsin am faidhle Blade anns a bheil an aplacaid againn a fhrithealadh.

Air an adhbhar seo, cleachdaidh sinn modh 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')
        }
    ],
})

Anns an eisimpleir seo bidh sinn a 'làimhseachadh dearbhadh a' cleachdadh Comraich Laravel, an uairsin thèid an comharra a shàbhaladh ann an stòradh ionadail.

Airson iarrtasan eile a bhith soirbheachail, thèid an comharra a chur còmhla ris a’ bhann-cinn, a leigeas leis an neach-cleachdaidh a tha a’ dèanamh an iarrtais aithneachadh le Laravel.

Seo na blocaichean còd co-cheangailte airson an dà chuid:

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

Is dòcha gum biodh ùidh agad ann an ...