SpringBoot集成Thymeleaf

Thymeleaf作为SpringBoot官方推荐的模板方案,下面我们来将SpringBoot项目集成Thymeleaf。

添加Thymeleaf依赖

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

编写代码

在resources目录有static和templates两个目录:

  • static 静态文件存放目录,比如css、js、image或者前端库文件等。
  • templates 页面文件存放目录

我们在templates下创建一个html文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    Hello World !
</body>
</html>

创建IndexController:

package cc.koit.hulk.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index(){
        return "/index";
    }

}

运行HulkApplication,访问:http://localhost:9090/
可以看到页面输出了Hello World !

使用bootstrap

我们在static目录下创建lib目录,把bootstrap下载下来放在lib目录下。另外下载jquery.js文件,放在static/js目录下。

在index.html引入静态文件,同时加入一段基于Bootstrap的html示例:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap-4.1.3/css/bootstrap.css}">
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/lib/bootstrap-4.1.3/js/bootstrap.js}"></script>

</head>
<body>

<div class="container-fluid">
    <form action="/user/create" method="post">
        <div class="form-group">
            <label for="displayName">用户名</label>
            <input type="text" class="form-control" name="displayName" id="displayName" aria-describedby="nameHelp" placeholder="用户名">
            <small id="nameHelp" class="form-text text-muted">请告诉我该如何称呼您</small>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="text" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="邮箱">
            <small id="emailHelp" class="form-text text-muted">我们不会泄露您的邮箱给其它任何人</small>
        </div>

        <button type="submit" class="btn btn-primary">保存</button>
    </form>
</div>

</body>
</html>

我们在UserController中加上/user/create的方法:

    @Autowired
    private UserService userService;
        @RequestMapping("/create")
    public User create(@RequestParam String displayName,@RequestParam String email){
        User user = new User();
        user.setDisplayName(displayName);
        user.setEmail(email);
        userService.create(user);
        return user;
    }

测试表单提交

打开http://localhost:9090
填写表单提交:

页面返回:

{
  "id": 6,
  "displayName": "koit",
  "email": "funga@sina.cn"
}

本文仅仅只是指导如何集成Thymeleaf,但是并没有讲多少Thymeleaf的语法,这个后面有机会再补充。

© 2019 FunGa技术札记 All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero