Hello world!
The time on the server is 2018/01/01 00:00:00 JST.
.. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
.. list-table::
:header-rows: 1
:widths: 10 90
* - 項番
- 説明
* - | (7)
- | ControllerでModelに設定した\ ``serverTime``\ を表示する。
| \ ``th:text``\属性は、記述した要素のコンテンツを属性値で上書きする。
| \ ``th:text``\属性に、変数式\ ``${}``\で変数名を指定することで、ControllerでModelに登録した変数を参照できる。
| ユーザの入力値を表示する場合は、\ ``th:text``\ 属性を用いて、必ずXSS対策を行うこと。
|
プロジェクトを右クリックして「Run As」->「Run on Server」を選択する。
.. figure:: ./images/image031.jpg
:width: 70%
|
APサーバー(Tomcat v9.0 Server at localhost)を選択し、「Next」をクリックする。
.. figure:: ./images/image032.jpg
:width: 70%
|
todoが「Configured」に含まれていることを確認して「Finish」をクリックしてサーバーを起動する。
.. figure:: ./images/image033.jpg
:width: 70%
|
起動すると以下のようなログが出力される。
"\ ``/``\" というパスに対して\ ``com.example.todo.app.welcome.HelloController``\ のhelloメソッドがマッピングされていることが分かる。
.. code-block:: console
:emphasize-lines: 12-14
date:2020-02-17 14:57:08 thread:localhost-startStop-1 X-Track: level:INFO logger:o.springframework.web.servlet.DispatcherServlet message:Initializing Servlet 'appServlet'
date:2020-02-17 14:57:09 thread:localhost-startStop-1 X-Track: level:TRACE logger:o.s.w.s.m.m.a.RequestMappingHandlerMapping message:
c.e.t.a.c.e.CommonErrorController:
{ /common/error/resourceNotFoundError}: resourceNotFoundError()
{ /common/error/missingCsrfTokenError}: missingCsrfTokenError()
{ /common/error/transactionTokenError}: transactionTokenError()
{ /common/error/accessDeniedError}: accessDeniedError()
{ /common/error/invalidCsrfTokenError}: invalidCsrfTokenError()
{ /common/error/businessError}: businessError()
{ /common/error/dataAccessError}: dataAccessError()
{ /common/error/systemError}: systemError()
date:2020-02-17 14:57:09 thread:localhost-startStop-1 X-Track: level:TRACE logger:o.s.w.s.m.m.a.RequestMappingHandlerMapping message:
c.e.t.a.w.HelloController:
{[GET, POST] /}: home(Locale,Model)
date:2020-02-17 14:57:09 thread:localhost-startStop-1 X-Track: level:DEBUG logger:o.s.w.s.m.m.a.RequestMappingHandlerMapping message:9 mappings in 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping'
date:2020-02-17 14:57:11 thread:localhost-startStop-1 X-Track: level:INFO logger:o.springframework.web.servlet.DispatcherServlet message:Completed initialization in 3429 ms
|
ブラウザで http://localhost:8080/todo にアクセスすると、以下のように表示される。
.. figure:: ./images/image034.png
:width: 60%
コンソールを見ると、
* 共通ライブラリから提供している\ ``TraceLoggingInterceptor``\ のTRACEログ
* Controllerで実装したINFOログ
が出力されていることがわかる。
.. code-block:: console
:emphasize-lines: 1-4
date:2018-01-23 14:04:58 thread:tomcat-http--8 X-Track:804bef05afe441ef8d425bc806e0ecc2 level:TRACE logger:o.t.gfw.web.logging.TraceLoggingInterceptor message:[START CONTROLLER] HelloController.home(Locale,Model)
date:2018-01-23 14:04:58 thread:tomcat-http--8 X-Track:804bef05afe441ef8d425bc806e0ecc2 level:INFO logger:com.example.todo.app.welcome.HelloController message:Welcome home! The client locale is ja_JP.
date:2018-01-23 14:04:58 thread:tomcat-http--8 X-Track:804bef05afe441ef8d425bc806e0ecc2 level:TRACE logger:o.t.gfw.web.logging.TraceLoggingInterceptor message:[END CONTROLLER ] HelloController.home(Locale,Model)-> view=welcome/home, model={serverTime=2018/01/23 14:04:58 JST}
date:2018-01-23 14:04:58 thread:tomcat-http--8 X-Track:804bef05afe441ef8d425bc806e0ecc2 level:TRACE logger:o.t.gfw.web.logging.TraceLoggingInterceptor message:[HANDLING TIME ] HelloController.home(Locale,Model)-> 744,374 ns
.. note::
\ ``TraceLoggingInterceptor``\ はControllerの開始、終了でログを出力する。終了時には\ ``View``\ と\ ``Model``\ の情報および処理時間が出力される。
|
.. _create-prototype-of-tutorial-todo-label:
Todoアプリケーションのプロトタイプ作成
================================================================================
HTMLでTodoアプリケーションのプロトタイプを作成する。
本チュートリアルでは、ここで作成したプロトタイプにThymeleafの属性を付与して、Todoアプリケーションの画面を実装していく。
プロトタイプ作成
--------------------------------------------------------------------------------
:ref:`tutorial-todo-application-overview-label` で示した画面をプロトタイプとして作成する。
.. figure:: ./images/image001.png
:width: 40%
.. note:: **実際のアプリケーション開発で作成するプロトタイプ**
実際のアプリケーション開発では、ユースケースごとに画面の状態が確認できるプロトタイプ（本チュートリアルの例では、「TODOを作成した状態」や「TODOを完了した状態」など）を作成するのが一般的だと思われるが、
今回はThymeleafを使用したアプリケーションの作成を学ぶチュートリアルで、プロトタイプの正しい作り方を解説することは主眼ではないため、省略する。
また、プロトタイプをブランクプロジェクトベースで作成するかは開発プロジェクトの判断に任せるが、本チュートリアルでは、プロトタイプからアプリケーションを開発する工程を理解しやすいように、ブランクプロジェクトベースでプロトタイプを作成している。
Package Explorer上で右クリック -> New -> File を選択し、「New File」ダイアログを表示し、
.. tabularcolumns:: |p{0.10\linewidth}|p{0.30\linewidth}|p{0.50\linewidth}|
.. list-table::
:header-rows: 1
:widths: 10 30 50
* - 項番
- 項目
- 入力値
* - 1
- Enter or select the parent folder
- ``todo/src/main/webapp/WEB-INF/views/todo``
* - 2
- File name
- ``list.html``
を入力して「Finish」する。
作成したファイルは以下のディレクトリに格納される。
.. figure:: ./images/create-list-jsp.png
:ref:`tutorial-todo-application-overview-label` で示した画面をHTMLとして表示するために必要なプロトタイプの実装を行う。
.. code-block:: html
:emphasize-lines: 19, 29, 48