文章目录一、Thymeleaf简介二、引文三、后台数据准备四、前端引文四、效果图五、结语
一. Thymeleaf介绍
SpringBoot项目建议使用Thymeleaf模板引擎。 这为我们前后端的分离奠定了基础，不仅使用方便，而且简单。 在SpringBoot的爆炸性发展中，熟练使用Thymeleaf也是我们学习中不可缺少的一环。
此次更新将更新个人中心，以支持修改个人信息和修改用户头像。 接下来，我们来看看Thymeleaf在实战项目杂货店的个人中心具体是如何使用的。
二、引用导入pom.xml文件。
！ --- thyme leaf---- dependencygroupidorg.spring framework.boot/groupidartifactidspring-boot-starter-thyme leaf /
三、后台数据是我们在后台查询登录用户的个人信息后，准备将登录对象返回到我们跳转的页面。 当然，没有跳转页面也是可能的。
使用SpringSecurity获取以下登录用户的帐户： 如果您对SpringSecurity在项目中的使用方式感兴趣，请在博客的《杂货铺项目实战》专栏中详细介绍。
/** *个人主页* * @ return */@ request mapping ('/personalpage ' ) publicstringtopersonalpage ((modelmapmap )/如何获取SpringSecurity当前登录的用户id string id number=securitycontextholder.get context (.getauthentication ).getName )； //根据帐户查询登录用户信息的useruser=log in mapper.getpersoninfo (id number )； 保存到ModelMap中页面map.put('user '，user )； 返回' /个人/个人页面'； (四、前端引用从以下Html代码可以看出，在form标签中，我们可以通过th:object='${user} '带到上面的Java代码，在后台通过ModelMap进行收款user ) )可以在此处的相应标签中使用th:text、th:checked、th:text…等，直接获取用户对象的每个字段值。
这样写的好处是，在前端接口上发送Ajax请求以获取相应的数据，然后不需要为相应的字段赋值。 通过直接从模板引擎动态加载，可以为相应的字段赋值，非常有用。
form class=' la yui-form ' style=' margin-top :50 px ' th : object=' $ { user } ' divclass=' la yui-form-item labeldivclass=' la yui-input-block ' input type=' text ' id=' username ' name=' username ' placeholder='最大输入长度为20 e=' $ { user.username } '/div/divdivclass=' la yui-divclass } labeldivclass=' la yui-input-block ' input style
ed" 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中都已经上传了完整代码。