基于 Laravel Jetstream 提供的 Inertia + Vue 技术栈编写表单组件


Laravel 8 引入 Jetstream 作为前端 UI 库

在本月 8 号,Laravel 8.0 正式发布,随后 Vue 3.0 也正式发布,不过围绕 Vue 3 生态的很多库还处于 beta 阶段,所以目前学院君这里的 Vue 实战教程主要还是基于 Vue 2.x,不过后面会花几个篇幅的教程简单介绍下 Vue 3 的新特性。

我们将基于 Laravel + Vue 框架进行项目开发,所以也需要关注下新版本 Laravel 框架前端组件技术栈相关的更新,这里需要注意的是 Laravel 8.0 引入了全新的 Jetstream 扩展包提供前端 UI 脚手架代码,如果你之前使用的是 laravel/ui 包(Laravel 6.0 引入)或者更早版本直接集成在新安装 Laravel 项目中的前端脚手架代码(Laravel 5.3 开始引入 Vue 作为默认前端组件开发框架)开发前端 JavaScript 组件,同时使用 Laravel 默认兼容的 Bootstrap CSS 框架,在 Laravel 8 中这些可能都将不再适用。

Jetstream 是一个为下一代 Laravel 项目全新设计的前端 UI 扩展包,提供了基本的用户认证相关功能和必要的前端开发技术栈,只是这一次 Laravel 默认选择使用 Livewire + Blade 进行前端组件开发(好处是不需要学习 Vue、React 等前端框架,可以完全使用 PHP 代码编写页面组件),同时默认兼容的 CSS 框架也从 Bootstrap 切换到了 Tailwind。当然,Laravel 并不强制你使用这一套技术栈,所以 Jetstream 还提供了另一套基于 Inertia.js + Vue 开发前端组件的技术栈,这样一来,你仍然可以用回之前可能已经熟练掌握的 Vue 框架,对于 Tailwind 框架也是如此,你完全可以切换到其他 CSS 框架,只是 Laravel 官方提供的示例界面代码可能需要重构,或者你完全可以选择不使用 Jetstream,依然使用 laravel/ui 扩展包,或者不用这些官方扩展包,完全自行搭建前端技术栈。

Inertia 技术栈简介

接下来,学院君给大家简单演示下如何基于 Laravel Jetstream 扩展包提供的 Inertia + Vue 技术栈开发前端组件。

注:基于 laravel/ui 扩展包前面已经演示过,在 Laravel Jetstream 中基于 Livewire + Blade 开发前端组件示例则可以参考这篇教程

Inertia.js 支持利用现有服务端框架路由和控制器(目前支持 Laravel 和 Rails 框架),在客户端基于 JavaScript 框架编写组件(目前支持 React、Vue、Svelte)来快速构建单页面应用,因此它不是一个新框架,而是通过适配器粘合前后端框架的「胶水」,构建 Inertia 单页面应用也不像传统的 Vue 单页面应用,我们可以使用现有 Laravel 应用的后端路由来取代 Vue Router,除此之外,依然可以使用 Vue 框架其它的强大功能来构建页面组件,换言之,我们可以使用 Laravel + Vue 编写单页面应用但无需了解复杂的客户端路由技术,在这个技术栈中,Vue 退化成了纯模板语言。

使用 Inertia + Vue 编写单页面组件

初始化 Jetstream + Inertia

开始之前,假设你已经新安装了一个 Laravel 8 项目,然后需要通过 Composer 安装 Jetstream 扩展包:

composer require laravel/jetstream

接下来,初始化带有 Inertia 技术栈的 Jetstream:

php artisan jetstream:install inertia

运行如下代码初始化前端依赖:

npm install && npm run dev

编译成功后,运行数据库迁移命令初始化相关数据表:

php artisan migrate

安装 & 初始化完成后,可以在 resources/js 目录下看到新创建的脚手架组件:

-w1172

所有的 Inertia 页面组件默认位于 Pages 目录下,Jetstream 目录下存放的则是 Jetstream 自带的组件。

基于 Inertia 编写 Vue 页面组件

接下来,我们来创建一个用于发布文章的页面组件,其中还包含了独立的文章发布表单组件,在 Pages 目录下新建 Post 子目录用于存在文章相关页面组件,然后在该目录下新建 PostCreateForm.Vue 作为表单组件,以及 Create.vue 作为页面组件。

友情提示:你可以先阅读 Inertia 官方文档熟悉 Inertia 基本语法,以及 Jetstream Inertia 部分文档了解如何在 Laravel 中编写 Vue 组件。

先来编写表单组件 PostCreateForm.vue

<template>
    <jet-form-section @submitted="storePostInformation">
        <template #title>
            发布新文章
        </template>
        <template #description>
            这里是发布新文章页面
        </template>

        <template #form>
            <div class="col-span-6 sm:col-span-6">
                <jet-label for="title" value="标题" />
                <jet-input id="title" ref="current_title" type="text" v-model="form.title" class="mt-1 block w-full"/>
                <jet-input-error :message="form.error('title')" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-6">
                <jet-label for="author" value="作者" />
                <jet-input id="author" type="text" v-model="form.author" class="mt-1 block w-full"/>
                <jet-input-error :message="form.error('author')" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-6">
                <jet-label for="body" value="内容" />
                <textarea rows="5" id="body" class="form-input rounded-md shadow-sm mt-1 block w-full">{{ form.body }}</textarea>
                <jet-input-error :message="form.error('body')" class="mt-2" />
            </div>
        </template>

        <template #actions>
            <jet-button>
                立即发布
            </jet-button>
        </template>
    </jet-form-section>
