Laravel9 & Inertia & Vue3 构建单页 SPA CURD 页面演示案例

作者: 温新

分类: 【Laravel】

阅读: 3251

时间: 2022-08-07 15:04:00

hi,我是温新,一名PHPer

积极拥抱变化,不要止步不前

版本:Laravel9.3.1

时间:2022-08-07

Laravel9 已经使用 Vite 前端工具来构建应用,习惯了原有的方式时,再来使用 Vite 新工具,似乎有点不太会用了,一切都好像变了,但一切都好像又没变。一股熟悉的陌生感迎面而来。就以本篇文章作为拥抱新变化的开始吧!

目标:本篇文章将使用 Laravel9 & Inertia Js & Vue3 来构建一个 CURD 简单的 SPA 应用。

第一步:创建项目并配置数据库

1)创建项目

<span style="color: rgb(255, 192, 0);">composer create-project laravel/laravel la9vue3</span><br></br>

2)配置数据库

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// .env</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_DATABASE</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">la9vue3</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_USERNAME</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">la9vue3</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_PASSWORD</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">la9vue3</span></span>

第二步:安装 breeze & inertia js & vue3

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">composer</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">require</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">laravel</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">breeze</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">dev</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">artisan</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">breeze</span>:<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">install</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">vue</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">npm</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">install</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">&&</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">npm</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">run</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">dev</span> </span>

第三步:创建 Post 模型 迁移文件 控制器

1)创建 Post 相关文件

<span style="color: rgb(255, 192, 0);">php artisan make:model Post -mcr</span><br></br>

2)编写迁移文件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// database/migrations/2022_08_07_131142_create_posts_table.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Migrations\Migration</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Schema\Blueprint</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Support\Facades\Schema</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Migration</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">up</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Schema</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">create</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Blueprint</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">bigIncrements</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'id'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">string</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">string</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'slug'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">unique</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">text</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">timestamps</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">down</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Schema</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">dropIfExists</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">};</span>

2)修改 Post 模型文件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// app/Models/Post.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Models</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Eloquent\Model</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Post</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Model</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">protected</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$fillable</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'slug'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span>];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

3)添加路由

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// routes/web.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Foundation\Application</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Support\Facades\Route</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia\Inertia</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">get</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">render</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Welcome'</span>, [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'canLogin'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">has</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'login'</span>),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'canRegister'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">has</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'register'</span>),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'laravelVersion'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Application</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">VERSION</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'phpVersion'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">PHP_VERSION</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">});</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">get</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/dashboard'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">render</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Dashboard'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">middleware</span>([<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'auth'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'verified'</span>])<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'dashboard'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 添加 posts 资源路由</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resource</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">\App\Http\Controllers\PostController</span>::<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">require</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__DIR__</span>.<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/auth.php'</span>;</span>

4)编写 PostController 控制器

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// app/Http/Controllers/PostController.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Http\Controllers</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App\Models\Post</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Http\Request</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Support\Str</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia\Inertia</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">PostController</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Controller</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">index</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$posts</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">all</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">render</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post/Index'</span>, <span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">compact</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">create</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">render</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post/Create'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">store</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Request</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">validate</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required|string|max:255'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'slug'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required|string|max:255'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">create</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'slug'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Str</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">redirect</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.index'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">with</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post Created Successfully'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">edit</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Inertia</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">render</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post/Edit'</span>, <span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">compact</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts'</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">update</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Request</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">validate</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'title'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required|string|max:255'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'slug'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required|string|max:255'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Str</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">save</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">redirect</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'$post.index'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">with</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post Updated Successfully'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">destroy</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$post</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">delete</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">redirect</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.index'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">with</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Post Delete Successfully'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

第四步:创建 Vue 视图文件

