您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

前端form组件的介绍(laravel11中的breeze的form实现)

发布时间：2024-10-29 14:22:45编辑：雪饮阅读（）

Form组件封装
在laravel11中breeze入门套件中默认用的form组件是原生form组件，这一点可以参考Y:\root\example-app\resources\js\Pages\Auth\Login.vue中form的元素段落。
那么今天这里想要设计的form就是创建一个project的一个form。
参考其我们可以设计并创建其form组件如：
Y:\root\example-app\resources\js\Pages\Project\Partials\UpdateProjectInformationForm.vue
那么我们的实现内容如：
<script setup>
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Link, useForm, usePage } from '@inertiajs/vue3';

defineProps({
    mustVerifyEmail: {
        type: Boolean,
    },
    status: {
        type: String,
    },
});

const user = usePage().props.auth.user;

const form = useForm({
    name: user.name,
    email: user.email,
});
</script>

<template>
    <section>
        <header>
            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                Project Information
            </h2>

            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                Update your account's Project information and email address.
            </p>
        </header>

        <form
            @submit.prevent="form.patch(route('profile.update'))"
            class="mt-6 space-y-6"
        >
            <div>
                <InputLabel for="name" value="Name" />

                <TextInput
                    id="name"
                    type="text"
                    class="mt-1 block w-full"
                    v-model="form.name"
                    required
                    autofocus
                    autocomplete="name"
                />

                <InputError class="mt-2" :message="form.errors.name" />
            </div>

            <div>
                <InputLabel for="email" value="Email" />

                <TextInput
                    id="email"
                    type="email"
                    class="mt-1 block w-full"
                    v-model="form.email"
                    required
                    autocomplete="username"
                />

                <InputError class="mt-2" :message="form.errors.email" />
            </div>

            <div v-if="mustVerifyEmail && user.email_verified_at === null">
                <p class="mt-2 text-sm text-gray-800 dark:text-gray-200">
                    Your email address is unverified.
                    <Link
                        :href="route('verification.send')"
                        method="post"
                        as="button"
                        class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
                    >
                        Click here to re-send the verification email.
                    </Link>
                </p>

                <div
                    v-show="status === 'verification-link-sent'"
                    class="mt-2 text-sm font-medium text-green-600 dark:text-green-400"
                >
                    A new verification link has been sent to your email address.
                </div>
            </div>

            <div class="flex items-center gap-4">
                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>

                <Transition
                    enter-active-class="transition ease-in-out"
                    enter-from-class="opacity-0"
                    leave-active-class="transition ease-in-out"
                    leave-to-class="opacity-0"
                >
                    <p
                        v-if="form.recentlySuccessful"
                        class="text-sm text-gray-600 dark:text-gray-400"
                    >
                        Saved.
                    </p>
                </Transition>
            </div>
        </form>
    </section>
</template>
 
这样将form单独封装成一个组件，因为有的页面可能是有多个form组件进行调用的。比如Y:\root\example-app\resources\js\Pages\Profile\Edit.vue
当然上面我们封装的这个form组件完全是参考UpdateProfileInformationForm.vue的。
这里包含了
表单验证及错误回显：
<InputError class="mt-2" :message="form.errors.email" />
按钮重复点击的禁用：<PrimaryButton :disabled="form.processing">Save</PrimaryButton>
自动完成：
autocomplete="name"
数据绑定：v-model="form.name"
form提交：
<form
    @submit.prevent="form.patch(route('profile.update'))"
    class="mt-6 space-y-6"
>
算是功能比较齐全的了，该form这么多功能，大多依赖于inertiajs
在浩如烟海的前端技术中，Inertia.js是一款新兴且独特的框架，它为现代Web应用提供了全新的构建方式。官方站点inertiajs.com详尽地介绍了这款框架的理念和使用方法。Inertia.js旨在结合单页应用（SPA）的流畅体验与多页应用（MPA）的SEO友好性，为开发者提供一种更优雅的前后端交互解决方案。
 
本期词汇
laravel：一个免费的开源 PHP Web 框架
breeze：微风，和风
profile：（记载个人心理或行为特点、喜好等的）档案
inertia：缺乏活力，惰性