牛客网后端项目实战（十七）：显示帖子

• DAO层，业务层，视图层
  • DiscussPostMapper
    DiscussPostService
    DiscussPostController
• 前端
  • index.html
    在帖子标题上增加访问详情页面的链接
  • discuss-detail.html
    处理静态资源的访问路径
    复用index.html的header区域
    显示标题、作者、发布时间、帖子正文等内容

显示帖子详情

mapper

首先是在DiscussPostMapper里加上查询帖子的方法。

//帖子详情
    DiscussPost selectDiscussPostById(int id);

然后在xml里写对应的sql语句，这里复用了之前写的selectFields

	<select id="selectDiscussPostById" resultType="DiscussPost">
        select
        <include refid="selectFields"></include>
        from discuss_post
        where id = #{id}
    </select>

Service

直接返回查询结果就行

public DiscussPost findDiscussPostById(int id){
        return discussPostMapper.selectDiscussPostById(id);
    }

Controller

这里涉及到一个问题，帖子详情页要显示作者昵称，但是post里只存了id，有两种方案，第一种写sql联合查询，效率高但是有的地方不需要查作者昵称，第二种就是调用userService查出user，但是效率较低，这里选择第二种，后面使用redis后，效率影响可以大大减小。

@RequestMapping(path = "/detail/{discussPostId}",method = RequestMethod.GET)
    public String getDiscussPost(@PathVariable("discussPostId") int discussPostId, Model model){
        //帖子
        DiscussPost post=discussPostService.findDiscussPostById(discussPostId);
        model.addAttribute("post",post);
        //作者
        User user=userService.findUserById(post.getUserId());
        model.addAttribute("user",user);

        return "/site/discuss-detail";

    }

前端

index.html

				<!-- 帖子列表 -->
				<ul class="list-unstyled">
					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
						<a href="site/profile.html">
							<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">
								<a th:href="@{|/discuss/detail/${map.post.id}|}" th:utext="${map.post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</a>
								<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">
								<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">赞 11</li>
									<li class="d-inline ml-2">|</li>
									<li class="d-inline ml-2">回帖 <span th:text="${map.post.commentCount}">7</span></li>
								</ul>
							</div>
						</div>						
					</li>
				</ul>

discussPosts 是Model里的一个变量，是 HomeController 类 getIndexPage() 装载的。

th:each 指令实现循环操作
eg:

假如有用户的集合：users在Context中。

<tr th:each="user : ${users}">
    <td th:text="${user.name}">Onions</td>
    <td th:text="${user.age}">2.41</td>
</tr>

discuss-detail.html

thymeleaf 模板布局 - 引入公共header

1、复用index.html的header区域

要复用的模板

// index.html 文件
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:fragment="header">
			...
		</header>

在html的head元素中通过th:replace属性引入，值为模板的路径，不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)

// discuss-detail.html文件
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:replace="index::header">

2、显示标题、作者、发布时间、帖子正文等内容

			<!-- 帖子详情 -->
			<div class="container">
				<!-- 标题 -->
				<h6 class="mb-4">
					<img src="http://static.nowcoder.com/images/img/icons/ico-discuss.png"/>
					<span th:utext="${post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</span>
					<div class="float-right">
						<button type="button" class="btn btn-danger btn-sm">置顶</button>
						<button type="button" class="btn btn-danger btn-sm">加精</button>
						<button type="button" class="btn btn-danger btn-sm">删除</button>
					</div>
				</h6>
				<!-- 作者 -->
				<div class="media pb-3 border-bottom">
					<a href="profile.html">
						<img th:src="${user.headerUrl}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
					</a>
					<div class="media-body">
						<div class="mt-0 text-warning" th:utext="${user.username}">寒江雪</div>
						<div class="text-muted mt-3">
							发布于 <b th:text="${#dates.format(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"><a href="#" class="text-primary">赞 11</a></li>
								<li class="d-inline ml-2">|</li>
								<li class="d-inline ml-2"><a href="#replyform" class="text-primary">回帖 <i th:text="${post.commentCount}">7</i></a></li>
							</ul>
						</div>
					</div>
				</div>	
				<!-- 正文 -->
				<div class="mt-4 mb-3 content" th:utext="${post.content}">
					金三银四的金三已经到了，你还沉浸在过年的喜悦中吗？
					如果是，那我要让你清醒一下了：目前大部分公司已经开启了内推，正式网申也将在3月份陆续开始，金三银四，春招的求职黄金时期已经来啦！！！
					再不准备，作为19应届生的你可能就找不到工作了。。。作为20届实习生的你可能就找不到实习了。。。
					现阶段时间紧，任务重，能做到短时间内快速提升的也就只有算法了，
					那么算法要怎么复习？重点在哪里？常见笔试面试算法题型和解题思路以及最优代码是怎样的？
					跟左程云老师学算法，不仅能解决以上所有问题，还能在短时间内得到最大程度的提升！！！
				</div>
			</div>