【SpringBoot搭建个人博客】- 其他页面显示（十二）

ONESTAR
263 阅读6分钟

博客地址：ONESTARの客栈

源码领取方式一：

  • 扫一扫文末二维码，关注公众号【编程日刊】，后台回复【博客】，即可领取源码

源码领取方式二：

欢迎给star以鼓励(^_−)☆

由于剩下的页面显示比较简单，本文将把剩下的前端页面显示都讲述一下，分别有：分类页面显示、时间轴页面显示、音乐盒页面显示、友人帐页面显示、照片墙页面显示、关于我页面显示由于留言功能和评论功能基本一样，之前也写过一篇有关评论的博客（SpringBoot和Mybatis实现评论楼中楼功能（一张表搞定）），所以这里就不讲留言功能的开发了，还有不懂的伙伴可以问我，也可以加群讨论。

一、分类页面显示

当博客开发到这里了，很多功能都是相通的，后端管理基本上就是增删改查、前端显示基本上就是返回model，只是处理起来会有些细微的差别，分类页面显示也是一样，根据页面功能来看，需要查询出所有分类和该分类下文章数目。

1. 持久层接口

这里需要两个接口，一个查询分类和该分类下博客数目（getAllTypeAndBlog）、一个是查询博客文章列表（getByTypeId），查询分类和该分类下博客数目是和分类相关的，就放在分类的Dao里面，查询博客文章列表是和博客相关的，就放在博客的Dao里面。

  • 在TypeDao接口中添加：
//查询所有分类
List<Type> getAllTypeAndBlog();
  • 在BlogDao接口中添加：
//根据TypeId查询博客列表，显示在分类页面
List<FirstPageBlog> getByTypeId(Long typeId);

2. mapper

跟持久层接口对应，博客和分类是多对一的关系，一篇博客对应一个分类，一个分类可以对应多篇博客，因此要用Mybatis的多表查询

  • TypeDao
<resultMap id="type" type="com.star.entity.Type">
    <id property="id" column="tid"/>
    <result property="name" column="name"/>
    <collection property="blogs" ofType="com.star.entity.Blog">
        <id property="id" column="bid"/>
        <result property="title" column="title"/>
        <result property="typeId" column="type_id"/>
    </collection>
</resultMap>
<!--查询分类-->
<select id="getAllTypeAndBlog" resultMap="type">
    select t.id tid, t.name, b.id bid, b.title,b.type_id
    from myblog.t_type t,myblog.t_blog b
    where t.id = b.type_id
</select>
  • BlogDao
<!--根据TypeId查询博客列表，显示在分类页面-->
<select id="getByTypeId" resultMap="firstPageBlog">
    select b.id,b.title,b.first_picture, b.views, b.comment_count, b.update_time, b.description,t.name ,u.nickname, u.avatar
    from myblog.t_blog b, myblog.t_type t,myblog.t_user u
    where b.type_id = t.id and u.id = b.user_id and b.type_id = #{typeId} order by b.update_time desc
</select>

3. 业务层

  • TypeService接口
//查询所有分类
List<Type>getAllTypeAndBlog();
  • TypeServiceImpl接口实现
@Transactional
@Override
public List<Type> getAllTypeAndBlog() {
    return typeDao.getAllTypeAndBlog();
}
  • BlogService接口
//根据TypeId查询博客列表，显示在分类页面
List<FirstPageBlog> getByTypeId(Long typeId);
  • BlogServiceImpl接口实现
//分类页面查询
@Override
public List<FirstPageBlog> getByTypeId(Long typeId) {
    return blogDao.getByTypeId(typeId);
}

4. 控制器

在controller包下创建TypeShowController类：

package com.star.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.star.entity.Type;
import com.star.queryvo.FirstPageBlog;
import com.star.service.BlogService;
import com.star.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

