Help us understand the problem. What is going on with this article?

JavaでTODOアプリを制作しよう2 Spring Initializrで雛形を作ってHello worldしたい

こんにちは。
JavaでTODOアプリを制作しよう1 MVCの簡単な説明の続きの記事です。

今回はとりあえずControllerを作ってそこからViewを表示させるところまでやってみたいと思います。

TODOアプリ作成リンク集

1: MVCの簡単な説明
2: Spring Initializrで雛形を作ってHello worldしたい(今ここ)

Springの雛形を作成

まずはSpring InitializrでSpringの雛形を作っていきましょう。

Screen Shot 0002-06-01 at 12.53.18.png

シンプルにこんな感じで進めていきます。

今後JPAやlombokも追加していきますが、更新するのと同時に追加していくので今回はこの構成だけでOKです!

BuildしてRunする為の下準備

Buildする

Screen Shot 0002-06-01 at 14.39.14.png

InteliJの上部にカーソルを持ってくとメニューバーが出てくるのでBuild -> Build Projectを押してビルドします。ちょっと時間かかるかもですが待ちましょう。InteliJ最下部にビルド中みたいなのが出てるはず。

Edit ConfigurationsでRunする準備。

↓InteliJ上部のメニューバーからRun -> Edit Configurationsを押します。
Screen Shot 0002-06-01 at 14.39.37.png

↓こんな感じでハイライトしている部分を入力していきましょう。JREはJava11系のを選んでください。
Screen_Shot_0002-06-01_at_14_40_01.png

TodoController作成

お次はいよいよコントローラーの作成です。

下記のパスに従ってコントローラーを作ってください。

todo>src>main>java>com.example.todo>TodoController
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller //①
public class ToDoController {

    @GetMapping("/top") //②
    public String top(){
        return "top"; //③
    }
}

①コントローラーの宣言

@Controllerとすることでこのクラスがコントローラーであることを宣言できます。
@~~~という記述はアノテーションと呼ばれます。(色々便利なモノを呼び出せるやつって感じです。)

②GetMapping

@GetMappingアノテーションは引数内のアドレスにHttp MethodのGet Methodでリクエストが来た時に直下のメソッドの処理行います。

③top.htmlをリターン

そのままです。こう書くことによってtemplates下にあるhtmlファイルを呼ぶことができます(拡張子は省略)
htmlを表示する時のクラスの戻り値はStringです。

importについて

importはアノテーションを書くと自動で追加されると思いますが、されない場合はアノテーションをホバーしながらOption + Enter でも追加できます。

HTMLを書く

Todo>src>resources>templates>top.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>

<p>hello world</p>

</body>
</html>

こんな感じでシンプルにHello worldを出力してみましょう。
templates下のHTMLファイルは上のコントローラーの書き方で呼び出すことができます!!

実際にRunして確認してみる

Runする方法

Screen Shot 0002-06-01 at 14.57.30.png

InteliJの右上に緑色の矢印があると思うのでそこをクリックしてプロジェクトを実行(Run)してみましょう!

すると

Screen_Shot_0002-06-01_at_15_00_37.png

画面下部にこんなウィンドウが出てくるはずです。

Startedになっていたら無事起動しています。もしエラーが起きていた場合はその文でググってみよう!(結構出なくて困ったりする。)

いざアクセス

localhost:8080/topにアクセスするとhello worldが表示されると思います!

次回は登録部分の処理を書いてみます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away