FS-Blog二次开发指南5个扩展功能实现示例【免费下载链接】FS-Blog个人博客Spring Boot 开山之作采用 Spring Boot MyBatis前端 Bootstrap LayUI支持程序员非常青睐的轻量化的 Markdown 编辑器 Editor.md支持标签分类检索项目地址: https://gitcode.com/gh_mirrors/fs/FS-BlogFS-Blog是基于Spring Boot MyBatis构建的个人博客系统支持Markdown编辑和标签分类功能。本文将通过5个实用扩展功能示例帮助开发者快速掌握FS-Blog的二次开发技巧轻松定制专属博客系统。1. 文章阅读量统计功能实现 为博客文章添加阅读量统计功能可以直观展示文章受欢迎程度。实现该功能需修改数据模型和业务逻辑实现步骤修改Article实体类在src/main/java/me/zbl/fullstack/entity/Article.java中添加阅读量字段private Integer viewCount; // 新增阅读量字段 // 添加getter和setter方法 public Integer getViewCount() { return viewCount; } public void setViewCount(Integer viewCount) { this.viewCount viewCount; }更新数据库表结构添加对应的数据表字段建议使用数据库迁移工具如FlywayALTER TABLE article ADD COLUMN view_count INT DEFAULT 0 COMMENT 阅读量统计;修改文章查看控制器在PostContoller.java的文章详情方法中添加阅读量自增逻辑GetMapping(/post/{id}) public String postDetail(PathVariable Integer id, Model model) { Article article mPostService.selectById(id); article.setViewCount(article.getViewCount() 1); // 阅读量1 mArticleMapper.updateByPrimaryKeySelective(article); // 更新数据库 model.addAttribute(article, article); return front/post; }前端展示在文章详情页模板中添加阅读量显示div classpost-meta span阅读量: i classfa fa-eye/i [[${article.viewCount}]]/span /div图添加阅读量统计后的文章详情页面效果2. 评论功能集成 为博客添加评论系统可以增强用户互动性实现步骤如下实现步骤创建评论相关实体类// 评论实体类 public class Comment { private Integer id; private Integer articleId; // 关联文章ID private String content; // 评论内容 private String author; // 评论作者 private Date createTime; // 创建时间 // getter和setter方法省略 }创建评论Mapper接口在src/main/java/me/zbl/fullstack/mapper/目录下创建CommentMapper.javapublic interface CommentMapper extends IMyMapperComment { ListComment selectByArticleId(Integer articleId); }实现评论服务在service/api目录下创建ICommentService.java接口及实现类public interface ICommentService { void addComment(Comment comment); ListComment getCommentsByArticleId(Integer articleId); }添加评论控制器在PostContoller.java中添加评论处理方法PostMapping(/comment/add) ResponseBody public GlobalResponse addComment(Comment comment) { comment.setCreateTime(new Date()); mCommentService.addComment(comment); return GlobalResponse.success(); }前端评论区实现在文章详情页添加评论表单和列表展示div classcomment-section h3评论区/h3 !-- 评论表单 -- form idcommentForm textarea namecontent placeholder写下你的评论.../textarea input typetext nameauthor placeholder你的昵称 button typesubmit提交评论/button /form !-- 评论列表 -- div classcomment-list th:eachcomment : ${comments} div classcomment-item span classauthor th:text${comment.author}/span p classcontent th:text${comment.content}/p /div /div /div3. 文章点赞功能开发 实现文章点赞功能可以提升用户参与度主要实现步骤如下实现步骤创建点赞相关数据表和实体CREATE TABLE article_like ( id INT PRIMARY KEY AUTO_INCREMENT, article_id INT NOT NULL, user_id INT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_article_user (article_id, user_id) );实现点赞服务Service public class LikeServiceImpl implements ILikeService { Autowired private ArticleLikeMapper likeMapper; Override public boolean toggleLike(Integer articleId, Integer userId) { ArticleLike like likeMapper.selectByArticleAndUser(articleId, userId); if (like ! null) { likeMapper.deleteByPrimaryKey(like.getId()); return false; // 取消点赞 } else { like new ArticleLike(); like.setArticleId(articleId); like.setUserId(userId); likeMapper.insertSelective(like); return true; // 新增点赞 } } Override public int getLikeCount(Integer articleId) { return likeMapper.countByArticleId(articleId); } }添加点赞API接口PostMapping(/like/toggle) ResponseBody public GlobalResponse toggleLike(Integer articleId) { Integer userId getCurrentUserId(); // 获取当前用户ID boolean isLiked mLikeService.toggleLike(articleId, userId); int count mLikeService.getLikeCount(articleId); return GlobalResponse.success().add(isLiked, isLiked).add(count, count); }前端点赞按钮实现button classlike-btn>var editor editormd(editor, { // 原有配置... imageUpload: true, imageFormats: [jpg, jpeg, gif, png, bmp, webp], imageUploadURL: /upload/md-image, // 图片上传接口 });实现图片上传接口创建UploadController.java处理图片上传Controller public class UploadController { PostMapping(/upload/md-image) ResponseBody public MapString, Object uploadMdImage(RequestParam(editormd-image-file) MultipartFile file) { MapString, Object result new HashMap(); try { String fileName UUID.randomUUID().toString() . FilenameUtils.getExtension(file.getOriginalFilename()); String filePath uploads/md-images/ fileName; File dest new File(uploadDir filePath); file.transferTo(dest); result.put(success, 1); result.put(url, / filePath); } catch (Exception e) { result.put(success, 0); result.put(message, 上传失败); } return result; } }图扩展后的Markdown编辑器支持图片拖拽上传添加代码高亮主题切换在编辑器页面添加主题切换下拉框select idcodeTheme option valuedefault默认主题/option option valuegithubGitHub/option option valueatom-one-darkAtom Dark/option /select script $(#codeTheme).change(function() { const theme $(this).val(); editor.setTheme(theme); // 假设editor有此方法 }); /script5. 文章分类功能优化 FS-Blog现有标签功能可扩展为多级分类系统实现步骤修改分类实体类public class Category { private Integer id; private String name; // 分类名称 private Integer parentId; // 父分类ID顶级分类为0 private String description; // 分类描述 private ListCategory children; // 子分类 // getter和setter方法省略 }创建分类服务public interface ICategoryService { ListCategory getCategoryTree(); // 获取分类树形结构 void addCategory(Category category); void updateCategory(Category category); }更新文章实体关联分类在Article.java中添加分类关联Column(name category_id) private Integer categoryId; // 主要分类ID Transient private ListInteger categoryIds; // 支持多分类修改文章管理界面在文章发布和编辑页面添加分类选择组件div classform-group label文章分类/label select namecategoryId classform-control option th:eachcategory : ${categories} th:value${category.id} th:text${category.name}/option /select /div实现分类筛选功能在文章列表页添加分类筛选div classcategory-filter a href/posts全部文章/a a th:eachcategory : ${categories} th:href|/posts?category${category.id}| th:text${category.name}/a /div图优化后的文章分类展示效果总结通过以上5个扩展功能示例我们展示了FS-Blog二次开发的常用技巧。开发者可以根据实际需求基于这些示例进一步扩展博客功能。FS-Blog采用分层架构设计主要业务逻辑位于src/main/java/me/zbl/fullstack/service/impl/目录下前端页面位于src/main/resources/templates/目录开发时可重点关注这些目录下的文件。要开始二次开发首先克隆项目仓库git clone https://gitcode.com/gh_mirrors/fs/FS-Blog然后根据本文提供的示例逐步实现所需功能。建议先熟悉项目结构和核心业务逻辑再进行定制开发以确保系统稳定性和可维护性。【免费下载链接】FS-Blog个人博客Spring Boot 开山之作采用 Spring Boot MyBatis前端 Bootstrap LayUI支持程序员非常青睐的轻量化的 Markdown 编辑器 Editor.md支持标签分类检索项目地址: https://gitcode.com/gh_mirrors/fs/FS-Blog创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考