SpringBoot项目实战杂货铺——Thymeleaf模板引擎在项目中的实际应用（八）

一、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>

四、效果图

一、通过登录进入系统，也可以通过注册后再登录进入系统。

二、进入主页

三、点击个人中心

四、个人中心界面展示

目前涉及到的字段比较少，后续根据实际业务需求还有角色字段、资源菜单等等与实际业务场景相称匹配的字段，在后续开发中我们继续完善。

五、结语

到今天为止，我们的实战项目的基础框架原型就搭建好了，后续再将角色、资源菜单加上，就可以开始着手编写业务代码了。

对本项目感兴趣的同学或者想看看源码学习的同学，可以私聊博主源码地址，免费开源，Github和Gitee中都已经上传了完整代码。