SpringMVC整合thymeleaf

缺乏、安全感 2023-06-13 06:05 1阅读 0赞

jsp作为前端渲染的技术，稳坐多年的霸主地位。但是，众所周知，jsp是强依赖servlet规范的， 并且页面中耦合了很多jstl的标签。极其难以维护。在这期间，出现了很多前端渲染的框架，挑战jsp的地位。thymyleaf是其中佼佼者。  
thymeleaf的优势如下：  
themyleaf是真正的html代码，不依赖标签库，并且和servlet规范没有强耦合，可以涉足很多jsp无法触及的领域。另外一点，themyleaf实现的前端代码可读性极强。  
基于以上优点，我想写这样一篇介绍themeleaf的文章。文章借鉴了很多《spring实战4》的例子  
文章共分为以下几部分：  
1 .引入依赖  
2 .定义pojo类  
3 .Controller层代码编写  
4 .定义thymeleaf的配置类  
5 .定义html文件

***1 .引入依赖***

<dependency>
          <groupId>org.thymeleaf</groupId>
          <artifactId>thymeleaf</artifactId>
          <version>2.1.6.RELEASE</version>
        </dependency>
    
        <dependency>
          <groupId>org.thymeleaf</groupId>
          <artifactId>thymeleaf-spring4</artifactId>
          <version>2.1.6.RELEASE</version>
        </dependency>
        
        <dependency>
          <groupId>org.hibernate</groupId>
          <artifactId>hibernate-validator</artifactId>
          <version>5.3.5.Final</version>
        </dependency>
    	
        <dependency>
          <groupId>org.projectlombok</groupId>
          <artifactId>lombok</artifactId>
          <version>1.16.0</version>
        </dependency>
    	
    	<dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.5</version>
          </dependency>

***2 .定义pojo类***

*/
    @Setter
    @Getter
    @AllArgsConstructor
    public class Spitter { 
        private Long id;
        @NotEmpty
        @Length(min = 5,max = 15,message = "{username.size}")
        private String username;
        @NotEmpty
        @Length(min = 5,max = 15,message = "{password.size}")
        private String password;
        @NotEmpty
        @Length(min = 2,max = 30,message = "{firstName.size}")
        private String firstName;
        @NotEmpty
        @Length(min = 2,max = 30,message = "{lastName.size}")
        private String lastName;
    
        public Spitter() { 
        }
    
        public Spitter(String username, String password, String firstName, String lastName) { 
            this.username = username;
            this.password = password;
            this.firstName = firstName;
            this.lastName = lastName;
        }
    
        @Override
        public boolean equals(Object o) { 
            return EqualsBuilder.reflectionEquals(this, "username", "password", "firstName", "lastName");
        }
    
        @Override
        public int hashCode() { 
            return HashCodeBuilder.reflectionHashCode(this, "username", "password", "firstName", "lastName");
        }
    }

我在pojo类的重要字段上都加了hibernate-validator的校验注解。同时message的信息都抽取到了ValidationMessages\_zh\_CN.properties的文件中  
文件位置在classpath的根路径下。文件内容如下：

username.size=\u7528\u6237\u59d3\u540d\u7684\u957f\u5ea6\u5fc5\u987b\u5728{ min}\u548c{ max}\u4e4b\u95f4
    password.size=\u7528\u6237\u5bc6\u7801\u7684\u957f\u5ea6\u5fc5\u987b\u5728{ min}\u548c{ max}\u4e4b\u95f4
    firstName.size=\u7528\u6237\u7b2c\u4e00\u540d\u79f0\u7684\u957f\u5ea6\u5fc5\u987b\u5728{ min}\u548c{ max}\u4e4b\u95f4
    lastName.size=\u7528\u6237\u7b2c\u4e8c\u540d\u79f0\u7684\u957f\u5ea6\u5fc5\u987b\u5728{ min}\u548c{ max}\u4e4b\u95f4

我已经把中文变成了unicode编码，因为java的默认编码方式就是unicode编码。但是计算机的编码方式通常是GBK等编码方式。所以如果不变成unicode方式，会导致错误信息读取出来后乱码。

***3 .Controller类编写***

@Controller
    @RequestMapping("/spitter")
    public class SpitterController { 
    
        @RequestMapping("/home")
        public String home(){ 
            return "home";
        }
    
        @RequestMapping("/toRegister")
        public String toRegister(Model model){ 
            model.addAttribute(new Spitter());
            return "registerForm";
        }
    
        @RequestMapping(value = "/register",method = RequestMethod.POST)
        public String register(@Valid Spitter spitter, Errors errors,Model model){ 
            if (errors.hasErrors()) { 
                System.out.println("错误数目:"+errors.getErrorCount());
                model.addAttribute(spitter);
                return "registerForm";
            }
            return "redirect:/cal/"+spitter.getId();
        }
    }

controller类很简单，我只提其中的一点，就是register类的方法签名中，行参spitter的修饰性注解是@Valid，这个注解是和pojo类中的@Length的注解是配套使用的。这个注解会校验前端的入参是否符合校验注解的要求，如果不符合，会将错误信息封装到Errors中。  
**另外还有一点，非常重要，我们一定要记得开启springmvc的注解驱动  
在springMVC配置文件中添加以下配置，否则校验注解会不生效**

