Artiklid

Vue ja Laravel: looge üheleheline rakendus

Laravel on üks populaarsemaid PHP raamistikke, mida arendajad kasutavad, vaatame täna, kuidas teha VueJ-dega ühelehelist rakendust.

Enne Laraveli kasutajaliidese käivitamist oli selle üks peamisi funktsioone eeltugidefiõhtuks Vue.js Laraveli versioonist 5.3 versioonini 6. Vue on kaasaegne JavaScripti esiosa raamistik, mida kasutatakse kasutajaliideste loomiseks.

Miks installida Laravel ja Vue koos?

Siin on mõned Laraveli ja Vue kasutamise peamised eelised, et luua oma projektide jaoks täielik töövoog.

Lähtekood ühendatakse üheks projektiks, selle asemel, et luua eraldi projektid tausta- ja esiprogrammi jaoks
Paigaldamine ja seadistamine on lihtne
Üks distributsioon saab hallata mõlemat raamistikku koos

Mis on SPA? (ühe lehe taotlus)

A. üheleheline rakendus (lühidalt SPA) laadib dünaamiliselt uued andmed veebiserverist veebilehele, ilma et peaks kogu lehte värskendama.

SPA-sid kasutavate populaarsete veebisaitide näited on gmail.com ja youtube.com – teisisõnu on SPA-sid laialt levinud. Enamik administraatori armatuurlaudu, millega võite igapäevaselt töötada, on loodud SPA abil.

SPA-de eelised:

Kasutuskogemus on paindlikum
Andmete vahemälu brauseris
Kiire laadimisaeg

SPA miinused:

Võib kahjustada SEO-d (otsingumootori optimeerimine)
Võimalikud turvaprobleemid
See kulutab palju brauseri ressursse

Projekti seadistamine Laravelis

See postitus näitab, kuidas arendada ülesannete rakendust, mis võimaldab kasutajatel konto registreerida ja ülesandeid lisada.

Selle õpetuse jaoks kasutatakse Laravel 9, mis nõuab PHP 8.1 ja Vue 3; meil peavad olema installitud ka PHP ja NGINX.

Alustame järgmise käsuga:

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

Järgmisena installime JavaScripti sõltuvused.

npm install

Peame installima mõned paketid, enne kui saame Vue oma projekti lisada.

Samuti tuleb installida plugin-vue, kuna Laravel 9 tarnitakse Vite'iga, mitte webpack-mixiga, mis oli eelmine Laraveli JavaScripti komplekteerija. Teeme seda kohe:

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

Avage fail nimega vite.config.js ja lisage vue() konfiguratsioonile:

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

Redigeerige rakenduse Vue 3 faili app.js ja alglaadimislõiku.

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Looge fail nimega App.vue ja lisage järgmine:

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

   }
}
</script>

Lõpuks avage fail welcome.blade.php asub kaustas resources/views ja lisage järgmine:

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

Rakenduse eelvaate kuvamiseks peame käivitama oma Vue rakenduse ja Laraveli serveri kahes erinevas terminalis/käsureas:

npm run dev


php artisan serve

Ülesannete rakenduse loomiseks peame looma muid faile. Vue loob mitu lehte, peamiselt:

juurdepääsust
registreerimise eest
Koduleht

Laraveli lõpp-punktidega suhtlemiseks peame installima Axiose:

npm install axios

vue marsruutimine

Pakendi kasutamine vue-router, Vue's saab kasutada erinevaid marsruutimisstrateegiaid; neid strateegiaid tuntakse ka kui history models.

Kui kasutaja seda nõuab route nagu http://localhost:8000/home, mis tagastab lehe värskendamisel tõrketeate 404, saame loota, et Laravel tuvastab kõik varumarsruudid ja seejärel teenindab meie rakendust sisaldavat Blade-faili.

Sel põhjusel kasutame HTML5 režiimi:

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

Selles näites käsitleme autentimist kasutades Laraveli pühakoda, siis salvestatakse luba kohalikku salvestusruumi.

Muude päringute õnnestumiseks liidetakse luba päisega, mis võimaldab Laravelil päringu esitanud kasutaja tuvastada.

Siin on mõlema seotud koodiplokid:

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

Samuti võite olla huvitatud ...