基于 Vue 3 + ECharts + Express + SQLite 构—— LDA 模型的新闻舆论主题识别与情感分析系统

基于 LDA 模型的新闻舆论主题识别与情感分析系统

面向舆情监测与展示的全栈可视化大屏项目。系统以 LDA 主题识别情感分析为核心,结合全国/省级地图下钻、训练过程实时监控、机器学习预测与后台数据治理能力,帮助用户快速掌握各地区舆论主题结构、情绪分布与热度变化。


一、项目简介

本系统围绕"新闻舆论主题识别 + 情感分析 + 可视化决策"场景设计,主要目标包括:

  • 对全国及各省市舆情样本进行主题聚类与情感刻画

  • 通过多页 ECharts 大屏直观展示热度、主题、情绪与关联关系

  • 实时监控 LDA 训练过程中的 Loss、困惑度、一致性、准确率等指标

  • 支持训练中动态调整学习率与批次大小,提升训练效率与稳定性

  • 提供用户权限、数据 CRUD、导入导出、数据库与主题样式配置能力

当前 UI 采用闲鱼风格黄黑视觉体系(登录页 + 大屏面板),表格、按钮、地图配色均与主题保持一致。


二、技术栈

前端(client/

技术 说明
Vue 3 组合式 API 构建单页应用
Vite 5 开发与构建工具
Vue Router 4 路由与权限守卫
Pinia 用户态 / 主题态管理
Element Plus 表单、表格、对话框等业务组件
ECharts 5 二维图表与地图
ECharts GL 三维图、地球航线、GraphGL 等
echarts-stat 回归 / 聚类等统计能力
Axios 接口请求与 Token 拦截
XLSX 前端导入导出辅助

后端(server/

技术 说明
Node.js + Express REST API 服务
better-sqlite3 本地 SQLite 持久化
JWT + bcryptjs 登录鉴权与密码加密
Multer 预测文件 / 数据导入上传
XLSX Excel 导入导出

地图数据

  • 中国及省级 GeoJSON 来自阿里云 DataV:https://geo.datav.aliyun.com/areas_v3/bound/

  • 全国图:100000_full.json

  • 省级图:{adcode}_full.json(失败时自动降级为柱状图)

地图功能需要可访问外网。


三、功能总览

1. 登录与权限

  • 闲鱼风格登录页(黄黑圆角卡片)

  • 支持账号登录手机号登录

  • 角色权限:

    • admin 管理员:全部菜单与写操作

    • analyst 分析员:数据编辑、训练、预测

    • viewer 访客:以查看为主

2. 四页可视化大屏

  1. 全国地图:舆情热力地图 + 趋势面积图 + 嵌套环 + 主题柱图 + 雷达画像

  2. 主题情感:旋转柱、纹理饼、漏斗、主题河流、仪表盘、象形柱、盒须图、农历日历、桑基等

  3. 关联趋势:关系网络、桑基流向、日历热力、省-主题热力、线性回归、单轴散点、聚类聚合、相关矩阵

  4. 三维可视:旭日图、矩形树图、径向树、树图↔旭日动画、Bar3D、三维散点、GraphGL、平行坐标、地球航线等

3. 省级下钻大屏

  • 点击全国地图省份(或底部省份标签)进入省级页面

  • 中心为省级行政区地图,两侧为排行、情感、主题、桑基图

  • 底部地市明细表格可筛选、编辑(按权限)

  • 点击地图地市可高亮并过滤表格

4. LDA 训练监控

  • 启动 / 停止训练

  • 实时曲线:Loss、Perplexity、Coherence、Accuracy

  • 可动态调整 学习率批次大小

  • 可配置主题数、最大训练轮次

5. 机器学习预测

  • 手动调试参数:主题数、Alpha、Beta

  • 支持文本输入或上传文件(txt/csv/json)

  • 输出主题权重、关键词与情感仪表盘

6. 后台治理

  • 用户管理:增删改、角色与启停

  • 数据管理:新闻舆情 CRUD、条件筛选、Excel 导入导出

  • 数据库设置:连接信息查看、表记录统计、连通性检查

  • 系统样式设置:背景色、主色、强调色、字体、面板透明度等(实时预览并保存)

  • 系统公告弹窗:点击遮罩或按钮可关闭


四、目录结构

复制代码
Vue13/
├── README.md                 # 项目说明(本文件)
├── package.json              # 根目录便捷脚本
├── client/                   # 前端工程
│   ├── index.html
│   ├── vite.config.js        # 代理 /api -> 3001
│   ├── package.json
│   └── src/
│       ├── api/              # Axios 封装
│       ├── assets/
│       ├── composables/      # ECharts / 地图加载
│       ├── router/           # 路由与权限
│       ├── stores/           # user / theme
│       ├── styles/           # 全局主题(闲鱼黄黑)
│       ├── utils/            # 省市地名匹配
│       └── views/
│           ├── Login.vue
│           ├── Layout.vue
│           ├── screen/       # 四页大屏 + 省级页
│           └── admin/        # 训练/预测/用户/数据/库/样式
└── server/                   # 后端工程
    ├── index.js              # Express API 入口
    ├── db.js                 # SQLite 初始化与种子逻辑
    ├── regionData.js         # 全国省市真实量级画像数据
    ├── reseed.js             # 强制重建省市与新闻样本
    ├── update-theme.js       # 主题色写入工具
    ├── data/opinion.db       # SQLite 数据库文件
    └── uploads/              # 上传临时目录

五、环境要求

  • Node.js 20.x(推荐 20.15+;不建议使用 Vite 8 / 过高版本 Node 以免原生依赖兼容问题)

  • npm 10+

  • Windows / macOS / Linux 均可

  • 需能访问外网以加载省级地图 GeoJSON


六、快速启动

1. 安装依赖

复制代码
# 后端
cd server
npm install
​
# 前端
cd ../client
npm install

也可在根目录执行:

复制代码
npm run install:all

2. 启动后端(端口 3001)

复制代码
cd server
npm run dev
# 或
npm start

成功后终端输出:

复制代码
LDA Opinion Server running at http://localhost:3001

3. 启动前端(端口 5173)

复制代码
cd client
npm run dev

浏览器打开:http://localhost:5173

前端已通过 Vite 代理将 /api 转发到 http://localhost:3001

4. 生产构建(可选)

复制代码
cd client
npm run build
npm run preview

七、演示账号

登录方式 账号 密码 角色
用户名 admin admin123 管理员
手机号 13800138000 admin123 管理员
用户名 analyst user123 分析员
用户名 viewer user123 访客

八、页面与操作说明

登录页

  1. 选择「账号登录」或「手机号登录」

  2. 输入凭证后点击「立即登录」

  3. 登录成功进入「全国地图」大屏

全国地图(Screen1)

  • 中央为中国舆情热力地图

  • 点击省份区域进入对应省级大屏

  • 地图下方提供全部省份快捷标签,亦可点击跳转

  • 左右侧展示趋势、情感结构、主题分布与雷达画像

省级大屏(Province)

  • 中间为该省行政区地图(居中放大)

  • 左右展示地市排行、情感环图、主题分布、城市-主题桑基

  • 底部表格展示全部地市数据;点击地图地市可过滤表格

  • 分析员/管理员可编辑地市指标

主题情感 / 关联趋势 / 三维可视

  • 分别对应 Screen2 / Screen3 / Screen4

  • 覆盖漏斗、河流、仪表盘、关系图、热力、聚类、相关矩阵、Bar3D、GraphGL、地球航线等图表组合

训练监控

  1. 设置学习率、批次、主题数、轮次

  2. 点击「启动训练」观察四条指标曲线实时更新

  3. 训练过程中可再次调整学习率/批次并「应用参数」

  4. 需要时可「停止训练」

智能预测

  1. 调整主题数、Alpha、Beta

  2. 输入文本或上传文件

  3. 查看主题权重饼图、情感仪表盘与关键词明细

数据管理

  • 按省/市/主题/情感/关键词筛选

  • 新增、编辑、删除舆情记录

  • 导出 Excel;上传 Excel/CSV 批量导入

样式设置(管理员)

  • 修改背景、主色、强调色、字体、透明度

  • 支持预览、保存、恢复默认(默认闲鱼黄:#ffe60f


九、数据说明

覆盖范围

  • 34 个省级单位(含台湾、香港、澳门)

  • 456 个地市/区县(名称尽量对齐 DataV 行政区划)

  • 种子新闻样本约 2300+ 条(重建后数量以实际为准)

数据量级设计思路

省级舆情量与热度参考人口、经济活跃度与网络讨论强度设定,例如:

  • 高活跃:广东、江苏、山东、浙江、河南、四川、北京、上海等

  • 中等活跃:湖北、湖南、安徽、福建、陕西等

  • 相对较低:西藏、青海、宁夏、澳门等

省会与一线城市在省级内部具有更高权重(如深圳、广州、成都、杭州)。

重建省市数据

如需强制按最新 regionData.js 重建:

复制代码
cd server
node reseed.js

执行后会清空并重建 region_statsnews_data,用户账号不会被删除。


十、数据库与主要 API

SQLite 位置

server/data/opinion.db

主要数据表

表名 用途
users 用户与角色
news_data 舆情新闻样本
region_stats 省/市级统计指标
training_config 训练参数与状态
training_logs 训练过程日志
system_settings 主题与数据库配置
announcements 系统公告

常用接口(均以 /api 为前缀)

方法 路径 说明
POST /auth/login 登录(account/password/loginType)
GET /auth/me 当前用户
GET /regions/overview 全国总览
GET /regions/province/:name 省级详情(含城市)
GET/POST/PUT/DELETE /news 舆情 CRUD
GET /news/export 导出 Excel
POST /news/import 导入 Excel
GET/PUT /training/config 训练配置
POST /training/start|stop|adjust 启停与动态调参
POST /predict 主题/情感预测
GET/PUT /settings 系统样式
GET /db/status 数据库状态
GET/POST/PUT/DELETE /users 用户管理(管理员)

除登录与部分元数据接口外,业务接口需在 Header 携带:

复制代码
Authorization: Bearer <token>

十一、权限矩阵(简要)

能力 admin analyst viewer
查看大屏
省级下钻
训练监控写操作
预测 ✓(可调用)
数据增删改/导入
用户管理
数据库设置
样式设置

十二、常见问题

1. 地图不显示 / 省级地图空白

  • 检查是否可访问 DataV GeoJSON 地址

  • 港澳台等区域若无完整市级边界,会自动降级为柱状图

  • 浏览器控制台查看 GeoJSON 请求是否失败

2. 登录后接口 401

  • Token 过期或未携带,重新登录即可

  • 确认后端 3001 已启动,前端代理正常

3. 端口被占用

复制代码
# Windows 示例:查看占用并结束进程后重启
netstat -ano | findstr ":3001 :5173"

4. better-sqlite3 安装失败

  • 确认 Node 版本在 20.x

  • 删除 server/node_modules 后重新 npm install

  • Windows 需具备基本的原生模块编译环境(一般预编译包可直接使用)

5. 图表空白(如聚类、相关矩阵)

  • 硬刷新页面(Ctrl+F5)

  • 确认已使用最新前端代码并重新 npm run dev

6. 主题色仍是旧配色

  • 进入「样式设置」点恢复默认并保存

  • 或执行:cd server && node update-theme.js 后重新登录


十三、开发说明

前端代理

client/vite.config.js

  • 开发端口:5173

  • /api/uploads 代理到 http://localhost:3001

主题变量

全局 CSS 变量(client/src/styles/global.css):

  • --bg-color 背景

  • --primary-color 主色(默认 #ffe60f

  • --accent-color 强调色

  • --text-color 文字色

  • --card-opacity 面板透明度

表格、按钮、分页已统一覆盖为黄黑主题风格。

建议开发流程

  1. 先启动 server

  2. 再启动 client

  3. admin 登录验证地图下钻、训练、导入导出

  4. 修改省市基础画像时编辑 server/regionData.js,再执行 node reseed.js


十四、版本与脚本速查

根目录

复制代码
npm run install:all   # 安装前后端依赖
npm run server        # 启动后端
npm run client        # 启动前端

server

复制代码
npm run dev           # nodemon 热重启
npm start             # 生产方式启动
node reseed.js        # 重建省市与新闻样本
node update-theme.js  # 写入闲鱼黄主题到数据库

client

复制代码
npm run dev           # 开发服务器
npm run build         # 打包
npm run preview       # 预览打包结果

十五、许可证与说明

本项目用于教学演示与可视化大屏实践。内置舆情数据为模拟/画像数据,不代表真实媒体统计结果;LDA 训练过程为可交互的模拟训练,便于展示指标监控与参数调节流程。

如需接入真实爬虫数据或线上 LDA 服务,可在保持现有 API 契约的前提下替换 server 中的数据源与预测逻辑。

https://github.com/zhangsansh/Vue3-ECharts-Express-SQLite-.githttps://github.com/zhangsansh/Vue3-ECharts-Express-SQLite-.git

相关推荐
无人生还1 小时前
从 Vue3 到 React · 快速上手系列第 4 篇:条件渲染与列表渲染
前端·vue.js·react.js
咩咩啃树皮1 小时前
第46篇:Vue3 Router工程化进阶——懒加载+嵌套路由+全局守卫+权限控制
javascript·vue.js·ecmascript
咩咩啃树皮2 小时前
第44篇:Vue3侦听器完全精讲——watch与watchEffect区别、深度监听、异步业务落地
前端·javascript·vue.js
晓得迷路了2 小时前
栗子前端技术周刊第 139 期 - Nuxt 4.5、Vue 3.6 RC、Angular 发布节奏...
前端·javascript·vue.js
程序软件分享17 小时前
多语言DAPP综合盘交易所系统源码搭建剖析
vue.js·金融·开源
路光.21 小时前
Vue2升级Vue3处理原 UMD/CommonJS 打包文件,不是标准 ESM
前端·javascript·vue.js·vue3
shmily麻瓜小菜鸡1 天前
前端“伪防盗链”方案
前端·javascript·vue.js·bootstrap·echarts
MrDJun1 天前
分享一款免费实用的网页变动监控工具:PageWatch.tech
前端·javascript·vue.js
浅水壁虎2 天前
vue基础(第二章 )
前端·javascript·vue.js