个性化推荐系统-程序员充电站

第4天-2：个性化推荐系统

🎯掘金标题：📊 基于用户行为的博客文章推荐系统实战（附完整代码）
📝CSDN标题：Vue 3 + Pinia + LocalStorage 实现无后端推荐系统

前言

当博客文章越来越多时，读者往往不知道该从哪篇开始看。一个好的推荐系统可以：

帮助读者发现感兴趣的内容
增加文章阅读量和停留时间
提升用户粘性和回访率

今天分享如何实现一个轻量级的个性化推荐系统，无需后端，纯前端实现！

核心思路

1. 用户行为追踪

// src/services/recommend.tsimport{defineStore}from'pinia'import{ref,computed}from'vue'interfaceUserBehavior{articleId:stringtags:string[]readTime:numbertimestamp:number}exportconstuseRecommendStore=defineStore('recommend',()=>{// 阅读历史consthistory=ref<UserBehavior[]>([])// 加载历史数据functionloadHistory(){constdata=localStorage.getItem('blog_history')if(data){history.value=JSON.parse(data)}}// 记录阅读行为functionrecordRead(article:{id:string;tags:string[]}){constbehavior:UserBehavior={articleId:article.id,tags:article.tags,readTime:0,timestamp:Date.now()}history.value.unshift(behavior)// 只保留最近100条记录if(history.value.length>100){history.value=history.value.slice(0,100)}saveHistory()}// 保存历史functionsaveHistory(){localStorage.setItem('blog_history',JSON.stringify(history.value))}// 用户兴趣标签constuserTags=computed(()=>{consttagCount:Record<string,number>={}history.value.forEach(item=>{item.tags.forEach(tag=>{tagCount[tag]=(tagCount[tag]||0)+1})})returnObject.entries(tagCount).sort((a,b)=>b[1]-a[1]).map(([tag])=>tag)})loadHistory()return{history,userTags,recordRead,loadHistory}})

2. 推荐算法实现

// src/utils/recommend.tsimport{useRecommendStore}from'@/services/recommend'importtype{Article}from'@/data/articles'interfaceArticleWithScoreextendsArticle{score:number}// 计算标签相似度functioncalculateTagScore(article:Article,userTags:string[]):number{constmatchCount=article.tags.filter(tag=>userTags.includes(tag)).lengthreturnmatchCount/Math.max(article.tags.length,1)}// 计算时间衰减分数functioncalculateTimeScore(timestamp:number):number{constdays=(Date.now()-timestamp)/(1000*60*60*24)returnMath.max(1-days/30,0)// 30天内线性衰减}// 生成推荐列表exportfunctiongenerateRecommendations(articles:Article[],excludeId?:string,limit=5):ArticleWithScore[]{constrecommendStore=useRecommendStore()constuserTags=recommendStore.userTagsconstscoredArticles=articles.filter(article=>article.id!==excludeId)// 排除当前文章.map(article=>{// 标签匹配度 (40%)consttagScore=calculateTagScore(article,userTags)*0.4// 热门程度 (30%) - 使用点赞数模拟consthotScore=(article.likes||0)/100*0.3hotScore=Math.min(hotScore,0.3)// 时间新鲜度 (30%)consttimeScore=article.publishedAt?calculateTimeScore(newDate(article.publishedAt).getTime())*0.3:0return{...article,score:tagScore+hotScore+timeScore}}).sort((a,b)=>b.score-a.score)returnscoredArticles.slice(0,limit)}

3. 推荐组件

<!-- src/components/recommend/ArticleRecommend.vue --> <template> <div class="recommend-container"> <h3 class="recommend-title">📌 你可能喜欢</h3> <div v-if="recommendations.length > 0" class="recommend-list"> <div v-for="article in recommendations" :key="article.id" class="recommend-item" @click="goToArticle(article)" > <div class="article-cover"> <img :src="article.cover || '/default-cover.png'" :alt="article.title" /> </div> <div class="article-info"> <h4 class="article-title">{{ article.title }}</h4> <div class="article-meta"> <span class="read-time">📖 {{ article.readTime }}分钟</span> <span class="likes">❤️ {{ article.likes || 0 }}</span> </div> </div> </div> </div> <div v-else class="empty-state"> <p>暂无推荐，开始阅读文章解锁个性化推荐</p> </div> </div> </template> <script setup lang="ts"> import { computed } from 'vue' import { useRouter } from 'vue-router' import { generateRecommendations } from '@/utils/recommend' import { articles } from '@/data/articles' import type { Article } from '@/data/articles' const props = defineProps<{ currentId?: string }>() const router = useRouter() const recommendations = computed(() => { return generateRecommendations(articles, props.currentId, 5) }) function goToArticle(article: Article) { router.push(`/article/${article.id}`) } </script> <style scoped> .recommend-container { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .recommend-title { font-size: 18px; margin-bottom: 16px; color: #333; } .recommend-list { display: flex; flex-direction: column; gap: 12px; } .recommend-item { display: flex; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .recommend-item:hover { background: #e9ecef; transform: translateX(4px); } .article-cover { width: 80px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .article-cover img { width: 100%; height: 100%; object-fit: cover; } .article-info { flex: 1; min-width: 0; } .article-title { font-size: 14px; margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .article-meta { display: flex; gap: 12px; font-size: 12px; color: #666; } .empty-state { text-align: center; padding: 20px; color: #999; } </style>

使用方式

<!-- 在文章详情页使用 --> <template> <div class="article-page"> <!-- 文章内容 --> <ArticleContent :article="article" /> <!-- 推荐文章 --> <ArticleRecommend :current-id="article.id" /> </div> </template> <script setup> // 在阅读文章时记录行为 const recommendStore = useRecommendStore() recommendStore.recordRead({ id: article.value.id, tags: article.value.tags }) </script>