Cov khoom

Vue thiab Laravel: tsim ib nplooj ntawv thov

Laravel yog ib qho ntawm cov txheej txheem PHP nrov tshaj plaws siv los ntawm cov neeg tsim khoom, cia peb pom hnub no yuav ua li cas thiaj ua tau Daim Ntawv Thov Ib Daim nplooj ntawv nrog VueJs.

Ua ntej tshaj tawm Laravel UI, ib qho ntawm nws cov yam ntxwv tseem ceeb yog kev txhawb nqa ua ntejdefinoj rau Vue.js Los ntawm Laravel v5.3 rau v6. Vue yog qhov niaj hnub JavaScript frontend moj khaum siv los tsim cov neeg siv interfaces.

Vim li cas thiaj nruab Laravel thiab Vue ua ke?

Nov yog qee qhov txiaj ntsig tseem ceeb ntawm kev siv Laravel nrog Vue los tsim kev ua haujlwm tiav rau koj cov haujlwm:

Lub hauv paus code tau muab tso ua ke rau hauv ib qhov project, es tsis txhob muaj cais cov haujlwm rau lub backend thiab frontend
Installation thiab configuration yog yooj yim
Ib qho kev faib tawm tuaj yeem tswj hwm ob lub hauv paus ua ke

SPA yog dab tsi? (ib nplooj ntawv thov)

Una ib nplooj ntawv thov (SPA luv luv) dynamically loads cov ntaub ntawv tshiab los ntawm lub web server rau hauv nplooj ntawv web yam tsis tas yuav rov ua dua tag nrho nplooj ntawv.

Piv txwv ntawm cov vev xaib nrov uas siv SPAs suav nrog gmail.com thiab youtube.com - hauv lwm lo lus, SPAs muaj ntau qhov chaw. Feem ntau ntawm admin dashboards koj tuaj yeem ua haujlwm nrog txhua hnub yog tsim los siv SPA.

Qhov zoo ntawm SPAs:

Cov neeg siv kev paub yog hloov tau yooj yim dua
Cache cov ntaub ntawv hauv browser
Lub sijhawm thauj khoom ceev

Disadvantages ntawm SPAs:

Tej zaum yuav cuam tshuam SEO (search engine optimization)
Tej yam teeb meem kev ruaj ntseg
Nws siv ntau qhov chaw browser

Qhov project configuration hauv Laravel

Cov ntawv tshaj tawm no yuav qhia txog yuav ua li cas los tsim ib qho yuav tsum ua app uas tso cai rau cov neeg siv sau npe rau tus account thiab ntxiv cov haujlwm.

Rau qhov kev qhia no, Laravel 9 yog siv, uas yuav tsum tau PHP 8.1 thiab Vue 3; peb kuj yuav tsum muaj PHP thiab NGINX ntsia.

Peb pib nrog cov lus txib hauv qab no:

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

Tom ntej no, peb yuav nruab JavaScript dependencies.

npm install

Peb yuav tsum tau nruab ib co pob ua ntej peb tuaj yeem ntxiv Vue rau peb qhov project.

Tsis tas li ntawd, plugin-vue yuav tsum tau teeb tsa, txij li Laravel 9 nkoj nrog Vite, tsis yog webpack-mix, uas yog yav dhau los Laravel bundler rau JavaScript. Cia peb ua tam sim no:

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

Qhib cov ntaub ntawv hu ua vite.config.js thiab ntxiv vue() rau configuration:

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

Kho cov ntaub ntawv app.js thiab bootstrap snippet rau Vue 3 app:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Tsim cov ntaub ntawv hu ua App.vue thiab ntxiv cov hauv qab no:

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

   }
}
</script>

Thaum kawg, qhib cov ntaub ntawv welcome.blade.php nyob rau hauv daim ntawv tais ceev tseg resources/views thiab ntxiv cov hauv qab no:

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

Txhawm rau saib peb lub app, peb yuav tsum pib peb Vue app thiab Laravel server ntawm ob lub davhlau ya nyob twg / kab lus txib:

npm run dev


php artisan serve

Txhawm rau tsim peb cov app yuav tsum ua, peb yuav tsum tsim lwm cov ntaub ntawv. Vue yuav tsim ntau nplooj ntawv, feem ntau:

ntawm kev nkag
rau npe
Ib nplooj ntawv home

Txhawm rau sib txuas lus nrog Laravel kawg, peb yuav tsum nruab Axios:

npm install axios

vue kev

Siv lub pob vue-router, muaj ntau yam routing tswv yim uas yuav siv tau nyob rau hauv Vue; cov tswv yim no kuj hu ua history models.

Thaum tus neeg siv thov route zoo li http://localhost:8000/home, uas yuav rov qab qhov yuam kev 404 thaum nplooj ntawv rov kho dua tshiab, peb tuaj yeem tso siab rau Laravel txhawm rau txheeb xyuas txhua qhov kev poob rov qab thiab tom qab ntawd ua haujlwm rau Blade cov ntaub ntawv uas muaj peb lub app.

Vim li no, peb yuav siv hom 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')
        }
    ],
})

Hauv qhov piv txwv no peb lis authentication siv Laravel Sanctum, ces tus token tau txais kev cawmdim nyob rau hauv lub zos cia.

Rau lwm qhov kev thov kom ua tiav, lub token tau muab tso rau hauv header, uas yuav tso cai rau tus neeg siv ua qhov kev thov kom raug txheeb xyuas los ntawm Laravel.

Nov yog cov txheej txheem cuam tshuam rau ob qho tib si:

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

Koj kuj tseem yuav txaus siab rau ...