当前位置：首页 > article >正文

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

article 2024/11/14 12:02:59

一、文章搜索与推荐功能

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);
}

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

查看全文

http://www.kler.cn/a/10079.html