Live-Server-6-Thymeleaf

時間 2019-11-17

標籤 live server thymeleaf 简体版

原文原文鏈接

Thymeleaf簡介

Thymeleaf是一種用於Web和現代服務器的Java模板引擎。Thymeleaf的主要目標是將模板的方式帶到工做流程中，並將HTML在瀏覽器中正確顯示，並能夠看成原型。能處理HTML、XML、JavaScript、CSS等文本格式。html

簡而言之，Thymeleaf就是一個可以在HTML等文本格式中添加固定的標籤（標準方言），而後Java代碼經過Thymeleaf引擎將數據、文本等信息放置到標籤上並顯示給用戶。（在HTML中挖坑，經過Thymeleaf，在Java代碼的中填充坑）java

標準方言

Thymeleaf中的語法是能夠自定義的，而官方的標準語法稱爲標準方言，主要由th前綴的屬性構成。spring

${...}：變量表達式

${session.user.name}
複製代碼

變量表達式，能夠做爲變量的一部分瀏覽器

<span th:text="${user.name}" />
複製代碼

*{...}：選擇表達式

<div th:object="${book}">
  ...
  <span th:text="*{title}">...</span>
  ...
</div>
複製代碼

選擇的是th:object對象的屬性。服務器

#{...}：消息（i18n）表達式容許從外部源文件（如.properties）文件中檢索特定語境的消息。在Spring程序中，會自動與Spring的MessageSource機制集成。

<table>
  ...
  <th th:text="#{header.address.city}">...</th>
  <th th:text="#{header.address.country}">...</th>
  ...
</table>
複製代碼

@{...}：連接（URL）表達式連接表達式在構建URL並向其添加有用的信息。

<a th:href="@{/login}">...</a>
複製代碼

~{...}：片斷表達式片斷表達式是一種簡單的方法用來表示標記的片斷並將其移動到模板中。

<div th:insert="~{commons :: main}">...</div>
複製代碼

操做符

字符串鏈接：+ 文字替換：${name} 操做：+ - * / % 布爾否認：！比較運算符：> < >= <= 相等運算符：== !=session

Thymeleaf實操

添加Jar包依賴

在Maven的pom.xml添加Thymeleaf依賴。因爲項目是SpringBoot爲基礎，所以要使用與SpringBoot適配的thymeleaf。app

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
複製代碼

SpringMVC配置

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

#thymeleaf
spring.thymeleaf.mode=HTML5   //文本模式
spring.thymeleaf.encoding=UTF-8 //字符編碼
spring.thymeleaf.content-type=text/html
複製代碼

建立Thymeleaf模板

Thymeleaf模板能夠是HTML文件，也能夠是XML等文本格式。這裏使用HTML爲例。spring-boot

<!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註冊");
複製代碼

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。