Simple to use Thymeleaf template (SpringBoot)

Thymeleaf template

⾯ to modern Web server environment and unique attention immediately end Java template engine that can handle HTML, XML, JavaScript, CSS and even ⾄ Text is pure.

1. The introduction of thymeleaf

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.Thymeleaf use & grammar

The HTML page on the classpath: / templates / down, thyemeleaf will automatically render
the use of:

1. Import Thymeleaf namespaces

  <html lang="en" xmlns:th="http://www.thymeleaf.org">

2. Use syntax thymeleaf

  <!DOCTYPE html>
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      <!--<h2>你好</h2>-->
      <!--th:text 将div里边的文本内容设置为 -->
      <div th:text="${hello}">这是显示欢迎信息</div>
  </body>
  </html>

3. The need to establish such a package structure when in use thymeleaf template springBoot

Here thymeleaf need to create a new folder, you need html files in this folder (springboot will automatically scan to) (long-winded one springboot does not support jsp files)

Here Insert Picture Description

4. The front and rear ends data interaction

(1) a front end -> rear

Submit Form, this is the rear end to match javeBean The name tag in the input form, according to the needs of incoming Controller layer may be encapsulated into an object.

  <body>
  <div class="all_wrap">
      <form action="goLogin" method="POST" class="form-login">
          <h2>Login</h2>
          <input class="input" type="text" name="username" placeholder="Username"><br>
          <input class="input" type="password" name="password" placeholder="Password"><br>
          <input class="btn btn-info" type="submit" value="submit">
      </form>
  </div>
  </body>

IndexController

  @RequestMapping("login")
      public String login(){
          return "login";
      }
  
 @RequestMapping("goLogin")
  public String goLogin(User user){
      boolean flag = iLoginService.isUser(user);

      if(flag){
          //登录成功，跳转首页
          return "first";
      }else{
          //登录失败，重新输入密码
          return "login";
      }
  }

(2) the rear end -> front end

There are three ways of it, I do not know, anyway, I use both your fill, enough for me to learn, model that looks like more simpler, less project experience, so I finish line and several projects, again fill more than a few words.

Test Controller Model


  @GetMapping("/testModel")
  public String testModel(Model model) {
      System.out.println("*********testModel方法一**********");
      TestModel uu = new TestModel();
      uu.setAge(1);
      uu.setPassword("22");
      uu.setUsername("33");
      model.addAttribute("model",uu);
      return "aa";
  }

  @GetMapping("/testModel2")
  public ModelAndView testModel2() {
      System.out.println("*********testModel方法二**********");
      ModelAndView mv = new ModelAndView();
      TestModel uu = new TestModel();
      uu.setAge(1);
      uu.setPassword("22");
      uu.setUsername("33");
      mv.addObject("model",uu);
      mv.setViewName("aa");

      return mv;
  }

aa.html

  <!DOCTYPE html>
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  
  </head>
  <body>
  <div>
      <span th:text="${model.username}"></span>
      <span th:text="${model.age}"></span>
      <span th:text="${model.password}"></span>
  </div>
  </body>
  </html>

So the front desk you can get it processed data.
About this template I also understand this, please add ~

More than add a sum

There is only data on the model parameter in effective, do not know the specific principles, forgotten, should be less than (the feeling is not very standardized way, was only used to test thymeleaf A pair of)