[Day 42] 心情隨筆後台及前台(四) - 重新編輯列表頁

心情隨筆後台及前台

當我們新增成功之後,
就會回到列表頁,
這時候我們要補做兩個動作,
一個是把之前沒有處理完的列表處理好,
另外一個是當成功的時候,
要顯示成功的訊息,
這部分之前使用者的時候有做過,
直接貼過來就可以.

首先要在 app/Http/Controllers/AdminController.php 加入result的判斷

//心情隨筆列表頁面
public function mindListPage()
{
    Log::notice('取得心情隨筆列表');
    //先取得自己的資料
    $User = $this->GetUserData();
    //取得心情隨筆列表
    $mindPaginate = Mind::where('user_id', $User->id)-> paginate(5);
    $name = 'mind';

    //接收輸入資料
    $input = request()->all();

    $result = '';
    if(isset($input['result']))
        $result = $input['result'];

    $binding = [
        'title' => ShareData::TITLE,
        'page' => $this->page,
        'name' => $name,
        'User' => $User,
        'mindPaginate' => $mindPaginate,
        'result' => $result,
    ];
    return view('admin.mindlist', $binding);
}

在這裡我們有做分頁的動作,
paginate(5)表示每頁5筆資料,
如果超過就會顯示頁碼,
換頁的動作Laravel會自己處理,
我們可以不用在意.

接著要修改 resources/views/admin/mindlist.blade.php 如下:

<!-- 指定繼承 layout.master 母模板 -->
@extends('layout.master')

<!-- 傳送資料到母模板,並指定變數為title -->
@section('title', $title)

<!-- 傳送資料到母模板,並指定變數為content -->
@section('content')

<div class="normal_form">
    <div class="form_title">心情隨筆列表</div>
    <div class="btn_group">
        <button type="button" class="btn btn-primary btn_form" onclick="AddData()">新增</button>
    </div>
    <div class="table-responsive">
        <table class="table table-hover form_label">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>內容</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach($mindPaginate as $data)
                <tr>
                    <td>{{ $data->created_at }}</td>
                    <td>{{ $data->content }}</td>
                    <td class="right">
                    <button type="button" class="btn btn-success btn_form" onclick="EditData({{ $data->id }})">修改</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        {{-- 分頁頁數按鈕 --}}
        {{ $mindPaginate->links() }}
    </div>
<div>

<link href="/css/iao-alert.css" rel="stylesheet" type="text/css" />
<script src="/js/iao-alert.jquery.js"></script>

<script>
    $( document ).ready(function() {
    <?PHP 
        if($result == "success")
        {
            echo('Success("修改資料成功!")');
        }
    ?>
    });

    //顯示吐司訊息
    function Success(message)
    {
        $.iaoAlert({
            type: "success",
            mode: "dark",
            msg: message,
        })
    }

    //新增心情隨筆
    function AddData()
    {
        location.href = "/admin/mind/add";
    }
    //編輯心情隨筆
    function EditData($id)
    {
        location.href = "/admin/mind/" + $id + "/edit";
    }
</script>
@endsection

當進入心情隨筆頁就會看到
 

https://ithelp.ithome.com.tw/upload/images/20210425/20105694Zc7Lz50GtU.png

而當新增完資料跳回畫面就會看到右上角的成功訊息
 

https://ithelp.ithome.com.tw/upload/images/20210425/20105694N8sVgcyjeX.png