</template>

<script>
import JetLabel from './../../Jetstream/Label'
import JetButton from './../../Jetstream/Button'
import JetInput from './../../Jetstream/Input'
import JetInputError from './../../Jetstream/InputError'
import JetFormSection from './../../Jetstream/FormSection'

export default {
    components: {
        JetLabel,
        JetButton,
        JetInput,
        JetInputError,
        JetFormSection
    },

    data() {
        return {
            form: this.$inertia.form({
                title: '',
                author: '',
                body: '',
            }, {
                bag: 'storePostInformation',
            })
        }
    },
    methods: {
        storePostInformation() {
            this.form.post('/post', {
                preserveScroll: true
            }).then(() => {
                this.$refs.current_title.focus()
            });
        }
    }
}
</script>

就是一个正常的 Vue 单文件组件,只是应用了 Inertia 内置的 API 方法来提交表单,以及渲染表单验证错误信息。

然后在 Create.vue 中引入这个表单组件渲染发布文章页面:

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                发布文章
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <post-create-form />
                <jet-section-border />
            </div>
        </div>
    </app-layout>
</template>

<script>
import AppLayout from './../../Layouts/AppLayout'
import JetSectionBorder from './../../Jetstream/SectionBorder'
import PostCreateForm from "./PostCreateForm";

export default {
    components: {
        AppLayout,
        JetSectionBorder,
        PostCreateForm
    },
}
</script>

在这个页面组件中,使用了 Jetstream 提供的 AppLayout 组件进行页面布局。至此,就完成了前端页面开发。

编写后端路由和控制器代码

最后,我们需要在 Laravel 应用后端注册路由和对应的控制器方法,来完成前端页面组件的渲染以及与后端的接口交互。

控制器方法

首先创建一个 PostController 控制器:

php artisan make:controller PostController 

分别编写 create 方法用于渲染发布文章页面组件以及 store 方法用于处理表单提交数据的验证和处理:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Inertia\Inertia;

class PostController extends Controller
{
    // 渲染 Inertia 页面组件
    public function create(Request $request)
    {
        return Inertia::render('Post/Create');
    }

    // 处理表单组件提交的数据
    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required', 'max:255'],
            'author' => ['required'],
            'body' => ['required'],
        ], [
            'required' => ':attribute 字段不能为空'
        ])->validateWithBag('storePostInformation');

        // @todo 验证通过,保存文章数据...
    }
}

store 方法很简单,只是处理了表单提交数据的验证,具体语法可以参考 Laravel 验证文档create 方法则使用了 Jetstream 提供的语法实现 Inertia 页面组件的渲染,这里我们只需要像渲染 Blade 视图模板一样,渲染基于 Inertia 编写的 Vue 页面组件即可,非常方便,前面我们提到过这些页面组件默认存放在 resources/js/Pages 目录下,所以这里会去该目录下定位 Post/Create.vue 页面组件进行渲染。

如果是修改表单的话,你还可以设置 Inertia::render 函数的第二个参数以 props 方式传递变量数据到页面组件(可以参考 Jetstream 自带的 Profile/Show 组件相关实现),我们这里是创建表单,所以就没有传递数据。

注册路由

然后在 routes/web.php 中注册上述控制器方法对应的路由:

use App\Http\Controllers\PostController;

Route::group(['middleware' => config('jetstream.middleware', ['web'])], function () {
    Route::group(['middleware' => ['auth', 'verified']], function () {
        Route::get('/post/create', [PostController::class, 'create']);
        Route::post('/post', [PostController::class, 'store']);
    });
});

由于我们在 Vue 页面组件中使用了 AppLayout 这个布局组件,其中涉及了需要认证用户信息的渲染,所以这里需要应用相关的认证中间件。

使用 Vue 组件渲染页面发布文章

如果是在本地开发的话,建议运行 npm run watch 监听前端代码修改并自动编译,这样前端资源文件的调整可以立即生效,我们这里运行这个命令编译前端资源。

编译成功后,桌面右上角会由通知弹出,然后到浏览器访问 /post/create 路由(假设域名是 blog.test,对应的 URL 就是 http://blog.test/post/create),就可以看到上述 Post/Create.vue 页面组件渲染的文章发布页面了(首次访问的话需要注册登录):

-w1269

我们尝试填写一些字段,然后提交,会由报错提示:

-w852

说明页面组件和表单组件都已经可以正常渲染和工作。

小结

好了,以上就是基于 Laravel 8 新引入的 Jetstream 扩展包提供的 Inertia 技术栈编写 Vue 页面组件的简单示例,如果你对基于 Livewire 技术栈编写 Blade 页面组件感兴趣,可以查看同一功能的实现实例

尽管 Laravel 中提供了这样的对新手更加友好的前端组件开发快速入门解决方案,不过接下来我们还是要完成基于纯 Vue 语法来编写表单组件,你可以对比选择适用自己的技术方案。


Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 通过 Axios 发送 Ajax 请求获取接口数据渲染组件

>> 下一篇: 基于 Laravel Jetstream 提供的 Livewire + Blade 技术栈编写表单组件