springboot实战(一)——thymeleaf

作者: 寻找大海的鱼 | 来源:发表于2018-10-03 23:18 被阅读0次

springboot实战(一)——thymeleaf
SpringBoot系列（六）集成thymeleaf详解版
SpringBoot & Thymeleaf项目实战
微服务SpringBoot配置汇总
because its MIME type ('applicat
SpringBoot默认模板引擎Thymeleaf
十、Thymeleaf使用以及语法
SpringBoot进阶学习下篇
Springboot启用静态资源版本控制
springboot整合Thymeleaf

1.新建User实体类

/**
 * @program: springboot_thymeleaf
 * @description: user实体类
 * @author: 一条懒咸鱼
 * @create: 2018-10-02-21:53
 **/

public class User {
    private Long id;
    private String name;
    private String email;

    public User() {
    }

    public User(Long id, String name, String email) {
        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;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

2.建立UserRepository接口以及实现类

public interface UserRepository {
    /**
    *@description: 创建或者修改用户
    *@author: 一条懒咸鱼
    *@Date: 22:01 2018/10/2
    **/
    User saveOrUpdateUser(User user);

    /**
    *@description: 删除用户
    *@author: 一条懒咸鱼
    *@Date: 22:02 2018/10/2
    **/
    void deleteUser(Long id);

    /**
    *@description: 根据id查询用户
    *@author: 一条懒咸鱼
    *@Date: 22:02 2018/10/2
    **/
    User getUserById(Long id);

    /**
    *@description: 获取用户列表
    *@author: 一条懒咸鱼
    *@Date: 22:04 2018/10/2
    **/
    List<User> listUsers();
}

import org.springframework.stereotype.Repository;

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

/**
 * @program: springboot_thymeleaf
 * @description:
 * @author: 一条懒咸鱼
 * @create: 2018-10-02-22:04
 **/

@Repository
public class UserRepositoryImpl implements UserRepository {
    private static AtomicLong counter = new AtomicLong();
    private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<>();

    @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> listUsers() {
        return new ArrayList<User>(this.userMap.values());
    }
}

3.建立UserController

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

    /**
    *@description: 查询所有的用户
    *@author: 一条懒咸鱼
    *@Date: 22:26 2018/10/2
    **/
    @GetMapping
    public ModelAndView list(Model model){
        System.out.println("=============list==============");
        model.addAttribute("userList", userRepository.listUsers());
        model.addAttribute("title", "用户管理");
        return new ModelAndView("list", "userModel",model);
    }

    /**
    *@description: 根据id查询用户
    *@author: 一条懒咸鱼
    *@Date: 22:32 2018/10/2
    **/
    @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("view", "userModel",model);
    }

    /**
    *@description: 获取创建表单页面
    *@author: 一条懒咸鱼
    *@Date: 22:34 2018/10/2
    **/
    @GetMapping("/form")
    public ModelAndView createForm(Model model){
        model.addAttribute("user", new User());
        model.addAttribute("title", "创建用户");
        return new ModelAndView("form", "userModel",model);
    }
    
    /**
    *@description: 保存或者修改用户
    *@author:一条懒咸鱼
    *@Date: 22:38 2018/10/2
    **/
    @PostMapping
    public ModelAndView saveOrUpdateUser(User user){
        userRepository.saveOrUpdateUser(user);
        return new ModelAndView("redirect:/users"); //重定向到list页面
    }
    
    /**
    *@description: 删除用户
    *@author: 一条懒咸鱼
    *@Date: 23:15 2018/10/2
    **/
    @GetMapping("/delete/{id}")
    public ModelAndView delete(@PathVariable("id") Long id){
        userRepository.deleteUser(id);
        return new ModelAndView("redirect:/users"); //重定向到list页面
    }
    
    /**
    *@description: 获取修改用户的界面
    *@author: 一条懒咸鱼
    *@Date: 21:39 2018/10/3
    **/
    @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("form","userModel", model);
    }
}

4.前端部分(采用thymeleaf模板)
①header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title> Thymeleaf Demo</title>
</head>
<body>
<div th:fragment="header">
    <h1> Thymeleaf Demo</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/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title> Thymeleaf Demo</title>
</head>
<body>
<div th:fragment="footer">
    <a href="#">Welcome to my world!</a>
</div>
</body>
</html>

③list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title> Thymeleaf Demo</title>
</head>
<body>
    <div th:replace="~{header :: header}"></div>
    <h3 th:text="${userModel.title}">一条懒咸鱼</h3>
    <div>
        <a href="/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="~{footer :: footer}"></div>
</body>
</html>

④form.html

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


    </form>
    <div th:replace="~{footer :: footer}"></div>
</body>
</html>

⑤view.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title> Thymeleaf Demo</title>
</head>
<body>
    <div th:replace="~{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="~{footer :: footer}"></div>
</body>
</html>

5.展示图

1.png

2.png

3.png

4.png

5.png

springboot实战(一)——thymeleaf
1.新建User实体类 2.建立UserRepository接口以及实现类 3.建立UserController ...
SpringBoot系列（六）集成thymeleaf详解版
SpringBoot系列（六）集成thymeleaf详解版目录 thymeleaf简介 thymeleaf特点 ...
SpringBoot & Thymeleaf项目实战
web模板语言-thymeleaf thymeleaf[https://www.thymeleaf.org/] 项...
微服务SpringBoot配置汇总
[toc] 继承SpringBoot 模板引擎Thymeleaf Thymeleaf 是一个跟 Velocity、...
because its MIME type ('applicat
springboot web + springboot security thymeleaf 报错引入css时...
SpringBoot默认模板引擎Thymeleaf
SpringBoot默认模板引擎Thymeleaf 官网地址 https://www.thymeleaf.org/...
十、Thymeleaf使用以及语法
SpringBoot推荐的Thymeleaf；语法更简单，功能更强大； 1、引入thymeleaf； 2、Thy...
SpringBoot进阶学习下篇
5、SprinBoot整合Thymeleaf模版引擎5.1 SpringBoot对模板的支持SpringBoot框...
Springboot启用静态资源版本控制
前言： Springboot推荐使用thymeleaf来进行html开发，而thymeleaf本身提供的方言已经能...
springboot整合Thymeleaf
springboot不推荐使用jsp, 所以我们这里学习下Thymeleaf。为什么选择Thymeleaf？动...