React + SpringBootアプリ 簡易まとめ

初めに

今回の記事ではReact、SpringBootを用いた旅行予約管理アプリケーションの作成を行った際に使用したコードを復習も兼ねて簡単にまとめていこうと思います。
今まではEclipseでコード編集を行っていましたが今回のアプリケーション開発ではフロントのコード編集にVC CodeとバックにはIntellijを使用しました。
環境構築などはYouTubeを参考にしました。

フロント(React)からバック(Java)のAPI呼び出し

SpringBootを使用してアプリケーションを作成する際に使用するControllerに@CrossOriginを使用します。
今回のReactアプリケーションではデフォルトのURLhttp://localhost:3000を使用しているのでControllerには@CrossOrigin("http://localhost:3000")とすればフロント側から指定のAPIのURLをたたけば処理が走るようになります。

/src/main/java/com/example/demo/Controller/

@RestController
@CrossOrigin("http://localhost:3000")
public class Controller {
}

今回は旅行予約管理サイトでは「予約」「予約編集」「予約削除」機能を実施していたので基本的なPost、Get、Put、Deleteを使ったのでバックのControllerではアノテーション@PostMapping、@GetMapping、@PutMapping、@DeleteMappingを使用しました。
下記の様に任意のAPIのURLを指定することでバック側のAPIをたたくことができます

await axios.post(`http://localhost:8080/booking`)
await axios.get(`http://localhost:8080/booking/${loginUserId}`);
await axios.put(`http://localhost:8080/booking/${id}`);
await axios.delete(`http://localhost:8080/booking/delete/${id}`);

下記の様にして任意のAPIにフロント側から値を渡したりバックから帰って来た値をフロント側で使用したりできます。

const result = await axios.post("http://localhost:8080/signup", user);
const errorMessage = result.data;

最後に

簡易的なまとめですが以上にしたいと思います。
まだアプリケーション自体は作成中なので完成次第、他の機能、実装に苦労したことなどあれば記事にしていきたいと思います。