iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 19

Day 19 | Livewire 實作 Todo List(一): 新增待辦事項

先祝各位中秋節快樂~連假過後該收心了所以今天就來做一個待辦清單吧!順便熟悉一下 Livewire 的使用方法,這裡會依照功能拆成三天來做。

需求規劃

首先先預想要有哪些功能:

  1. 能輸入待辦事項
  2. 顯示待辦事項列表
  3. 點擊待辦事項要能讓他顯示為完成
  4. 能刪除待辦事項
  5. 能查其他日期的待辦事項

擬定好大致需求後,接下來就按照順序下來實作囉!

功能一、輸入待辦事項

首先,一樣先把畫面刻好

因為寫文章的關係,就先做輸入部分的畫面就好。不然平常我會先把畫面全都弄出來後,再來才會處理後端資料的串接,如果有設計師配合也是這種節奏。

https://ithelp.ithome.com.tw/upload/images/20210921/20111805ML2MnO20Tq.png

<div class="flex justify-center">
  <div class="rounded shadow-md bg-grey-50 border-2 w-96 p-4">
    <!-- Title -->
    <div class="text-2xl font-extralight">待辦清單</div>
    <!-- Input -->
    <div class="ui action fluid input my-2">
      <input type="text" placeholder="把今天要做的寫在這裡...">
      <button class="ui icon button">
        <i class="send icon"></i>
      </button>
    </div>
  </div>
</div>

建立後端資料

我們需要準備一個 $title 變數讓前端的 <input> 能夠填輸入的值。

接著宣告一個簡易的驗證 $rules,這邊就把 $title 設為 必填 required 就好。

class Todo extends Component
{
    public $title;

    protected $rules = [
        'title' => 'required'
    ];
    ...
}
保存輸入的內容:

這裡會透過 $this->validate()驗證 $rules 中的所有內容,並存入 todos 資料表。

由於這個 Livewire 的 ClassName 會與 Model 的 ClassName 一樣導致衝突,因此在上方引入 Model 時記得幫他改名字,如下:

use App\Models\Todo as TodoModel;

public function addTodo()
{
    // 驗證
    $validatedData = $this->validate();
    TodoModel::create($validatedData);

    // 清空剛剛輸入的值
    $this->title = null;
}

前端填上 Livewire

後端的部分準備完成就可以再到前端頁面把 PHP 的語法補上,讓網頁能夠動起來!

<div class="rounded shadow-md bg-grey-50 border-2 w-96 p-4">
    <!-- Title -->
    <div class="text-2xl font-extralight">待辦清單</div>
    <!-- Input -->
    <div class="ui action fluid input my-2">
      <input type="text" placeholder="把今天要做的寫在這裡..." wire:model.defer="title">
      <button class="ui icon button" wire:click="addTodo">
        <i class="send icon"></i>
      </button>
    </div>
</div>

由於我們有做資料輸入的驗證,這邊也讓他能顯示驗證失敗的內容

https://ithelp.ithome.com.tw/upload/images/20210921/20111805f2eUeGLXtN.png

@if($errors->has('title'))
	<span class="text-sm text-red-500">*待辦事項欄位必填</span>
@endif

功能二、顯示待辦事項列表

能正常輸入後就要來顯示列表啦!

一樣也是先刻畫面

這裡順便把未來要刪除的垃圾桶按鈕也做出來!

https://ithelp.ithome.com.tw/upload/images/20210921/20111805gfklleDk19.png

<div class="grid grid-cols-6 mt-3">
  <div class="col-span-5">
    <label>測試待辦事項</label>
  </div>
  <div class="text-right">
    <i class="trash icon text-gray-300"></i>
  </div>
</div>

從後端拿取資料

未來會在這個頁面新增、修改、刪除,因此很適合用 計算屬性 Computed 來拿 todos 資料表的內容,這樣才不用每動一次就手動更新頁面資料一次。

因為之後的日積月累會讓資料表中有很多筆不同天的資料,所以我們就下條件只拿今天的就好。

注意:計算屬性 Computed 的函式名稱中的 get***Property 是固定的

public function getTodoProperty()
{
    return TodoModel::whereDate('created_at', date('Y-m-d'))->get();
}

回填到前端

資料會有很多筆,一樣用迴圈把所有的資料都印出來。

注意:因為是用計算屬性拿出來的,因此才會用 $this->todo 去拿值

@foreach ($this->todo as $item)
    <div class="grid grid-cols-6 mt-3">
      <div class="col-span-5">
        <label>{{ $item->title }}</label>
      </div>
      <div class="text-right">
        <i class="trash icon text-gray-300"></i>
      </div>
    </div>
@endforeach

這樣輸入跟顯示的部分就完成啦!接下來的內容我們就明天見囉!


上一篇
Day 18 | 常用範例:表格分頁 Pagination 前後端做好只需三分鐘!?
下一篇
Day 20 | Livewire 實作 Todo List(二): 完成/刪除待辦事項
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言