springboot集成Thymeleaf实现一个用户的增删改查功能，包括前后端代码实现

前言：

在springboot的开发框架中，本来就推荐使用thymeleaf的前端框架，所以结合起来进行请后端的开发也是很方面的。下面就是我学习两者的一个实际用例笔记的额一个记录，方便回看关键的知识点

开发环境

Windows 10 10.0 amd64
eclipse Oxygen.3a Release (4.7.3a)
Gradle 4.9
JDK1.8.0_151

启动项目的快速搭建

在前面的文章有写到如何利用gradle快速搭建一个springboot启动项目，这里就不再重复
https://www.jianshu.com/p/de72c26ec3b5

在eclipse开发环境中导入gradle项目

在前面的文章中也有写到如何导入，在这里也不再详述
https://www.jianshu.com/p/3bdf834dcba6

用户管理实例的后台代码编写

首先是整个项目的目录结构，如下

image.png
然后就是实体类User.java 的编写，代码如下

package com.waylau.spring.boot.blog.domain;

/**   
 * @author: crj
 * @date: 2018年8月21日 上午10:42:13 
 */
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;
    }
    
    

}

然后就是借口UserRepository.java 的编写，代码如下：

package com.waylau.spring.boot.blog.repository;



import java.util.List;

import com.waylau.spring.boot.blog.domain.User;

/**   
 * user资源库
 * @author: crj
 * @date: 2018年8月21日 上午10:48:16 
 */
public interface UserRepository {
    /**
     * 创建或者修改用户
     * @author: crj
     * @param user
     * @return
     * @date:2018年8月21日 上午10:49:02
     */
    User saveOrUpdateUser(User user);
    /**
     * 删除用户
     * @author: crj
     * @param id
     * @date:2018年8月21日 上午10:50:06
     */
    void deleteUser(Long id);
    /**
     * 根据用户id查询用户
     * @author: crj
     * @param id
     * @return
     * @date:2018年8月21日 上午10:52:17
     */
    
    User getUserById(Long id);
    /**
     * 获取用户列表
     * @author: crj
     * @return
     * @date:2018年8月21日 上午10:52:01
     */
    
    List<User> listUsers();
    

}

然后就是编写UserRepositoryImpl.java实现上面的接口类，代码如下

package com.waylau.spring.boot.blog.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.waylau.spring.boot.blog.domain.User;
import com.waylau.spring.boot.blog.repository.UserRepository;

/**   
 * UserRepository的实现类
 * @author: crj
 * @date: 2018年8月21日 上午11:01:26 
 */
@Repository 
public class UserRepositoryImpl implements UserRepository{
    //计数，每增加一个用户就递增一个，来生成每个用户的唯一id
    private static  AtomicLong counter= new AtomicLong();
    //模拟存储库，把数据存储在内存当中，需要用到ConcurrentMap来存储用户信息的容器
    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);
    }
    /**
     * 说明：这里需要用到ArrayList去包装一下并以List<User>方式返回
     */
    @Override
    public List<User> listUsers() {
        
        return new ArrayList<User>(this.userMap.values());
    }

}

然后就是编写与前端进行交互的UserController.java类，代码如下：

package com.waylau.spring.boot.blog.controller;

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.waylau.spring.boot.blog.domain.User;
import com.waylau.spring.boot.blog.repository.UserRepository;

/**   
 * User控制器
 * @author: crj
 * @date: 2018年8月20日 下午4:19:24 
 */
