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

    继上一篇知识点后我们完成了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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

    <%@ 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">
 
<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">下载APPfont>
			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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

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

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

  • 相关阅读:
    【仿牛客网笔记】项目进阶，构建安全高效的企业服务——优化网站性能
    数据资产时代来临，如何激活第一方客户数据？
    LibOpenCM3(一) Linux下命令行开发环境配置
    Debye-Wolf积分计算器的用法
    UnityShader_基础理论
    SI好文翻译：铜表面纹理对损耗的影响：一个有效的模型（一）
    从C语言的面向过程编程过渡理解面向对象编程风格中的封装
    TCP三次握手、为什么要三次握手？
    智能化社区会给我们的生活带来什么新体验？
    自5月以来，俄罗斯Sandworm黑客侵入了11家乌克兰电信公司
  • 原文地址：https://blog.csdn.net/dudadudadd/article/details/126882943