ハッピーメモメモ

私的備忘録

【Vue】【Laravel】作品(indexアクション)

役割分担

book_information テーブル

・書籍情報をみたいとき

・リレーション前の一覧

books テーブル

・書籍とそれに紐づく書籍情報をみたいとき

・リレーション後の一覧(リレーション前の一覧は要らなそう)

 

本の一覧(belongs to)

①/list にアクセス

②router.jsをみにいく

③Vue コンポーネント「ListP」へ

④axiosで以下へアクセス

http://127.0.0.1:8000/api/books

URIの結果を確認したいときは、別のページに直接URIを入力するとJSONデータがでてくるよ!

→最後の「books」は、自力でかくならコントローラ名を指定する部分なのかな?

⑤決まったルーティングによって、Laravel コントローラ「BookController」のindexアクションがうごく

    public function index()
    {        
        $books = Book::all();
        $books_relation=;
        foreach ($books as $book) {
            array_push($books_relation,$book->book_information);
        }
        // eloquantをそのままreturnすると、jsonに変換してくれる。
        return $books_relation;
    }

⑥URLに結果を返す(表示される)

⑦Vueに結果が返ってくる

⑧Vue コンポーネント「ListC」でデータを表示したいかたちに加工する

 

本の一覧(has many)

①~④ 略

⑤決まったルーティングによって、Laravel コントローラ「BookInformationController」のindexアクションがうごく

    public function index()
    {
        $book_informations = BookInformation::all();
        $books_all=;
        foreach ($book_informations as $book_information) {

            // hasMany()のリレーションを分解
            foreach ($book_information->books as $book) {

                // ループ毎に初期化
                $books_relation=;

                // その本の情報をいれる
                array_push($books_relation, $book_information);

                // (複数ある本の)それぞれの情報を追加
                array_push($books_relation, $book);
         
                // APIで渡す配列に追加
                array_push($books_all, $books_relation);
            }
        }
        return $books_all;


        // 書籍情報一覧用に書いてたもの
        // $books = BookInformation::all();
        // return $books;
    }

 

 ~~以下、詳細解説~~

 

 BookInformationモデルの集合体を変数$book_informationsにいれる。

 ※ここで、変数$book_informationsはモデルではなく、モデルがいっぱいはいった

  配列であることに注意する!

        $book_informations = BookInformation::all();

 渡したいJSONデータをいれる配列を定義する

        $books_all=;

 配列$book_informationsをバラして、$book_informationにする。

 →これで配列モデルになった!!

  モデルに定義したメソッドが使える状態になった!

  リレーションができる~~!!

        foreach ($book_informations as $book_information) {

 $book_informationモデルに、booksメソッドを適用してリレーションをかける

 →一つの書籍情報に対して、同じ本が何冊かある可能性があるので、

  これは配列となる!

 →なので更にバラします。

            foreach ($book_information->books as $book) {

 バラしにバラした情報をいれる配列を定義

 (配列を配列にはぶちこめないもんね)

 そしてこれはループの度に初期化される!

                $books_relation=[];

 配列に本の情報をいれる

                array_push($books_relation, $book_information);

 配列に1冊ごとの本の情報を追加

                array_push($books_relation, $book);

 ?これだけでいいんじゃないの?

 →dd($book);で確認してみると$bookにはBookモデルの情報しか入っていない

  ことが判明!だからべっこに$book_informationも配列にいれなきゃなんだね…!

f:id:n-moeko1966:20220112160836p:plain

 最後に、バラした内容をいれた配列を返却データをまとめるための配列に追加!

 これで連想配列ができるよ~!

                array_push($books_all, $books_relation);

 これで返却完了!

            }
        }
        return $books_all;

【途中確認】

・サーバーが動いているか確認する

→アクションを起こしたときに、Vscodeターミナル「php」の履歴は増えているかチェック

・一行書いた内容に対して、dd()で求めた内容が入ったか確認する。使い方は基本的にコンソールログと同じ

→一行目にモデルなのか、Eloquentなのか、コレクションなのか、そいつの正体が書いてあるのでそれを確認するのも大事!

連想配列で2個目以降の配列が詳しくみれないな…ってときがあるけど、配列名[1]とかでみれば中身が確認できるから大丈夫!

→foreachを何度も繰り返していると、どこになにをかいていいかよくわからなくなってくる。書いてはdd()で確認を繰り返すことで、確実に積み重ねていけるよ~!

 

 

Return

・ユーザーごとの貸出履歴を最初はshowアクションにて定義していた。

Vueコンポーネントに入力フォームを作って、そこに入力したユーザーIDをGETで送ってshowで探す、みたいな。

・ただ、認証ができるようになるとLaravel側でログイン中のユーザーIDが取得できるようになったので、indexアクションでもshowアクションでもどっちでもよくなった

・最初、indexアクションはとにかく全件表示だ!!と思っていたが、ユーザー全体をみて誰が何を借りているかを表現する機会を必要としなければ、indexアクションをユーザーごとの貸出履歴表示に使用するのは全然アリ!

⇨アクションごとに、なにをしたいのか最初に決めるのが大事!

 設計大事!!

 

今後の構想

→全部で何冊あるか、借りられているのは何冊か、残っているのは何冊か出したい

 タイトルが〇〇に一致するもののなかで、BOOK-IDの数を数える

 

 コントローラーで検索をかける(p211)

 where('title','Vue.js3 超入門')->where

 

www.larajapan.com

 

 ・借りられている本(レンタル不可)

  レンタル表のreturn_dateがNULL

 ・借りられてない本(レンタル可)

  レンタル表のreturn_dateに日付がはいっている OR

  貸出実績がない