springboot thymeleaf 参数配置 thymeleaf整合springboot

1.大概介绍:

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

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

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

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

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

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

2.使用：

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

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

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页面

/**
     * 来登录页
     * @return
     */
    @GetMapping(value = {"/","/login"})
    public String loginPage(){

        return "login";
    }

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

<div class="container">
    <!--表单提交（也就是th:action="@{/xxx}"），服务器controller层对对应的请求进行解析-->
    <form class="form-signin" action="index.html" method="post" th:action="@{/login}">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">Sign In</h1>
            <img src="images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <!--            取出msg文本信息-->
            <label style="color: red" th:text="${msg}"></label>
            <input type="text" name="userName" class="form-control" placeholder="User ID" autofocus>
            <input type="password" name="password" class="form-control" placeholder="Password">
            <button class="btn btn-lg btn-login btn-block" type="submit">
                <i class="fa fa-check"></i>
            </button>

            <div class="registration">
                Not a member yet?
                <a class="" href="registration.html">
                    Signup
                </a>
            </div>
            <label class="checkbox">
                <input type="checkbox" value="remember-me"> Remember me
                <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> Forgot Password?</a>

                </span>
            </label>

        </div>

        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Forgot Password ?</h4>
                    </div>
                    <div class="modal-body">
                        <p>Enter your e-mail address below to reset your password.</p>
                        <input type="text" name="email" placeholder="Email" autocomplete="off"
                               class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                        <button class="btn btn-primary" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->

    </form>

</div>

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}":与上述差不多，也是路径的

<head th:fragment="commonheader">
    <!--common-->
    <link href="css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
</head>

<div th:fragment="headermenu" class="..."> ....</div>

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

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

<li class="menu-list nav-active"><a href="#"><i class="fa fa-th-list"></i> <span>Data Tables</span></a>
                <ul class="sub-menu-list">
                    <li><a th:href="@{/basic_table}"> Basic Table</a></li>
                    <li><a th:href="@{/dynamic_table}"> Advanced Table</a></li>
                    <li><a th:href="@{/responsive_table}"> Responsive Table</a></li>
                    <li><a th:href="@{/editable_table}"> Edit Table</a></li>
                </ul>
            </li>

当点击这些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){
   //简单遍历表单内容
    List<User>user=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

<div id=leftmenu class="xxx">xxx</div>
<script th:fragment>xxx</script>

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

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

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

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

<div th:replace="common :: headermenu"></div>
<div th:include="common :: leftmenu"></div>
<div th:insert="common :: xxx"></div>

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)；