予約システムを作る #10：データを登録してみる

とりあえず入力した内容をデータベースへ登録してみる。

モデルの作成

予約データ用のモデルクラス(Bookクラス)を作成しておく。
クラスのファイルは以下コマンドで作成できる。

php artisan make:model Book

作成されたクラスを編集する。
☆ app/Models/Book.php

class Book extends Model
{
    protected $fillable = [
        'name',
        'email',
        'tel',
        'resdate',
        'restime',
        'slot',
        'num',
    ];
}

コントローラの作成

予約データ操作用のコントローラクラスを作成する。
コントローラークラスのファイルは以下コマンドで作成できる。

php artisan make:controller BookController

作成されたクラスを編集し、データ登録用の "store" メソッドを作成する。

  ：
use App\Models\Book;

class BookController extends Controller
{
    public function store(Request $request) {
        return Book::create($request->all());
    }
}

APIの作成

コンポーネントからコントローラのデータ登録(storeメソッド)を呼び出すにはAPIを経由する？
ということでAPIを登録する。
☆ routes/api.php

  ：
Route::post('store', 'App\Http\Controllers\BookController@store');
  ：

これで POSTメソッドで "api/store" を呼び出すと、コントローラ(BookController)の"store"メソッドが呼び出されデータが登録される、と思われる。

予約確認画面の修正

予約画面の登録ボタンを button → submit へ変更、
scriptでsubmitメソッドを作成し、axios(非同期呼び出し？)で "api/store" を呼び出す。
成功したら、とりあえず "OK" と表示してカレンダーへ戻すことにする。

  ：
    <form v-on:submit.prevent="submit" class="form-horizontal">
  ：
        <button type="submit" class="btn btn-success">登録</button>
  ：
  <script>
  export default {
      methods: {
          submit: function() {
              axios.post('/api/store', this.$route.params.book)
                  .then((res) => {
                      alert('OK');
                      this.$router.push({name: 'book.calendar'});
                  });
          }
      },
  };
</script>

動作確認

"npm run dev"でビルドし動作確認。
予約入力画面で適当な値を入力し登録。
phpMyAdminでテーブルに登録されたか確認。

---

予約システム