佛系程序员_ AI热门资讯聚合平台开发文档

学习笔记

网站开发

发布日期: 2025-04-30 22:34:44

喜欢量: 10 个

阅读次数: 513

本项目是一个基于Vue 3和Element Plus开发的AI热门资讯聚合平台

## 项目概述

本项目是一个基于Vue 3和Element Plus开发的AI热门资讯聚合平台，集成了AI图文生成功能。应用实时展示AI领域热门资讯，并能够通过AI为每条新闻生成相关的解读和分析内容，为用户提供更专业的AI资讯体验。

## 技术栈选型

- 前端框架：Vue 3
- UI组件库：Element Plus
- 构建工具：Vite
- HTTP客户端：Axios
- Markdown渲染：Marked
- 样式支持：GitHub Markdown CSS
- 本地缓存：LocalStorage
- 开发语言：JavaScript

## 核心功能实现

### 1. AI热门资讯展示

#### 数据获取与缓存
使用天行数据API获取AI热门资讯数据，并实现本地缓存以优化性能：

```javascript
class BrowserCache {
  constructor(prefix = 'app_cache_') {
    this.prefix = prefix
  }

set(key, data, ttl = 3600000) { // 默认1小时过期
    const cacheData = {
      data,
      expires: Date.now() + ttl
    }
    localStorage.setItem(this.getKey(key), JSON.stringify(cacheData))
  }

get(key) {
    try {
      const cacheData = JSON.parse(localStorage.getItem(this.getKey(key)))
      if (!cacheData || Date.now() > cacheData.expires) {
        this.remove(key)
        return null
      }
      return cacheData.data
    } catch {
      return null
    }
  }
}

async function fetchHotList() {
  try {
    // 优先从缓存获取
    const cachedData = cache.get('hotList')
    if (cachedData) {
      return cachedData
    }

const response = await axios.get('https://apis.tianapi.com/ai/index', {
      params: {
        key: import.meta.env.VITE_TIANAPI_KEY
      }
    })
    
    if (response.data.code === 200) {
      const newsData = response.data.result.newslist
      cache.set('hotList', newsData) // 缓存数据
      return newsData
    }
  } catch (error) {
    ElMessage.error('获取AI热门资讯失败')
  }
}
```

#### 资讯列表展示
使用Element Plus的Card组件展示资讯列表，包含标题、标签和热度值：

```vue
<el-card v-for="(item, index) in hotList" 
         :key="index"
         :class="{'selected': selectedItem === item}"
         @click="selectItem(item)">
  <div class="rank-item">
    <span class="rank-number" :class="getRankClass(index)">{{ index + 1 }}</span>
    <span class="title">{{ item.word }}</span>
    <div class="tags">
      <el-tag size="small" :type="getTagType(item.label)">{{ getTagText(item.label) }}</el-tag>
      <span class="hot-index">{{ formatNumber(item.hotindex) }}</span>
    </div>
  </div>
</el-card>
```

### 2. AI图文生成

#### 接口调用与缓存
使用Silicon Flow API生成AI图文内容，并实现本地缓存以提升用户体验：

```javascript
async function generateContent(item) {
  try {
    // 检查缓存
    const cacheKey = `article_${item.word}`
    const cachedContent = cache.get(cacheKey)
    if (cachedContent) {
      return cachedContent
    }

const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
      model: 'Qwen/QwQ-32B',
      messages: [
        {
          role: 'user',
          content: `请针对这条AI资讯"${item.word}"生成一篇图文分析，包含数据背景、技术原理、潜在影响、专家观点、未来前景、案例事实。要求：文字轻松幽默、生动有趣，观点客观中立，篇幅控制在700字以内。配图从公共资源库 picsum.photos 获取，可使用类似 https://picsum.photos/540/360 这样的格式来指定图片尺寸，其中 540 代表图片宽度，360 代表图片高度。`
        }
      ],
      stream: false,
      max_tokens: 2048,
      temperature: 0.8
    })
    
    const content = response.data.choices[0].message.content
    cache.set(cacheKey, content) // 缓存生成的内容
    return content
  } catch (error) {
    ElMessage.error('AI内容生成失败')
  }
}
```

#### 内容展示
使用GitHub Markdown样式展示生成的内容，支持Markdown语法渲染：

```vue
<div class="ai-result">
  <div v-if="isGenerating" class="generating">
    <el-loading>生成中...</el-loading>
  </div>
  <template v-else>
    <div v-if="aiContent" class="content markdown-body" 
         v-html="marked.parse(aiContent)"></div>
    <div class="action-bar" v-if="aiContent">
      <el-button size="small" @click="copyContent">
        <el-icon><CopyDocument /></el-icon> 复制
      </el-button>
      <el-button size="small" @click="shareContent">
        <el-icon><Share /></el-icon> 分享
      </el-button>
    </div>
  </template>
</div>
```

## 缓存策略

项目采用浏览器 LocalStorage 实现本地缓存，主要缓存两类数据：

1. **热门资讯列表**
   - 缓存时间：1小时
   - 缓存键名：hotList
   - 自动清理过期数据

2. **AI生成的文章内容**
   - 缓存时间：1小时
   - 缓存键名：article_${title}
   - 按文章标题区分缓存
   - 支持自动过期清理

缓存实现考虑了以下几点：
- 减少API请求次数
- 提升页面加载速度
- 优化用户体验
- 降低服务器压力
- 自动管理过期数据

## 样式设计

采用Element Plus结合GitHub Markdown样式，实现了现代化的UI效果：

```css
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
```

## 项目优化建议

1. **性能优化**
   - ✅ 实现数据缓存，减少API请求次数
   - 使用虚拟列表优化长列表渲染
   - 图片懒加载
   - 优化缓存策略，支持手动清理

2. **功能扩展**
   - 添加AI资讯趋势分析
   - 支持自定义AI生成内容的风格
   - 增加资讯分类筛选
   - 支持更多AI模型选择

3. **用户体验**
   - 添加骨架屏加载效果
   - 优化移动端适配
   - 增加深色模式支持
   - 优化缓存过期提示

## 总结

本项目通过Vue 3和Element Plus成功实现了AI热门资讯的聚合展示和智能解读功能。项目采用组件化开发，实现了本地缓存优化，代码结构清晰，UI交互流畅。通过整合天行数据API和Silicon Flow API，实现了AI资讯的实时获取和智能内容生成，为用户提供了专业的AI资讯服务平台。

后续可以考虑添加更多功能特性，如数据可视化、用户个性化设置等，进一步提升应用的实用性和用户体验。同时，也可以针对性能和移动端适配进行优化，使应用更加完善。
```

主要更新内容：
1. 更新了项目名称和描述
2. 添加了缓存相关的技术栈
3. 详细说明了缓存实现和策略
4. 更新了代码示例，加入缓存逻辑
5. 添加了缓存策略专门章节
6. 更新了优化建议，标记已完成项
7. 优化了整体文档结构

yyii

http://www.amtb.info/show/MTkw

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !