整理と雑記

たまにリライト

Spring MVCで画面を表示させる

Spring MVCを使ってhtmlファイルを配置して画面が表示されるまでの手順を書いていく。

環境

  • Eclipse Oxygen Release (4.7.0)
  • JavaSE-1.8(1.8.0_111)
  • Gradle 3.5
  • Tomcat 8.5.16

Gradleプロジェクトの作成

  1. Eclipseを起動後Project Managerで右クリック
  2. New→Project..→Gradle Projectを選択
  3. Welcomeページが表示されるのでそのままNext
  4. プロクジェクト名等々が聞かれるので任意で入力(今回はSpringSampleというプロジェクト名とする)

後はEclipseの方で勝手にGradleプロジェクトを作成してくれる。

プロジェクト構成の初期設定は以下である。サンプルとして設定されるLibrary.javaとLibraryTestは使用しないので削除する。

├── build.gradle
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── settings.gradle
└── src
    ├── main
    │   └── java
    │       └── Library.java
    └── test
        └── java
            └── LibraryTest.java

build.gradleの設定

次にbuild.gradleを設定する。

apply {
    plugin 'java'
    plugin 'war'
    plugin 'eclipse'
}

repositories {
    jcenter()
}

dependencies {
    compile 'org.springframework:spring-webmvc:4.3.10.RELEASE'
    compile 'org.thymeleaf:thymeleaf-spring4:3.0.7.RELEASE'
}

build.gradleの設定を変更後に右クリック→Gradle→Refresh Gradle Projectでプロジェクトを更新する。

Servletの設定

サーブレットに関する設定を行うためWEB-INF配下にweb.xmlを作成する。

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="
        http://java.sun.com/xml/ns/javaee 
        http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd
        ">

    <!-- (1) -->
    <display-name>spring-sample</display-name>
    <servlet>
        <!-- (2) -->
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <!-- (3) -->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- (4) -->
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

(1) display-nameにWeb アプリケーションの表示名を記載する。
(2) servlet-nameにサーブレットの標準名を記載する。Springの設定ファイル名に影響する。
(3) load-on-startupにサーブレットのロード順を記載する。
(4) servlet-mappingにサーブレットと URL パターンの間のマッピングの定義を記載する。

詳しくはこの辺を読むと良い。

otndnld.oracle.co.jp

SpringMVCの設定

WEB-INF配下にSpringMVCの設定ファイルを作成する。

ファイル名はweb.xmlのservlet-nameに「-servlet」をくっつけたものにする。(今回の場合はdispatcher-servlet.xmlになる)

dispatcher-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.3.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd">

    <!-- (1) -->
    <context:component-scan base-package="com.controller" />

    <!-- (2) -->
    <mvc:annotation-driven />

    <!-- (3) -->
    <mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" />

    <!-- (4) -->
    <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".html" />
        <property name="templateMode" value="HTML5" />
        <property name="characterEncoding" value="UTF-8" />
    </bean>

    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver" />
    </bean>

    <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="templateEngine" ref="templateEngine" />
        <property name="characterEncoding" value="UTF-8" />
    </bean>

</beans>

(1) base-packageにControllerクラスを配置するパッケージを記載する。
(2) htmlファイルからControllerクラスにリクエストを送ってくれるようになる。デフォルトでその処理をしてくれるので何も書かなくて良い。
(3) CSSファイルや画像ファイルを配置する場所を記載する(今回は使用していない)
(4) prefixにviewに使用するファイルを配置する場所を記載、suffixには拡張子を記載する。

詳しくはこの辺を読むと良い。

sites.google.com

Viewの設定

実際に画面に表示させるhtmlファイルの作成を行う。

Viewに使用するファイルはdispatcher-servlet.xmlのInternalResourceViewResolverで設定したフォルダ配下に作成する必要があるので注意。

今回はWEB-INF/views配下に以下の3ファイルを作成する。

  • login.html(ログイン画面)
  • reissuePassword.html(パスワード再発行画面)
  • userRegister.html(ユーザ登録画面)

作成手順は以下になる。

  1. src/main/配下にwebapp/WEB-INF/views/loginのフォルダを作成
  2. src/main/配下にwebapp/WEB-INF/views/userのフォルダを作成
  3. login配下にlogin.htmlを作成
  4. user配下にreissuePassword.html、userRegister.htmlを作成