@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;
    /**
     * 查询用户
     * @author: crj
     * @param model
     * @return
     * @date:2018年8月21日 上午11:27:11
     */
    @GetMapping
    public ModelAndView list(Model model) {
        model.addAttribute("userList",userRepository.listUsers());
        model.addAttribute("title", "用户管理");
        return new ModelAndView("users/list","userModel",model);
    }
    /**
     * 根据用户id查看用户
     * @author: crj
     * @param id
     * @param model
     * @return
     * @date:2018年8月21日 上午11:30:43
     */
    @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);
    }
    
    /**
     * 获取创建表单页面
     * @author: crj
     * @param model
     * @return
     * @date:2018年8月21日 上午11:34:57
     */
    @GetMapping("/form")
    public ModelAndView createForm(Model model) {
        model.addAttribute("user",new User());
        model.addAttribute("title", "创建用户");
        return new ModelAndView("users/form","userModel",model);
    }
    /**
     * 保存或者更新用户，并返回用户列表
     * @author: crj
     * @param user
     * @return
     * @date:2018年8月21日 上午11:43:07
     */
    @PostMapping
    public ModelAndView saveOrUpdateUser(User user) {
        user = userRepository.saveOrUpdateUser(user);
        return new ModelAndView("redirect:/users");//重定向到list页面
    }
    /**
     * s删除用户，并返回用户列表
     * @author: crj
     * @param id
     * @return
     * @date:2018年8月22日 上午9:27:49
     */
    @GetMapping("/delete/{id}")
    public ModelAndView deleteUser(@PathVariable("id") Long id) {
        userRepository.deleteUser(id);
        return new ModelAndView("redirect:/users");//重定向到list页面
    }
    /**
     * 修改用户跳转页面
     * @author: crj
     * @param model
     * @return
     * @date:2018年8月22日 上午9:27:31
     */
    @GetMapping("/modify/{id}")
    public ModelAndView modifyUser(@PathVariable("id") Long id,Model model) {
        model.addAttribute("user",userRepository.getUserById(id));
        model.addAttribute("title", "修改用户");
        return new ModelAndView("users/modify","userModel",model);
    }

}

用户管理实例的前端页面代码编写

这里写了两个thymeleaf的页面引用模板片段，分别是header.html和footer.html分别如下：
header

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultrag.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:fragment="header">
<h1>Thymeleaf in action</h1>
    <a href="/users" >首页</a>
</div>
</body>
</html>

footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultrag.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:fragment="footer">
    <a href="http://www.baidu.com">百度一下</a>
</div>
</body>
</html>

另外分别是增删改查的页面
- list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultrag.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:replace="~{fragments/header::header}"></div>
<h3 th:text="${userModel.title}"></h3>
<div>
    <a th:href="@{/users/form}">创建用户</a>
</div>
<table border="1">
    <thead>
        <tr>
            <td>ID</td>
            <td>Email</td>
            <td>Name</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 th:text="${user.email}"></td>
            <td >
                <a th:href="@{'/users/'+${user.id}}" th:text="${user.name}"></a>
            </td>
            <td >
                <a th:href="@{'users/delete/'+${user.id}}">删除</a>
                <a th:href="@{'users/modify/'+${user.id}}">修改</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.ultrag.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</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="*{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="~{fragments/footer::footer}"></div>
</body>
</html>

view.html

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

modify.html

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

项目运行之后，测试页面效果展示

展示用户列表

image.png

用户信息展示

image.png
用户信息修改

image.png

修改后自动跳转到用户列表页面

image.png

用户删除，删除后自动跳转回用户列表页面

image.png

后记

以上没有用到存储数据库，仅仅是在内存中进行了简单的数据操作模拟，后续会有与存储数据库进行交互
以上的代码，仅仅供给自己学习回顾记录所用
在这个实例编写的过程中，会遇到各种小问题，bug,我在这个过程中遇到的一个坑就是忘了导入Thymeleaf依赖，所以当测试编写的路径的时候，没有跳转到指定的前端页面，一直报下面的这个错误：
2018-08-22 12:05:09.500 WARN 13856 --- [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Failed to bind request element: org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "list"

image.png
原因是：如下图所记录的，

image.png

当我把thymeleaf的依赖加上，在重新右键项目名称，
选择Gradle的Refresh Gradle Project更新时候，就能正常跳转到具体的页面了

image.png
因为工程是用gradle创建的，所以不熟悉的朋友需要自行学习一下gradle构建项目相关知识。网上也有很多相关的gradle的开源项目，当拿过来学习的时候，也是需要用到gradle的，这个相当于maven的作用
项目的相关依赖是通过gradle的build.gradle 文件注入的，详细的过程以往的文章也有写到的。
在eclipse中，如果更改了gradle相关的配置，如增加相关依赖，需要选择Gradle的Refresh Gradle Project重新更新一下，再启动项目

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,287评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,346评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,277评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,132评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,147评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,106评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,019评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,862评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,301评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,521评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,682评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,405评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,996评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,651评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,803评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,674评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,563评论 2赞 352

springboot集成Thymeleaf实现一个用户的增删改查功能，包括前后端代码实现

前言：

开发环境

启动项目的快速搭建

在eclipse开发环境中导入gradle项目

用户管理实例的后台代码编写

用户管理实例的前端页面代码编写

项目运行之后，测试页面效果展示

后记

推荐阅读更多精彩内容