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

由学院君创建于3年前, 最后更新于 3年前版本号 #4 9395 views 0 likes 0 collects

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