1、 报错信息
idea 中使用 thymeleaf 时报错 <img th:src="${map.user.headerUrl}" 报错Cannot resolve 'user'
2、 后端代码
@RequestMapping(path = "/index", method = RequestMethod.GET) // 设置界面传过来orderMode的默认值是0,如果没有传过来name为orderMode的值,就将参数orderMode设置为0
public String getIndexPage(Model model, Page page, @RequestParam(name = "orderMode", defaultValue = "0") int orderMode) {
// 方法调用前,spring MVC会会自动实例化model和page,并将page注入model,因为这两个都是参数
// 所以,在Thymeleaf中可以直接访问page对象中的数据,不需要手动将page添加到model了
page.setRows(discussPostService.getDiscussPostRows(0));
// 这个分页的时候要加上排序规则,否则分页切换页的时候就有跳转到别的页了,因为排序原则参数使用过?拼接过来的
page.setPath("/index?orderMode=" + orderMode); // 页面的访问路径
List<DiscussPost> list = discussPostService.listDiscussPosts(0, page.getOffset(), page.getLimit(), orderMode);
List<Map<String, Object>> discussPosts = new ArrayList<>();
// Map<String, Object> map = new HashMap<>();
if (list != null) {
for (DiscussPost post : list) {
Map<String, Object> map = new HashMap<>();
map.put("post", post);
User user = userService.getUserById(post.getUserId());
map.put("user", user);
// 查询当前帖子点赞数量
long likeCount = likeService.countEntityLike(ENTITY_TYPE_POST, post.getId());
map.put("likeCount", likeCount);
discussPosts.add(map);
model.addAttribute("loginUser",userService.getUserById(post.getUserId()));
}
}
// 这个就是将discussPosts这个List对象作为值存入到model中,然后将他命名成discussPosts,以后从model中取discussPosts这个对象就要通过键名discussPosts来取得
// 这个model就对被传送到界面,实现不同层级的数据传送
model.addAttribute("discussPosts", discussPosts);
// 返回的是模板的路径,也就是主页的路径,就是想要把model对象中存储的数据传给哪一个界面
// 注意区分下面这个/index和上面那个/index。上面那个是在浏览器访问的时候写index就访问了这个controller,然后这个controller处理了数据后,return给了index.html这个模板,界面就给跳转到了indext.html了,下面这个return写的是html模板的名字
model.addAttribute("orderMode", orderMode);
return "/index";
}
3、 前端代码
<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
<!--帖子作者头像-->
<a th:href="@{|/user/profile/${map.user.id}|}">
<!--用到Thymeleaf模板的地方要用th:标注-->
<img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
</a>
<div class="media-body">
<h6 class="mt-0 mb-3"> <!--utext可以把文本中的转移字符转译再输出,text是原样输出字符-->
<a th:href="@{|/discuss/detail/${map.post.id}|}" th:utext="${map.post.title}">备战春招,面试刷题跟他复习,一个月全搞定!</a>
<!--这里的路径因为既有常量,又有变量,所以这里要将路径用||括起来,这个里面既可以写常量,也可以写变量--><!--if判断标签-->
<span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>
<span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>
</h6>
<div class="text-muted font-size-12"> <!--Thymeleaf模板内置了很多工具,这个dates是格式化日期格式的-->
<u class="mr-3" th:utext="${map.user.username}">寒江雪</u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
<ul class="d-inline float-right">
<li class="d-inline ml-2">赞 <span th:text="${map.likeCount}">11</span></li>
<li class="d-inline ml-2">|</li>
<li class="d-inline ml-2">回帖 <i th:text="${map.post.commentCount}">30</i></li>
</ul>
</div>
</div>
</li>
4、 报错原因
idea 对 thymeleaf 模板校验问题。
5、 解决办法
关闭相应的校验就可以,可以把相应的 errors 变成 warning 警告。
详情参考:https://www.jianshu.com/p/a591e26a33b3