Thymeleaf与springboot的简单整合

Thymeleaf与springboot的简单整合 1.大概介绍:

Thymeleaf和Jsp一样是一个模板引擎，但是它有几个特点：

1.动静结合，就算没有服务器对页面进行解析（解析也就解析th:xxx），它也一样可以运行，比较友好；

2.支持html，后台的数据展示只需要在html中的标签加入额外属性，就可以达到模板+数据的展示方式；

3.对于表单的提交绑定数据，属性的编辑，国际化功能都可以比较快的完成；

4.通常情况下，前端如果想要获取后端的数据，一般都是通过Ajax发送异步请求来获取后台传输的数据，然后通过Js去处理这些数据，最后通过html方法或者是其他的将其拼接成字符串传入html标签中，最后被浏览器解析，从而更新页面数据；

而使用thymeleaf后，可以直接一步到位；

2.使用：

1.首先导入依赖spring-boot-starter-thymeleaf

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

2.thymeleaf的参数配置：

如果你需要重新定义thymeleaf的属性，可以去ThymeleafAutoConfiguration类中，然后和之前一样的 *** 作（像xxxAutoConfiguration这种，一般都是放组件的，一些执行流程，执行方法），然后里面的值就由对应的xxxProperties（也可以理解为实体类）来解决，然后里面绑定的值根据@ConfigurationProperties(prefix="xxx")就知道了：

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean renderHiddenMarkersBeforeCheckboxes;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;

3.控制层（简单逻辑）：

1.当访问对应请求时，返回到login页面

 
    @GetMapping(value = {"/","/login"})
    public String loginPage(){

        return "login";
    }

 输入表单信息userName与password，利用th:action="@{/login}"：也就是得到一个当前项目的login请求替换前面默认的action；

4.接下来我们处理这个请求：对于这个这个请求我们首先要有逻辑判断，进行简单的验证(这里不作数据库验证处理)： 利用StringUtils的方法hasLength()与equals对userName与password进行验证，符合就放入session中，并且重定向到main页面，否则将错误提示信息传入请求域中并返回login页面；

 @PostMapping("/login")
    public String main(User user, HttpSession session, Model model){ //RedirectAttributes

        if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
            //把登陆成功的用户保存起来
            session.setAttribute("loginUser",user);
            //登录成功重定向到main.html;  重定向防止表单重复提交
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","账号密码错误");
            //回到登录页面
            return "login";
        }

    }

 @GetMapping("/main.html")
    public String mainPage(HttpSession session,Model model){

        log.info("当前方法是：{}","mainPage");
        return "main";

    }

3.thymeleaf语法：

用thymeleaf处理前端时，我们常常需要将页面中的共同部分拿出来放到一个单独的页面中，这样我们可以利用thymeleaf对共同部分进行拿取；

1.th:fragment="xxx":说明这是个片段，可以在其他页面中被调用插入替换；

2.th:href="@{/css/style.css}":意思就是当前项目下的静态资源路径，static下...

th:src="@{xx/xxx}":与上述差不多，也是路径的

    
    
    


    
    


 ....

 Thymeleaf中的语意还需要根据具体标签来判断，像标签这种里面的th:href,th:src...都只是引入资源；

像如果在标签中的th:href，那就是点击请求，让服务器处理请求的；

 Data Tables
                

                     Basic Table
                     Advanced Table
                     Responsive Table
                     Edit Table
                
            

当点击这些a标签后，控制器中对应的方法会接收到对应的请求，然后显示对应页面；

这里提一下@RequestParam中的参数：defaultValue：有0、1两种形式，0：地址不需要参数，1：需要带参数；默认defaultValue为1；

@GetMapping("/dynamic_table")
public String dynamic_table(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
   //简单遍历表单内容
    Listuser=Arrays.asList(new User("zhangsan"，"12345"),
new User("Fairy","1233"));

   model.addAttribute("users",users);
return "table/dynamic_table";//因为thymeleaf的suffix与prefix已经设定好了，而这个页面是在Template下面一个等级的
}
 @GetMapping("/responsive_table")
    public String responsive_table() {
        return "table/responsive_table";
    }

    @GetMapping("/editable_table")
    public String editable_table() {
        return "table/editable_table";
    }
}

抽取公共元素：

 一般来说，我们对公共代码代码块需要使用thymeleaf进行统一命名：th:fragment="xxx"，或者在标签中用id

xxx

其他页面中插入公共部分：

三种方式：代替：整个标签容器连同内容一起代替

包括：只替换内容，不替换标签

插入：将公共部分的标签及其内容插入到当前页面标签下（可能会多出不要的标签）

5.视图解析的原理流程：

1.当前请求被目标方法处理的过程中，所有数据分为了两个部分：数据and视图地址。他们会被放在·ModelAndViewContainer中；

2.任何方法执行完后都会返回ModelAndView，然后processDispatcherResult会处理派发结果（页面如何响应）

最关键的：render()方法，进行页面渲染逻辑，根据方法的返回值得到View对象；

1.然后遍历所有的视图解析器看能否根据返回值得到View对象

2.得到redirect:/main.html

3.内容协商视图解析器ContentNegotiationViewResolver里面包含了所有视图解析器，利用视图解析器得到视图对象（可以自定义）

4.view.render(modelAndview,req,resp):首先获取请求的url地址，然后resp.sendRedirect(url)；