vue实现热门文章查询

实现热门文章查询功能

在Vue中实现热门文章查询功能，通常需要结合前端展示和后端数据接口。以下是几种常见的实现方式：

前端展示组件

<template>
  <div class="hot-articles">
    <h3>热门文章</h3>
    <ul>
      <li v-for="article in hotArticles" :key="article.id">
        <router-link :to="`/article/${article.id}`">{{ article.title }}</router-link>
        <span class="views">浏览: {{ article.views }}</span>
      </li>
    </ul>
  </div>
</template>

数据获取方式

1. 直接调用API获取

   <script>
   export default {
   data() {
    return {
      hotArticles: []
    }
   },
   async created() {
    const response = await fetch('/api/articles/hot')
    this.hotArticles = await response.json()
   }
   }
   </script>

2. 使用Vuex状态管理

   
   <script>
   import { mapState } from 'vuex'

export default { computed: { ...mapState(['hotArticles']) }, created() { this.$store.dispatch('fetchHotArticles') } }

后端API实现思路

1. 数据库查询热门文章

   // Express示例
   router.get('/api/articles/hot', async (req, res) => {
   const articles = await Article.find()
    .sort({ views: -1 })
    .limit(10)
   res.json(articles)
   })

2. 使用Redis缓存热门数据

   // 使用Redis有序集合存储文章热度
   router.get('/api/articles/hot', async (req, res) => {
   const articleIds = await redis.zrevrange('article:hot', 0, 9)
   const articles = await Article.find({ _id: { $in: articleIds } })
   res.json(articles)
   })

热门度计算策略

1. 简单浏览计数

   
   // 文章模型增加views字段
   const articleSchema = new Schema({
   views: { type: Number, default: 0 }
   })

// 阅读时增加计数 router.get('/api/article/:id', async (req, res) => { await Article.updateOne( { _id: req.params.id }, { $inc: { views: 1 } } ) // ...返回文章内容 })

2. 综合热度算法
```javascript
// 综合浏览量、点赞数、发布时间计算热度
function calculateHotScore(views, likes, createdAt) {
  const age = (Date.now() - createdAt) / (1000 * 3600 * 24)
  return (views * 1 + likes * 2) / Math.log(age + 2)
}

优化建议

• 添加加载状态和错误处理

  <template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">加载失败</div>
  <div v-else class="hot-articles">...</div>
  </template>

• 实现自动刷新

  setInterval(async () => {
  this.hotArticles = await fetchHotArticles()
  }, 300000) // 每5分钟刷新一次

• 添加缓存控制

  

  // 使用keep-alive缓存组件
  <keep-alive>
  <hot-articles />
  </keep-alive>

以上方案可根据实际项目需求进行组合和调整。对于大型应用，建议采用Vuex管理状态并结合Redis缓存热门数据。小型项目可以直接调用API获取数据并在前端展示。