在线伊人大香蕉,气质女人操逼,五月婷婷综合在线,高清无码视频观看,婷婷激情丁香五月天,天天操人人,中文字幕在线不卡视频,欧美精品中文字幕在线观看

Laravel 8 引入 Jetstream 作為前端 UI 庫

在本月 8 號(hào)，Laravel 8.0 正式發(fā)布，隨后 Vue 3.0?也正式發(fā)布，不過圍繞 Vue 3 生態(tài)的很多庫還處于 beta 階段，所以目前學(xué)院君這里的 Vue 實(shí)戰(zhàn)教程主要還是基于 Vue 2.x，不過后面會(huì)花幾個(gè)篇幅的教程簡(jiǎn)單介紹下 Vue 3 的新特性。

我們將基于 Laravel + Vue 框架進(jìn)行項(xiàng)目開發(fā)，所以也需要關(guān)注下新版本 Laravel 框架前端組件技術(shù)棧相關(guān)的更新，這里需要注意的是 Laravel 8.0 引入了全新的 Jetstream 擴(kuò)展包提供前端 UI 腳手架代碼，如果你之前使用的是 laravel/ui 包（Laravel 6.0 引入）或者更早版本直接集成在新安裝 Laravel 項(xiàng)目中的前端腳手架代碼（Laravel 5.3 開始引入 Vue 作為默認(rèn)前端組件開發(fā)框架）開發(fā)前端 JavaScript 組件，同時(shí)使用 Laravel 默認(rèn)兼容的 Bootstrap CSS 框架，在 Laravel 8 中這些可能都將不再適用。

Jetstream 是一個(gè)為下一代 Laravel 項(xiàng)目全新設(shè)計(jì)的前端 UI 擴(kuò)展包，提供了基本的用戶認(rèn)證相關(guān)功能和必要的前端開發(fā)技術(shù)棧，只是這一次 Laravel 默認(rèn)選擇使用 Livewire + Blade 進(jìn)行前端組件開發(fā)（好處是不需要學(xué)習(xí) Vue、React 等前端框架，可以完全使用 PHP 代碼編寫頁面組件），同時(shí)默認(rèn)兼容的 CSS 框架也從 Bootstrap 切換到了 Tailwind。

當(dāng)然，Laravel 并不強(qiáng)制你使用這一套技術(shù)棧，所以 Jetstream 還提供了另一套基于 Inertia.js + Vue 開發(fā)前端組件的技術(shù)棧，這樣一來，你仍然可以用回之前可能已經(jīng)熟練掌握的 Vue 框架，對(duì)于 Tailwind 框架也是如此，你完全可以切換到其他 CSS 框架，只是 Laravel 官方提供的示例界面代碼可能需要重構(gòu)，或者你完全可以選擇不使用 Jetstream，依然使用 laravel/ui 擴(kuò)展包，或者不用這些官方擴(kuò)展包，完全自行搭建前端技術(shù)棧。

Inertia 技術(shù)棧簡(jiǎn)介

接下來，學(xué)院君給大家簡(jiǎn)單演示下如何基于 Laravel Jetstream 擴(kuò)展包提供的 Inertia + Vue 技術(shù)棧開發(fā)前端組件。

注：基于 laravel/ui 擴(kuò)展包前面已經(jīng)演示過，在 Laravel Jetstream 中基于 Livewire + Blade 開發(fā)前端組件示例則可以參考這篇教程。

Inertia.js?支持利用現(xiàn)有服務(wù)端框架路由和控制器（目前支持 Laravel 和 Rails 框架），在客戶端基于 JavaScript 框架編寫組件（目前支持 React、Vue、Svelte）來快速構(gòu)建單頁面應(yīng)用，因此它不是一個(gè)新框架，而是通過適配器粘合前后端框架的「膠水」，構(gòu)建 Inertia 單頁面應(yīng)用也不像傳統(tǒng)的 Vue 單頁面應(yīng)用，我們可以使用現(xiàn)有 Laravel 應(yīng)用的后端路由來取代 Vue Router，除此之外，依然可以使用 Vue 框架其它的強(qiáng)大功能來構(gòu)建頁面組件，換言之，我們可以使用 Laravel + Vue 編寫單頁面應(yīng)用但無需了解復(fù)雜的客戶端路由技術(shù)，在這個(gè)技術(shù)棧中，Vue 退化成了純模板語言。

使用 Inertia + Vue 編寫單頁面組件

初始化 Jetstream + Inertia

開始之前，假設(shè)你已經(jīng)新安裝了一個(gè) Laravel 8 項(xiàng)目，然后需要通過 Composer 安裝 Jetstream 擴(kuò)展包：

composer require laravel/jetstream

接下來，初始化帶有 Inertia 技術(shù)棧的 Jetstream：

php artisan jetstream:install inertia

運(yùn)行如下代碼初始化前端依賴：

npm install && npm run dev

編譯成功后，運(yùn)行數(shù)據(jù)庫遷移命令初始化相關(guān)數(shù)據(jù)表：

php artisan migrate

安裝 & 初始化完成后，可以在 resources/js 目錄下看到新創(chuàng)建的腳手架組件：

所有的 Inertia 頁面組件默認(rèn)位于 Pages 目錄下，Jetstream 目錄下存放的則是 Jetstream 自帶的組件。

基于 Inertia 編寫 Vue 頁面組件

接下來，我們來創(chuàng)建一個(gè)用于發(fā)布文章的頁面組件，其中還包含了獨(dú)立的文章發(fā)布表單組件，在 Pages 目錄下新建 Post 子目錄用于存在文章相關(guān)頁面組件，然后在該目錄下新建 PostCreateForm.Vue 作為表單組件，以及 Create.vue 作為頁面組件。

友情提示：你可以先閱讀 Inertia 官方文檔熟悉 Inertia 基本語法，以及 Jetstream Inertia 部分文檔了解如何在 Laravel 中編寫 Vue 組件。

先來編寫表單組件 PostCreateForm.vue：

就是一個(gè)正常的 Vue 單文件組件，只是應(yīng)用了 Inertia 內(nèi)置的 API 方法來提交表單，以及渲染表單驗(yàn)證錯(cuò)誤信息。

然后在 Create.vue 中引入這個(gè)表單組件渲染發(fā)布文章頁面：

<template>    <app-layout>        <template #header>            <h2 class="font-semibold text-xl text-gray-800 leading-tight">                發(fā)布文章            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>

在這個(gè)頁面組件中，使用了 Jetstream 提供的 AppLayout 組件進(jìn)行頁面布局。至此，就完成了前端頁面開發(fā)。

編寫后端路由和控制器代碼

最后，我們需要在 Laravel 應(yīng)用后端注冊(cè)路由和對(duì)應(yīng)的控制器方法，來完成前端頁面組件的渲染以及與后端的接口交互。

控制器方法

首先創(chuàng)建一個(gè) PostController 控制器：

php artisan make:controller PostController

分別編寫 create 方法用于渲染發(fā)布文章頁面組件以及 store 方法用于處理表單提交數(shù)據(jù)的驗(yàn)證和處理：


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');    }
    // 處理表單組件提交的數(shù)據(jù)    public function store(Request $request){        Validator::make($request->all(), [            'title' => ['required', 'max:255'],            'author' => ['required'],            'body' => ['required'],        ], [            'required' => ':attribute 字段不能為空'        ])->validateWithBag('storePostInformation');
        // @todo 驗(yàn)證通過，保存文章數(shù)據(jù)...    }}

store?方法很簡(jiǎn)單，只是處理了表單提交數(shù)據(jù)的驗(yàn)證，具體語法可以參考 Laravel?驗(yàn)證文檔，create 方法則使用了 Jetstream 提供的語法實(shí)現(xiàn) Inertia 頁面組件的渲染，這里我們只需要像渲染 Blade 視圖模板一樣，渲染基于 Inertia 編寫的 Vue 頁面組件即可，非常方便，前面我們提到過這些頁面組件默認(rèn)存放在 resources/js/Pages 目錄下，所以這里會(huì)去該目錄下定位 Post/Create.vue 頁面組件進(jìn)行渲染。

如果是修改表單的話，你還可以設(shè)置 Inertia::render 函數(shù)的第二個(gè)參數(shù)以 props 方式傳遞變量數(shù)據(jù)到頁面組件（可以參考 Jetstream 自帶的 Profile/Show 組件相關(guān)實(shí)現(xiàn)），我們這里是創(chuàng)建表單，所以就沒有傳遞數(shù)據(jù)。

注冊(cè)路由

然后在 routes/web.php 中注冊(cè)上述控制器方法對(duì)應(yīng)的路由：

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

由于我們?cè)?Vue 頁面組件中使用了 AppLayout 這個(gè)布局組件，其中涉及了需要認(rèn)證用戶信息的渲染，所以這里需要應(yīng)用相關(guān)的認(rèn)證中間件。

使用 Vue 組件渲染頁面發(fā)布文章

如果是在本地開發(fā)的話，建議運(yùn)行 npm run watch 監(jiān)聽前端代碼修改并自動(dòng)編譯，這樣前端資源文件的調(diào)整可以立即生效，我們這里運(yùn)行這個(gè)命令編譯前端資源。

編譯成功后，桌面右上角會(huì)由通知彈出，然后到瀏覽器訪問?/post/create 路由（假設(shè)域名是 blog.test，對(duì)應(yīng)的 URL 就是 http://blog.test/post/create），就可以看到上述 Post/Create.vue 頁面組件渲染的文章發(fā)布頁面了（首次訪問的話需要注冊(cè)登錄）：

我們嘗試填寫一些字段，然后提交，會(huì)由報(bào)錯(cuò)提示：

說明頁面組件和表單組件都已經(jīng)可以正常渲染和工作。

小結(jié)

好了，以上就是基于 Laravel 8 新引入的 Jetstream 擴(kuò)展包提供的 Inertia 技術(shù)棧編寫 Vue 頁面組件的簡(jiǎn)單示例，如果你對(duì)基于 Livewire 技術(shù)棧編寫 Blade 頁面組件感興趣，可以查看同一功能的實(shí)現(xiàn)實(shí)例。

盡管 Laravel 中提供了這樣的對(duì)新手更加友好的前端組件開發(fā)快速入門解決方案，不過接下來我們還是要完成基于純 Vue 語法來編寫表單組件，你可以對(duì)比選擇適用自己的技術(shù)方案。

本文完?

【Vue.js入門到實(shí)戰(zhàn)教程】14-基于 Laravel Jetstream 的Vue 技術(shù)棧編寫表單組件