首页 > 编程语言 > 详细

Spring Boot集成Thymeleaf实战笔记,系统学习Thymeleaf

时间:2018-11-21 00:07:48      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:autowired   项目   use   字面量   framework   for   图片   显示   mod   

Thymeleaf
1.理解:
(1)Thymeleaf是一款Java模板引擎,类似于JSP,Freemarker,能够处理html,xml,javaScript,Css甚至纯文本;
(2)自然模板,原型即页面
(3)语法优雅易懂,OGNL,SpringEL
(4)使用web标准,支持HTML5
2.Thymeleaf标准方言
(1)识别:
技术分享图片
(2)方言内容:
技术分享图片
(3)语法:
变量表达式:${........},用于存储变量,例name
技术分享图片
消息表达式:#{.......},也被称之为文本外部化,国际化后i18n,例city相当于key
技术分享图片
选择表达式:*{........},与变量表达式的区别:他们是在当前选择的对象而不是整个上下文变量映射上执行
技术分享图片

链接表达式:@{........},链接表达式可以是相对的,在这种情况下,应用程序上下文将不会作为URL的前缀,
技术分享图片
也可以是服务器相对(同样,没有应用程序上下文前缀),
技术分享图片
和协议相对(就像绝对URL,但浏览器使用在显示的页面中使用的相同的HTTP和Https协议),
技术分享图片
当然,Link表达式可以是绝对的,
技术分享图片
分段表达式:th:insert或th:replace
(4)字面量(文字):
文本:
技术分享图片
数字(可以执行计算等):
技术分享图片
布尔:
技术分享图片
Null:
技术分享图片
算术操作:+,-,*,/,%(加减乘除取余)
技术分享图片
比较:<,>,<=,>=(lt,gt,le,ge)
技术分享图片
等价:==,!=(eq,ne)
技术分享图片
条件运算符:
技术分享图片
无操作:_
技术分享图片
(5)设置属性值:
设置任意属性值:th:attr
技术分享图片
设置值到指定的属性:
技术分享图片
固定值布尔属性:
技术分享图片
(6)迭代器:
基本迭代器:th:each
技术分享图片
状态变量:index,count,size,current,even/odd,first/last
技术分享图片
(7)条件语句:
th:if,th:unless
技术分享图片

技术分享图片
Switch:
技术分享图片
3.Thymeleaf与Spring boot集成
(1)模板布局(我们在开发中可以看到页面中有许多的公用片段)
方式一:定义和引用片段:th:insert
技术分享图片
方式二:不使用th:fragment
技术分享图片
th:insert,th:replace,th:include三者的区别
●th:insert它将简单的插入指定的片段作为正文的主标签
●th:replace用指定实际片段来替换其他主标签
●th:include类似于insert,不常用,了解即可
技术分享图片
(2)属性优先级
(3)注释:
解析器级别注释(解析快中内容执行时会被删除)
技术分享图片
(4)内联表达式:
[[.....]]或[(.....)]分别对应于th;text和th:utext
技术分享图片
技术分享图片
禁用内联:
有时需要禁用这种机制,比如,想输出[[.......]]或[(...)]文本内容
技术分享图片
javaScript内联与Css均可以进行内联
(5)表达式的基本对象
基本对象:
#ctx:上下文对象
#locale:直接访问java.util.Locale相关联的当前的请求
Request/session等属性
Param:用于检索请求参数
Session:用于检索Session属性
Application:用于检索Application/servlet上下文属性
Web上下文对象:#Request,#Session,#ServletContext
(6)Thymeleaf与Spring boot集成
我们建立第一个Spring boot+Thymeleaf+mevan项目,测试项目是否正常运行:
技术分享图片
项目创建成功后,我们导入IDE中,打开项目,我们编写一个helloController,项目结构如下:
技术分享图片
测试项目是否能正常运行,我们添加Controller,让它输出一个字符串,代码如下:

package com.dhtt.spring.boot.blog.thymeleaf.action.web;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class helloController {

    @GetMapping("/hello")
    public String sayHello(HttpServletRequest request) {
        String say="START TEST THYMELEAF,SAY HELLO WORD!!";
        System.out.println("say: "+say);
        return say;
    }

}

接下来启动的项目,项目正常启动后,我们在浏览器,访问页面地址,观察结果,:
技术分享图片
由此可以看出我们的项目正常运行,可以进入下一步的开发
4.实战Spring boot+thymeleaf,我们来实现一个简单的用户管理
(1)修改application.properties配置文件

