`

spring-boot-web-ui及thymeleaf基本使用

springthymeleaf 
阅读更多

视图控制层代码demo如下：

 

@Controller
@RequestMapping("/")
public class MessageController {
	private final MessageRepository messageRepository;

	@Autowired
	public MessageController(MessageRepository messageRepository) {
		this.messageRepository = messageRepository;
	}

	@RequestMapping
	public ModelAndView list() {
		Iterable<Message> messages = this.messageRepository.findAll();
		return new ModelAndView("messages/list", "messages", messages);
	}

	@RequestMapping("{id}")
	public ModelAndView view(@PathVariable("id") Message message) {
		return new ModelAndView("messages/view", "message", message);
	}

	@RequestMapping(params = "form", method = RequestMethod.GET)
	public String createForm(@ModelAttribute Message message) {
		return "messages/form";
	}

	@RequestMapping(method = RequestMethod.POST)
	public ModelAndView create(@Valid Message message, BindingResult result,
			RedirectAttributes redirect) {
		if (result.hasErrors()) {
			return new ModelAndView("messages/form", "formErrors", result.getAllErrors());
		}
		message = this.messageRepository.save(message);
		redirect.addFlashAttribute("globalMessage", "Successfully created a new message");
		return new ModelAndView("redirect:/{message.id}", "message.id", message.getId());
	}

	@RequestMapping("foo")
	public String foo() {
		throw new RuntimeException("Expected exception in controller");
	}

}

 注：@Controller：1：spring的控制层。2：spring的注解之一放在类名之前3:spring配置文件中如果配置了扫描包路径，自动检测该注释的类并注入。4：spring控制层可以接收请求，并且返回响应。

 

    @RequestMapping：用户请求路径是http://localhost:8080/项目名/类的@RequestMapping的value值/方法的@RequestMapping的value值。

    @Autowired：依赖注入。

    @PathVariable：rest访问方式获取参数传递

    ModelAndView：一次性返回model和view2个对象,有7个构造函数，用来设定返回对象和视图，也可以用set方法设置。

    @ModelAttribute：获取页面传递参数。也可以这样用

    

        @ModelAttribute("user")  
        public User addAccount() {  
           return new User("jz","123");  
        }  
  
        @RequestMapping(value = "/helloWorld")  
        public String helloWorld(@ModelAttribute("user") User user) {  
           user.setUserName("jizhou");  
           return "helloWorld";  
        }

  @SessionAttributes("user")用户同上只是使用范围不同而已。

 

  RedirectAttributes：我的理解是controller控制层跳转到控制层传递参数用的。

  @Valid：对实体类的一个验证。验证符合jpa的标准。要和BindingResult result配合使用，如果验证不通过的话，result.hasErrors()，跳转 。如一个实体类标准：

  

import javax.validation.constraints.Min;  
import javax.validation.constraints.NotNull;  
import org.hibernate.validator.constraints.NotBlank;  
   
public class User {  
   
    private String username;  
     
    private String password;  
     
    private int age;  
   
    @NotBlank(message="用户名不能为空")  
    public String getUsername() {  
       return username;  
    }  
   
    public void setUsername(String username) {  
       this.username = username;  
    }  
   
    @NotNull(message="密码不能为null")  
    public String getPassword() {  
       return password;  
    }  
   
    public void setPassword(String password) {  
       this.password = password;  
    }  
   
    @Min(value=10, message="年龄的最小值为10")  
    public int getAge() {  
       return age;  
    }  
   
    public void setAge(int age) {  
       this.age = age;  
    }  
     
}

 

 

最后个方法就是抛出页面异常.

    

html主要用ThyMeleaf标签，Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fern&aacute;ndez创建，该作者还是Java加密库Jasypt的作者。

form.html代码如下：

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  layout:decorator="layout">
  <head>
    <title>Messages : Create</title>
  </head>
  <body>
    <h1 layout:fragment="header">Messages : Create</h1>
    <div layout:fragment="content"
        class="container">
      <form id="messageForm"
          th:action="@{/(form)}"
          th:object="${message}"
          action="#"
          method="post">
        <div th:if="${#fields.hasErrors('*')}"
            class="alert alert-error">
          <p th:each="error : ${#fields.errors('*')}"
              th:text="${error}">
            Validation error
          </p>
        </div>
        <div class="pull-right">
          <a th:href="@{/}" href="messages.html">
            Messages
          </a>
        </div>
        <label for="summary">Summary</label>
        <input type="text"
            th:field="*{summary}"
            th:class="${#fields.hasErrors('summary')} ? 'field-error'"/>
        <label for="text">Message</label>
        <textarea
            th:field="*{text}"
            th:class="${#fields.hasErrors('text')} ? 'field-error'"></textarea>
        <div class="form-actions">
          <input type="submit" value="Create"/>
        </div>
      </form>
    </div>
  </body>
</html>

 list.html代码如下：

 

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  layout:decorator="layout">
  <head>
    <title>Messages : View all</title>
  </head>
  <body>
    <h1 layout:fragment="header">Messages : View all</h1>
    <div layout:fragment="content" class="container">
      <div class="pull-right">
        <a href="form.html" th:href="@{/(form)}">Create Message</a>
       </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <td>ID</td>
            <td>Created</td>
            <td>Summary</td>
          </tr>
        </thead>
        <tbody>
          <tr th:if="${messages.empty}">
            <td colspan="3">
              No messages
            </td>
          </tr>
          <tr th:each="message : ${messages}">
            <td th:text="${message.id}">1</td>
            <td th:text="${#calendars.format(message.created)}">
              July 11, 2012 2:17:16 PM CDT
            </td>
            <td>
              <a href="view.html"
                  th:href="@{'/' + ${message.id}}"
                  th:text="${message.summary}">
                The summary
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

 view.html代码如下：

 

 

<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  layout:decorator="layout">
  <head>
    <title>Messages : View</title>
  </head>
  <body>
    <h1 layout:fragment="header">Messages : Create</h1>
    <div layout:fragment="content"
        class="container">
      <div class="alert alert-success"
          th:if="${globalMessage}"
          th:text="${globalMessage}">
        Some Success message
      </div>
      <div class="pull-right">
        <a th:href="@{/}" href="list.html">
          Messages
        </a>
      </div>
      <dl>
        <dt>ID</dt>
        <dd id="id" th:text="${message.id}">123</dd>
        <dt>Date</dt>
        <dd id="created"
            th:text="${#calendars.format(message.created)}">
          July 11, 2012 2:17:16 PM CDT
        </dd>
        <dt>Summary</dt>
        <dd id="summary"
            th:text="${message.summary}">
          A short summary...
        </dd>
        <dt>Message</dt>
        <dd id="text"
            th:text="${message.text}">
          A detailed message that is longer than the summary.
        </dd>
      </dl>
    </div>
  </body>
</html>

 注th标签的引用就是首先要注入标签头，xmlns:th="http://www.thymeleaf.org"放入html标签内就可以了，

 

# 代表 获取对象 从 messages bundle 也就是消息的资源本地化文件

$ 表示从model里面获取

<div class="col-sm-9">
       <input type="text" th:field="*{id}" placeholder="Order Id" class="col-xs-10 col-sm-5" />
               <p style="color:red" th:if="${#fields.hasErrors('*{id}')}" th:errors="*{id}"></p>
 </div>

 th:fragment=“public” 相当于 include标签

th:each="user : ${users}" 相当于c:foreach  使用时候

如上面

<tr th:each="user : ${users}">

<td th:text="${user.id}">01</td>

<td th:text="${user.name}">朱遇平</td>

<td th:text="${user.xx}">java</td>

<td th:text="${user.xx}">程序员</td>

 

</tr>

th:href="@{/}"动态设置url参数

 

<form action="#" th:action="@{/users/add}" th:object="${myuser}" method="post">

这里th：Object表示表单与 改myuser注入的实体映射，

 

在表单 th:field="*{id} 则表示 该表单的值 与 myuser的id绑定 

 

th:if="${#fields.hasErrors('*')}"

th:if="${#strings.isEmpty(status)}"

${not #strings.isEmpty(status)}

if判断显示。

 

<div class="col-sm-9">
   <input type="text" th:field="*{id}" placeholder="Order Id" class="col-xs-10 col-sm-5" />
   <p style="color:red" th:if="${#fields.hasErrors('*{id}')}" th:errors="*{id}"></p>
</div>

 th:errors错误信息显示如上图。

 

分享到：
| mysql常用命令大全
评论
3 楼 judgerz 2017-01-02  
  • 引用
    [b][b][b]TTTTTTTTTTT[/b][/b][/b]
2 楼 qxpidt 2016-02-18  
楼主，有两个属性是什么意思，能帮忙解释下吗：
layout:fragment 和 layout:decorator   
1 楼 wintersun 2015-01-20   
${#calendars.format(message.created)}

这个没看懂，你这里是用表达式（java方法）来进行format，但#是取i18n字符串，能跑吗？

官方推荐使用“Conversion Service”（参见http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html， 5.5 Configuring a Conversion Service），我现在在这里遇到问题，做不到使用自己的DateFormatter。 你能试试吗？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics