Spring boot+Vue3博客平台:文章搜索与推荐和文章阅读统计模块

一、文章搜索与推荐功能

 

1.前端搜索功能实现

在文章列表组件中添加搜索框，用户可以输入关键字进行文章搜索。同时，在搜索结果下方展示相关文章推荐。

2.后端搜索功能实现

在ArticleController中添加搜索文章的接口。

@GetMapping("/search")
public ResponseEntity searchArticles(@RequestParam String keyword) {
    List
 articles = articleRepository.searchByKeyword(keyword);
    return ResponseEntity.ok(articles);
}

在ArticleRepository中添加根据关键字搜索文章的方法。

public interface ArticleRepository extends JpaRepository {
    @Query("SELECT a FROM Article a WHERE a.title LIKE %:keyword% OR a.content LIKE %:keyword%")
    List
 searchByKeyword(@Param("keyword") String keyword);
}

二、文章阅读统计模块

1.前端阅读次数显示

在文章详情组件中，展示文章阅读次数。

2.后端阅读次数更新

在ArticleController中添加更新阅读次数的接口。

@PutMapping("/{articleId}/views")
public ResponseEntity updateArticleViews(@PathVariable Long articleId) {
    Optional
 optionalArticle = articleRepository.findById(articleId);
    if (optionalArticle.isPresent()) {
        Article article = optionalArticle.get();
        article.setViews(article.getViews() + 1);
        articleRepository.save(article);
        return ResponseEntity.ok("Article views updated successfully.");
    } else {
        return ResponseEntity.status(HttpStatus.NOT_FOUND).body("Article not found.");
    }
}

3.更新阅读次数

在文章详情页加载完成后，调用更新阅读次数接口。

export default {
  // ...
  async mounted() {
    await this.fetchArticle();
    await this.incrementArticleViews();
  },
  methods: {
    // ...
    async incrementArticleViews() {
      await this.$http.put(`/api/articles/${this.articleId}/increment-views`);
    },
  },
};

通过上述代码，我们优化了更新阅读次数的功能。在文章详情页加载完成后，调用更新阅读次数接口，使阅读次数增加。在后端，我们更改了接口名称以更好地反映其功能。

在这里，我们将补充文章详情页面中文章推荐的功能。为了给用户提供更好的阅读体验，我们可以在文章详情页面底部展示相关文章推荐。

1. 前端相关文章推荐

在文章详情组件中添加相关文章推荐部分。

2.后端相关文章推荐

在ArticleController中添加获取相关文章的接口。

@GetMapping("/{articleId}/related")
public ResponseEntity getRelatedArticles(@PathVariable Long articleId) {
    Optional
 optionalArticle = articleRepository.findById(articleId);
    if (optionalArticle.isPresent()) {
        Article article = optionalArticle.get();
        List
 relatedArticles = articleRepository.findRelatedArticles(article.getCategoryId(), articleId);
        return ResponseEntity.ok(relatedArticles);
    } else {
        return ResponseEntity.status(HttpStatus.NOT_FOUND).body("Article not found.");
    }
}

在ArticleRepository中添加根据分类获取相关文章的方法。

public interface ArticleRepository extends JpaRepository {
    // ...
    @Query("SELECT a FROM Article a WHERE a.category.id = :categoryId AND a.id <> :articleId")
    List
 findRelatedArticles(@Param("categoryId") Long categoryId, @Param("articleId") Long articleId);
}

通过上述代码，我们实现了文章详情页面中相关文章推荐的功能。在前端，我们根据文章的分类展示相关文章。在后端，我们创建了一个根据分类获取相关文章的接口，忽略当前正在查看的文章。这样，用户在阅读文章时可以方便地找到其他相关文章。