RSS阅读工具可以帮助用户聚合多个内容源的更新，避免逐个访问站点。下面介绍一套基于Python和原生前端的简单RSS阅读工具实现方案，整体逻辑清晰，代码量较少，适合快速搭建使用。
核心功能设计
这个简单的RSS阅读工具主要包含三个核心功能：
- RSS源添加与解析：支持用户输入RSS链接，后端解析内容并存储
- 内容列表展示：前端展示所有订阅源的最新内容条目
- 内容详情查看：点击条目可以查看完整的内容描述
后端实现部分
后端使用Flask框架提供接口，feedparser库负责解析RSS内容，数据存储使用轻量的SQLite数据库。
环境依赖安装
首先需要安装必要的Python库：
pip install flask feedparser sqlite3
数据库初始化
创建SQLite表存储RSS源和对应的内容条目：
import sqlite3
def init_db():
# 连接数据库，不存在则自动创建
conn = sqlite3.connect('rss_reader.db')
cursor = conn.cursor()
# 创建RSS源表
cursor.execute('''
CREATE TABLE IF NOT EXISTS feeds (
id INTEGER PRIMARY KEY AUTOINCREMENT,
url TEXT NOT NULL,
title TEXT
)
''')
# 创建内容条目表
cursor.execute('''
CREATE TABLE IF NOT EXISTS entries (
id INTEGER PRIMARY KEY AUTOINCREMENT,
feed_id INTEGER,
title TEXT,
link TEXT,
description TEXT,
pub_date TEXT,
FOREIGN KEY(feed_id) REFERENCES feeds(id)
)
''')
conn.commit()
conn.close()
RSS解析与接口实现
编写解析RSS的接口，接收前端传入的RSS链接，解析后存入数据库：
from flask import Flask, request, jsonify
import feedparser
import sqlite3
from datetime import datetime
app = Flask(__name__)
@app.route('/add_feed', methods=['POST'])
def add_feed():
rss_url = request.json.get('url')
if not rss_url:
return jsonify({'code': 400, 'msg': '缺少RSS链接'})
# 解析RSS内容
feed_data = feedparser.parse(rss_url)
if feed_data.bozo:
return jsonify({'code': 400, 'msg': '无效的RSS链接'})
conn = sqlite3.connect('rss_reader.db')
cursor = conn.cursor()
# 插入RSS源信息
cursor.execute('INSERT INTO feeds (url, title) VALUES (?, ?)', (rss_url, feed_data.feed.get('title', '未知源')))
feed_id = cursor.lastrowid
# 插入内容条目
for entry in feed_data.entries:
cursor.execute('''
INSERT INTO entries (feed_id, title, link, description, pub_date)
VALUES (?, ?, ?, ?, ?)
''', (
feed_id,
entry.get('title', '无标题'),
entry.get('link', ''),
entry.get('description', ''),
entry.get('published', datetime.now().strftime('%Y-%m-%d %H:%M:%S'))
))
conn.commit()
conn.close()
return jsonify({'code': 200, 'msg': '添加成功'})
@app.route('/get_entries', methods=['GET'])
def get_entries():
conn = sqlite3.connect('rss_reader.db')
cursor = conn.cursor()
cursor.execute('''
SELECT e.id, f.title, e.title, e.link, e.description, e.pub_date
FROM entries e
JOIN feeds f ON e.feed_id = f.id
ORDER BY e.pub_date DESC
LIMIT 50
''')
rows = cursor.fetchall()
conn.close()
entries = []
for row in rows:
entries.append({
'id': row[0],
'feed_title': row[1],
'title': row[2],
'link': row[3],
'description': row[4],
'pub_date': row[5]
})
return jsonify({'code': 200, 'data': entries})
前端实现部分
前端使用原生HTML、CSS和JavaScript，不需要额外引入框架，通过调用后端接口完成功能交互。
页面结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单RSS阅读工具</title>
<style>
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.add-section { margin-bottom: 30px; }
.add-section input { width: 400px; padding: 8px; margin-right: 10px; }
.add-section button { padding: 8px 16px; cursor: pointer; }
.entry-list { list-style: none; padding: 0; }
.entry-item { border: 1px solid #eee; padding: 15px; margin-bottom: 10px; cursor: pointer; }
.entry-item:hover { background-color: #f9f9f9; }
.entry-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
.entry-meta { color: #666; font-size: 14px; margin-bottom: 10px; }
.entry-desc { color: #333; font-size: 14px; line-height: 1.6; }
.detail-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: white; width: 80%; max-width: 800px; margin: 50px auto; padding: 20px; max-height: 80vh; overflow-y: auto; }
</style>
</head>
<body>
<div class="container">
<h1>简单RSS阅读工具</h1>
<div class="add-section">
<input type="text" id="rssUrl" placeholder="请输入RSS链接">
<button onclick="addFeed()">添加订阅</button>
</div>
<ul class="entry-list" id="entryList"></ul>
</div>
<div class="detail-modal" id="detailModal">
<div class="modal-content">
<h2 id="detailTitle"></h2>
<div id="detailMeta"></div>
<div id="detailDesc"></div>
<button onclick="closeModal()">关闭</button>
</div>
</div>
<script>
// 加载内容列表
function loadEntries() {
fetch('/get_entries')
.then(res => res.json())
.then(data => {
if (data.code === 200) {
const list = document.getElementById('entryList');
list.innerHTML = '';
data.data.forEach(entry => {
const li = document.createElement('li');
li.className = 'entry-item';
li.innerHTML = `
<div class="entry-title">${entry.title}</div>
<div class="entry-meta">来源：${entry.feed_title} | 发布时间：${entry.pub_date}</div>
`;
li.onclick = () => showDetail(entry);
list.appendChild(li);
});
}
});
}
// 添加RSS订阅
function addFeed() {
const url = document.getElementById('rssUrl').value;
if (!url) {
alert('请输入RSS链接');
return;
}
fetch('/add_feed', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({url: url})
})
.then(res => res.json())
.then(data => {
alert(data.msg);
if (data.code === 200) {
document.getElementById('rssUrl').value = '';
loadEntries();
}
});
}
// 展示内容详情
function showDetail(entry) {
document.getElementById('detailTitle').innerText = entry.title;
document.getElementById('detailMeta').innerText = `来源：${entry.feed_title} | 发布时间：${entry.pub_date} | 原文链接：${entry.link}`;
document.getElementById('detailDesc').innerHTML = entry.description;
document.getElementById('detailModal').style.display = 'block';
}
// 关闭详情弹窗
function closeModal() {
document.getElementById('detailModal').style.display = 'none';
}
// 页面加载时初始化
window.onload = function() {
init_db();
loadEntries();
}
</script>
</body>
</html>
启动与使用方法
将后端代码保存为app.py，前端代码保存为index.html，在app.py中添加启动代码：
if __name__ == '__main__':
init_db()
app.run(debug=True, port=5000)
运行python app.py启动后端服务，然后打开index.html页面，输入有效的RSS链接点击添加订阅，就可以看到聚合后的内容列表，点击条目可以查看详细内容。整个工具没有复杂的依赖，代码结构清晰，方便后续扩展更多功能比如内容分类、未读标记等。
RSS阅读工具PythonfeedparserFlask前端渲染修改时间：2026-07-13 20:45:43