5
3

eclipseでSpring Bootを使い、Web開発環境構築をする。

Last updated at Posted at 2024-04-17

この記事の続き

構築の流れ

プロジェクト作成

  1. eclipseを起動し、パッケージ・エクスプローラー新規 Spring スターター・プロジェクトの作成を選択。
    image.png

  2. 別ウィンドウで、新規Springスターター・プロジェクトが表示されるので、次へ(N)を押下。
    image.png

  3. 2の手順後、画面が遷移し、新規Springスターター・プロジェクト依存関係が表示されるので、下記の設定に合わせて、次へ(N)>を押下する。

image.png

  1. サイト情報が表示されればOK。完了(F)を押下して終了する。
    image.png

最初の、eclipseの画面に戻った際に、demoというプロジェクトができているはず。
これで、プロジェクトの作成は完了。
image.png

テストプログラムを作成・実行する

作成されたdemoディレクトリを展開し、
image.png

src/main/javaをさらに展開すると、com.exsample.demoが現れる。
image.png

表示されたcom.exsample.demoを右クリックし、
新規(W)パッケージを選択。
image.png

新規javaパッケージの設定Windowが表示されるので、名前のcom.exsample.demo以下に.controllerを追記し、com.example.demo.controllerとしておく。完了(F)を押下で完了。
image.png

eclipseの画面に戻ると、下記のようなcontrollerパッケージが作成されているはず。
image.png

作成された、controllerパッケージを右クリック。
新規(W)クラスを選択。
image.png

新規Javaクラスの設定Windowが表示されるので、名前をDemoController.javaと設定し、完了を押下。
image.png

現段階で、ファイル階層は下記のようになっているのが正。
image.png

作成したDemoController.javaをダブルクリックし、エディターを開き、下記をコピペ

DemoController.java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class DemoController {
    
    @GetMapping("/demo")
    private String display(){
        return "/index.html";
    }
}

次に、ディレクトリのウィンドウに戻りsrc/main/resourcesを展開。
image.png

表示されたstaticを右クリックし、
新規(W)HTMLファイルを選択。
image.png

名前を、index.htmlに変更し、完了(F)を押下。
image.png

上記完了後のファイル階層は下記が正。
image.png

作成した、index.htmlの内容は以下をコピぺしておく。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>テスト</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>

最後に、最上階層のフォルダ(demo[boot])を右クリックし、
実行(R)→ 4 Spring Boot アプリケーションを選択し、実行。
image.png

上記実行でeclipse内のコンソールが下図のようになるはず。
image.png

任意のブラウザ(chrome,Edgeなど)で、
http://localhost:8080/demo
にアクセス。
http://localhost:8080/demo/ では失敗するので要注意

image.png

これで、環境構築はひと段落...

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3