前回の記事でAdonisJS + React.JS + MySQLでCRUDを作るために、モックなどを作ってきました。この記事では、一気に前の記事の内容を更新して
CRUDを作成してしまいます。
完成すると上記の動画のサイトができます。

AdonisJS + React.JS + MySQLでCRUDを作ってみた。vol1

AdonisJS + React.JS + MySQLでCRUDを作ってみました。PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたいと考えている方は、ぜひ参照ください。

leben.mobi

2021-02-16 03:46

AdonisJS + React.JS + MySQLでCRUDを作ってみた。vol2

leben.mobi

2021-02-16 06:14

MYSQL

https://adonisjs.com/docs/4.1/database

データベースドライバーをインストールするために下記のコマンドを打ちます。

npm i mysql --save

.env

それぞれの環境に合わせたデータベース接続情報を設定してください。
今回のチュートリアルのdockerでは、上記のような設定ないようになります。

Migration

adonis make:migration customer

database/migrations/1613740317696_customer_schema.js

mysqlのDockerのコンテナに入り、DBを作成してください。このチュートリアルでは、adonisというデータベースを作成します。

Status migration

adonis migration:status

マイグレーションを行う。

adonis migration:run

モデル

モデルの作成

adonis make:model Customer

app/Models/Customer.js

モデルを下記のように編集します。

ここから一気に作っていきます。

AdonisJS

Controller

app/Controllers/Http/CustomerController.js

ROUTING

route.js

ReactJS

axiosのインストール

npm install axios

Components

Form

resources/js/components/customer/Form.js

List

resources/js/components/customer/List.js

Edit

resources/js/components/customer/Edit.js

Service

resources/js/services/Customer.js

ビルド

webpack --watch

サーバー立ち上げ

adonis serve --dev

今回も作成したサイトのgithubを用意しました。
もしよしければ、ご利用ください。

leben-jp/adonisjs_reactjs

「AdonisJS」一覧

AdonisJS + React.JS + MySQLでCRUDを作ってみた。vol3