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

一、文章搜索与推荐功能

1.前端搜索功能实现

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

<template><div class="article-list"><div class="search"><input type="text" v-model="searchKeyword" @input="searchArticles" placeholder="Search articles" /></div><!-- ... --><div class="related-articles" v-if="relatedArticles.length"><h3>Related articles</h3><ul><li v-for="article in relatedArticles" :key="article.id"><a :href="'/article/' + article.id">{{ article.title }}</a></li></ul></div></div>
</template><script>
export default {data() {return {// ...searchKeyword: "",relatedArticles: [],};},methods: {// ...async searchArticles() {const response = await this.$http.get("/api/articles/search", {params: { keyword: this.searchKeyword },});this.articles = response.data;this.fetchRelatedArticles();},async fetchRelatedArticles() {// 实现根据搜索关键字获取相关文章的逻辑},},
};
</script>

2.后端搜索功能实现

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

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

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

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

二、文章阅读统计模块

1.前端阅读次数显示

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

<template><div class="article-detail"><h1>{{ article.title }}</h1><p class="meta">Views: {{ article.views }}</p><!-- ... --></div>
</template>

2.后端阅读次数更新

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

@PutMapping("/{articleId}/views")
public ResponseEntity<?> updateArticleViews(@PathVariable Long articleId) {Optional<Article> 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. 前端相关文章推荐

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

<template><div class="article-detail"><!-- ... --><div class="related-articles" v-if="relatedArticles.length"><h3>Related articles</h3><ul><li v-for="article in relatedArticles" :key="article.id"><a :href="'/article/' + article.id">{{ article.title }}</a></li></ul></div></div>
</template><script>
export default {data() {return {// ...relatedArticles: [],};},async mounted() {await this.fetchArticle();await this.incrementArticleViews();await this.fetchRelatedArticles();},methods: {// ...async fetchRelatedArticles() {const response = await this.$http.get(`/api/articles/${this.articleId}/related`);this.relatedArticles = response.data;},},
};
</script>

2.后端相关文章推荐

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

@GetMapping("/{articleId}/related")
public ResponseEntity<?> getRelatedArticles(@PathVariable Long articleId) {Optional<Article> optionalArticle = articleRepository.findById(articleId);if (optionalArticle.isPresent()) {Article article = optionalArticle.get();List<Article> 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<Article, Long> {// ...@Query("SELECT a FROM Article a WHERE a.category.id = :categoryId AND a.id <> :articleId")List<Article> findRelatedArticles(@Param("categoryId") Long categoryId, @Param("articleId") Long articleId);
}

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