ハッピーメモメモ

私的備忘録

【Vue】【Laravel】作品を考える

つくるまえに

〇使うもの

・Laravel のみ

・Vue.js + Laravel

・Vue.js + Firebase

・HTML + CSS + JS +PHP

PHP/Laravel の代わりに Java/Spring Boot でも可)

→最終的にAWSで展開できるといいね

 

〇Gitでやること

Githubと連携

・ブランチを切って、PullRequestを投げる開発

・共同開発者に誰か1人以上or先生を指定

・READ ME になにをつくるかかく(Githubから変更可能)

 

必要な作業

〇バックエンド

✓E-R図の作成

✓テーブル・モデル・シードの設定

APIの設定

・テストの設定

 

〇フロントエンド

APIからどんなデータを受け取るか

✓共通部分のレイアウト

 →ヘッダーにシステムの名前

 →サイドバーにメニューを設置

・必要なページの枚数

コンポーネントの配置

・デザイン(XD、PhotoShop

✓メインカラーとサブカラー

・素材サイトから写真を選ぶ

・各ページの要素の配置

 

つくりたいもの

〇本の貸し出しシステム

 イメージ

www.fe-siken.com

www.lics-saas.nexs-service.jp

 

〇Laravel+Vueのイメージ

qiita.com

 

〇データベース

 VScodeでER図を作成してみる。

 VSCode拡張機能「Draw.io Integration」→拡張子が.dioのファイルを作成

 

うーーん、やっぱり貸出中の冊数、貸出可能冊数をだしたいのでこうする!↓

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

 

 

必要な機能を書き出して、優先順位をつける

※ログイン、認証あたりはややこしく、本質的な部分ではないので後回しにする!

↑優先順位(高)

・テーブルの作成

CRUD処理

・どんな本があるか検索できる

・借りたい本の在庫、貸出中冊数

 →同じ本が何冊もある場合があるので、書籍情報と書籍表を分けたい

  書籍情報ID=1

  書籍ID=1,2、3

  書籍情報ID=1の数ー貸し出し中の数

・貸出回数ランキング(貸出票の件数をカウント)

・バリデーション

・ログイン

・返却予定日を過ぎても返却してない人をだす

・本の予約

・本の情報を登録するときに、タイトルを入力して楽天APIJSONでこれかな?候補をひっぱってきて入力ができるようにする

・認証機能つけたいけど無理!!!なんかべつのものつくってためそう

↓優先順位(低)

 

データの流れ

〇Laravel 

・DBを作成

・モデルでほしいデータをしぼる

→return!(eloquantをそのままreturnすると、jsonに変換してくれる)

〇Vue

・データをとりにいく

・配列の中身を取り出して表示

 

ルーティング

参考:

blog-tukki.com

・router.jsの編集(Vueの教科書 p333~)

・app.jsの編集(Vueの教科書 p336~)

・おすすめ設計

App.vue

<template>
    <div>
        <Header />
        <router-view></router-view>
        <Footer />
    </div>
</template>

Headerコンポーネント、Footerコンポーネント

 

まずは共通部分をつくるのがおすすめ!

 

デザイン

・共通部分

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

・検索結果(もっと小さくして、一画面に入るデータ増やしたい)

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




立ち止まり記録

〇Seederの命名規則

・最近テーブルとクラス(モデル)の命名規則を勉強したが、複数形・単数形とスネークケース・キャメルケースの場合でSeederは変わるのか?と悩み。

・結論:テーブルとSeederの命名規則は分けて考えて、SeederはSeederのルールに従ったらええ!

qiita.com

 

 

 

自宅で作業できるようになった

・Gitクローン

・Laravel関係のライブラリのインストール

composer install

・Vue関係のライブラリのインストール

npm install && npm run dev

→失敗

npm install

…npmリポジトリから必要なパッケージをダウンロードしてくるコマンド

 プロジェクトの依存関係を再インストール

npm run dev

…プロジェクトの実行

・Laravelのサーバーの実行

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

・Vueのコンパイル

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

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

・DB設定(.envがなかったので、config>database.phpのみ)

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

・XAMPP起動

・.envファイル作成

 

ルーティング

・役割分担

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

参照:

webty.jp

 

 

進捗報告

〇ID検索できることを確認!

http://127.0.0.1:8000/api/books/2

 

コンポーネントごとに色を変えるには?

 

・検索ってどこにかくんだ…? 

 →INDEX!!

  クエリがあれば抽出条件を取りにいく、なければ全部返すってするといい

  (役割分担をしてくれてる以外のものをつくると、役割分担の意味がなくなってしまう)

①まずはVUEで入力した文字をLARAVELのコントローラーにおくり、モデルで検索条件をしぼるようにする!

 

・本のレンタルがしたい

 ①本が借りれる状態か確認

  →この一覧を作成したい

   検索条件:book_information_idごとに冊数をカウント

        そこから、重複しているbook_idの数をカウント

 ②借りれる状態なら、レンタルテーブルに情報を追加する

 

・VUEで検索条件を入力して、LARAVEL(コントローラ)におくりたい

 検索ワード:axios get クエリ

 

qiita.com

 

なにかしらの形でVUEからデータをおくる

→コントローラーでそれを用いて検索を行う

 ・簡単な検索はできた。

 ・リレーションをかけたあとのテーブルを用いるには?

 ・曖昧検索は?

 

qiita.com

 

・VUE…PREVENTの方がいいのか?

qiita.com

 

・検索機能について

qiita.com

 

・axiosの使い方

www.sukerou.com

 

 


・検索をかけるのはGETか?

www.sakurasaku-labo.jp

 

・コントローラのモデル名にはなにをかいたらいいのか?

 →BOOKモデルとかをかく

  →そのあとに、リレーションをかいたらいい

 

・VUEのURLをわたしたあと、コントローラーにはどうやってアクセスするのか?

 ルーティングがSHOWメソッドにつれてってくれるよ

 

・showメソッドの引数、$idの中身はどうやって決まるのか

 →デフォルトで「/」のあとの文字になると決まっている

 

〇なぜ検索はGETでやるんだろう?

 課題図書を読みながら考える!