IT派遣を救いたい

【Java】Springで作るwebアプリケーション【その1】

tomcatで作るwebアプリケーションではDBの接続まで行いました。
今回はSpringというフレームワークを使ってwebアプリケーションを作ります。
Springを採用している現場はそこそこ多いと思うのと、結構使える知識が増えるので、勉強がてら環境構築からやってみます。

とはいっても、Springをダウンロードしてくれば色々できちゃうので簡単です。
https://spring.io/tools でダウンロードします。

ダウンロードしたjarファイルをCドライブなりに移動して、ダブルクリックすると解凍が始まります。
解凍してできたフォルダの中にSpringToolSuite4.exeがあるので実行します。

文字コードの設定をしておきます
Window>Preferences>General>WorkspaceからText file encodingをUTF-8にしておきます。

早速プロジェクトを作成します
File>New>Spring starter projectを選択します。

spring webを選択しておきます

するとプロジェクトが作成されますので、ちょっと待ちます。

プロジェクトには最初から色々とファイルとフォルダがセットされています。
中にpom.xmlというファイルがあります。
プロジェクトの設定が書かれているようです。

pom.xmlに修正を加えます

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>kenshi</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>kenshi</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<!--  これをいれないと500エラーになった。 -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		
		 
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>
<!--  これをいれないと500エラーになった。 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

コントローラーの作成

コントローラーを作っていきます。まずはコントローラー用のパッケージを作成します。

「com.example.demo.controllers」という名前にしました。デフォルトで com.example.demoというパッケージがあるので、そこのコントローラーといった感じで、でないと404エラーが起きます。

そこにクラスを作ります。
今回はSampleControllerとしました。

SampleControllerを修正します

package com.example.demo.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.servlet.ModelAndView;

@Controller
public class SampleController {
	
	@GetMapping(value="/sample")
	public ModelAndView home(ModelAndView modelAndView) {
		modelAndView.setViewName("sample");
		modelAndView.addObject("sample","サンプルテキスト");
		return modelAndView;
	}
	
}

@GetMapping(value=”/sample”)というアノテーションで、GETで、/sampleにアクセスした時の処理を書いています。

setViewNameは使用するビューファイルの名前です・ビューファイルは後で作成します。
addObjectでは、sampleという名前でサンプルテキストというオブジェクトをビューに渡せます。

ビューの作成

src\main\resources\templates\sample.htmlを作成します。この時必ずtemplatesフォルダにhtmlファイルを作成します。

<h1>[[${sample}]] </h1>
<h2 th:text="${sample}"></h2>
<P>これはサンプルページです</P>

コントローラーのほうでsampleという名前のオブジェクトをaddしましたが、それをビューから呼び出しています。

プロジェクトを右クリックして、Run as > Spring boot appを選択すると起動します。

起動したら、 http://localhost:8080/sample にアクセスします。

コントローラーで指定した値も取得できているのがわかるかと思います。

POST送信

次はPOST送信をします。
htmlを修正します

<h1>[[${sample}]] </h1>
<h2 th:text="${sample}"></h2>
<P>これはサンプルページです</P>
<form method="post" action="/sample">
<input type="text" name="name" />
<button type="submit">送信</button>
</form>

次にコントローラーにメソッドを追加する修正します

package com.example.demo.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class SampleController {
	
	@GetMapping(value="/sample")
	public ModelAndView home(ModelAndView modelAndView) {
		modelAndView.setViewName("sample");
		modelAndView.addObject("sample","サンプルテキスト");
		return modelAndView;
	}
	
	//追加
	@PostMapping(value="/sample")
	public ModelAndView post(@RequestParam("name")String name,ModelAndView modelAndView) {
		modelAndView.setViewName("home");
		modelAndView.addObject("name",name);
		return modelAndView;
	}
	
}

getの時と同じようにPostMappingでurlを指定します。
引き数はリクエストのパラメータ名を指定して、変数に束縛するようです。

ビューの作成。home.htmlを作成します。

<h1>親愛なる[[${name}]] へ</h1>
<P>高田健志ってすごいよなぁ!?</P>

サーバーの再起動はボタン一つでOKです。ReLaunchをクリックします。

正しくPOST送信ができるか試してみます。

きちんとPOST送信できていて、パラメータの受け渡しもできていることが確認できました。

おまけ。ビューの表示でエラーが起きたら

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Thu Feb 06 20:53:47 JST 2020
There was an unexpected error (type=Internal Server Error, status=500).
Circular view path [home]: would dispatch back to the current handler URL [/home] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)

このエラーはpom.xmlに

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
		

を書き忘れているとおきます。