あずきみるくのあずきはニガテ - for Engineer

ひよっこプログラマがやってみたことやハマっちゃったことなど、備忘録的な感じで書いていきます。

SpringBootをEclipse、Gradleで使ってみる - (4)JSPでHello World

前回までで、とりあえずHelloWorldを出すことができました。
でも、やっぱりWebアプリを作るならJSPを使いたいです。

と、いうわけで、今回はJSPを使ってみたいと思います。
早速ですが、前回のプロジェクトに何個かファイルを追加していきます。

1)Controller.javaの編集
 前回のものと区別するために、今回はアクセスするパスを変更して追記します。
 

package sample.hello;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

  @Controller
  @EnableAutoConfiguration
  public class SampleController {

	   @RequestMapping("/")
	   @ResponseBody
	   public String home() {
		   return "Hello, Spring Boot Sample Application!";
	   }

  // ここから-----------------------------------------
	@RequestMapping("/login")
	 public String login() {
	      return "login";
	 } 
  // ここまで----------------------------------------- 
}

  ここでは、新しく「/login」のパスで来た場合の処理を追加しました。
   「 @ResponseBody」は直接記載するためのアノテーションなので、今回は不要です。
  (JSPを使うから、ね)
  returnは「"login"」のみです。
  これは後から追記します。




2)application.propatiesの追加
  新しくファイルを追加します。
  場所は(プロジェクト名)/src/main/resources/application.propatiesです。

  ここに追記するのは2行だけ。

spring.view.prefix: /WEB-INF/views/
spring.view.suffix: .jsp

  記載したのは先ほどコントローラクラスでreturnに指定したものをJSPのパスに変換?するための内容です。
  「prefix」にはJSPを配置しているパスを。
  「suffix」にはJSP拡張子をそれぞれ付与しています。

  つまり、コントローラクラスで「"login"」とreturnされると、ここの設定で
  「/WEB-INF/views/」配下にある「login.jsp」が表示されるようになるのです。


3)JSPファイルの作成

  というわけで、2)で指定した場所に「login.jsp」がないといけませんね。
  はい、作りましょう。

  まずは、ディレクトリの作成からです。
  src/main/の下に「webapp」というフォルダを作成します。
  ここが、webアプリから見える場所になります。

  「webapp」の下に「WEB-INF/views」フォルダを作成して、そこに「login.jsp」を追加します。
  こんな感じ。



  「login.jsp」の中身はこんな感じです。

<pre><code>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login</title>
</head>
<body>
    <h2>Sign in</h2>
    <form action="/menu">
       <input type="text" id="name" placeholder="Username or email">
       <input type="password" id = "pwd" placeholder="Password">
        <button type="submit">Login</button>
       </form>
</body>
</html>
</code></pre>

  だいぶはしょりました。
  かなりしょぼいです。

  
4)の追加
  もうひとつ忘れてはいけません。
  前回のbuild.gradleの内容だと、JSPは表示されません。
  tomcatJSPを表示するプラグインがいるのです。

  というわけで、build.gradleも編集します。

  dependencies項目に

   // tomcat-for read JSP
compile "org.apache.tomcat.embed:tomcat-embed-jasper:$tomcatVersion"
 
  を追記してあげてください。

  あと、tomcatVersion部分は変数なので、この中身も
  ext項目に
  
  // tomcat
tomcatVersion = "8.0.15"

  を追記してください。

 出来上がりはご覧のとおり。



5)Let's HelloWorld!!

  できましたでしょうか。
  うまく行けば、こんな感じのしょぼい画面が表示されます。
  あとはCSSやらなんやらでかっこよくしてあげてください。







ぼちぼち更新、次回は値の取得方法だったりDB接続だったりをやってみたいと思います。