【Vue】【Laravel】作品を考える
つくるまえに
〇使うもの
・Laravel のみ
・Vue.js + Laravel
・Vue.js + Firebase
(PHP/Laravel の代わりに Java/Spring Boot でも可)
→最終的にAWSで展開できるといいね
〇Gitでやること
・Githubと連携
・ブランチを切って、PullRequestを投げる開発
・共同開発者に誰か1人以上or先生を指定
・READ ME になにをつくるかかく(Githubから変更可能)
必要な作業
〇バックエンド
✓E-R図の作成
✓テーブル・モデル・シードの設定
・APIの設定
・テストの設定
〇フロントエンド
・APIからどんなデータを受け取るか
✓共通部分のレイアウト
→ヘッダーにシステムの名前
→サイドバーにメニューを設置
・必要なページの枚数
・コンポーネントの配置
・デザイン(XD、PhotoShop)
✓メインカラーとサブカラー
・素材サイトから写真を選ぶ
・各ページの要素の配置
つくりたいもの
〇本の貸し出しシステム
イメージ
〇Laravel+Vueのイメージ
〇データベース
VScodeでER図を作成してみる。
VSCodeの拡張機能「Draw.io Integration」→拡張子が.dioのファイルを作成
うーーん、やっぱり貸出中の冊数、貸出可能冊数をだしたいのでこうする!↓
必要な機能を書き出して、優先順位をつける
※ログイン、認証あたりはややこしく、本質的な部分ではないので後回しにする!
↑優先順位(高)
・テーブルの作成
・CRUD処理
・どんな本があるか検索できる
・借りたい本の在庫、貸出中冊数
→同じ本が何冊もある場合があるので、書籍情報と書籍表を分けたい
書籍情報ID=1
書籍ID=1,2、3
書籍情報ID=1の数ー貸し出し中の数
・貸出回数ランキング(貸出票の件数をカウント)
・バリデーション
・ログイン
・返却予定日を過ぎても返却してない人をだす
・本の予約
・本の情報を登録するときに、タイトルを入力して楽天APIでJSONでこれかな?候補をひっぱってきて入力ができるようにする
・認証機能つけたいけど無理!!!なんかべつのものつくってためそう
↓優先順位(低)
データの流れ
〇Laravel
・DBを作成
・モデルでほしいデータをしぼる
→return!(eloquantをそのままreturnすると、jsonに変換してくれる)
〇Vue
・データをとりにいく
・配列の中身を取り出して表示
ルーティング
参考:
・router.jsの編集(Vueの教科書 p333~)
・app.jsの編集(Vueの教科書 p336~)
・おすすめ設計
App.vue
まずは共通部分をつくるのがおすすめ!
デザイン
・共通部分
・検索結果(もっと小さくして、一画面に入るデータ増やしたい)
立ち止まり記録
〇Seederの命名規則
・最近テーブルとクラス(モデル)の命名規則を勉強したが、複数形・単数形とスネークケース・キャメルケースの場合でSeederは変わるのか?と悩み。
・結論:テーブルとSeederの命名規則は分けて考えて、SeederはSeederのルールに従ったらええ!
自宅で作業できるようになった
・Gitクローン
・Laravel関係のライブラリのインストール
・Vue関係のライブラリのインストール
→失敗
…npmリポジトリから必要なパッケージをダウンロードしてくるコマンド
プロジェクトの依存関係を再インストール
…プロジェクトの実行
・Laravelのサーバーの実行
・Vueのコンパイル
・DB設定(.envがなかったので、config>database.phpのみ)
・XAMPP起動
・.envファイル作成
ルーティング
・役割分担
参照:
進捗報告
〇ID検索できることを確認!
http://127.0.0.1:8000/api/books/2
・コンポーネントごとに色を変えるには?
・検索ってどこにかくんだ…?
→INDEX!!
クエリがあれば抽出条件を取りにいく、なければ全部返すってするといい
(役割分担をしてくれてる以外のものをつくると、役割分担の意味がなくなってしまう)
①まずはVUEで入力した文字をLARAVELのコントローラーにおくり、モデルで検索条件をしぼるようにする!
・本のレンタルがしたい
①本が借りれる状態か確認
→この一覧を作成したい
検索条件:book_information_idごとに冊数をカウント
そこから、重複しているbook_idの数をカウント
②借りれる状態なら、レンタルテーブルに情報を追加する
・VUEで検索条件を入力して、LARAVEL(コントローラ)におくりたい
検索ワード:axios get クエリ
なにかしらの形でVUEからデータをおくる
→コントローラーでそれを用いて検索を行う
・簡単な検索はできた。
・リレーションをかけたあとのテーブルを用いるには?
・曖昧検索は?
・VUE…PREVENTの方がいいのか?
・検索機能について
・axiosの使い方
・検索をかけるのはGETか?
・コントローラのモデル名にはなにをかいたらいいのか?
→BOOKモデルとかをかく
→そのあとに、リレーションをかいたらいい
・VUEのURLをわたしたあと、コントローラーにはどうやってアクセスするのか?
ルーティングがSHOWメソッドにつれてってくれるよ
・showメソッドの引数、$idの中身はどうやって決まるのか
→デフォルトで「/」のあとの文字になると決まっている
〇なぜ検索はGETでやるんだろう?
課題図書を読みながら考える!