アラカン"BOKU"のITな日常

あれこれ興味をもって考えたことを書いてます

STS 3.8.3(Spring Boot 1.5.1)+thymeleafでとりあえず動くサンプルを作る。

Spring Bootで簡単なサンプルを作ってみます。”Hello world"ですね。

 

ただ、文字を表示するだけじゃ面白くないし、参考にならないので、最低限として以下を確認事項とします。

 

なお、Viewの部分はJSPではなく、tymeleafを使います。そっちが「推奨」らしいので。

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

 

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

f:id:arakan_no_boku:20170211234259j:plain

 

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

 

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

f:id:arakan_no_boku:20170218223329j:plain

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

 

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

 

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

f:id:arakan_no_boku:20170218223546j: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>

 

後で書き足してもいいのですけど。特に、コアのセキュリティは後で組み込む方がいいです。

 

初期生成時にチェックつけたら、サーバへの接続確認したいだけなのに、ログインダイアログがでてきたりして、ちょっと面倒です。

 

完了ボタンを押すと、プロジェクトが生成されます。でも、そのままでは実行できません。

 

生成されたプロジェクトを選択して、右クリックメニューで実行ー>7Maven install を選んで実行しておく必要があるみたいです。(最初の1回のみでいいです)

f:id:arakan_no_boku:20170211234444j:plain

 

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

 

でも、プロジェクトを作る時に、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 

 

設定できたら実行してみます。

 

プロジェクトの右クリックメニューで 実行>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が8080で動いているので、アクセスは localhost:8080 でいいのもわかります。

 

確認できたら、一旦終了させときます。コンソールの上の方で赤■の停止ボタンを押します

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="/css/hello.css" th:href="@{/css/hello.css}" rel="stylesheet"/>

 JavaScript

<script src="/js/hello.js" th:src="@{/js/hello.js}"></script> 

画像

 <img src="/images/hello.jpg" class="xxx" alt="xxx"></img> 

 

とりあえず、簡単なHTMLを作ってみます。やることは以下です。

  • Hello world を表示する
  • hello.jpgという画像を表示する。
  • コントローラクラスの変数 msg の文字列を表示する。
  • 画像の上にマウスが乗ると、画像の縁に白枠をつける。

<!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 の内容です。確認用にフォントと背景色を変えてます

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

 

 


 STS  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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