Thymeleaf应用实例

新建Spring项目：demo7，添加依赖：Spring Web、Spring Configuration Processor、Lombok和Thymeleaf。自动生成的pom.xml如下，

    
        org.springframework.boot
        spring-boot-starter-thymeleaf
    
    
        org.springframework.boot
        spring-boot-starter-web
    

    
        org.springframework.boot
        spring-boot-configuration-processor
        true
    
    
        org.projectlombok
        lombok
        true
    
    
        org.springframework.boot
        spring-boot-starter-test
        test
    

com.example.boot下新建类：bean.User。

package com.example.boot.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class User {
    private String username;
    private String password;
}

com.example.boot下新建控制器：controller.IndexController。

package com.example.boot.controller;

import com.example.boot.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;

@Controller
public class IndexController {
    @GetMapping(value = {"/","/login"})
    public String login(){
        return "login";
    }

    //出现问题：表单重复提交
    @PostMapping(value = "/login")
    public String main(User user, HttpSession session){
        session.setAttribute("loginUser",user);
        return "main";
    }
}

resources.static下新建页面：login.html和main.html。

    
    


    

        用户名：

        密码：

        
    

    
    


    
Welcome to main page! [[${session.loginUser.username}]]

启动应用，查看效果。

存在的问题：登录后刷新页面，将重复提交表单。
针对以上问题，最佳的解决方法是，使用重定向。
对控制器类IndexController进行修改，修改后的结果如下，

package com.example.boot.controller;

import com.example.boot.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;

@Controller
public class IndexController {
    @GetMapping(value = {"/","/login"})
    public String login(){
        return "login";
    }

    //防止表单重复提交，最好的解决方法是：使用重定向
    @PostMapping(value = "login")
    public String main(User user, HttpSession session, Model model){
        //登录成功，重定向到main.html
        if(StringUtils.hasLength(user.getUsername()) && "test@123".equals(user.getPassword())){
            session.setAttribute("loginUser",user);
            return "redirect:/main.html";
        }else{
            model.addAttribute("msg","账号或密码错误!");
            return "login";
        }
    }

    @GetMapping("/main.html")
    public String mainPage(HttpSession session,Model model){
        if(session.getAttribute("loginUser") != null){
            return "main";
        }else{
            model.addAttribute("msg","请重新登录!");
            return "login";
        }
    }
}

对login.html进行修改，修改后的结果如下，

    
    


    

    

        用户名：

        密码：

        
    

重启应用，并对修改进行验证。

Thymeleaf使用遍历实现表格。
修改IndexController：添加接口/table，并通过Model将集合数据放入请求域。
新增视图文件table.html，并从请求域中取出集合，遍历集合，用集合内容填充表格。
关于Thymeleaf，更多可以访问官网。

@GetMapping("/table")
public String table(Model model){
    List users = Arrays.asList(new User("zhangsan", "123"),
            new User("lisi", "456"),
            new User("wangwu", "123456"),
            new User("Tom", "test@123"));
    model.addAttribute("users",users);
    return "table";
}

    
    


    

    

        用户名：

        密码：

        
    

重启应用，查看效果。