/**
 * @Description: 分类页面控制器
 * @Date: Created in 10:03 2020/6/24
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class TypeShowController {

    @Autowired
    private TypeService typeService;

    @Autowired
    private BlogService blogService;

    //    分页查询分类
    @GetMapping("/types/{id}")
    public String types(@RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum, @PathVariable Long id, Model model) {
        List<Type> types = typeService.getAllTypeAndBlog();

        //id为-1表示从首页导航栏点击进入分类页面
        if (id == -1) {
            id = types.get(0).getId();
        }
        model.addAttribute("types", types);
        List<FirstPageBlog> blogs = blogService.getByTypeId(id);

        PageHelper.startPage(pageNum, 10000);
        PageInfo<FirstPageBlog> pageInfo = new PageInfo<>(blogs);
        model.addAttribute("pageInfo", pageInfo);
        model.addAttribute("activeTypeId", id);
        return "types";
    }

}

讲解：

{id}：当id为-1时，表示从首页导航栏进入分类页面，默认第一个分类显示颜色

getAllTypeAndBlog：查询分类名称和博客信息，前端统计出该分类下博客数量

getByTypeId：查询博客列表

5. 前后端交互

  • 分类统计
<div class="ui labeled button m-margin-tb-tiny" th:each="type : ${types}">
  <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="ui basic  button" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${type.name}">好文</a>
  <div class="ui basic  left pointing label" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${#arrays.length(type.blogs)}">22</div>
</div>
  • 分类列表
<div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${pageInfo.list}">
  <div class="ui middle aligned mobile reversed stackable grid" >
    <div class="eleven wide column">
      <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-title-font" th:text="${blog.title}">大圣，此去欲何?</a></h3>
      <p class="m-text" th:text="|${blog.description}......|">戴上金箍，没法爱你；放下金箍，没法保护你。我知道上天不会给我第二次机会，曾经我们说好的永远，原来也仅仅只有，十二画，而已。“大圣，此去欲何?”“踏南天，碎凌霄。”“若一去不回……”“便一去不回” 其实很多时候，我们都是有机会的，最后真正放弃的，是我们自己。......</p>
      <div class="ui grid">
        <div class="eleven wide column">
          <div class="ui mini horizontal link list">
            <div class="item">
              <img src="../static/images/me.jpg" th:src="@{${blog.avatar}}"  alt="" class="ui avatar image">
              <div class="content"><a href="#" th:href="@{/about}" target="_blank" class="header" th:text="${blog.nickname}" >oneStar</a></div>
            </div>
            <div class="item">
              <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-01-01</span>
            </div>
            <div class="item">
              <i class="eye icon"></i> <span th:text="${blog.views}">2222</span>
            </div>
            <div class="item">
              <i class="comment outline icon"></i> <span th:text="${blog.commentCount}">2222</span>
            </div>
          </div>
        </div>
        <div class="right aligned five wide column">
          <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.typeName}">好文</a>
        </div>
      </div>
    </div>
    <div class="five wide column">
      <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
        <img src="../static/images/backimg1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
      </a>
    </div>
  </div>
</div>
  • 分页显示
<div class="ui bottom attached segment m-opacity stackable grid">
  <div class="three wide column" align="center">
    <a class="item" th:href="@{/types(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
  </div>

  <div class="ten wide column" align="center">
    <p> <span th:text="${pageInfo.pageNum}"></span> / <span th:text="${pageInfo.pages}"></span> </p>
  </div>

  <div class="three wide column" align="center">
    <a class="item" th:href="@{/types(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
  </div>
</div>

6. 运行访问

运行项目，访问 http://localhost:8080/ ，点击导航栏的分类，可以看到分类信息和分类博客列表

image

二、时间轴页面显示

时间轴页面显示只要显示博客标题和时间，因此可以直接共用BlogDao中的持久层接口getAllBlog，只需要编写控制层代码即可，在controller包下创建ArchiveShowController类：

package com.star.controller;

import com.star.queryvo.BlogQuery;
import com.star.service.BlogService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

/**
 * @Description: 时间轴页面显示控制器
 * @Date: Created in 17:40 2020/6/27
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class ArchiveShowController {

    @Autowired
    private BlogService blogService;

    @GetMapping("/archives")
    public String archive(Model model){
        List<BlogQuery> blogs = blogService.getAllBlog();
        model.addAttribute("blogs", blogs);
        return "archives";
    }

}
  • 前后端交互
<li class="" th:each="blog : ${blogs}">
  <div>
    <time th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}">2020/01/01</time>
    <div class="scientist" >
        <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
          <h3 class="state" style="text-align:center;font-size: 16px;color: #000;" th:text="${blog.title}">文章标题</h3>
        </a>
    </div>
  </div>
</li>
  • 运行访问 运行项目，访问 http://localhost:8080/ ，点击导航栏的时间轴，可以看到阶梯状左右分布、按照时间顺序排布的文章列表

image

三、音乐盒页面显示

音乐盒是一个静态页面，直接在控制器中返回页面就可以了

package com.star.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @Description: 音乐盒页面显示控制器
 * @Date: Created in 20:59 2020/6/27
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class MusicShowController {

    @GetMapping("/music")
    public String about() {
        return "music";
    }

}

四、友人帐页面显示

友人帐前端页面显示直接调用持久层的listFriendLink接口，只需编写控制层代码就可以了，在controller包下创建FriendsShowController类：

package com.star.controller;

import com.star.service.FriendLinkService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @Description: 友链显示控制器
 * @Date: Created in 21:12 2020/6/27
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class FriendsShowController {

    @Autowired
    private FriendLinkService friendLinkService;

    @GetMapping("/friends")
    public String friends(Model model) {
        model.addAttribute("friendlinks",friendLinkService.listFriendLink());
        return "friends";
    }

}
  • 前后端交互
<div class="m-margin-tb-tiny four wide column" th:each="friendlink : ${friendlinks}">
    <a href="#" class="class_outer" th:href="@{${friendlink.blogaddress}}" target="_blank">
        <div align="center">
            <div class="friends-link">
                <img src="../static/images/me.jpg" th:src="@{${friendlink.pictureaddress}}"  alt="" class="friends-link-image">
                <div class="m-margin-top">
                 <h4 class="m-font-size-text-friends m-margin-tb-tiny" th:text="${friendlink.blogname}">ONESTAR</h4>
                </div>
            </div>
        </div>
    </a>
</div>
  • 运行访问

运行项目，访问 http://localhost:8080/ ，点击导航栏的友人帐，可以查看友链信息：

image

五、照片墙页面显示

照片墙页面显示直接调用持久层的listPicture接口，只需编写控制层代码就可以了，在controller包下创建PictureShowController类：

package com.star.controller;

import com.star.service.PictureService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @Description: 照片墙页面显示控制器
 * @Date: Created in 22:08 2020/6/27
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class PictureShowController {

    @Autowired
    private PictureService pictureService;

    @GetMapping("/picture")
    public String friends(Model model) {
        model.addAttribute("pictures",pictureService.listPicture());
        return "picture";
    }

}
  • 前后端交互
<article class="thumb" th:each="picture : ${pictures}">
    <div class="ma5-gallery">
        <div class="rthumbnail">
            <a href="../static/images/backimg1.jpg" th:href="@{${picture.pictureaddress}}">
                <img class="picture-zmki_px" src="../static/images/backimg1.jpg" th:src="@{${picture.pictureaddress}}">
            </a>
            <div class="m-picture-text" th:text="${picture.picturename}">起风了</div>
            <div  class="rcaption">
                <div style="font-size: large;" th:text="${picture.picturename}">起风了</div>
                <div style="font-size: 16px" class="m-margin-top" th:text="${picture.picturetime}">2020-02-02 &nbsp;深圳</div>
                <p style="font-size: 16px" th:text="${picture.picturedescription}">我曾难自拔于世界之大，也沉迷于其中梦话</p>
            </div>
        </div>
    </div>
</article>
  • 运行访问

运行项目，访问 http://localhost:8080/ ，点击导航栏的照片墙，点击照片，可以查看照片信息：

image

image

六、关于我页面显示

关于我页面显示是一个静态页面，直接在控制器中返回页面就可以了

package com.star.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @Description: 关于我界面显示控制器
 * @Date: Created in 23:26 2020/6/27
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class AboutShowController {

    @GetMapping("/about")
    public String about() {
        return "about";
    }

}
  • 运行访问

image

至此，整个博客开发完成，包括后台管理和前端页面显示，下一篇将讲述部署相关内容

【点关注，不迷路，欢迎持续关注本站】

image

avatar
文章
阅读
粉丝