理系公務員のプログラミング日記

これが年内で最後の記事かな？ 1年で６０記事も書いたらしい。

このブログは記事の表示機能しか実装していないので、そろそろ機能を色々追加したいなー

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

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

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

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

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

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

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

api.php

Route::apiResource('/books',BookController::class);

+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
| Domain | Method    | URI                 | Name          | Action                                                     | Middleware                               |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
|        | GET|HEAD  | /                   |               | Closure                                                    | web                                      |
|        | GET|HEAD  | api/books           | books.index   | App\Http\Controllers\BookController@index                  | api                                      |
|        | POST      | api/books           | books.store   | App\Http\Controllers\BookController@store                  | api                                      |
|        | GET|HEAD  | api/books/{book}    | books.show    | App\Http\Controllers\BookController@show                   | api                                      |
|        | PUT|PATCH | api/books/{book}    | books.update  | App\Http\Controllers\BookController@update                 | api                                      |
|        | DELETE    | api/books/{book}    | books.destroy | App\Http\Controllers\BookController@destroy                | api                                      |
|        | GET|HEAD  | api/user            |               | Closure                                                    | api                                      |
|        |           |                     |               |                                                            | App\Http\Middleware\Authenticate:sanctum |
|        | GET|HEAD  | sanctum/csrf-cookie |               | Laravel\Sanctum\Http\Controllers\CsrfCookieController@show | web                                      |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+

コントローラの設定

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

ですので、このアクションを下記のようにし、受け取ったデータをデータベースに渡して保存できるようにしました。（バリデーション等は省いた最小限の内容です）

BookController

    public function store(Request $request)
    {
        $book = new Book();
   
        $book->fill($request->all())->save();
    }

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

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

データはPOSTリクエストで送るので、axios.post(url,データ)の形で送ります。

BookAdd.vue

import { reactive, onMounted } from "vue";
import axios from "axios";


export default {
  name: "BookAdd",
  setup() {

    const postBook = async () => {

        const url = "サーバーのURL/api/books";

        // postリクエストでデータを送る
        await axios.post(url,{
                title: "それから",
                price: "600",
            }
        )
    }

    // 動作確認のためにcreatedのタイミングで動かす
    postBook()

    return {
      postBook,
    };
  },
};

以上が基本的な形になると思います。

参考 Making Asynchronous HTTP Requests in JavaScript with Axios