SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

とりあえず動くサンプルとしてDB接続付きの「Hello World」を作る。STS3/SpringBoot/thymeleaf

今回は、Spring Bootで簡単なサンプルを作ってみます。 

STS3(3.9.6)+SpringBoot2.0+tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

 

サンプルの仕様

 

例によって、Hello world"です。 

Viewの部分はJSPではなく、tymeleafを使います。

ただ、文字を表示するだけじゃ面白くないので、以下を確認事項とします。 

  • テンプレートエンジン(thymeleaf)の利用方法
  • CSS/Images/JavaScriptの配置と読み込み方法
  • データベースへの接続方法(MySQL
  • コントローラクラスとビューの値の受け渡し方法

 

2017/12/07追記

>以降の画面は、時点の最新バージョン3.9.1のものにしています。

 

新規プロジェクトを作る

 

ファイル>新規>Springスターター・プロジェクトを選びます。

f:id:arakan_no_boku:20170211234259j:plain

 続いて表示される画面で、名前/グループ/成果物/パッケージ/説明の部分を変更して「次へ」を押します。 

今回は、名前・成果物を「hello」、グループ・パッケージを「jp.hello」としてます。

f:id:arakan_no_boku:20171203223432j:plain

続いて初期生成時に組み込む機能の選択です。 

Spring Bootは使いたい機能をpom.xmlに書き込むことで利用可能にするスタイルですが、ここでチェックをつけたら、それを自動生成してくれます。 

今回は、 Web、MySQL,JPA、tymeleafの4つだけチェックをつけます。

f:id:arakan_no_boku:20171203223832j:plain

その結果生成される設定はこうです。

<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回のみでいいです)

f:id:arakan_no_boku:20170211234444j:plain

とりあえず内蔵サーバーで実行はできるようになりました。 

 

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アプリケーションを選びます

f:id:arakan_no_boku:20170218231238j:plain

これでエラーがでないで内蔵サーバーが動けば、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」みたいに指定します。

だから、こちらを先に確認しといても良いです。

確認できたら、一旦終了させときます。

コンソールの上の方で赤■の停止ボタンを押します

f:id:arakan_no_boku:20170219094015j:plain 

 

次は、サンプルを作ります。 

 

まず、HTMLファイルを作成して、cssjavascript、画像などの静的コンテンツを配置してみます。 

ファイル配置のルールは以下でいいみたいです。

  • 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の下に自分でフォルダを作ります。

f:id:arakan_no_boku:20170218225112j:plain

上記のようにした場合の静的コンテンツの参照の仕方です。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;
}

 

コントローラクラス

 

さて、最後にJAVAのコントローラクラスです。 

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 でアクセスします。

f:id:arakan_no_boku:20170218231950j:plain

 よしよし。マウスを動かして画像の上にもってくると、白枠もつく

f:id:arakan_no_boku:20170218232032j:plain

 JavaScriptもちゃんと動いているな。 

 

f:id:arakan_no_boku:20170404203859j:plain

 


 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。