[React]~Admin画面3:ユーザー登録処理の実装 ~

こんにちは、KOUKIです。Reactで画面開発を行なっています。

前回は、ルーティング処理を実装しました。

今回は、ユーザー登録処理を実装します。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

事前準備

フォルダ/ファイル

モジュールのインストール

ユーザー登録処理

登録画面からユーザー情報をAPI側へ送信して、ユーザーを登録できるようにしましょう。

画面の作成

まずは、画面の作成からです。

前回作成したpages/Register.tsxファイルに、ユーザー登録画面の実装を行います。

docker-compose up」でコンテナを立ち上げた後、「http://localhost:3000/register」にアクセスしてください。

画面が表示されれば、OKです。

データ送信

登録画面の「Submit」ボタンを押下することで、APIへデータを送信し、ユーザー情報をDBに登録できるようにします。

まずは、Userモデルを作成します。

プロパティとして設定したフォーマットは、ユーザー登録API(http://localhost:8000/api/admin/register)へ送信するJSONのフォーマットに合わせておきます。

先ほど実装した「submit」の中身を実装します。

APIへのPOSTリクエストは、axiosで行っています。面白いことに、パラメーターのフォーマットが合っていれば、インスタンス化したUserデータをそのまま渡すことができます。

また、Stateにはリダイレクトフラグを入れています。送信に成功したら、自動的にログイン画面に遷移するように実装しました。

検証

まずは、Dockerコンテナを立ち上げます。
※立ち上がっていない場合

以下のパラメータを入れて、検証してみましょう。

パスワードはなんでもいいです。入力が完了したら、「Submit」ボタンを押下します。

ログイン画面に戻りました!データが登録されているはずです。

OKですね。

次回

次回は、ログイン画面の実装をしましょう。

Reactまとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Register.tsx

user.ts

Users.tsx

コメントを残す