前端开发之Vue 技术栈编写表单组件

前端开发之Vue 技术栈编写表单组件本站　　接下来，我们来创建一个用于发布文章的页面组件，其中还包含了独立的文章发布表单组件，在 Pages 目录下新建 Post 子目录用于存在文章相关页面的组件，然后在该目录下新建 PostCreateForm.Vue 作为表单组件，以及 Create.vue 作为页面组件

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

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

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

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

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

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

　　如果是修改表单的话，你还可以设置 Inertia::render 函数的第二个参数以 props 传递变量数据到页面组件，我们这里是创建表单，所以就没有传递数据。

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

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

　　编译成功后，桌面右上角会有通知弹出，然后到浏览器访问 /post/create 路由，就可以看到上述 Post/Create.vue 页面组件渲染的文章发布页面了（首次访问的话需要注册登录）：

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

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