บทความ

Vue และ Laravel: สร้างแอปพลิเคชันหน้าเดียว

Laravel เป็นหนึ่งในเฟรมเวิร์ก PHP ที่ได้รับความนิยมสูงสุดที่นักพัฒนาใช้ เรามาดูวิธีสร้าง Single Page Application ด้วย VueJs กันเถอะ

ก่อนการเปิดตัว Laravel UI คุณสมบัติหลักประการหนึ่งคือการสนับสนุนล่วงหน้าdefiคืนสำหรับ Vue.js จาก Laravel v5.3 ถึง v6 Vue เป็นเฟรมเวิร์กส่วนหน้าของ JavaScript สมัยใหม่ที่ใช้สร้างส่วนต่อประสานกับผู้ใช้

ทำไมต้องติดตั้ง Laravel และ Vue พร้อมกัน

ต่อไปนี้คือประโยชน์หลักบางประการของการใช้ Laravel กับ Vue เพื่อสร้างเวิร์กโฟลว์ที่สมบูรณ์สำหรับโครงการของคุณ:

ซอร์สโค้ดจะรวมกันเป็นโครงการเดียว แทนที่จะแยกโครงการสำหรับส่วนหลังและส่วนหน้า
การติดตั้งและกำหนดค่าทำได้ง่าย
การกระจายเดียวสามารถจัดการทั้งสองกรอบร่วมกัน

สปาคืออะไร? (ใบสมัครหน้าเดียว)

Una ใบสมัครหน้าเดียว (เรียกสั้นๆ ว่า SPA) โหลดข้อมูลใหม่จากเว็บเซิร์ฟเวอร์ลงในหน้าเว็บแบบไดนามิกโดยไม่ต้องรีเฟรชทั้งหน้า

ตัวอย่างของเว็บไซต์ยอดนิยมที่ใช้ SPA ได้แก่ gmail.com และ youtube.com หรืออีกนัยหนึ่ง SPA มีอยู่ทั่วไปทุกหนทุกแห่ง แดชบอร์ดผู้ดูแลระบบส่วนใหญ่ที่คุณอาจใช้งานในแต่ละวันนั้นสร้างขึ้นโดยใช้ SPA

ข้อดีของสปา:

ประสบการณ์ของผู้ใช้มีความยืดหยุ่นมากขึ้น
แคชข้อมูลในเบราว์เซอร์
เวลาโหลดเร็ว

ข้อเสียของสปา:

อาจทำให้ SEO (การเพิ่มประสิทธิภาพเครื่องมือค้นหา) เสียหาย
ปัญหาด้านความปลอดภัยที่อาจเกิดขึ้น
ใช้ทรัพยากรเบราว์เซอร์จำนวนมาก

การกำหนดค่าโครงการใน Laravel

โพสต์นี้จะสาธิตวิธีพัฒนาแอปสิ่งที่ต้องทำซึ่งอนุญาตให้ผู้ใช้ลงชื่อสมัครใช้บัญชีและเพิ่มงาน

สำหรับบทช่วยสอนนี้ ใช้ Laravel 9 ซึ่งต้องใช้ PHP 8.1 และ Vue 3; เราต้องติดตั้ง PHP และ NGINX ด้วย

เราเริ่มต้นด้วยคำสั่งต่อไปนี้:

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

ต่อไป เราจะติดตั้งการขึ้นต่อกันของ JavaScript

npm install

เราจำเป็นต้องติดตั้งแพ็คเกจบางอย่างก่อนจึงจะสามารถเพิ่ม Vue ในโครงการของเราได้

นอกจากนี้ ต้องติดตั้ง plugin-vue เนื่องจาก Laravel 9 มาพร้อมกับ Vite แทนที่จะเป็น webpack-mix ซึ่งเป็นบันเดิลของ Laravel สำหรับ JavaScript ก่อนหน้านี้ มาทำกันเลย:

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

เปิดไฟล์ชื่อ vite.config.js และเพิ่ม vue() เพื่อกำหนดค่า:

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

แก้ไขไฟล์ app.js และข้อมูลโค้ด bootstrap สำหรับแอป Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

สร้างไฟล์ชื่อ App.vue และเพิ่มสิ่งต่อไปนี้:

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

   }
}
</script>

สุดท้าย เปิดไฟล์ welcome.blade.php อยู่ในโฟลเดอร์ resources/views และเพิ่มสิ่งต่อไปนี้:

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

หากต้องการดูตัวอย่างแอปของเรา เราต้องเริ่มแอป Vue และเซิร์ฟเวอร์ Laravel บนเทอร์มินัล/บรรทัดคำสั่งที่แตกต่างกันสองรายการ:

npm run dev


php artisan serve

ในการสร้างแอปสิ่งที่ต้องทำ เราต้องสร้างไฟล์อื่นๆ Vue จะสร้างหลายหน้า ส่วนใหญ่:

ของการเข้าถึง
สำหรับการลงทะเบียน
หน้าแรก

ในการสื่อสารกับปลายทาง Laravel เราจำเป็นต้องติดตั้ง Axios:

npm install axios

การกำหนดเส้นทาง

การใช้แพ็คเกจ vue-routerมีกลยุทธ์การกำหนดเส้นทางที่หลากหลายที่สามารถใช้ใน Vue; กลยุทธ์เหล่านี้เรียกอีกอย่างว่า history models.

เมื่อผู้ใช้ร้องขอ route เช่น http://localhost:8000/home ซึ่งจะส่งคืนข้อผิดพลาด 404 เมื่อรีเฟรชหน้า เราสามารถใช้ Laravel เพื่อตรวจหาเส้นทางสำรองและให้บริการไฟล์ Blade ซึ่งมีแอปของเรา

ด้วยเหตุนี้ เราจะใช้โหมด 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')
        }
    ],
})

ในตัวอย่างนี้ เราจัดการการรับรองความถูกต้องโดยใช้ สถานที่ศักดิ์สิทธิ์ Laravelจากนั้นโทเค็นจะถูกบันทึกในที่จัดเก็บในตัวเครื่อง

เพื่อให้คำขออื่นๆ สำเร็จ โทเค็นจะถูกรวมเข้ากับส่วนหัว ซึ่งจะทำให้ผู้ใช้สามารถระบุคำขอได้โดย Laravel

นี่คือบล็อกรหัสที่เกี่ยวข้องสำหรับทั้งสอง:

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

คุณอาจสนใจ ...