Các bài viết

Vue và Laravel: tạo Ứng dụng một trang

Laravel là một trong những framework PHP phổ biến nhất được các nhà phát triển sử dụng, hôm nay chúng ta hãy xem cách tạo Ứng dụng một trang với VueJs.

Trước khi ra mắt Laravel UI, một trong những tính năng chính của nó là hỗ trợ trướcdefitối cho Vue.js từ Laravel v5.3 đến v6. Vue là một khung giao diện người dùng JavaScript hiện đại được sử dụng để xây dựng giao diện người dùng.

Tại sao lại cài đặt Laravel và Vue cùng nhau?

Dưới đây là một số lợi ích chính của việc sử dụng Laravel với Vue để tạo quy trình làm việc hoàn chỉnh cho các dự án của bạn:

Mã nguồn được kết hợp thành một dự án, thay vì có các dự án riêng biệt cho phần phụ trợ và phần đầu
Cài đặt và cấu hình rất đơn giản
Một bản phân phối duy nhất có thể quản lý cả hai khung cùng nhau

SPA là gì? (ứng dụng trang đơn)

một ứng dụng một trang (viết tắt là SPA) tải động dữ liệu mới từ máy chủ web vào trang web mà không phải làm mới toàn bộ trang.

Ví dụ về các trang web phổ biến sử dụng SPA bao gồm gmail.com và youtube.com – nói cách khác, SPA phần lớn phổ biến. Hầu hết các bảng điều khiển dành cho quản trị viên mà bạn có thể làm việc hàng ngày đều được tạo bằng SPA.

Ưu điểm của SPA:

Trải nghiệm người dùng linh hoạt hơn
Dữ liệu cache trong trình duyệt
Thời gian tải nhanh

Nhược điểm của SPA:

Có thể ảnh hưởng đến SEO (tối ưu hóa công cụ tìm kiếm)
Các vấn đề bảo mật tiềm ẩn
Nó tiêu tốn rất nhiều tài nguyên trình duyệt

Cấu hình dự án trong Laravel

Bài đăng này sẽ trình bày cách phát triển ứng dụng việc cần làm cho phép người dùng đăng ký tài khoản và thêm nhiệm vụ.

Đối với hướng dẫn này, Laravel 9 được sử dụng, yêu cầu PHP 8.1 và Vue 3; chúng ta cũng cần cài đặt PHP và NGINX.

Chúng ta bắt đầu với lệnh sau:

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

Tiếp theo, chúng tôi sẽ cài đặt các phụ thuộc JavaScript.

npm install

Chúng tôi cần cài đặt một số gói trước khi có thể thêm Vue vào dự án của mình.

Ngoài ra, plugin-vue phải được cài đặt, vì Laravel 9 đi kèm với Vite, thay vì webpack-mix, vốn là gói Laravel trước đó dành cho JavaScript. Hãy làm ngay bây giờ:

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

Mở tệp có tên vite.config.js và thêm vue() để cấu hình:

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

Chỉnh sửa tệp app.js và đoạn trích bootstrap cho ứng dụng Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Tạo một tệp có tên App.vue và thêm vào như sau:

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

   }
}
</script>

Cuối cùng, mở tệp welcome.blade.php nằm trong thư mục resources/views và thêm vào như sau:

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

Để xem trước ứng dụng của chúng tôi, chúng tôi cần khởi động ứng dụng Vue và máy chủ Laravel trên hai thiết bị đầu cuối/dòng lệnh khác nhau:

npm run dev


php artisan serve

Để tạo ứng dụng việc cần làm, chúng ta cần tạo các tệp khác. Vue sẽ tạo nhiều trang, chủ yếu là:

truy cập
cho việc đăng ký
một trang chủ

Để giao tiếp với Laravel endpoint, chúng ta cần cài đặt Axios:

npm install axios

định tuyến vue

Sử dụng gói vue-router, có nhiều chiến lược định tuyến khác nhau có thể được sử dụng trong Vue; những chiến lược này còn được gọi là history models.

Khi người dùng yêu cầu route như http://localhost:8000/home, sẽ trả về lỗi 404 khi trang được làm mới, chúng ta có thể dựa vào Laravel để phát hiện bất kỳ tuyến đường dự phòng nào và sau đó cung cấp tệp Blade chứa ứng dụng của chúng ta.

Vì lý do này, chúng tôi sẽ sử dụng chế độ 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')
        }
    ],
})

Trong ví dụ này, chúng tôi xử lý xác thực bằng cách sử dụng Thánh địa Laravel, sau đó mã thông báo được lưu trong bộ nhớ cục bộ.

Để các yêu cầu khác thành công, mã thông báo được hợp nhất vào tiêu đề, điều này sẽ cho phép người dùng thực hiện yêu cầu được xác định bởi Laravel.

Dưới đây là các khối mã được liên kết cho cả hai:

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

Bạn cũng có thể quan tâm đến ...