【Laravel9×Vue3】本の貸し出しシステム３（書籍の追加機能）

2023年 01月 30日

タグ：

Laravel

Vue

LaravelのAPIにpostメソッドでデータを送信する

Restful APIは、同じURIに異なるHTTP メソッドでアクセスすることで、

そのHTTPメソッドに対応した動作をサーバー側に行わさせる仕組みです。

データをサーバー側に送信したい場合は、POSTメソッドによってアクセスを行います。

バックエンド側（Laravel）の設定

ルーティングの設定(api.web)は設定が終わっていますが再掲します。

この１行で、Restful API に対応したコントローラが呼び出すことができます。

ルーティングの確認

php artisan route:list

  POST            _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolu…
  GET|HEAD        _ignition/health-check ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckControll…
  POST            _ignition/update-config ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigContr…
  GET|HEAD        api/books .............................................. books.index › BookController@index
  POST            api/books .............................................. books.store › BookController@store
  GET|HEAD        api/books/{book} ......................................... books.show › BookController@show
  PUT|PATCH       api/books/{book} ..................................... books.update › BookController@update
  DELETE          api/books/{book} ................................... books.destroy › BookController@destroy
  GET|HEAD        api/user .................................................................................. 
  GET|HEAD        sanctum/csrf-cookie ..... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show

コントローラに追加する

上記のルーティングテーブルを見ると、api/booksにPOSTでアクセスした場合、bookControllerのstoreアクションが呼び出されるとされています。

このstoreアクションに、受け取ったデータをデータベースに渡して保存できるようにしました。（本来はセキュリティ対策や入力されるデータの確認のためにバリデーション等が必要です。）

BookController

// 中略

    public function store(Request $request)
    {
        // モデルの空のインスタンスを生成
        $book = new Book();

        // 受け取ったデータをインスタンスに挿入し、DBに保存
        $book->fill($request->all())->save();
    }

これでデータを受け取る側の設定は完了です。

フロントエンド側(Vue)の設定

データを送るためのコンポーネントとしてBookAdd.vueを作成します。

フロントエンドからバックエンドを経由してDBにデータを送る場合、DBのテーブル定義の形と送るデータの形は一致させる必要があります。

今回は練習として、titleとauthorについてはフォームから入力し、他の列名については最初からダミーデータを入れておきます。

Vueで入力フォームの内容を変数に保存するためには、v-modelを使用します。

フォームへの入力が終わった際にはボタンをクリックすることで、イベントが発生しaxios.post()を実行させます。

BookAdd.vue

<template>
    <input type="text" name="title" id="" v-model="book.title">
    <br>
    <label for="author">著者</label>
    <input type="text" id="author" v-model="book.author">
    <br>
    <button v-on:click="send">送信</button>
    <h5>v-modelの確認</h5>
    <div>{{ book.title }}</div>
</template>

<script>

import axios from "axios";
export default {
    name: 'BookAdd',
    data(){
      return {
        // 入力フォームのデータを保存するオブジェクト
        // bookモデルで入力する内容と一致させる
        book:{
            title:'',
            author:'',
            publisher:'test',
            ISBN:'1111',
            summary:'test',
            gunre:'test',
            available:true
        }
      }
    },
    methods: {
        // clickイベントの発火時に動作するメソッド
        async send(){
            const url = "/api/books";
            // axios.post('送信先のurl','データ')
            const response = await axios.post(url,this.book);
            console.log(response);
        }
    }
}
</script>

注意点として、フォームを作るために定番の