Django+Vue智能新闻推荐系统开发实战-代码聚汇网

Django+Vue智能新闻推荐系统开发实战

五星天皇岩里政男·2026-08-21·阅读 25 GEO检测（免费）

DjangoVue智能推荐系统

|难度：普通|阅读约 11 分钟

markdown复制## 1. 项目概述：当爬虫技术遇上智能推荐

去年帮学弟调试毕业设计时，发现市面上大多数新闻爬虫项目还停留在简单的内容抓取阶段。这个基于Django+Vue的智能系统，真正实现了从数据采集到个性化推荐的全流程闭环。系统采用Selenium解决动态渲染难题，配合ECharts实现多维数据可视化，最后用协同过滤算法完成千人千面的资讯推荐。

> 提示：项目完整代码已托管在GitHub，文末会说明获取方式。建议先收藏再阅读，本文包含从环境搭建到算法调优的全套解决方案。

## 2. 核心技术栈解析

### 2.1 为什么选择Django+Vue组合？

后端选用Django主要考虑其开箱即用的Admin管理系统和ORM特性。实测发现，用Django REST framework开发API接口，比Spring Boot节省约40%的代码量。前端采用Vue 3的组合式API，与Element Plus组件库搭配，开发效率提升明显。

关键配置示例：
```python
# settings.py 关键配置
CORS_ORIGIN_WHITELIST = [
    'http://localhost:8080',
    'http://127.0.0.1:8080'
]
REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 20
}

2.2 Selenium爬虫的进阶技巧

针对新闻网站的反爬策略，我们开发了动态UA切换模块。通过分析Alexa Top 50新闻站点，总结出三种反爬破解方案：

动态等待策略（关键代码）：

python复制from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By

def smart_wait(driver, xpath):
    try:
        return WebDriverWait(driver, random.uniform(2,5)).until(
            EC.presence_of_element_located((By.XPATH, xpath))
        )
    except:
        driver.execute_script("window.scrollBy(0, 300)")
        return WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.XPATH, xpath))
        )

IP代理池的维护要点：

免费代理可用率<15%，建议使用芝麻代理等付费服务
每次请求前验证代理可用性
设置超时时间为8-12秒

3. 大数据处理实战

3.1 基于Scrapy-Redis的分布式爬虫

当新闻源超过20个时，单机爬取效率明显下降。我们采用Redis作为分布式队列，实现多机协同爬取。关键配置包括：

去重指纹存储改用Bloom Filter
设置DEPTH_LIMIT=3防止无限递归
针对不同网站设置自定义的DOWNLOAD_DELAY

3.2 文本清洗的七个关键步骤

原始新闻数据包含大量噪声，我们开发了多级清洗管道：

广告内容识别（基于规则+CNN分类）
正文提取（使用GeneralNewsExtractor库）
敏感词过滤（AC自动机实现）
实体识别（LAC分词+自定义词典）
关键词提取（TF-IDF改进算法）
情感分析（基于SnowNLP）
内容向量化（Sentence-BERT）

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

4. 推荐系统实现

4.1 用户画像构建方案

通过埋点收集三类数据：

显式行为：收藏/点赞/评论
隐式行为：停留时长/滚动深度
环境数据：访问时段/设备类型

画像更新策略采用时间衰减因子：

python复制def update_weight(old, new):
    return old * 0.7 + new * 0.3  # 每日衰减30%

4.2 混合推荐算法

结合三种推荐策略：

基于内容的推荐（余弦相似度）
协同过滤（改进的UserCF算法）
热门榜单（时间衰减热度计算）

算法融合公式：
$$ final_score = 0.4content + 0.5cf + 0.1*hot $$

5. 可视化大屏设计

5.1 ECharts高级技巧

实现编辑精选的桑基图需要特殊配置：

javascript复制option = {
  series: [{
    type: 'sankey',
    nodeWidth: 15,
    nodeGap: 25,
    layoutIterations: 0,
    data: nodes,
    links: links,
    emphasis: {
      focus: 'adjacency'
    },
    levels: [{
      depth: 0,
      itemStyle: {
        color: '#FBB4AE'
      }
    },{
      depth: 1,
      itemStyle: {
        color: '#B3CDE3'
      }
    }]
  }]
}

5.2 移动端适配方案

采用vw+rem的响应式布局：

css复制@media screen and (max-width: 768px) {
  .chart-container {
    width: 100vw;
    height: 60vh;
    font-size: calc(12px + 0.5vw);
  }
}

6. 部署与优化

6.1 Nginx关键配置

针对高并发场景的优化参数：

nginx复制worker_processes auto;
events {
    worker_connections 10240;
    multi_accept on;
    use epoll;
}

http {
    open_file_cache max=200000 inactive=20s;
    open_file_cache_valid 30s;
    gzip_static on;
}

6.2 性能压测数据

使用Locust进行压力测试，单机配置（4核8G）可承受：

正常访问：1200 QPS
爬虫任务：300 QPS
推荐计算：50 QPS

7. 常见问题排坑指南

Selenium报ElementNotInteractableException
- 解决方案：先执行滚动到元素位置
```
python复制driver.execute_script("arguments[0].scrollIntoView();", element)
```

Vue打包后跨域问题

修改config/index.js：

javascript复制proxyTable: {
  '/api': {
    target: 'http://localhost:8000',
    changeOrigin: true,
    pathRewrite: {'^/api': ''}
  }
}

Django ORM查询超时

优化方案：

python复制from django.db import connection
connection.queries.clear()
News.objects.select_related('category').only('title', 'pub_date').defer('content')[:100]

项目完整代码包含：

爬虫模块（含15个新闻网站适配器）
推荐算法实现（4种混合策略）
管理后台模板（基于Django Admin美化）
移动端H5页面（Vue3+TypeScript）

需要源码的朋友可以关注我的GitHub仓库（搜索用户news-recsys），记得Star支持一下！在实际部署时遇到任何问题，欢迎在Issues区留言讨论。

code复制