【SpringBoot build personal blog 】- Blog home page display (ten)

Blog address: ONESTAR Inn

Source code access method 1:

• Scan the qr code at the end of the article, pay attention to the public number [programming Daily], background reply [blog], you can get the source code

Source code access method two:

• Front-end page source address: github.com/oneStarLR/m…

• Jpa as a persistent layer source address: github.com/oneStarLR/m…

• Mybatis as a persistent layer source address: github.com/oneStarLR/m…

Welcome to give encouragement to star

---

This article will be described according to the home page display, home page has search, the latest blog recommendation display, article list display, blog information statistics and other functions, will be described from these aspects, mainly back-end development, front-end will only give part of the code, will not explain.

First, home page display

Analysis of the

Q: What issues should be considered in front page displays?

Answer: According to the front page function, the two most basic query, one is to query the latest article list, one is to query the latest recommended article; There is also the search function, according to the keyword search blog; In addition, it is the statistics of blog information, the total number of blogs, visits, comments, total number of messages.

Q: How do you design the features?

A: The analysis is done on a per-feature basis

• Query the latest article list: Define a FirstPageBlog front page entity class to query the first page article list information, and define the getAllFirstPageBlog interface to associate SQL to implement the query function
• Query for the latest recommended articles: Define a Shameblog entity class to query the list of recommended articles and define the getRecommendedBlog interface to associate SQL implementation queries
• Search blogs: Since searching blogs still shows the list of blogs, the FirstPageBlog entity class is used to display the query information, and the getSearchBlog interface is defined to associate SQL to implement the query function
• Statistics blog information: statistics blog information respectively defined getBlogTotal, getBlogViewTotal, getBlogCommentTotal, getBlogMessageTotal interface to associate SQL to realize the total number of blogs, total number of visits, total number of comments, total number of messages statistics

1. Define entity classes

In accordance with the above analysis, we need to define two query entity classes: FirstPageBlog and Shameblog.

Latest blog list entity class

Because the latest blog list on the home page needs to display not only the blog information, but also the classification, author and other information, it also needs to define the classification name and user name, user profile picture attributes. Create the FirstPageBlog entity class in queryvo with the following code (leaving out the get, set, and toString methods) :

package com.star.queryvo;

import java.util.Date;

/ * * *@Description: Home page blog information entity class *@Date: Created in 9:39 2020/6/19
 * @Author: ONESTAR
 * @QQGroup: 530311074 *@URL: https://onestar.newstar.net.cn/
 */
public class FirstPageBlog {
    
    // Blog info
    private Long id;
    private String title;
    private String firstPicture;
    private Integer views;
    private Integer commentCount;
    private Date updateTime;
    private String description;

    // Class name
    private String typeName;

    / / user name
    private String nickname;
    // User profile picture
    private String avatar;

}
Copy the code

The latest recommended entity class

A Boolean variable recommend (leaving out the get, set, and toString methods) is recommended as follows:

package com.star.queryvo;

/ * * *@Description: Recommend blog data entity class *@Date: Created in 9:47 2020/6/19
 * @Author: ONESTAR
 * @QQGroup: 530311074 *@URL: https://onestar.newstar.net.cn/
 */
public class RecommendBlog {

    private Long id;
    private String title;
    private String firstPicture;
    private boolean recommend;

}
Copy the code

2. Interfaces at the persistence layer

Since these are blog-related interfaces, this is all written in the BlogDao class, as is the Mapper and business layer. According to the above analysis, the following interfaces need to be defined. Add the following interfaces to the BlogDao interface:

// Query the latest blog information on the home page
List<FirstPageBlog> getFirstPageBlog(a);

// Query the latest recommendation information on the home page
List<RecommendBlog> getAllRecommendBlog(a);

// Search the blog list
List<FirstPageBlog> getSearchBlog(String query);

// Count the number of blogs
Integer getBlogTotal(a);

// Count the total number of accesses
Integer getBlogViewTotal(a);

// Count comments
Integer getBlogCommentTotal(a);

// Count the total number of messages
Integer getBlogMessageTotal(a);
Copy the code

3. mapper

Mapper, which corresponds to the persistence layer interface, adds the following SQL to blogdao.xml:

<! Select * from weblog;
<resultMap id="firstPageBlog" type="com.star.queryvo.FirstPageBlog">
    <id property="id" column="id"/>
    <result property="title" column="title"/>
    <result property="firstPicture" column="first_picture"/>
    <result property="views" column="views"/>
    <result property="commentCount" column="comment_count"/>
    <result property="createTime" column="create_time"/>
    <result property="updateTime" column="update_time"/>
    <result property="description" column="description"/>
    <result property="typeName" column="name"/>
    <result property="nickname" column="nickname"/>
    <result property="avatar" column="avatar"/>
