基于SpringBoot开发一套完整的项目（三）

1. springboot集成Thymeleaf模版
对于动态HTML 内容的展示，模板引擎必不可少，为什么选择Thymeleaf，由于Thymeleaf “原型即页面”的特点，非常适用于快速开发，符合Spr ing Boot 开箱即用的原则。所谓“原型即页面，简单一句话：
界面的设计与实现相分离，这就是Thymeleaf 广为流行的原因

2.Thymeleaf 标准表达式语法
以th 属性开头，例如 < span th : text= ”…”>
变量表达式： $｛……｝
选择表达式：＊｛……｝
消息表达式：＃｛……｝
链接表达到：＠｛……｝
分段表达式：～｛……｝

等等，详细的可以自行了解

3. springboot 集成 thymeleaf

首先添加依赖，点进去可以看到版本的。

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

可以看到spring-boot-starter-thymeleaf主要依赖了以下三个，默认是 3.0.9.RELEASE，也就是最新版本，如果要修改版本的话，再添加依赖的时候再指定一个Version属性就行，这里不再赘述

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter</artifactId>
  <version>2.0.2.RELEASE</version>
  <scope>compile</scope>
</dependency>
<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring5</artifactId>
  <version>3.0.9.RELEASE</version>
  <scope>compile</scope>
</dependency>
<dependency>
  <groupId>org.thymeleaf.extras</groupId>
  <artifactId>thymeleaf-extras-java8time</artifactId>
  <version>3.0.1.RELEASE</version>
  <scope>compile</scope>
</dependency>

4 .Thymeleaf 实战

首先在application.properties中添加

创建接口UserRepository和实现类UserRepositoryImpl

public interface UserRepository {

    User saveOrUpdateUser(User user); //新增或者修改用户

    void deleteUsere(Long id); //删除用户

    User getUserById(Long id); //根据用户id获取用户

    List<User> userList (); //获取所有用户的列表
}

@Repository//用于标识UserRepositoryimpl 类是一个可注入的bean 。
public class UserRepositoryImpl implements UserRepository {

    //用来生成一个递增的id ，作为用户的唯一编号。
    private  static AtomicLong counterId = new AtomicLong();

    //模拟数据的存储，
    private final ConcurrentMap<Long ,User> userConcurrentMap =new ConcurrentHashMap<Long,User>();

    @Override
    public User saveOrUpdateUser(User user) {
        Long id =user.getId();
        if (id==null){
            id=counterId.incrementAndGet();
            user.setId(id);
        }
        this.userConcurrentMap.put(id,user);
        return user;
    }

    @Override
    public void deleteUsere(Long id) {
        this.userConcurrentMap.remove(id);

    }

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

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

修改UserController

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    //查词所有用户
    @GetMapping("/userlist")
    public ModelAndView userList(Model model){
        model.addAttribute("userList",userRepository.userList());
        model.addAttribute("title","用户管理");
        return  new ModelAndView("user/list","userModel",model);
    }
    //根据id 查询用户
    @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("user/view" ,"userModel",model);
    }

    //获取创建表单页面
    @GetMapping("/form")
    public ModelAndView createForm(Model model){
        model.addAttribute("user",new User());
        model.addAttribute("title","创建用户");
        return new ModelAndView("users/form","userModel",model);
    }

    //保存用户
    @PostMapping
    public ModelAndView saveOrUpdateUser(User user){
        user =userRepository.saveOrUpdateUser(user);
        return new ModelAndView("redirect");
    }

    //根据id删除用户
    @GetMapping(value = "delete/{id}")
    public ModelAndView delete(@PathVariable("id") Long id){
        userRepository.deleteUsere(id);
        return new ModelAndView("redirect:/user");
    }

    //修改用户界面
    @GetMapping(value = "edit/{id}")
    public ModelAndView editForm(@PathVariable("id") Long id,Model model){
        User user =userRepository.getUserById(id);
        model.addAttribute("user",user);
        model.addAttribute("title","编辑用户");
        return new ModelAndView("user/form" ,"userModel",model);
    }
}

整体的API 设计如下。
( 1 ) GET/user/userlist : 查用户列表
( 2 ) GET/user/{id} :根据id查看用户详情
( 3 ) GET/user/form ：新增或者修改用户的页面。
( 4 ) POST/user ：新增或者修改用户请求处理
( 5) GET/user/delete/{id}：根据id 删除相应的用户数据

( 6 )GET/user/edit/{id}：根据id获取相应的用户，然后执行修改。

5 .编写前台页面

在templates下新建一个user文件夹，用来放list.html ; form.html ; view.html 展示页面

以及common文件夹，用来放页面的公共部分，header.html ;和 footer.html

list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
<div th:replace="~{common/header::header}"></div>
    <h4 th:text="${userModel.title}">
渡西湖
    </h4>
    <div>
        <a href="/user/form" th:href="@{/user/form}">
        新建用户
        </a>
    </div>
    <table border="2">
        <thead>
        <tr>
            <td>id</td>
            <td>名字</td>
            <td>年龄</td>
            <td>管理</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><a th:href="@{'/user/'+${user.id}}" th:text="${user.name}"></a></td>
            <td th:text="${user.age}"></td>
            <td><a th:href="@{'/user/delete/'+${user.id}}">删除</a></td>
        </tr>
        </tbody>
    </table>
<div th:replace="~{common/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>DemoThymeleaf</title>
</head>
<body>
<div th:replace="~{common/header::header}"></div>
<h4 th:text="${userModel.title}">渡西湖</h4>
<form action="/user" th:action="@{/user}" method="post" th:object="${userModel.user}">
    <input type="hidden" name="id" th:value="*{id}">
    名字<br/>
    <input type="text" name="name" th:value="*{name}">
    <br/>
    <input type="number" name="age" th:value="*{age}">
    <br/>
    <input type="submit" value="提交">
</form>
<div th:replace="~{common/footer::footer}"></div>
</body>
</html>

view.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户详情</title>
</head>
<body>
<div th:replace="~{common/header::header}"></div>
<h4 th:text="${userModel.title}"></h4>
<div>
    <p><strong>ID:</strong><span th:text="${userModel.user.id}"></span></p>
    <p><strong>名字:</strong><span th:text="${userModel.user.name}"></span></p>
    <p><strong>年龄:</strong><span th:text="${userModel.user.age}"></span></p>
</div>
<div>
    <a th:href="@{'/user/delete/'+${userModel.user.id}}">删除</a>
    <a th:href="@{'/user/edit/'+${userModel.user.id}}">修改</a>
</div>
<div th:replace="~{common/footer::footer}"></div>
</body>
</html>

header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>页头</title>
</head>
<body>
<div th:fragment="header">
    <h1>DemoThymeleaf</h1>
    <a href="/user" th:href="@{~/user/userlist}">首页</a>
</div>
</body>
</html>

footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>页脚</title>
</head>
<body>
<div th:fragment="footer">
    <a href="www.duxihu.com">欢迎光临</a>
</div>
</body>
</html>

运行：

在浏览器中输入 localhost:8080/user/userlist可以看到

依次点击：

运行成功！

基于SpringBoot开发一套完整的项目（三）

猜你喜欢