一、Thymeleaf简介

在SpringBoot项目中是推荐使用Thymeleaf模板引擎的，它为我们的前后端的分离奠定了基础，使用起来不仅方便而且简单。在SpringBoot的火爆程度下，掌握使用Thymeleaf也是我们学习中不可或缺的一个环节。

本次更新中更新了个人中心，可支持个人信息修改以及用户头像的修改，接下来我们就来看看Thymeleaf在实战项目杂货铺的个人中心里具体是怎么使用的。

二、引用

在pom.xml文件中引入。

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

在pom文件中直接引入即可。

三、后台数据准备

我们在后台中通过查询出登录用户的个人信息后，然后将登录对象返回至我们所跳转的页面，当然没有跳转页面也是可行的。

以下获取登录用户的账号是使用SpringSecurity的方法，对SpringSecurity在项目中的如何应用有兴趣的同学可以去看看博客专栏的《杂货铺项目实战》里有详细的介绍。

/** * 个人主页 * * @return */
    @RequestMapping("/personalPage")
    public String toPersonalPage(ModelMap map){
        // SpringSecurity获取当前登录用户ID的方法
        String idNumber = SecurityContextHolder.getContext().getAuthentication().getName();
        // 根据账号查询登录用户的信息
        User user = loginMapper.getPersonInfo(idNumber);
        // 存入ModelMap返回页面
        map.put("user",user);
        return "/personal/personalPage";
    }

四、前端引用

由如下Html代码可以看出，在form标签上，我们通过th:object="${user}"即可拿到上方Java代码中，在后台通过ModelMap存入的对象：map.put(“user”,user) 在这里就可以直接获取到了，我们在对应的标签上使用 th:text、th:checked、th:text…等等就可以直接获取到我们user对象中的每一个字段值。

这样写的好处就是你无需在前端界面发送一个Ajax请求去获取到相应的数据，然后再对相应的字段进行赋值操作。直接通过模板引擎就动态加载可以对相应的字段进行赋值，非常方便。

<form class="layui-form" style="margin-top: 50px" th:object="${user}">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="userName" name="userName" placeholder="最大输入长度为20" maxlength="20" required lay-verify="required" autocomplete="off" class="layui-input" th:value="${user.userName}" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input style="background-color: #9F9F9F" type="text" id="idNumber" name="idNumber" disabled="disabled" required lay-verify="required" autocomplete="off" class="layui-input" th:value="${user.idNumber}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="男" th:checked="${user.sex == '0'}">
                    <input type="radio" name="sex" value="1" title="女" th:checked="${user.sex == '1'}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" placeholder="最大输入长度为30" maxlength="30" required lay-verify="required" autocomplete="off" class="layui-input" th:value="${user.email}">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">个人简介</label>
                <div class="layui-input-block">
                    <textarea name="personBriefly" placeholder="最大输入长度为100" maxlength="100" class="layui-textarea" th:text="${user.personBriefly}"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="updateInfo">提交修改</button>
                    <button type="button" id="uploadPicture" class="layui-btn">更改头像</button>
                </div>
            </div>
        </form>