第六章 帖子的 CRUD

chant發表於2019-10-20

6.1 新建話題

直接按照教程裡的順序做完，腦子裡還是一片空白，為什麼要這樣做，為什麼要那樣做，自己無法完全理解，所以自己嘗試整理一下思路。

第六章 帖子的CRUD

本小節的教學指導思路由上圖所示。

在我全部做完後，vs code 內的 git 管理器記錄了以下的檔案改動

第六章 帖子的CRUD

兩個圖片進行關聯分析，再結合修改了的程式碼對比提示，便可更加清晰地理解了該節的業務程式碼編寫思路。

1.頁面跳轉和使用者驗證

首先是在_header.blade.php 和 _sidebar.blade.php 內設計編寫一個進入帖子新建編輯器的網頁入口，即 create_and_edit.blade.php ,進入編輯話題的頁面前其實已經經過了使用者驗證，只有通過了是已登入使用者才能夠進入該頁面，具體實現在 TopicsController.php 內的__construct()方法。

2.編輯表單的關聯模型

進入了create_and_edit.blade.php頁面後，首先發現必須將一些重要的模型屬性進行管理，所以修改模型檔案 Topic.php，然後對該頁面進行修改，主要是修改樣式表示、錯誤提示會話、還有調整了整個編輯器的表單內容，其中：

  • 呼叫了分類模型的資料 $categories，所以要在TopicsController.php 內的create()方法加上關於category模型的呼叫。

在點選了儲存後，Laravel 還做了哪些工作呢？

3.觀察器的使用

點選儲存後，首先使用了觀察器TopicObservers.php對 Eloquent 模型發生的事件進行監控，這些事件包括creating, created, updating, updated, saving（本次監控的事件）, saved, deleting, deleted, restoring, restored 等。其中我們在觀察器中對 saving 事件進行監控，監控內容是這個事件進行時，使用自定義的make_excerpt輔助函式。

4.輔助函式的編寫

4.在helpers.php內對錶單內的主要內容部分進行了make_excerpt輔助函式功能的編寫，主要是在用trim()函式移除字串兩側的空白字元或其他預定義字元，然後傳回。

5.表單驗證請求的規則和提示

對錶單內的內容和標題進行了驗證要求，所以要在TopicsRequeset.php 內進行表單驗證和錯誤提示內容。

6.Topic 例項賦值驗證和儲存

表單驗證的邏輯還要繼續，驗證通過後，要在TopicsController.php 內的store()方法中，用$Request 的內容給 $Topic賦值、Auth驗證、儲存進資料庫，最後控制器返回topics.show即完成該邏輯。

6.2 編輯器優化

待補充

6.3 上傳圖片

1.前端js呼叫

根據 編輯器上傳圖片文件 的要求，在前端頁面 create_and_edit.blade.php 內加上一段js內容

2.伺服器端控制器方法內的業務邏輯

在控制器TopicsController.php內運用之前上傳頭像用的函式ImageUploadHandler（見4.4章），根據編輯器上傳圖片的json格式要求，可以判斷上傳圖片的使用者許可權（之前寫的__construct），接受上傳的圖片並儲存在本地，最後使用返回該編輯器要求的json格式。

3.路由檔案編寫

  <script>
    $(document).ready(function() {
          .
          url: '{{ route('topics.upload_image') }}',
          .
      });
    });
  </script>

在前端頁面編寫的script指令碼中有一段url連線，因此需要對此進行路由檔案的編寫，如下：

Route::post('upload_image', 'TopicsController@uploadImage')->name('topics.upload_image');

代表這段script指令碼將通過url訪問抵達TopicsController.php的uploadImage方法，然後經過第二點中的過程處理返回json完成反饋。

4.新增在TopicsController控制器中uploadImage方法

根據編輯器上傳圖片文件的json要求：

{
  "success": true/false,
  "msg": "error message", # optional
  "file_path": "[real file path]"
}

在uploadImage方法中返回對應上文json格式的資料將會被自動解析為JSON，在控制器TopicsController.php內運用之前上傳頭像用的函式ImageUploadHandler（見4.4章），根據編輯器上傳圖片的json格式要求，可以判斷上傳圖片的使用者許可權（之前寫的__construct），接受上傳的圖片並儲存在本地，最後使用返回該編輯器要求的json格式。

    public function uploadImage(Request $request, ImageUploadHandler $uploader)
    {
        // 初始化返回資料，預設是失敗的
        $data = [
            'success'   => false,
            'msg'       => '上傳失敗!',
            'file_path' => ''
        ];
        // 判斷是否有上傳檔案，並賦值給 $file
        if ($file = $request->upload_file) {
            // 儲存圖片到本地
            $result = $uploader->save($request->upload_file, 'topics', \Auth::id(), 1024);
            // 圖片儲存成功的話
            if ($result) {
                $data['file_path'] = $result['path'];
                $data['msg']       = "上傳成功!";
                $data['success']   = true;
            }
        }
        return $data;
    }

5.許可權控制

許可權控制要求只允許登入的使用者才能上傳圖片，控制器的__construct裡做了中介軟體認證，預設需要登入許可權。

6.4 顯示帖子

1.

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章