</resultMap>
<select id="getFirstPageBlog" resultMap="firstPageBlog">
    select b.id,b.title,b.first_picture, b.views, b.comment_count,b.create_time,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 order by b.create_time desc
</select>

<! -->
<select id="getAllRecommendBlog" resultType="com.star.queryvo.RecommendBlog">
    select * from myblog.t_blog where t_blog.recommend = true order by t_blog.create_time desc limit 4;
</select>

<! -- Search for articles -->
<select id="getSearchBlog" resultMap="firstPageBlog">
    <bind name="pattern" value="'%' + query + '%'" />
    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.title like #{pattern} or b.content like  #{pattern})
    order by b.update_time desc
</select>

<! -- Statistics blog information -->
<select id="getBlogTotal" resultType="Integer">
    select count(*) from myblog.t_blog
</select>
<select id="getBlogViewTotal" resultType="Integer">
    select coalesce (sum(views),0) from myblog.t_blog
</select>
<select id="getBlogCommentTotal" resultType="Integer">
    select count(*) from myblog.t_comment
</select>
<select id="getBlogMessageTotal" resultType="Integer">
    select count(*) from myblog.t_message
</select>
Copy the code

Explanation:

Query the latest blog list information and query recommended articles are mentioned in front of the knowledge, search articles are also in the blog management has explained, with fuzzy query, here said a statistical access to the total number of SQL, in the last version of the code, with is: Select sum(views) from myblog.t_blog Select coalesce (sum(views),0) from myblog.t_blog; select coalesce (sum(views),0) from myblog.t_blog; This problem is solved by assigning the value 0 when sum is null

4. The business layer

Business layer interface

Define the following interfaces in the BlogService interface

// Query the latest blog information on the home page
List<FirstPageBlog> getAllFirstPageBlog(a);

// Query the latest recommendation information on the home page
List<RecommendBlog> getRecommendedBlog(a);

// Search the blog list
List<FirstPageBlog> getSearchBlog(String query);

// Count the number of blogs
Integer getBlogTotal(a);

// Count the total number of accesses
Integer getBlogViewTotal(a);

// Count comments
Integer getBlogCommentTotal(a);

// Count the total number of messages
Integer getBlogMessageTotal(a);
Copy the code

Interface implementation class

Add to the BlogServiceImpl interface implementation class:

// Query the latest blog information on the home page
@Override
public List<FirstPageBlog> getAllFirstPageBlog(a) {
    return blogDao.getFirstPageBlog();
}

// Query the latest recommendation information on the home page
@Override
public List<RecommendBlog> getRecommendedBlog(a) {
    List<RecommendBlog> allRecommendBlog = blogDao.getAllRecommendBlog();
    return allRecommendBlog;
}

// Search the blog list
@Override
public List<FirstPageBlog> getSearchBlog(String query) {
    return blogDao.getSearchBlog(query);
}

// Count the number of blogs
@Override
public Integer getBlogTotal(a) {
    return blogDao.getBlogTotal();
}

// Count the total number of accesses
@Override
public Integer getBlogViewTotal(a) {
    return blogDao.getBlogViewTotal();
}

// Count comments
@Override
public Integer getBlogCommentTotal(a) {
    return blogDao.getBlogCommentTotal();
}

// Count the total number of messages
@Override
public Integer getBlogMessageTotal(a) {
    return blogDao.getBlogMessageTotal();
}
Copy the code

5. The controller

Create the IndexController class under the Controller package and write the following code based on the previous functional analysis:

package com.star.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.star.queryvo.FirstPageBlog;
import com.star.queryvo.RecommendBlog;
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 org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import java.util.List;

/ * * *@Description: Home controller *@Date: Created in 21:01 2020/5/20
 * @Author: ONESTAR
 * @QQGroup: 530311074 *@URL: https://onestar.newstar.net.cn/
 */
@Controller
public class IndexController {

    @Autowired
    private BlogService blogService;

    // Paging query blog list
    @GetMapping("/")
    public String index(Model model, @RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum, RedirectAttributes attributes){
        PageHelper.startPage(pageNum,10);
        List<FirstPageBlog> allFirstPageBlog = blogService.getAllFirstPageBlog();
        List<RecommendBlog> recommendedBlog = blogService.getRecommendedBlog();

        PageInfo<FirstPageBlog> pageInfo = new PageInfo<>(allFirstPageBlog);
        System.out.println("pageInfo:" +pageInfo);
        model.addAttribute("pageInfo",pageInfo);
        model.addAttribute("recommendedBlogs", recommendedBlog);
        return "index";
    }

