知识点3--SSM项目查看文章详情

尘世壹俗人

已于 2022-09-17 19:11:48 修改

阅读量260

点赞数

分类专栏： SSM 文章标签： java spring

于 2022-09-16 07:01:23 首次发布

本文链接：https://blog.csdn.net/dudadudadd/article/details/126882943

版权

SSM 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

继上一篇知识点后我们完成了CMS信息管理Demo的首页主体开发，本篇我们需要完成首页跳转查看文章详情的功能

首先我们观察一下首页的效果和文章列表的代码
在这里插入图片描述

<ul class="list-unstyled">
	<c:forEach items="${info.list}" var="article">
		<li class="media">
			<a href="/detail.do?id=${article.id}" target="_blank"><img style="width: 100px;height: 80px" src="/pic/${article.picture }" class="mr-3 rounded" alt="..."></a>
			<div class="media-body">
				<h5 class="mt-0 mb-1"><a href="/detail.do?id=${article.id}" target="_blank">${article.title }</a></h5>
				<p class="pt-1">
					<fmt:formatDate value="${article.created }" pattern="yyyy-MM-dd HH:mm:ss"/>
				</p>
			</div>
		</li>
		<hr>
	</c:forEach>
</ul>

仔细看过代码后，我们可以知道图片和文章的标题都是一个超链接包裹，并且指向同一个请求，所以我们在首页的控制器模块中完成这个请求的开发就行，将如下代码写到IndexController中

/**
 *
 * @Title: detail
 * @Description: 文章详情
 * @param id
 * @return
 * @return: String
 */
@RequestMapping("detail.do")
public String detail(Model model,Integer id) {
	Article article = articleService.select(id);
	model.addAttribute("article", article);
	return "index/article";
}

同样的我们去前端路径中准备页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <!-- bookstap视窗 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 关键字与 文章来源-->
<meta name="keywords" content="${article.keywords }">
<meta name="origin" content="${article.original }">
<title>${article.title }</title>
<link href="/resource/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 网格容器 -->
	<div class="container-fluid">
		<!-- 头部黑框 -->
		<div class="row" style="height: 44px">
			<div class="col-md-12 bg-dark pt-2">
				<font color="white">下载APP</font>
			</div>
		</div>

		<!-- 展示文章内容 -->
		<div class="row">
			<!-- 左侧站位 没有实际内容 -->
			<div class="col-md-2"></div>

			<!-- 中间展示文章详情 -->
			<div class="col-md-7">
				<H3>${article.title }</H3>
				<p>${article.user.username}  <fmt:formatDate value="${article.created}" pattern="yyyy-MM-dd HH:mm:ss " /></p>
                 ${article.content}
			</div>
			
			<!-- 右侧同样站位作用 -->
			<div class="col-md-3"></div>

		</div>

	</div>
</body>
</html>

随后我们随便点击一个文章跳转看效果
在这里插入图片描述
本章知识点到此结束，但是后期如果有时间应该会扩展一些评论、收藏之类的细节功能

本项目目前以上传github ：https://github.com/wangyang159/cmsdemo

尘世壹俗人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点3--SSM项目查看文章详情

仔细看过代码后，我们可以知道图片和文章的标题都是一个超链接包裹，并且指向同一个请求，所以我们在首页的控制器模块中完成这个请求的开发就行，将如下代码写到IndexController中。继上一篇知识点后我们完成了CMS信息管理Demo的首页主体开发，本篇我们需要完成首页跳转查看文章详情的功能。首先我们观察一下首页的效果和文章列表的代码。随后我们随便点击一个文章跳转看效果。同样的我们去前端路径中准备页面。
复制链接

扫一扫

专栏目录