login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<div class="container" style="margin-top:30px">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title"><strong>Login </strong></h3></div>
            <div class="panel-body">
                <form role="form">
                        <div class="form-group">
                            <label for="userId">UserId or Email</label>
                            <input class="form-control" style="border-radius:0px" id="userId" placeholder="UserId or Email">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" style="border-radius:0px" id="password" placeholder="Password">
                        </div>
                    <button type="submit" class="btn btn-sm btn-default">Sign in</button>
                    <p />
                    <div class="form-group">
                        forget password? <label for="reissueAPassword"><a href="./user/reissue">reissue a password</a></label>
                        <p />
                        new user? <label for="createAccount"><a href="./user/register">create new account</a></label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
reissuePassword.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<title>Reissue A Password</title>
</head>
<body>
<div class="container" style="margin-top:30px">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title"><strong>Reissue A Password</strong></h3></div>
            <div class="panel-body">
                <form role="form">
                        <div class="form-group">
                            <label for="userId">UserId</label>
                            <input class="form-control" style="border-radius:0px" id="userId" placeholder="UserId">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" style="border-radius:0px" id="email" placeholder="Email">
                        </div>
                    <button type="submit" class="btn btn-sm btn-default">Send</button>
                    <p />
                    <div class="form-group">
                        <label for="top"><a href="../">back to top</a></label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
userRegister.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<title>User Registration</title>
</head>
<body>
<div class="container" style="margin-top:30px">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title"><strong>User Registration</strong></h3></div>
            <div class="panel-body">
                <form role="form">
                        <div class="form-group">
                            <label for="userId">UserId</label>
                            <input class="form-control" style="border-radius:0px" id="userId" placeholder="UserId">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" style="border-radius:0px" id="password" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" style="border-radius:0px" id="email" placeholder="Email">
                        </div>
                    <button type="submit" class="btn btn-sm btn-default">Register</button>
                    <p />
                    <div class="form-group">
                        <label for="top"><a href="../">back to top</a></label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

htmlファイルに関しては以下を参考にした。

bootsnipp.com

Controllerの設定

画面の表示を制御するためのControllerクラスを作成する。

Controllerクラスはdispatcher-servlet.xmlのcontext:component-scanで設定したパッケージ配下に作る必要があるので注意。

今回はcom.controller配下にLoginController.javaというクラスを作成する。

作成手順は以下になる。

  1. src/main/javaでパッケージcom.controller.loginを作成する
  2. src/main/javaでパッケージcom.controller.userを作成する
  3. com.controller.login配下にLoginController.javaを作成する
  4. com.controller.user配下にUserController.javaを作成する
LoginController.java
package com.controller.login;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class LoginController {
    // ~/SpringSample/にアクセスしたらlogin.htmlを表示
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String goToLogin() {
        return "login/login";
    }
}
UserController.java
package com.controller.user;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping(value = "/user")
public class UserController {
    // ~/SpringSample/user/registerにアクセスしたらuserRegister.htmlを表示
    @RequestMapping(value="/register", method=RequestMethod.GET)
    public String goToRegister(Model model) {
        return "user/userRegister";
    }

    // ~/SpringSample/user/reissueにアクセスしたらreissuePassword.htmlを表示
    @RequestMapping(value="/reissue", method=RequestMethod.GET)
    public String goToReissue() {
        return "user/reissuePassword";
    }
}

画面の表示

設定は以上なのでを画面を表示させる。

  1. EclipseでTomcatを起動できるように設定する
  2. Tomcatを右クリック→Add and Remove..でSpringSampleを追加
  3. Tomcatを起動する
  4. http://localhost:8080/SpringSampleにアクセスする

EclipseからTomcatを起動できるようにする設定は以下を参考にすると良い。

www.javadrive.jp

表示される画面は以下の3つ。

~/SpringSample/(ログイン画面)
  • reissue a password:~/SpringSample/user/reissueに遷移してreissuePassword.htmlが表示される。
  • create new account:~/SpringSample/user/registerに遷移してuserRegister.htmlが表示される。

f:id:satoec5:20170815235522p:plain

~/SpringSample/user/reissue
  • back to top:~/SpringSample/に遷移してlogin.htmlが表示される。

f:id:satoec5:20170816013011p:plain

~/SpringSample/user/register
  • back to top:~/SpringSample/に遷移してlogin.htmlが表示される。

f:id:satoec5:20170816014423p:plain