1)创建 Index.vue。resources/js/Pages/Posts/Index.vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"@/Components/Button.vue"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> { <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Head</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">useForm</span> } <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'@inertiajs/inertia-vue3'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 接收控制器数据</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineProps</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">posts</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Object</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span>: () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> ({}),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">useForm</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">destroy</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">confirm</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Are you sure you want to Delete"</span>)) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">delete</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'posts.destroy'</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Head</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Post list"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeAuthenticatedLayout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">#header></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xl font-semibold leading-tight text-gray-800"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">List</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"py-12"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mx-auto max-w-7xl sm:px-6 lg:px-8"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"overflow-hidden bg-white shadow-sm sm:rounded-lg"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"p-6 bg-white border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-2"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span> :<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"route('posts.create')"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">添加文章</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"relative overflow-x-auto shadow-md sm:rounded-lg"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">table</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"w-full text-sm text-left text-gray-500 dark:text-gray-400"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">thead</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"col"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">#</th></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"col"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Title</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"col"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Slug</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"col"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Edit</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"col"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-3"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">thead</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tbody</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"post in posts"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    :<span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">key</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"post.id"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-white border-b dark:bg-gray-800 dark:border-gray-700"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"row"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scope</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"row"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">th</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span> :<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"route('posts.edit',post.id)"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-4 py-2 text-white bg-blue-600 rounded-lg"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">编辑</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"px-6 py-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-red-700"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@click</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"destroy(post.id)"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">删除</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">td</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tr</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tbody</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">table</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeAuthenticatedLayout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

2)创建 Create.vue。resources/js/Pages/Posts/Create.vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"@/Components/Button.vue"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> { <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Head</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">useForm</span> } <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'@inertiajs/inertia-vue3'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineProps</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">posts</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Object</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span>: () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> ({}),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">useForm</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">''</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">''</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">''</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">submit</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Posts.store"</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    };</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Head</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Post Create"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeAuthenticatedLayout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">#header></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xl font-semibold leading-tight text-gray-800"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">添加文章</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"py-12"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mx-auto max-w-7xl sm:px-6 lg:px-8"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"overflow-hidden bg-white shadow-sm sm:rounded-lg"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"p-6 bg-white border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@submit</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">prevent</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"submit"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-6"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">""</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.errors.title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm text-red-600"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">errors</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-6"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Slug</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">""</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.errors.slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm text-red-600"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">errors</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-6"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.content"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"content"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">""</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.errors.content"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm text-red-600"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">errors</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"ml-4 mt-4"</span> :<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{ 'opacity-25': form.processing }"</span> :<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">disabled</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.processing"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                               <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">创建文章</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeAuthenticatedLayout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

3)创建 Edit.vue。resources/js/Pages/Posts/Edit.vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Head</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Post Edit"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeAuthenticatedLayout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">#header></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-xl font-semibold leading-tight text-gray-800"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">编辑文章</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">h2</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"py-12"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mx-auto max-w-7xl sm:px-6 lg:px-8"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"overflow-hidden bg-white shadow-sm sm:rounded-lg"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"p-6 bg-white border-b border-gray-200"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@submit</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">prevent</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"submit"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-6"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">""</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.errors.title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm text-red-600"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">errors</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-6"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Slug</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">input</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"title"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">placeholder</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">""</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.errors.slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm text-red-600"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">errors</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"mb-6"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">for</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"slug"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">model</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.content"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"content"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">""</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">textarea</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.errors.content"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-sm text-red-600"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">errors</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"ml-4 mt-4"</span> :<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{ 'opacity-25': form.processing }"</span> :<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">disabled</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"form.processing"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">修改</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeAuthenticatedLayout</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">template</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">BreezeButton</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"@/Components/Button.vue"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> { <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Head</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Link</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">useForm</span> } <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'@inertiajs/inertia-vue3'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineProps</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Object</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span>: () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> ({}),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">useForm</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">slug</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">submit</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">put</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">route</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"posts.update"</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">props</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>));</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    };</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">style</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scoped</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">style</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

这一个简单的案例到这里就已经完成了。

第五步:总结

这个案例使用了 Inertia Js & Vue3 & Tailwind CSS,从中可以看出,应用的构建发生了巨大的变化,初次转过来时,可能会有种难度加大的感觉,除了这个种感觉外,还会有种新颖强大的感觉。

后面,通过更多的案例走进新的世界。

请登录后再评论