Live-Server-6-Thymeleaf

Thymeleaf简介

Thymeleaf是一种用于Web和现代服务器的Java模板引擎。Thymeleaf的主要目标是将模板的方式带到工作流程中,并将HTML在浏览器中正确显示,并可以当作原型。能处理HTML、XML、JavaScript、CSS等文本格式。

简而言之,Thymeleaf就是一个能够在HTML等文本格式中添加固定的标签(标准方言),然后Java代码通过Thymeleaf引擎将数据、文本等信息放置到标签上并显示给用户。(在HTML中挖坑,通过Thymeleaf,在Java代码的中填充坑)

标准方言

Thymeleaf中的语法是可以自定义的,而官方的标准语法称为标准方言,主要由th前缀的属性构成。

  1. ${...}:变量表达式
${session.user.name}
复制代码

变量表达式,可以作为变量的一部分

<span th:text="${user.name}" />
复制代码
  1. *{...}:选择表达式
<div th:object="${book}">
  ...
  <span th:text="*{title}">...</span>
  ...
</div>
复制代码

选择的是th:object对象的属性。

  1. #{...}:消息(i18n)表达式 允许从外部源文件(如.properties)文件中检索特定语境的消息。在Spring程序中,会自动与Spring的MessageSource机制集成。
<table>
  ...
  <th th:text="#{header.address.city}">...</th>
  <th th:text="#{header.address.country}">...</th>
  ...
</table>
复制代码
  1. @{...}:链接(URL)表达式 链接表达式在构建URL并向其添加有用的信息。
<a th:href="@{/login}">...</a>
复制代码
  1. ~{...}:片段表达式 片段表达式是一种简单的方法用来表示标记的片段并将其移动到模板中。
<div th:insert="~{commons :: main}">...</div>
复制代码

操作符

字符串连接:+ 文字替换:${name} 操作:+ - * / % 布尔否定:! 比较运算符:> < >= <= 相等运算符:== !=

Thymeleaf实操

添加Jar包依赖

在Maven的pom.xml添加Thymeleaf依赖。由于项目是SpringBoot为基础,因此要使用与SpringBoot适配的thymeleaf。

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
复制代码

SpringMVC配置

在SpringMVC配置文件中添加Thymeleaf配置。

#thymeleaf
spring.thymeleaf.mode=HTML5   //文本模式
spring.thymeleaf.encoding=UTF-8 //字符编码
spring.thymeleaf.content-type=text/html
复制代码

创建Thymeleaf模板

Thymeleaf模板可以是HTML文件,也可以是XML等文本格式。这里使用HTML为例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<div class="container">
    <form action="register" method="post" th:object="${user}">
        <input type="hidden" name="tocken" id="tocken"/>
        <h2>注 册</h2>
        <div class="form-group" th:if="${null != error}">
            <div class="alert alert-success text-center">
                <div th:utext="${error}"></div>
            </div>
        </div>
        <div class="form-group">
            <label for="name" class="sr-only">用 户 名</label>
            <input type="text" name="name" th:value="*{name}" class="form-control" placeholder="用户名"/>
        </div>
        <div class="form-group">
            <label for="email" class="sr-only">邮 箱</label>
            <input type="email" name="email" th:value="*{email}" class="form-control" id="email" placeholder="邮箱"/>
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">密 码</label>
            <input type="password" name="password" class="form-control" placeholder="密码"/>
        </div>
        <div class="form-group">
            <input type="text" name="code" style="width: 50%; display: inline-block; margin-right: 10px;"
                   class="form-control" placeholder="请输入验证码"/>
            <img id="code" alt="验证码" src="/kaptcha"/>
        </div>
        <div class="form-group">
            <p>
                已有账号?
                <a href="login">登录</a>
            </p>
        </div>
        <div class="form-group">
            <input type="submit" value="注册" class="btn btn-primary"/>
        </div>
    </form>
</div>
</body>
</html>
复制代码

上面的页面也就是Thymeleaf中,是一个注册的表单,首先定义了th:object="${user}",表明该表单的对象是一个User对象,th:value="{name}"、th:value="{email}",表示选择User对象中的name、email属性,而表单的输入,就将这些属性的值传入到请求服务的连接中。

创建控制器

有了模板,就需要一个控制器来控制到底模板的坑中需要填充什么数值,而这个控制器就是上一篇文章中提及到的Controller。

@Controller
public class UserController {