<mvc:annotation-driven/>

***4 .定义thymeleaf的配置类***

@Configuration
    public class ThymeleafTemplateConfig { 
    
        /** * thymeleaf视图解析器 * @param templateEngine * @return */
        @Bean
        public ViewResolver viewResolver(SpringTemplateEngine templateEngine){ 
            ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();
            //和ValidationMessages_zh_CN.properties中的unicode编码方式合起来,可以解决前端错误信息乱码的问题
            thymeleafViewResolver.setCharacterEncoding("UTF-8");
            thymeleafViewResolver.setTemplateEngine(templateEngine);
            return thymeleafViewResolver;
        }
    
        /** * thymeleaf模板引擎 * @param templateResolver * @return */
        @Bean
        public SpringTemplateEngine templateEngine(TemplateResolver templateResolver){ 
            SpringTemplateEngine templateEngine = new SpringTemplateEngine();
            templateEngine.setTemplateResolver(templateResolver);
            return templateEngine;
        }
        /** * thymeleaf模板解析器 * @return */
        @Bean
        public TemplateResolver templateResolver(){ 
            TemplateResolver templateResolver = new ServletContextTemplateResolver();
            templateResolver.setPrefix("/WEB-INF/views/");
            templateResolver.setSuffix(".html");
            templateResolver.setTemplateMode("HTML5");
            return templateResolver;
        }
    }

5 .定义html文件

第一个html文件

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Insert title here</title>
    </head>
    <body>
        Welcome to Thymeleaf
        <br/>
        <a th:href="@{/spitter/toRegister.do}">register</a>
    </body>
    </html>

文件最上端的xmlns以及xmlns:th的命令空间起到了开启thymeleaf的作用  
下面的@\{\}配置，作用和<s:url>以及<c:url>的作用是一样的。都是格式化一个字符串

Jsp 的老方法${ pageContext.request.contextPath}=Thymeleaf 的新方式 @{ }

所以$\{pageContext.request.contextPath\}/home/abc.do等价于@\{/home/abc.do\}

第二个html文件

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" http-equiv="charset" content="utf-8" />
        <title>Insert title here</title>
        <style type="text/css" >
            label.error{ 
                color:red;
            }
            input.error{ 
                background-color: #ffcccc;
            }
        </style>
    </head>
    <body>
        <form id="form-1" method="post" th:object="${spitter}" th:action="@{/spitter/register.do}">
            <label th:class="${#fields.hasErrors('id')}?'error'">id:</label>
            <input th:field="*{id}" th:class="${#fields.hasErrors('id')}?'error'" placeholder="id" type="text" />
            <span th:if="${#fields.hasErrors('id')}">
                <span th:text="${#fields.errors('id')}" />
            </span>
            <br/>
            <label th:class="${#fields.hasErrors('username')}?'error'">username:</label>
            <input th:class="${#fields.hasErrors('username')}?'error'" placeholder="username" type="text" th:field="*{username}"></input>
            <span th:if="${#fields.hasErrors('username')}">
                <span th:text="${#fields.errors('username')}"></span>
            </span>
            <br/>
            <label th:class="${#fields.hasErrors('password')}?'error'">password:</label>
            <input th:class="${#fields.hasErrors('password')}?'error'" th:field="*{password}" placeholder="password"
                   type="text"></input>
            <span th:if="${#fields.hasErrors('password')}">
    			<span th:text="${#fields.errors('password')}"></span>
    		</span>
            <br/>
            <label th:class="${#fields.hasErrors('firstName')}?'error'">firstName:</label>
            <input  th:class="${#fields.hasErrors('firstName')}?'error'" th:field="*{firstName}" type="text"
                    placeholder="firstName"></input>
            <span th:if="${#fields.hasErrors('firstName')}">
    			<span th:text="${#fields.errors('firstName')}"></span>
    		</span>
            <br/>
            <label th:class="${#fields.hasErrors('lastName')}?'error'">lastName:</label>
            <input th:class="${#fields.hasErrors('lastName')}?'error'" placeholder="lastName" th:field="*{lastName}"
                   type="text"></input>
            <span th:if="${#fields.hasErrors('lastName')}">
    			<span th:text="${#fields.errors('lastName')}"></span>
    		</span>
            <br/>
            <input type="submit"></input>
        </form>
    </body>
    </html>

标签解释：  
themeleaf提供了一系列的标签，用来和后端的mvc架构进行交互

1 th:object="${spitter}"
    取得后端传递到该页面的pojo对象
    2 .th:class="${#fields.hasErrors('id')}?'error'"
    如果我们的@Valid校验框架校验到某个字段不合法，此时，${ #fields.hasErrors('id')}返会true，此时class会取值error。
    3 .th:field="*{id}"
    *{ id}是一个选择表达式，配合上面的th:object标签使用。目的是取得th:object标签中对象的id属性。
    thymeleaf里的th:field等同于th:name和th:value
    4 .${ #fields.errors('id')
    会取出校验错误的信息