Articles

Vue uye Laravel: gadzira Imwe Peji Yekushandisa

Laravel ndeimwe yeanonyanya kufarirwa PHP masisitimu anoshandiswa nevagadziri, ngationei nhasi maitiro ekuita Imwe Peji Yekushandisa neVueJs.

Isati yatangwa yeLaravel UI, imwe yeayo maficha yaive pre rutsigirodefinite for Wedu.js kubva kuLaravel v5.3 kusvika v6. Vue ishanduro yemazuva ano yeJavaScript yekumberi inoshandiswa kugadzira mushandisi.

Sei kuisa Laravel uye Vue pamwechete?

Heano mamwe emabhenefiti makuru ekushandisa Laravel neVue kugadzira kuyerera kwakazara kwemapurojekiti ako:

Iyo kodhi kodhi inosanganiswa kuita purojekiti imwe chete, pachinzvimbo chekuve nemapurojekiti akasiyana eiyo backend uye yekumberi
Kuisa uye kugadzirisa zviri nyore
Kugovera kumwe chete kunogona kubata ese ari maviri masisitimu pamwechete

Chii chinonzi SPA? (peji rimwe chete application)

Una peji rimwe chete application (SPA kwenguva pfupi) inorodha data nyowani kubva pawebhu server kupinda peji rewebhu pasina kuzorodza peji rese.

Mienzaniso yemawebhusaiti ane mukurumbira anoshandisa SPAs anosanganisira gmail.com uye youtube.com - nemamwe mazwi, maSPA anowanikwa kwese kwese. Mazhinji emadhibhodhi e admin aunga shanda nawo zuva nezuva anovakwa uchishandisa SPA.

Zvakanakira zveSPAs:

Chiitiko chemushandisi chinowedzera kushanduka
Cache data mubrowser
Kurumidza kurodha nguva


Zvakaipa zveSPAs:

Inogona kukanganisa SEO (injini yekutsvaga optimization)
Zvingangoitika zvekuchengetedza nyaya
Iyo inoshandisa yakawanda yebrowser zviwanikwa

Kugadziriswa kweprojekiti muLaravel

Iyi positi icharatidza maitiro ekugadzira-yekuita app inobvumira vashandisi kusaina account uye kuwedzera mabasa.

Pachidzidzo ichi, Laravel 9 inoshandiswa, inoda PHP 8.1 uye Vue 3; tinodawo kuva ne PHP uye NGINX yakaiswa.

Tinotanga nemurairo unotevera:

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

Tevere, isu tinoisa iyo JavaScript inotsamira.

npm install

Isu tinofanirwa kuisa mamwe mapakeji tisati tawedzera Vue kupurojekiti yedu.

Zvakare, plugin-vue inofanirwa kuiswa, sezvo Laravel 9 ngarava neVite, pane webpack-mix, yaive yapfuura Laravel bundler yeJavaScript. Ngatizviite izvozvi:

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

Vhura faira rakanzi vite.config.js uye wedzera vue() kugadzirisa:

Innovation newsletter
Usarasikirwa nenhau dzakanyanya kukosha dzekuvandudza. Nyora kuti uvagamuchire neemail.
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',
        ]),
    ],
});

Rongedza iyo app.js faira uye bootstrap snippet yeVue 3 app:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Gadzira faira rakanzi App.vue uye wedzera zvinotevera:

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

   }
}
</script>

Pakupedzisira, vhura faira welcome.blade.php iri mufolda resources/views uye wedzera zvinotevera:

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

Kuti titarise app yedu, isu tinofanirwa kutanga yedu Vue app uye Laravel server pane maviri akasiyana materminal / mitsara yemirairo:

npm run dev


php artisan serve

Kugadzira yedu yekuita-app, tinoda kugadzira mamwe mafaera. Vue ichagadzira akawanda mapeji, kunyanya:

  • yekuwana
  • yekunyoresa
  • Peji yekumba


Kutaurirana neLaravel endpoints, isu tinofanirwa kuisa Axios:

npm install axios

vue routing

Kushandisa package vue-router, kune nzira dzakasiyana-siyana dzekufambisa dzinogona kushandiswa muVue; mazano aya anozivikanwawo se history models.

Kana mushandisi akumbira route senge http://localhost:8000/home, iyo inodzosa kukanganisa kwe404 kana peji razorodzwa, tinogona kuvimba neLaravel kuona chero nzira dzekudzokera kumashure uye tozoshandisa iyo Blade faira rine app yedu.

Nechikonzero ichi, isu tichashandisa HTML5 modhi:

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

Mumuenzaniso uyu tinobata chokwadi tichishandisa Laravel Sanctum, ipapo chiratidzo chinochengetwa munzvimbo yekuchengetedza.

Kuti zvimwe zvikumbiro zvibudirire, chiratidzo chinosanganiswa mumusoro, izvo zvinobvumira mushandisi kuita chikumbiro kuti chizivikanwe naLaravel.

Heano mabhuroko ekodhi akabatana ezvose zviri zviviri:

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

Iwe unogona zvakare kufarira ...

Innovation newsletter
Usarasikirwa nenhau dzakanyanya kukosha dzekuvandudza. Nyora kuti uvagamuchire neemail.

Zvinyorwa zvekare

Smart Lock Market: mushumo wekutsvagisa musika wakaburitswa

Izwi rekuti Smart Lock Market rinoreva indasitiri uye ecosystem yakatenderedza kugadzirwa, kugovera uye kushandisa…

27 Marzo 2024

Ndeapi maitiro ekugadzira: sei uzvishandise, kupatsanura, zvakanakira uye zvakaipira

Muinjiniya yesoftware, dhizaini mapatani ndiwo akakwana mhinduro kumatambudziko anowanzo kuitika mukugadzira software. ndiri se...

26 Marzo 2024

Iko shanduko yetekinoroji yekumaka maindasitiri

Kumaka kwemaindasitiri ishoko rakafara rinobatanidza matekiniki akati wandei anoshandiswa kugadzira mamakisi echigarire pamusoro pe…

25 Marzo 2024

Mienzaniso yeExcel Macros yakanyorwa neVBA

Iyo inotevera yakapfava Excel macro mienzaniso yakanyorwa uchishandisa VBA Inofungidzirwa nguva yekuverenga: 3 maminetsi Muenzaniso…

25 Marzo 2024