    // Search for blogs
    @PostMapping("/search")
    public String search(Model model,
                         @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum,
                         @RequestParam String query) {
        PageHelper.startPage(pageNum, 1000);
        List<FirstPageBlog> searchBlog = blogService.getSearchBlog(query);

        PageInfo<FirstPageBlog> pageInfo = new PageInfo<>(searchBlog);
        model.addAttribute("pageInfo", pageInfo);
        model.addAttribute("query", query);
        return "search";
    }

    // Blog statistics
    @GetMapping("/footer/blogmessage")
    public String blogMessage(Model model){
        int blogTotal = blogService.getBlogTotal();
        int blogViewTotal = blogService.getBlogViewTotal();
        int blogCommentTotal = blogService.getBlogCommentTotal();
        int blogMessageTotal = blogService.getBlogMessageTotal();

        model.addAttribute("blogTotal",blogTotal);
        model.addAttribute("blogViewTotal",blogViewTotal);
        model.addAttribute("blogCommentTotal",blogCommentTotal);
        model.addAttribute("blogMessageTotal",blogMessageTotal);
        return "index :: blogMessage"; }}Copy the code

6. Front – end interaction

• Latest recommendation:

<div class="m-margin-tb-tiny four wide column" th:each="blog : ${recommendedBlogs}">
    <a href="#" class="class_outer" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
        <img src=".. /static/images/backimg1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
        <span class="class_cover" >
             <h4 class="m-font-size-blog-text m-margin-tb-tiny" th:text="${blog.title}">What are you doing here, Great Saint?</h4>
         </span>
    </a>
</div>
Copy the code

• The article lists

<div class="ui padded segment m-padded-tb-large m-opacity" th:each="blog : ${pageInfo.list}">
    <div class="ui large aligned mobile reversed stackable grid">
        <! -- Blog information -->
        <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}">What are you doing here, Great Saint?</a></h3>
            <p class="m-text m-margin-top-max" th:text="|${blog.description}...... |">I can't love you with a golden hoop; Put down the hoops. They can't protect you. I know god will not give me a second chance, once we said forever, the original is only, twelve paintings, just. "What are you going to do, Great Sage?" "Stepping on the southern sky, breaking the sky." "If I never come back..." In fact, most of the time, we all have the opportunity, and finally give up, is our own. .</p>
            <div class="ui m-margin-top-max 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.createTime,'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}">Good article</a>
                </div>
            </div>
        </div>
        <! -- Blog picture -->
        <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>
Copy the code

• Pagination displays article columns

<div class="ui bottom attached segment m-opacity stackable grid">
    <div class="three wide column" align="center">
        <a class="item" th:href="@{/(pageNum=${pageInfo.hasPreviousPage}? ${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">The previous page</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="@{/(pageNum=${pageInfo.hasNextPage}? ${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">The next page</a>
    </div>
</div>
Copy the code

• Search the blog

<form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
        <input style="color: white" type="text" name="query" placeholder="Search...." th:value="${query}">
        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
    </div>
</form>
Copy the code

• Statistics blog information

HTML:

<div id="blog-message">
    <div class="ui inverted link list" style="align-content: center; margin-top: 10px" th:fragment="blogMessage">
        <div class="m-text-thin" style="text-align: left; margin-left: 75px;">Number of articles:<h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogTotal}"> 14 </h2> 篇
        </div>
        <div class="m-text-thin" style="text-align: left; margin-left: 75px">Total number of visits:<h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogViewTotal}"> 14 </h2> 次
        </div>
        <div class="m-text-thin" style="text-align: left; margin-left: 75px">Total comments:<h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogCommentTotal}"> 14 </h2> 条
        </div>
        <div class="m-text-thin" style="text-align: left; margin-left: 75px">Total number of messages:<h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogMessageTotal}"> 14 </h2> 条
        </div>
    </div>
</div>
Copy the code

JS:

$('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");
Copy the code

7. Run access

Run the project, visit http://localhost:8080/, after adding the test article in the background can be viewed in the front page, and in the bottom bar can view the information of the site

At this point, SpringBoot build personal blog blog home page display development is complete, the next blog details page display

[Point attention, don’t get lost, welcome to continue to pay attention to this site]

---