【Vue】【Laravel】作品（showアクション）

本を探す

①/find　にアクセス

②router.jsをみにいく

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

④検索ボタンをクリックすると、getDataメソッドがうごく

⑤axiosで以下へアクセス

http://127.0.0.1:8000/api/books/1

（id＝１のデータをだす）

⑥コンソールログにbooksテーブルでid＝１のデータが表示される

BookController（リレーション前状態）

    public function show($id)
    {
        // ①リレーション前の状態で検索成功(テキストp299)
        $books = Book::where('book_id',$id)->get();
        return $books;
   }

BookController（リレーション後状態）

    public function show($id)
    {
        // ②リレーション後の状態で検索成功
        $books = Book::where('book_id',$id)->get();
        $books_relation=;
        foreach ($books as $book) {
            array_push($books_relation,$book->book_information);
        }
        return $books_relation;
    }

⑦タイトルまるごと放り込んで検索結果をだす

VUE

    const getData = async () => {
      const querry = "/Vue.js3 超入門";
      const result = await axios.get(
        "http://127.0.0.1:8000/api/book_information" + querry
      );
      console.log("http://127.0.0.1:8000/api/book_information" + querry)
      console.log(result);
    };

BookInformationController

    public function show($request)
    {
        // ③タイトル全部入力したら検索成功
        $title = $request;
        $books = BookInformation::where('title',$title)->get();
        return $books;
    }

途中経過確認方法

・コンソールログにURIが望むかたちで入っているか確認する

・ネットワークタブ（コンソールタブのならび）の名前欄＆プレビューをクリックして異常のある箇所はどこかみてみる。エラーがでてるHTTPリクエストがでてくるよ！

・dd()…Laravel本体のデバッグ用のヘルパー関数
　PHPの内容を一旦とめて、エコー？プリントしてくれる

    public function show($request)
    {
        // ③タイトル全部入力したら検索成功
        dd($request);
        $title = $request;
        $books = BookInformation::where('title',$title)->get();
        return $books;
    }

⑧曖昧検索ができるようにする

　検索したいデータを入力して、URIにかいてとばす

　BookInformationControllerのshowアクションにて、曖昧検索をかけて結果を返す

    public function show($request)
    {
        // ④曖昧検索ができるようにする！
        $keyword = $request;
        $books = BookInformation::where('title', 'like', '%' . $keyword . '%')->get();
        return $books;
    }

〇本の一覧

　→リレーション後の結果が返る

　　（BookController、indexアクションが動く）

〇本を探す

　→リレーション前の結果が返る

　　（BookController、showアクションが動く）

本を探す(2)

①/find2　にアクセス

②router.jsをみにいく

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

④検索ボタンをクリックすると、getDataメソッドがうごく

⑤axios（GET）でアクセス→BookInformationControllerのshowアクション

    public function show($request)
    {
        $keyword = $request;
        $book_informations = BookInformation::where('title', 'like', '%' . $keyword . '%')->get()->all();
        $books_all=;
        foreach ($book_informations as $book_information) {
            foreach ($book_information->books as $book) {
                foreach ($book->rentals as $rental){
                $books_relation=;
               array_push($books_relation, $book_information);
                array_push($books_all, $books_relation);
                }
            }
        }
        return $books_all;
    }

→$book_informationの中に、リレーションをかけたモデルが勝手に入るようになってた！

VUEコンポーネント

<template>
  <div>
    <h3>書籍検索</h3>
    <input type="text" v-model="data.find" />
    <button @click="getData">検索</button>
  </div>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";

export default {
  name: "Find2",
  setup() {
    const data = reactive({
      find: "vue",
      book: ,
    });

    const getData = async () => {
      const querry = "/" + data.find;
      const result = await axios.get(
        "http://127.0.0.1:8000/api/book_information" + querry
      );

      // []に入った配列を取り出す
      result.data.map((book_lists) => {
        // に入った配列を取り出す
        book_lists.map((book_list) => {
          // 分割代入
          // bookの中身から、book_information_idとそれ以外（another）をそれぞれ取り出す
          const { book_information_id, ...another } = book_list;
          console.log(book_information_id);
          console.log(another);
        });
      });
   };
    return { data, getData };
  },
};
</script>

{…},{…},{…}

こういう配列をバラしたい場合、mapが使える！！

中の要素１つ１つに対して、mapで（for文みたいに）順番に呼び出すと、

こうなる！↓

[{…}],[{…}],[{…}]

もう一度同じことをするとこうなる↓

{…},{…},{…}

あと、特定のキーに対する値だけ取り出したいときには分割代入が使える！！

やりたいこと：Laravelはデータを渡す役割、Vueはデータを欲しい形に加工する役割にしたい（データを渡す側と受け取る側、どちらでデータを加工するか）

〇つまずいたこと

data.booksについて、コンソールログでは表示できるのにtemplate内で表示ができない

<template>
  <div>
    <h3>書籍検索</h3>
    <input type="text" v-model="data.find" />
    <button @click="getData">検索</button>

    <!-- これ表示されないのなんでだろう？ -->
    {{ data.books }}
    <br>
    {{ data }}
 
  </div>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";

export default {
  name: "Find",
  setup() {
    const data = reactive({
      find: "vue",
      books: ,
    });

    const getData = async () => {
      const querry = "/" + data.find;
      const result = await axios.get(
        "http://127.0.0.1:8000/api/book_information" + querry
      );

      // 子コンポーネントに送るデータの初期化
      data.books = 

      // console.log(result.data);

      result.data.map((item) => {
        // 書籍ごとの情報をまとめる配列の定義／初期化
        let book_list = ;

        const book_info = item[0];
 
        // 子コンポーネントに送りたい情報をbook_listに追加
        book_list.author = book_info.author;
        book_list.published = book_info.published;
        book_list.publisher = book_info.publisher;
        book_list.title = book_info.title;
        book_list.books = book_info.books;

        // 貸出可能な本の冊数を記録する配列の定義／初期化
        const availability_ary = ;

        // book_idごとに貸出可能な状態か調べ、
        // 貸出可能であれば記録用の配列に「1」を追加する
        book_list.books.forEach(element => {
          if(element.availability === 1){
            availability_ary.push(1)
          }
        });

        // book_information_idごとに貸出可能な状態か調べる
        if (availability_ary.length === 0) {
          book_list.availability = false;
        } else {
          book_list.availability = true;
        }

        // 書籍ごとの情報をまとめた配列を、子コンポーネントに渡す配列に追加
        data.books.push(book_list);
        console.log(data.books);
      });

      console.log("data.books"); 
      console.log(data.books);

    };

    return { data, getData };
  },
};
</script>