spring.thymeleaf.encoding=UTF-8
#热部署静态文件,不需要缓存,实时观察文件修改效果
spring.thymeleaf.cache=false
#使用html5标准
spring.thymeleaf.mode=HTML5

(2)API设计:
·GET /users:返回用于展示用户列表的list.html页面
·GET /users/{id}:返回用于展示用户的view.html页面,根据id获取的
·GET /users/form:返回用于新增或者修改用户的form.html页面
·POST /users:新增或者修改用户,成功后重定向到list.html页面
·GET /users/delete/{id}:根据id删除相应的用户,成功后重定向到list.html页面
·GET /users/modify/{id}:根据id获取相应的用户数据,并返回form页面来进行修改
(3)后台编码:
首先展示项目后台结构:
技术分享图片
User实体(主要代码):

package com.dhtt.spring.boot.blog.thymeleaf.action.entity;

/**
 * user实体
 * 
 * @author QT
 */
public class User {
    private Long id; // 用户的唯一标识
    private String name; // 用户名
    private String email; // 用户邮箱

    public User() {
        super();
    }

    public User(Long id, String name, String email) {
        super();
        this.id = id;
        this.name = name;
        this.email = email;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

}

定义资源库(interface UserRepository)包含方法如下:

package com.dhtt.spring.boot.blog.thymeleaf.action.repository;
/**
 * User Repository接口
 * @author  QT
 *
 */

import java.util.List;

import com.dhtt.spring.boot.blog.thymeleaf.action.entity.User;

public interface UserRepository {
    /**
     * 修改或增加用户
     * 
     * @param user
     * @return
     */
    public User saveOrUpdateUser(User user);

    /**
     * 根据Id删除用户
     * 
     * @param id
     */
    public void deleteUser(Long id);

    /**
     * 根据Id查询用户
     * 
     * @param id
     * @return
     */
    public User getUserById(Long id);

    /**
     * 获取用户列表
     * 
     * @return
     */
    public List<User> listUser();

}

实现资源库,即实现增删改查的操作

package com.dhtt.spring.boot.blog.thymeleaf.action.repository.impl;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import java.util.concurrent.atomic.AtomicLong;

import org.springframework.stereotype.Repository;

import com.dhtt.spring.boot.blog.thymeleaf.action.entity.User;
import com.dhtt.spring.boot.blog.thymeleaf.action.repository.UserRepository;
@Repository
public class UserRepositoryImpl implements UserRepository {
    // 用于计数的计数器,为了设置唯一Id
    private static AtomicLong counter = new AtomicLong();
    private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<Long, User>();

    @Override
    public User saveOrUpdateUser(User user) {
        Long id = user.getId();
        if (id == null) { // 新增用户
            id = counter.incrementAndGet();
            user.setId(id);
        }
        this.userMap.put(id, user);
        return user;
    }

    @Override
    public void deleteUser(Long id) {
        this.userMap.remove(id);
    }

    @Override
    public User getUserById(Long id) {
        return this.userMap.get(id);
    }

    @Override
    public List<User> listUser() {
        return new ArrayList<User>( this.userMap.values());
    }

}

接下来编写Controller层,实现与前台的数据交互

package com.dhtt.spring.boot.blog.thymeleaf.action.web;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import com.dhtt.spring.boot.blog.thymeleaf.action.entity.User;
import com.dhtt.spring.boot.blog.thymeleaf.action.repository.UserRepository;

@RestController
@RequestMapping("/users")
public class userController {
    @Autowired
    private UserRepository userRepository;

    /**
     * 查询所有用户
     * 
     * @param model
     * @return
     */
    @GetMapping
    public ModelAndView list(Model model) {
        model.addAttribute("userList", userRepository.listUser());
        model.addAttribute("title", "用户管理");
        return new ModelAndView("users/list", "userModel", model);

    }

    /**
     * 根据Id查询用户
     * 
     * @param id
     * @param model
     * @return
     */
    @GetMapping("{id}")
    public ModelAndView view(@PathVariable("id") Long id, Model model) {
        User user = userRepository.getUserById(id);
        model.addAttribute("user", user);
        model.addAttribute("title", "用户查询");
        return new ModelAndView("users/view", "userModel", model);

    }

    /**
     * 创建用户
     * 
     * @param id
     * @param model
     * @return
     */
    @GetMapping("/form")
    public ModelAndView createForm(Model model) {
        model.addAttribute("user", new User());
        model.addAttribute("title", "创建用户");
        return new ModelAndView("users/form", "userModel", model);

    }