	@Autowired
	private UserService userService;

	/**
	 * 提交注册表单注册
	 * 
	 * @param user
	 * @param result
	 * @param code
	 * @param request
	 * @return
	 */
	@RequestMapping(path = { "register" }, method = { RequestMethod.POST })
	public String register(@Validated(value = { Register.class }) @ModelAttribute User user, BindingResult result,
			String code, HttpServletRequest request) {
		request.setAttribute("user", user);
		if (result.hasErrors()) {
			request.setAttribute("error", "有错误");
			return "register";
		}
		try {
			user.setPhone("");
			user.setSex("保密");
			user.setArticles(0);
			user.setPassword(xxx);
			user.setRoleId(3);
			userService.register(user);
			return "redirect:/login";
		} catch (Exception e) {
			log.debug(e.getMessage());
			request.setAttribute("error", e.getMessage());
		}
		return "register";
	}
}
复制代码

在上面的Controller中,根据传入的对象进行注册,如果注册成功则跳转到login页面,否则通过request.setAttribute("error",e.getMessage())这行代码,将注册失败的信息通过Thymeleaf模板引擎填充到HTML页面的坑中并显示给用户。

至此Thymeleaf的使用流程大致结束了,下面来看下Thymeleaf如何配合java mail发送统一格式的邮件。

Thymeleaf模板邮件

Thymeleaf模板邮件的原理就是,通过thymeleaf引擎将HTML页面处理成字符串,然后通过MessageHelper这个工具类将页面字符串,发送方邮件、接收方邮件、邮件标题等数据进行封装,然后JavaMail发送。 HTML模板文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>Insert title here</title>
</head>
<body>
<table cellspacing="0" cellpadding="20">
    <tr>
        <td>
            <table width="500" cellspacing="0" cellpadding="1">
                <tr>
                    <td bgcolor="#FF8E00" align="left"
                        style="font-family:'lucida grande',tahoma,'bitstream vera sans',helvetica,sans-serif;line-height:150%;color:#FFF;font-size:24px;font-weight:bold;padding:4px">
                        LIVE
                    </td>
                    <th></th>
                </tr>
                <tr>
                    <td bgcolor="#FF8E00">
                        <table width="100%" cellspacing="0" bgcolor="#FFFFFF"
                               cellpadding="20">
                            <tr>
                                <td style="font-family:'lucida grande',tahoma,'bitstream vera sans',helvetica,sans-serif;line-height:150%;color:#000;font-size:14px;">
                                    亲爱的用户:
                                    <blockquote>
                                        <br/> <strong>欢迎使用LIVE直播APP<br/>该邮件为你提供用于注册的验证码。</strong><br/>
                                        <br/>
                                        <p>code</p>
                                        <br/>
                                    </blockquote>
                                    <br/> <br/>社区<br/>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
复制代码

发送邮件的业务类:

@Service
public class EmailServiceImpl implements EmailService {

    @Value("${spring.mail.username}")
    private String fromEmailAddr;
    @Autowired
    private JavaMailSender javaMailSender;

    @Autowired
    private TemplateEngine templateEngine;

    @Override
    public boolean sendEmail(String template, Map<String, String> map, String sendTo, String subject)
            throws MessagingException {
        log.debug("EmailServiceImpl.sendEmail()");
        MimeMessage mailMessage = javaMailSender.createMimeMessage();
        // 开启带附件true
        MimeMessageHelper messageHelper = new MimeMessageHelper(mailMessage, true);
        IContext context = new Context();
        // 获取模板html代码
        String process = templateEngine.process(template, context);
        Iterator<Entry<String, String>> iterator = map.entrySet().iterator();
        while (iterator.hasNext()) {
            Entry<String, String> next = iterator.next();
            process = process.replace(next.getKey(), next.getValue());
        }
        try {
            //封装邮件的发送方、接收方、标题、邮件内容
            messageHelper.setFrom(fromEmailAddr);
            messageHelper.setTo(sendTo);
            messageHelper.setSubject(subject);
            messageHelper.setText(process, true);
            javaMailSender.send(mailMessage);
            return true;
        } catch (MessagingException e) {
            e.printStackTrace();
        }
        return false;
    }
}
复制代码

随后直接调用该业务方法就可以实现邮件的发送:

emailService.sendEmail("code", map, email, "LIVE注册");
复制代码

猜你喜欢

转载自juejin.im/post/5d5d3bdc6fb9a06b244320b9