springboot开发博客系统-首页

最新推荐文章于 2024-07-26 06:15:00 发布

dxhclever

最新推荐文章于 2024-07-26 06:15:00 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/dxhclever/article/details/134268568

版权

首页需求文档

一，首页

（1）分页显示博客列表

1.显示博客发布时间（格式：xxxx年xx月xx日）类型（文章分类）

博客标题，内容详情简介（详情简介超过40字符显示......）。

点击页码可跳转到对应列表页面。

博客列表内容可上下滑动浏览。

每页列表只显示5篇博客文章, 可上下滑动。

点击指定文章标题跳转到指定文章详情页

6.列表每一页最后一篇文章下面显示页码、上一页、下一页、点击上一页或者下一页、页码数跳转到对应页。

2.显示阅读排行榜列表15个

显示阅读量最高的前十五篇文章（从高到底依次排名）

根据文章的热度（点击量/阅读量）来统计阅读排行榜前十五的文章。

排行榜博客标题旁显示点击量。

4.点击排行榜博客标题可跳转到对应详情页。

（3）显示详情页

详情页显示博客标题，发布时间（格式：xxxx年xx年xx日）以及内容介绍。

显示当前登录的用户名字

内容最下方显示评论框

（4）点击博客小站能回首页

1.浏览在第一到第五页点击博客名都能返回到首页

2.首页和文章详情页显示博客名

（5）首页其他按钮功能

1.未登录时显示登录按钮

2.当前登录用户为admin时,页面顶部显示用户信息按钮、退出按钮、发送邮件按钮、后台管理按钮，为李四用户时则不显示后台管理。

功能

用例

预期结果

预期提示语

测试结果

分页显示博客列表

在首页看到分页显示的博客列表，每一页显示出五篇博客。

通过

每个列表项包含发布时间、标题、类型，和详情介绍（简介超过40字时显示省略号）。

通过

标题介绍少于40字符时显示全部内容

通过

标题介绍多于40字符时没有显示省略号

不通过

通过

标题介绍多于40字符时用省略号显示

通过

点击下一页按钮（处于第一页时）返回到下一页（第二页）

通过

点击上一页按钮（处于第二页时）返回到上一页（第一页）

通过

用户可以通过鼠标上下滑动来浏览列表内容。

通过

显示排行榜前15个

显示博客阅读排行榜点击量最多前15个博客。

通过

博客列表排名会随着博客的点击量而变化( 如排名第二博客的点击量超过第一博客时会取代第一名的位置)

通过

未开启redis服务时点击排行榜的博客无法查看到博客内容。

不通过

通过

开启redis服务时点击排行榜的博客可查看到博客内容。

通过

排行榜显示每个博客当前的点击阅读量。

通过

显示详情页

详情页显示博客的完整内容、发布时间等信息。

通过

在评论框中输入评论内容并提交成功。

不通过

通过

点击浏览器左上角返回键可返回首页

通过

点击后台管理按钮能跳转到后台文章管理。

不通过

通过

点博客名返回首页

在第二页点任意博客标题时点击博客小站名称能返回到首页(第一页)。

通过

在详情页点击博客小站的名称能返回到首页。

通过

在第二页点任意博客标题进入博客详情页再点击博客小站的名称能返回到第二页。

不通过

通过

<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:th="http://www.thymeleaf.org" th:fragment="header(title,keywords)">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="shortcut icon" th:href="@{/user/img/bloglogo.jpg}"/>
<link rel="apple-touch-icon" th:href="@{/user/img/apple-touch-icon.png}"/>
<title><th:block th:text="${title ?: '首页'}"></th:block></title>
<link th:href="@{/user/css/xcode.min.css}" rel="stylesheet"/>
<link th:href="@{/user/css/style.min.css}" rel="stylesheet"/>
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/assets/js/amazeui.min.js}"></script>
<link rel="stylesheet" th:href="@{/assets/css/amazeui.min.css}"/>
<link rel="stylesheet" th:href="@{/assets/css/app.css}"/>

</head>
<body gtools_scp_screen_capture_injected="true" th:class="${is_post}?'':'bg-
'">

<header id="header" class="header bg-white">
<div class="navbar-container">
<a th:href="@{/}" class="navbar-logo">清水的个人博客小站</a>
<div class="navbar-menu">
<form name="logoutform" th:action="@{/logout}" method="post"></form>
<a class="header-info" sec:authorize="isAnonymous()" th:href="@{/login}" >登录</a>
<a class="header-info" sec:authorize="isAuthenticated()" th:href="@{/toupdateUser}" >用户信息</a>
<a class="header-info" sec:authorize="isAuthenticated()" href="javascript:document.logoutform.submit();" >退出</a>
<a class="header-info" sec:authorize="isAuthenticated()" th:href="@{/mail}" >发送邮件</a>


<a class="header-info" sec:authorize="hasAuthority('ROLE_admin')" href="/admin">后台管理</a>
</div>

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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:replace="/client/header::header(null,null)" />
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
<div class="am-u-md-8 am-u-sm-12">

<div th:each="article: ${articles.list}">
<article class="am-g blog-entry-article">
<div class="am-u-lg-6 am-u-md-15 am-u-sm-12 blog-entry-img">
<img width="100%" class="am-u-sm-12" th:src="@{${commons.show_thumb(article)}}"/>
</div>
<div class="am-u-lg-6 am-u-md-15 am-u-sm-12 blog-entry-text">

<span class="blog-color"style="font-size: 15px;"><a>文章分类</a></span>
<span>   </span>

<span style="font-size: 15px;" th:text="'发布于 '+ ${commons.dateFormat(article.created)}" />
<h2>
<div><a style="color: deepskyblue;font-size: 20px;" th:href="${commons.permalink(article.id)}" th:text="${article.title}" />
</div>
</h2>

<div style="font-size: 16px;" th:utext="${commons.intro(article,75)}" />
</div>
</article>
</div>

<div class="am-pagination">
<div th:replace="/comm/paging::pageNav(${articles},'上一页','下一页','page')" />
</div>
</div>

<div class="am-u-md-4 am-u-sm-15 blog-sidebar">
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span>清水</span></h2>
<img th:src="@{/assets/img/back3.jpg}" alt="about me" class="blog-entry-img"/>
<p>
Java后台开发
</p>
<p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
</div>
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span>联系我</span></h2>
<p>
<a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
<a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
</p>
</div>
</div>

<div class="am-u-md-4 am-u-sm-15 blog-sidebar">
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
<div style="text-align: left">
<th:block th:each="article :${articleList}">
<a style="font-size: 15px;" th:href="@{'/article/'+${article.id}}"
th:text="${articleStat.index+1}+'、'+${article.title}+'('+${article.hits}+')'">
</a>
<hr style="margin-top: 0.6rem;margin-bottom: 0.4rem" />
</th:block>
</div>
</div>
</div>
</div>
</body>
<div th:replace="/client/footer::footer" />
</html>