    /**
     * 新增或修改用户
     * 
     * @param user
     * @return
     */
    @PostMapping
    public ModelAndView saveOrUpdateUser(User user) {
        user = userRepository.saveOrUpdateUser(user);
        return new ModelAndView("redirect:/users", "userModel", user);

    }

    /**
     * 获取删除用户
     * 
     * @param id
     * @return
     */
    @GetMapping("/delete/{id}")
    public ModelAndView deleteUser(@PathVariable("id") Long id) {
        userRepository.deleteUser(id);
        return new ModelAndView("redirect:/users"); // 重定向到list页面

    }

    /**
     * 获取修改用户界面
     * 
     * @param id
     * @param model
     * @return
     */
    @GetMapping("/modify/{id}")
    public ModelAndView modify(@PathVariable("id") Long id, Model model) {
        User user = userRepository.getUserById(id);
        model.addAttribute("user", user);
        model.addAttribute("title", "修改用户");
        return new ModelAndView("users/form", "userModel", model);

    }
}

后台写完以后,我们对前台进行编写:
(4)前台编码:
首先编写页面的头和尾,即为公共的html
展示前台项目结构:
技术分享图片
公共代码片段—header.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:fragment="header">
        <h1>Thymeleaf in action</h1>
        <a href="/users" th:href="@{~/users}">首页</a>
    </div>
</body>
</html>

公共代码片段—footer.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:fragment="footer">
        <a href="http://blog.51cto.com/13501268">Welcome to http://blog.51cto.com/13501268</a>
    </div>
</body>
</html>

公共页面编写完毕,进行功能页面编写:
功能页面—list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:replace="~{fragments/header :: header}"></div>
    <h3 th:text="${userModel.title}"></h3>
    <div>
        <a href="/users/form.html"  th:href="@{/users/form}">创建用户</a>
    </div>
    <table border="1">
        <thead>
            <tr>
                <td>ID</td>
                <td>Email</td>
                <td>Name</td>
            </tr>
        </thead>
        <tbody>
            <tr th:if="${userModel.userList.size()} eq 0">
                <td colspan="3">没有用户信息!!</td>
            </tr>
            <tr th:each="user : ${userModel.userList}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.email}"></td>
                <td><a th:href="@{‘/users/‘+${user.id}}" th:text="${user.name}"></a></td>
            </tr>
        </tbody>
    </table>
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>

功能页面—form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:replace="~{fragments/header :: header}"></div>
    <h3 th:text="${userModel.title}"></h3>
    <form action="/users" th:action="@{/users}" method="post" th:object="${userModel.user}">
        <input type="hidden" name="id" th:value="${userModel.user.id}">
        名称:<br>
        <input type="text" name="name" th:value="*{name}"><br>
        邮箱:<br>
        <input type="text" name="email" th:value="*{email}"><br>
        <input type="submit" value="提交">
    </form>
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>

功能页面—view.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:replace="~{fragments/header :: header}"></div>
    <h3 th:text="${userModel.title}"></h3>
    <div>
        <p><strong>ID:</strong><span th:text="${userModel.user.id}"></span></p>
        <p><strong>NAME:</strong><span th:text="${userModel.user.name}"></span></p>
        <p><strong>EMAIL:</strong><span th:text="${userModel.user.email}"></span></p>
    </div>
    <div>
        <a th:href="@{‘/users/delete/‘+${userModel.user.id}}">删除</a>
        <a th:href="@{‘/users/modify/‘+${userModel.user.id}}">修改</a>
    </div>
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>

我们启动项目进行功能测试,截图展示:
技术分享图片
点击创建用户:
技术分享图片
点击提交,添加成功重定向到list.html页面:
技术分享图片
点击名称,展示详细信息:
技术分享图片
点击修改,跳转到form.html页面,并填写修改信息:
技术分享图片
点击提交重定向到list.html,页面,可以发现信息已经修改成功:
技术分享图片
接下来查看详细信息
技术分享图片
点击删除,重定向到list.html页面:
技术分享图片

观察结果,我们发现数据信息删除成功,项目展示完毕,thymeleaf+spring+mevan学习完毕

Spring Boot集成Thymeleaf实战笔记,系统学习Thymeleaf

标签:autowired   项目   use   字面量   framework   for   图片   显示   mod   

原文:http://blog.51cto.com/13501268/2319622

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号