今回は、Spring Bootで簡単なサンプルを作ってみます。
STS3(3.9.6)+SpringBoot2.0+tymeleaf3.0迄動作確認しています。
サンプルの仕様
例によって、”Hello world"です。
Viewの部分はJSPではなく、tymeleafを使います。
ただ、文字を表示するだけじゃ面白くないので、以下を確認事項とします。
- テンプレートエンジン(thymeleaf)の利用方法
- CSS/Images/JavaScriptの配置と読み込み方法
- データベースへの接続方法(MySQL)
- コントローラクラスとビューの値の受け渡し方法
2017/12/07追記
>以降の画面は、時点の最新バージョン3.9.1のものにしています。
新規プロジェクトを作る
ファイル>新規>Springスターター・プロジェクトを選びます。
続いて表示される画面で、名前/グループ/成果物/パッケージ/説明の部分を変更して「次へ」を押します。
今回は、名前・成果物を「hello」、グループ・パッケージを「jp.hello」としてます。
続いて初期生成時に組み込む機能の選択です。
Spring Bootは使いたい機能をpom.xmlに書き込むことで利用可能にするスタイルですが、ここでチェックをつけたら、それを自動生成してくれます。
今回は、 Web、MySQL,JPA、tymeleafの4つだけチェックをつけます。
その結果生成される設定はこうです。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency><dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
完了ボタンを押すと、プロジェクトが生成されます。でも、そのままでは実行できません。
最初の1回だけ実行する処理
生成されたプロジェクトを選択して、右クリックメニューで実行ー>7Maven install を選んで実行しておく必要があります。(最初の1回のみでいいです)
とりあえず内蔵サーバーで実行はできるようになりました。
DB接続エラーの解消
プロジェクトを作る時に、MySQLにチェックしているので、途中でDB接続エラーになります。
MySQLに接続できるようにします。(MySQLはインストールされているものとして書いてます。まだの人は、MySQLを先にインストールしてください)
MySQLに、rootでログインして、テスト用のユーザを作成して、データベースを作ります。以下の「sample」の部分が変更点です。
GRANT ALL PRIVILEGES ON *.* TO sample@localhost IDENTIFIED BY 'sample' WITH GRANT OPTION;
FLUSH PRIVILEGES;CREATE DATABASE sampledb CHARACTER SET utf8;
MySQLに接続する設定を、application.propertiesに書き込みます。src\main\resourcesの下にあります。
sampleの部分を上のMySQL側の設定とあわせます。
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost/sampledb
spring.datasource.username=sample
spring.datasource.password=sample
設定できたら実行してみます。
アプリケーションを実行してDB設定を確認
プロジェクトの右クリックメニューで 実行>Spring Bootアプリケーションを選びます。
これでエラーがでないで内蔵サーバーが動けば、MySQLに接続できてます。
内蔵サーバーが動いたからどうかは、コンソールで確認できます。
Tomcat started on port(s): 8080 (http)
Started xxxxApplication in 29.997 seconds (JVM running for 32.382)
Startedってでてるからわかりやすいです。
Tomcatのポートを変更する場合の注意
上記説明は、Tomcatが8080で動いている前提です。
tomcatが動くポートはデフォルトで8080です。
でも、変更することはできます。
変更する場合は、application.properties で、「server.port=80」みたいに指定します。
だから、こちらを先に確認しといても良いです。
確認できたら、一旦終了させときます。
コンソールの上の方で赤■の停止ボタンを押します。
次は、サンプルを作ります。
まず、HTMLファイルを作成して、css、javascript、画像などの静的コンテンツを配置してみます。
ファイル配置のルールは以下でいいみたいです。
- HTML: src/main/resources/templates の下
- CSS : src/main/resources/static/css の下
- 画像 : src/main/resources/static/images の下
- JavaScript: src/main/resources/static/js の下
css、images,jsフォルダは、staticの下に自分でフォルダを作ります。
上記のようにした場合の静的コンテンツの参照の仕方です。hello.XXXの部分は実際のファイル名に置き換えます。
CSS
<link href="../static/css/hello.css" th:href="@{/css/hello.css}" rel="stylesheet"/>
JavaScript
<script src="../static/js/hello.js" th:src="@{/js/hello.js}"></script>
画像
<img src="../static/images/hello.jpg" th:src="@{/images/hello.jpg}" class="xxx" alt="xxx"></img>
このように静的パスと、動的パス(th:src・・等)を一緒にかけるので、デザイン時にわざわざサーバーを立ち上げなくてもレイアウトの確認ができます。
HTML作成
上記を気をつけて、とりあえず、簡単なHTMLを作ってみます。
thymeleafを有効にするためには、この1行は必須なので、絶対に忘れないようにします。
<html xmlns:th="http://www.thymeleaf.org">
やることは以下です。
- Hello world を表示する
- hello.jpgという画像を表示する。
- コントローラクラスの変数 msg の文字列を表示する。
- 画像の上にマウスが乗ると、画像の縁に白枠をつける。
HTMLの全体はこんな感じ。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<link href="/css/hello.css" th:href="@{/css/hello.css}" rel="stylesheet"/>
<script src="/js/jquery-3.1.1.min.js" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<title>Insert title here</title>
<script>
<!--
$(function(){
$(".pic").mouseover(function(){
$(this).css("border","solid 5px #FFFFFF");
});
$(".pic").mouseout(function(){
$(this).css("border-style","none");
});
});
//-->
</script>
</head>
<body>
<h1>Hello world</h1>
<img src="/images/hello.jpg" class="pic" alt=""></img>
<p class="msg" th:text="${msg}" />
</body>
</html>
hello.css
hello.css の内容です。確認用にフォントと背景色を変えてます。
body {
font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
font-size: 16px;
background-color:lightsteelblue;
}
コントローラクラス
src/main/jp/helloの下に置きます。今回は適当にSampleContorollerとしてみました。
@Controller
public class SampleController {
@RequestMapping("/hello")
public String hello(Model model) {
model.addAttribute("msg","これはThymeleafを使ったサンプルです。");
return "hello";
}
}
シンプルでいいですね。
@RequestMappingで呼び出しのパスを指定(上記なら、例えば http://localhost:8080/hello になります)して、VIEWの部分を記述したHTMLファイルの名前をreturnで返せばいいみたいです。
サンプルの実行
あとは、ファイルを保存して実行です。
アプリケーションが起動したら、ブラウザをたちあげて http://localhost:8080/hello でアクセスします。
よしよし。マウスを動かして画像の上にもってくると、白枠もつく。
JavaScriptもちゃんと動いているな。
関連記事
入力画面に関連する記事
参照画面・画面遷移に関連する記事
参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。
入力チェックに関連する記事
入力チェック:@Patternと正規表現で独自チェックする。
入力チェック用アノテーション定義を自分で作る。(独自実装版)
データアクセス・その他に関連する記事