【Axiosの実装】Laravel+Vue.jsでのDB連携

public function index() {
        return view('welcome');
      }
}

<?php
Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

Schema::create('todos', function (Blueprint $table) {
            $table->bigIncrements('id'); // 削除・更新で重要
            $table->string('todo');
            // $table->integer('user_id'); // ここを削除
            // $table->timestamps(); // 今回は時間も不要なので削除 ⇒Axiosの実装で必要なことがわかりました。
        });

<script src="{{ asset('js/app.js') }}" defer></script>
<meta name="csrf-token" content="{{ csrf_token() }}"> // post送信時にトークンが必要
<div id="app">
  <h2>TODO アプリケーション</h2>
  <example-component></example-component>
</div>

mounted() {
  axios.get('/api')
  .then(res =>{
      this.todos = res.data;
  })
}

deleteTodo(id) {
  var data = {};
  axios.delete("/api/" + id, JSON.stringify(data)).then(() => {
    this.getTodoList();
  });
},

addTodo() {
  var data = {
      todo: this.todo_form
      // insertされる内容。カラムに合わせる。
  };
  axios.post('/api', data).then(() => {
  this.getTodoList();
  });
},

updateTodo(id) {
 axios.put("/api/" + id, {todo: "edit"}).then(() => {
    this.getTodoList();
  });
},

updateTodo(id) {
  var data = {
    todo:this.todos.filter(function(value){return value.id === id})[0].todo
  };
 axios.put("/api/" + id, data).then(() => {
    this.getTodoList();
    alert('更新が完了しました。')
  });
},

躓いた点

①トークンの実装方法がわからず。⇒結果として実装できていないもののなぜか動く。

(コンソールで500エラーを確認。トークンの実装周りが原因だと思っていたが違った。)

追記：デフォルトではAPIはトークンを使用しない設定になっているっぽい。Karnel.phpで設定弄れる。クッキー周りの対応法はこちらの教材が詳しく扱ってる。

・GoogleConsoleのNetworkタグでapi通信の挙動を確認したところ以下のような内容の記述。

message: “SQLSTATE[42S22]: Column not found: 1054 Unknown column ‘updated_at’ in ‘field list’ (SQL: insert into `todos` (`todo`, `updated_at`, `created_at`) values (テストだよよ, 2020-04-20 07:54:19, 2020-04-20 07:54:19))”
exception: “Illuminate\Database\QueryException”
file: “C:\xampp\htdocs\memo_noauth6.8\vendor\laravel\framework\src\Illuminate\Database\Connection.php”
line: 669

⇒updatad_atカラムがないことでエラーが起きていたので、カラムを追加しなおしたところ動いた。これは思わぬ落とし穴でした。。。(おそらく根本的なDatabaseの設定を弄れば変えられると思うけど。。。)

Laravel 5.6 CSRF保護

axios