# springbootを使ったPOST通信アプリケーション ## 経緯 SpringBootを使って開発する時に躓きまくったので備忘録として残していきます ## 環境 SpringToolSuite4 ## アプリ作成手順 ### ①新規アプリケーションの作り方 SpringInitializrを使っても可能ですがインポートがめんどくさいのでSpringToolSuite内から作成します まず初めにファイル→新規→Springスタータープロジェクトを選択します ![](https://i.imgur.com/x5Hd3DG.png) 次に好きなプロジェクト名を名前のところに入力する(今回はspring-mvc2)としてあります。 ![](https://i.imgur.com/Hkp4Jtl.png) 好きなプロジェクト名を入力したらそれ以外はデフォルトのまま次へを押します。 プロジェクト名を入れた次の画面ではこれから作るパッケージにどのような機能を追加するか選択する画面です。今回は、製作するのが楽になる「Spring Boot DevTools」,定型コードを作成してくれる「Lombok」,Webアプリケーション開発が可能になる「Spring Web」,HTMLのテンプレートエンジンである「Thymeleaf」,エラーチェックをするのに使う「検証」の５つを使います。 ![](https://i.imgur.com/NPZDIq9.png) この選択が終わり次第完了を押してビルドし終わるのを待ちます。 ここまでがパッケージを作る手順です。 ### ②モデルの作成 #### そもそもモデルとは https://column.stylez.co.jp/news/spring-mvc-framework/ このURLのサイトが分かりやすかったです ここからWebアプリケーションを作っていきます まずcom.example.demoを右クリックして、新規→クラスを押します ![](https://i.imgur.com/Im6aucl.png) クラスを作る画面ではパッケージのところにModelとして使うものはModelに、Controllerとして使うものはControllerと別々のパッケージを追加した方が便利です。 またクラスの名前は好きな名前で大丈夫ですのでここも他人が見て分かりやすい名前がおすすめです ![](https://i.imgur.com/ENqcKjT.png) そして、今回Modelクラスとして使うInquiry.javaとHomeController.javaはこのような配置でおきます ![](https://i.imgur.com/MWDt6vm.png) それでここではモデルを作るのが目的なのでInquiry.javaを編集していきます。 Inquiry.java↓ ``` package com.example.demo.model; import javax.validation.constraints.Email; import javax.validation.constraints.NotBlank; import javax.validation.constraints.Size; import lombok.Getter; import lombok.Setter; @Getter @Setter public class Inquiry { //必須入力、文字列が30文字まで可能 @NotBlank @Size(max = 30) private String name; //必須入力、Email形式であること、文字列が100文字まで @NotBlank @Email @Size(max = 100) private String email; //必須入力、文字列が300文字まで @NotBlank @Size(max = 300) private String inquiry; } ``` 今回のModelクラスでは基本的にエラーチェックをするのに使っています @がついているのはすべてアノテーションと呼ばれています。 アノテーションとは一言でいうとソースコードだけで命令しきれないような複雑な情報を伝えるようなものです。 今回はそのアノテーションを多く使用しています。 @Getterと@SettterはLombokで使うものを必要最小限にするために指定しています。 あとの@Notblankなどはすべてエラーチェック用のアノテーションです ### ③コントローラの作成 次にHomeController.javaを編集していきます ``` package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.validation.BindingResult; import org.springframework.validation.annotation.Validated; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; import com.example.demo.model.Inquiry; @Controller public class HomeController { @GetMapping("/") public String index(@ModelAttribute Inquiry inquiry) { return "index"; } @PostMapping("/") public String confirm(@Validated @ModelAttribute Inquiry inquiry, BindingResult result) { if(result.hasErrors()) { //エラーがある場合index.htmlに戻る return "index"; } return "confirm"; } } ``` 今回コントローラではGETリクエストやPOSTリクエストをアノテーションを使うことでコードを短くしつつ、読みやすくしています またreturnで返すindexやconfirmはこの後作成するhtmlファイルのことです。 簡単に言うとアクセスした際にindex.htmlを表示させて入力したのをconfirm.htmlに反映させて表示させます。 ### ④見やすいページにするために このWebjarsというのをpom.xmlに追加することでCSSやJavaScriptを使ってきれいな画面を作ってくれるフレームワークであるBootstrapを使うことができます またこのpom.xmlはプロジェクト直下に作成されます ![](https://i.imgur.com/nQ5Sbyv.png) ``` <!-- dependenciesタグ内に追加 --> <dependency> <groupId>org.webjars</groupId> 　　　　　<artifactId>bootstrap</artifactId> 　　　　　<version>4.5.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.40</version> </dependency> ``` またこのコードは必ずdependenciesタグの中に追加してください そうしないとエラーを吐く原因となります また、pom.xmlは変更したら自動更新されますが、更新されなかった場合はpom.xmlを右クリックして、Maven→プロジェクトの更新から手動で更新することも可能です。 ### ⑤画面に表示されるhtmlの作成 今回は最初にアクセスする際に表示するゲームはindex.htmlというユーザーが入力する画面になります ユーザーが入力したのを反映させたページがconfirm.htmlです またSpringToolSuiteではHTMLファイル等はすべて「src/main/resources」の中にある「templates」の中に入れます HTMLファイルは新規→その他→一般→ファイルを押して次へを押します ![](https://i.imgur.com/5zLsc5R.png) ファイル名は好きな名前で大丈夫ですが拡張子は.htmlにしてください ここからようやくhtmlファイル内の編集です まずはindex.html↓の内容です ``` <!DOCTYPE html> <html xmlns:th="http://wwww.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"> <title>Title</title> </head> <body class="bg-light"> <div class="container"> <div class="row justify-content-md-center"> <div class="col-md-8"> <h4 class="border-bottom my-3" th:text="#{inquiry}"> </h4> <form th:action="@{/}" th:object="${inquiry}" method="POST" novalidate> <div class="form-group"> <label for="name" th:text="#{name}"></label> <input type="text" class="form-control" th:errorclass="is-invalid" th:field="*{name}"> <div class="invalid-feedback" th:errors="*{name}"> </div> </div> <div class="form-group"> <label for="email" th:text="#{email}"></label> <input type="email" class="form-control" th:errorclass="is-invalid" th:field="*{email}"> <div class="invalid-feedback" th:errors="*{email}"> </div> </div> <div class="form-group"> <label for="inquiry" th:text="#{inquiry}"></label> <textarea class="form-control" rows="3" th:errorclass="is-invalid" th:field="*{inquiry}"> </textarea> <div class="invalid-feedback" th:errors="*{inquiry}"> </div> </div> <button class="btn btn-primary btn-lg btn-block my-4" type="submit" th:text="#{register}"> </button> </form> </div> </div> </div> <script th:src="@{/webjars/jquery/jquery.min.js}"></script> <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script> <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script> </body> </html> ``` 次にconfirm.html↓です ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"> <title>Title</title> </head> <body class="bg-light"> <div class="container"> <div class="row justify-content-md-center"> <div class="col-md-8"> <h4 class="border-bottom my-3" th:text="#{inquiry}"> </h4> <p class="text-danger" th:text="#{confirmationMessage}"></p> <div th:object="${inquiry}"> <div class="form-group"> <label for="name" th:text="#{name}"></label> <input type="text" class="form-control" th:field="*{name}" disabled> </div> <div class="form-group"> <label for="email" th:text="#{email}"></label> <input type="email" class="form-control" th:field="*{email}" disabled> </div> <div class="form-group"> <label for="inquiry" th:text="#{inquiry}"></label> <textarea class="form-control" rows="3" th:field="*{inquiry}" disabled> </textarea> </div> </div> </div> </div> </div> <script th:src="@{/webjars/jquery/jquery.min.js}"></script> <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script> <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script> </body> </html> ``` htmlの内容は簡単に説明すると、「th:」とついてるのはプロジェクトを作るときに入れたThymeleafで使えるものです。 例えばth:srcやth:hrefの後に@{}というのを付け加えるとリンクのURLを示したり、#{}で外部のメッセージを簡単に呼び出すことができます ### ⑥おまけ　日本だけでなく国際的なサイトにするために あるファイルを付け加えることによって日本語だけでなく英語等ほかの言語にも対応させることができます それが画像下部にあるmessagesから始まるファイルです このファイルはSpring Bootにそもそも備わっている機能なのでファイルを作る以外に特別な操作は必要ないです ![](https://i.imgur.com/glQUMSt.png) 今回このファイルを作る場所は「src/main/resources」です 「src/main/resources」を右クリックして新規→その他でファイル名を「messages_ja.properties」と「messages.properties」の２つを作ります(jaは日本語、もう1つは英語です) ![](https://i.imgur.com/A6eCfOH.png) また、日本語の方は言語を「UTF-8」に変更する必要があるので以下の作業をします jaのファイルを右クリックして一番下にあるプロパティを開きます ![](https://i.imgur.com/HOJW3Dc.png) そうするとリソースと書かれたタブが出現するので画面下部にある テキスト・ファイル・エンコードをデフォルトからその他に変えて言語をUTF-8に変更して適当して閉じるを押します ![](https://i.imgur.com/IsTUUqT.png) 競合するアラートがでても「はい」で大丈夫です またjaのほうは文字コードを変更している関係上日本語を入力する数字に変更されますがカーソルを合わせると日本語が表示されます ``` inquiry =　お問い合わせ name = お名前 email = Email register = 登録 confirmationMessage = 以下の内容で登録しました ``` ↓は英語版の方です ``` inquiry = Inquiry name = Name email = Email register = Register confirmationMessage = Registration has been completed with the following ``` 最後に元々あるファイルの「application.properties」に以下のコードを追加すれば全ての準備は完了です ``` spring.messages.fallback-to-system-locale=false ``` このコードを記入しないとどの言語でアクセスしても日本語版しか表示されなくなります。 ### ⑦実行する ここまで問題なくコードを記入できたらあとは実行するだけです 実行はcom.example.demoの中にある最初から存在するアプリケーションを右クリックして実行→Spring bootアプリケーションを押します ![](https://i.imgur.com/eSdUIHe.png) これで何もエラーがでなければ実行できてますのでブラウザから(おすすめはクロム)でここ(http://localhost:8080/)にアクセスします 正常に動作すると以下のような画面が表示されます ![](https://i.imgur.com/MwTbBSu.png) ここで何も入力しないで登録を押したり文字数を多くして登録を押すとエラーもしっかり表示されます またちゃんと動作すると以下のように登録されたと出ます(実際どこにも登録していませんがセキュリティの関係上適当なものを入力してください) ![](https://i.imgur.com/DNO3NcK.png) ## 終わり 久々に作成したので超絶長くなりましたがすいません わからないところや説明不足のところは指摘してくだされば追加します。