一、文章搜索与推荐功能
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`);
},
},
};
通过上述代码，我们优化了更新阅读次数的功能。在文章详情页加载完成后，调用更新阅读次数接口，使阅读次数增加。在后端，我们更改了接口名称以更好地反映其功能。
在这里，我们将补充文章详情页面中文章推荐的功能。为了给用户提供更好的阅读体验，我们可以在文章详情页面底部展示相关文章推荐。
- 前端相关文章推荐
在文章详情组件中添加相关文章推荐部分。
<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);
}
通过上述代码，我们实现了文章详情页面中相关文章推荐的功能。在前端，我们根据文章的分类展示相关文章。在后端，我们创建了一个根据分类获取相关文章的接口，忽略当前正在查看的文章。这样，用户在阅读文章时可以方便地找到其他相关文章。
