2021-6-28：开发小而美的博客（博客详情）

最新推荐文章于 2022-02-14 21:28:42 发布
最新推荐文章于 2022-02-14 21:28:42 发布
阅读量287 收藏 1
点赞数 1
分类专栏： Spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Lydialhf/article/details/118300830
版权
本文详细记录了开发一个简洁博客的过程，包括处理和获取数据、Markdown转HTML、创建MarkdownUtils工具类、优化Service和Controller代码，以及测试和二维码功能。通过这些步骤，实现了博客的高效展示和良好用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2021-6-28：开发小而美的博客（博客详情）

文章目录

首页展示
1. 博客列表
2. top分类
3. top标签
4. 最新博客推荐
5. 博客详情

1、实现功能

1.1、处理数据

在这里插入图片描述

  @GetMapping("/blog/{id}")
    public String blog(@PathVariable Long id,Model model) {
        model.addAttribute("blog", blogService.getAndConvert(id));
        return "blog";
    }

1.2、获取数据

打开blog页面
获取作者头像
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、Markdown转换HTML

网址;https://github.com/atlassian/commonmark-java
pom.xml应用commonmark和扩展插件
在pom.xml引入架包

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.1</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>net.lhf</groupId>
    <artifactId>blog</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>blog</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-tools</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>xml-apis</groupId>
            <artifactId>xml-apis</artifactId>
            <version>1.3.04</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-el</artifactId>
            <version>9.0.46</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <dependency>
            <groupId>com.atlassian.commonmark</groupId>
            <artifactId>commonmark</artifactId>
            <version>0.10.0</version>
        </dependency>
        <dependency>
            <groupId>com.atlassian.commonmark</groupId>
            <artifactId>commonmark-ext-heading-anchor</artifactId>
            <version>0.10.0</version>
        </dependency>
        <dependency>
            <groupId>com.atlassian.commonmark</groupId>
            <artifactId>commonmark-ext-gfm-tables</artifactId>
            <version>0.10.0</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.xmlunit</groupId>
            <artifactId>xmlunit-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.7</version>
        </dependency>



    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3、新建MarkdownUtils工具类

在这里插入图片描述

package net.lhf.util;

import org.commonmark.Extension;
import org.commonmark.ext.gfm.tables.TableBlock;
import org.commonmark.ext.gfm.tables.TablesExtension;
import org.commonmark.ext.heading.anchor.HeadingAnchorExtension;
import org.commonmark.node.Link;
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.AttributeProvider;
import org.commonmark.renderer.html.AttributeProviderContext;
import org.commonmark.renderer.html.AttributeProviderFactory;
import org.commonmark.renderer.html.HtmlRenderer;

import java.util.*;

/**
 * 功能：
 * 作者：李红芙
 * 日期：2021年6月23日
 */
public class MarkdownUtils {

    /**
     * markdown格式转换成HTML格式
     * @param markdown
     * @return
     */
    public static String markdownToHtml(String markdown) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }

    /**
     * 增加扩展[标题锚点，表格生成]
     * Markdown转换成HTML
     * @param markdown
     * @return
     */
    public static String markdownToHtmlExtensions(String markdown) {
        //h标题生成id
        Set<Extension> headingAnchorExtensions = Collections.singleton(HeadingAnchorExtension.create());
        //转换table的HTML
        List<Extension> tableExtension = Arrays.asList(TablesExtension.create());
        Parser parser = Parser.builder()
                .extensions(tableExtension)
                .build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder()
                .extensions(headingAnchorExtensions)
                .extensions(tableExtension)
                .attributeProviderFactory(new AttributeProviderFactory() {
                    public AttributeProvider create(AttributeProviderContext context) {
                        return new CustomAttributeProvider();
                    }
                })
                .build();
        return renderer.render(document);
    }

    /**
     * 处理标签的属性
     */
    static class CustomAttributeProvider implements AttributeProvider {
        @Override
        public void setAttributes(Node node, String tagName, Map<String, String> attributes) {
            //改变a标签的target属性为_blank
            if (node instanceof Link) {
                attributes.put("target", "_blank");
            }
            if (node instanceof TableBlock) {
                attributes.put("class", "ui celled table");
            }
        }
    }


    public static void main(String[] args) {
        String table = "| hello | hi   | 哈哈哈   |\n" +
                "| ----- | ---- | ----- |\n" +
                "| 斯维尔多  | 士大夫  | f啊    |\n" +
                "| 阿什顿发  | 非固定杆 | 撒阿什顿发 |\n" +
                "\n";
        String a = "[imCoding 爱编程](http://www.lirenmi.cn)";
        System.out.println(markdownToHtmlExtensions(a));
    }
}

4、优化BlogService代码

在这里插入图片描述

package net.lhf.service;

import net.lhf.po.Blog;
import net.lhf.vo.BlogQuery;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;

import java.util.List;
import java.util.Map;

/**
 * 功能：
 * 作者：李红芙
 * 日期：2021年6月23日
 */
public interface BlogService {

    Blog getBlog(Long id);

    Blog getAndConvert(Long id);

    Page<Blog> listBlog(Pageable pageable,BlogQuery blog);

    Page<Blog> listBlog(Pageable pageable);

    Page<Blog> listBlog(Long tagId,Pageable pageable);

    Page<Blog> listBlog(String query,Pageable pageable);

    List<Blog> listRecommendBlogTop(Integer size);

    Map<String,List<Blog>> archiveBlog();

    Long countBlog();

    Blog saveBlog(Blog blog);

    Blog updateBlog(Long id,Blog blog);

    void deleteBlog(Long id);
}

5、优化BlogServiceImpl代码

在这里插入图片描述

    @Transactional
    @Override
    public Blog getAndConvert(Long id) {
        Blog blog = blogRepository.getOne(id);
        if (blog == null) {
            throw new NotFoundException("该博客不存在");
        }
        Blog b = new Blog();
        BeanUtils.copyProperties(blog,b);
        String content = b.getContent();
        b.setContent(MarkdownUtils.markdownToHtmlExtensions(content));

        blogRepository.updateViews(id);
        return b;
    }

6、优化IndexController代码

在这里插入图片描述

package net.lhf.web;

import net.lhf.service.BlogService;
import net.lhf.service.TagService;
import net.lhf.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
/**
 * 功能：
 * 作者：李红芙
 * 日期：2021年6月23日
 */

@Controller
public class IndexController {

    @Autowired
    private BlogService blogService;

    @Autowired
    private TypeService typeService;

    @Autowired
    private TagService tagService;

    @GetMapping("/")
    public String index(@PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,
                        Model model) {
        model.addAttribute("page",blogService.listBlog(pageable));
        model.addAttribute("types", typeService.listTypeTop(6));
        model.addAttribute("tags", tagService.listTagTop(10));
        model.addAttribute("recommendBlogs", blogService.listRecommendBlogTop(8));
        return "index";
    }


    @PostMapping("/search")
    public String search(@PageableDefault(size = 8, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,
                         @RequestParam String query, Model model) {
        model.addAttribute("page", blogService.listBlog("%"+query+"%", pageable));
        model.addAttribute("query", query);
        return "search";
    }

    @GetMapping("/blog/{id}")
    public String blog(@PathVariable Long id,Model model) {
        model.addAttribute("blog", blogService.getAndConvert(id));
        return "blog";
    }

    @GetMapping("/footer/newblog")
    public String newblogs(Model model) {
        model.addAttribute("newblogs", blogService.listRecommendBlogTop(3));
        return "_fragments :: newblogList";
    }

}

7、运行项目，测试效果

在这里插入图片描述

8、二维码

在这里插入图片描述

   var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
    var qrcode = new QRCode("qrcode", {
      text: serurl+url,
      width: 110,
      height: 110,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    });

指定一下
在这里插入图片描述

项目总结之前端页面常用插件
Coding的博客
03-18 1164
在做完一个springboot的个人博客项目，想总结下从数据库建表到完成的对自己有点价值的点，包括碰到的问题及解决过程和方法，希望读者也能找到自己想要的。这篇博客主要是前端页面用到的一些插件及其使用方法。
实训-个人博客（博客详情页）
qq_46302173的博客
07-01 362
实现博客首页点击列表博客，打开一个博客详情页面，向用户展示博客内容信息 1，修改indeController的方法 2、blog.html页面获取数据 3、查看效果 4、应用markdown插件 （1）添加依赖 <dependency> <groupId>com.atlassian.commonmark</groupId> <artifactId>commonmark</artifactId
Spring Boot开发的个人博客
weixin_44202871的博客
03-16 282
Spring Boot开发小而美的个人博客 个人博客功能： 技术组合： 后端：Spring Boot + JPA + thymeleaf模板 数据库：MySQL 前端UI：Semantic UI框架 工具与环境： IDEA Maven 3 JDK 8 Axure RP 8 课程内容模块： 需求分析与功能规划 页面设计与开发 技术框架搭建 后端管理功能实现 前端管理功能实现 你能学得什么？ 基于Spring Boot的完整全栈式的开发套路 Semantic UI框架的使用 一套博客系统的源代码
Thymeleaf使用小结
Coding的博客
02-24 2127
最近在写一个SpringBoot的博客系统，使用的是Thymeleaf模板，所以大致学习了一下其一些常用的点，这里记录一下，以后会不断补充。
8_文章详情页面
荡浪的个人博客
10-01 1324
文章详情页面 有了首页的文章展示，那么怎么可以看到文章的内容呢，也就是所谓的查看详情。 配置路由地址 article/urls.py path('article_detail/<int:id>', views.article_detail, name='article_detail') 编写视图函数（Views） article/views.py def article_detail(request, id): article = Article.objects.get(id=id
2021-6-9：开发小而美的博客（博客详情页美化）
Lydialhf的博客
06-16 212
2021434
xmljava系统源码-light-blog:一个小而美的个人博客，基于SpringBoot开发
06-06
Boot开发小而美的个人博客 安装运行 clone 项目,加载 maven。 还原数据库，导入 sql 文件夹下的 light-blog.sql 文件。 运行，大功告成。 frontend-design 文件夹下为原型设计图及设计好的原始 HTML 文件，需要自取...
SpringBoot开发小而美的个人博客
01-01
根据提供的标题、描述以及部分内容，本文将详细解析如何利用Spring Boot构建一个简约美观的个人博客系统。本项目涉及的关键技术栈包括Spring Boot、JPA、Thymeleaf、MySQL、Semantic UI等，并且使用了IntelliJ IDEA...
Spring Boot开发一个小而美的个人博客
11-22
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦....... ...
B站SpringBoot开发一个小而美的个人博客(所有的前端页面)
11-03
B站SpringBoot开发一个小而美的个人博客(所有的前端页面)，前两天刚完成的放在这就当是一个纪念记录了....正好网上好像也没有这个项目的前端页面，做好了分享一下顺便赚点积分...嘿嘿！独乐乐不如众乐乐...
个人博客项目：查看文章详情后阅读数+1的处理
一米九的博客
02-14 1413
需求描述： 点击查看文章后，进入文章详情页面，阅读数需要+1，如果在数据库表中添加一个字段更新+1， 存在问题： （1）更新操作会在数据库表中加写锁，很影响性能；在多人访问时候，会导致文章无法查看的问题； （2）而且如果将查看文章和阅读数+1作为一整套事务的话，当查询完文章详情后执行阅读数+1的操作时如果出现了问题，会导致整个流程中断，无法正常查看文章； 解决方法： 使用线程池技术，将更新阅读数这一操作放到线程池中执行，不会影响主线程的查看文章详情的工作 具体实现： 编写线程池配置类ThreadPoolC
开发博客文章详情页
贼贼接的博客
11-07 439
声明：此Django分类下的教程是追梦人物所有，本人写在此只是为了巩固复习使用 首页展示的是所有文章的列表，当用户看到感兴趣的文章时，他点击文章的标题或者继续阅读的按钮，应该跳转到文章的详情页面来阅读文章的详细内容。现在让我们来开发博客的详情页面，有了前面的基础，开发流程都是一样的了：首先配置 URL，即把相关的 URL 和视图函数绑定在一起，然后实现视图函数，编写模板并让视图函数渲染模板。 设计...
博客项目学习笔记六：文章详情页展示
qq_43568109的博客
04-20 693
文章详情页展示 原来的详情页： 修改之后，将数据库里真实的信息展示在页面 1.根据文章id查询文章的详细信息 还是通过wrapper设置查询条件，当地址栏id为文章id时，即查询到具体的文章信息，如果文章被删除了，则断言“文章已被删除”。然后将查询到的某一篇文章注入到前端。 @GetMapping("/post/{id:\\d*}") public String detail(@PathVariable(name = "id") Long id) { //查询文章详情
文章详情页
anmi3721的博客
08-05 448
一、文章详情页访问设计 　　访问文章详情页，访问文章路径类似：https://www.cnblogs.com/wupeiqi/articles/3148888.html 　　参照访问路径编写文章详情页路由如下： urlpatterns = [ ... # 文章详情页 re_path('^(?P<username>\w+)/article...
修改StudentInfo项目输出学生信息
Lydialhf的博客
04-28 905
修改StudentInfo项目输出学生信息
2021-4-19：基于XML配置方式搭建SSM框架实现用户登录
Lydialhf的博客
04-19 718
基于XML配置方式搭建SSM框架实现用户登录 创建Maven项目 - SSMLogin 在pom.xml文件里添加相关依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="h
2021-5-26：使用Thymeleaf配置国际化页面
Lydialhf的博客
05-26 664
使用Thymeleaf配置国际化页面 将上一讲ThymeleafDemo项目的内容拷贝到新项目里 在resources下创建i18n目录 在i18n目录里创建login.properties 在i18n目录里创建login_zh_CN.properties 在i18n目录里创建login_en_US.properties 编写全局配置文件 定制区域信息解析器 package net.lhf.lesson10.resolver; import org.springframework.co
2021-6-27：开发小而美的博客（前端首页展示）
Lydialhf的博客
06-27 622
2021-6-27：开发小而美的博客（前端首页展示） 文章目录2021-6-27：开发小而美的博客（前端首页展示）1、优化Blog.java代码 1、优化Blog.java代码 package net.lhf.po; import javax.persistence.*; import java.util.ArrayList; import java.util.Date; import java.util.List; /** * 功能： * 作者：李红芙 * 日期：2021年6月23日 */
2021-5-7：Spring Boot多环境配置
Lydialhf的博客
05-07 522
Spring Boot多环境配置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值