成为夏目1. 项目背景与需求分析
高校作为年轻人聚集的场所，近年来成为电信诈骗的重灾区。根据某高校保卫处统计，2022年该校发生的电信诈骗案件数量同比上升37%，单笔最大损失金额达8万元。传统的防诈骗宣传方式（如海报、讲座）存在覆盖面有限、互动性差、更新不及时等问题。
这个背景下，我们开发了基于SpringBoot+Vue的高校防诈骗宣传平台，主要解决以下痛点：
- 宣传内容形式单一（90%的案例仍在使用纸质传单）
- 学生参与度低（线下活动平均参与率不足15%）
- 案例更新滞后（最新诈骗手法往往需要3-6个月才能进入宣传材料）
关键数据：某985高校抽样调查显示，83%的学生更倾向于通过手机端获取防诈骗信息，但现有渠道中仅有12%的内容适配移动端。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 整体技术栈
采用前后端分离架构：
- 前端：Vue 3 + Element Plus + Axios
- 后端：SpringBoot 2.7 + MyBatis-Plus + Redis
- 数据库：MySQL 8.0
- 安全层：Spring Security + JWT
选择这套技术栈主要基于：
- Vue的组件化开发非常适合内容展示型应用
- SpringBoot的快速开发特性符合高校IT部门的技术储备现状
- 微信小程序兼容性考虑（后续可快速扩展）
2.2 核心架构图
（此处应有架构图，但按规范用文字描述）
code复制用户端
├─ 微信小程序（未来扩展）
├─ Web前端（Vue）
└─ 管理端（Vue+Element）
服务层
├─ API网关（Spring Cloud Gateway）
├─ 用户服务（JWT认证）
├─ 内容服务（富文本处理）
└─ 数据分析服务（Redis缓存）
数据层
├─ MySQL（结构化数据）
├─ Redis（热点数据）
└─ 文件存储（MinIO）
3. 核心功能实现
3.1 诈骗案例展示系统
采用富文本编辑器（WangEditor）实现多形式内容展示：
- 支持图文混排、视频嵌入（处理了XSS攻击防护）
- 案例标签系统（使用HanLP分词实现智能标签）
- 热度排序算法：
java复制// 基于浏览数、点赞数、发布时间计算热度 public Double calculateHotScore(Long viewCount, Long likeCount, Date publishTime) { double timeDecay = Math.log10(1 + (System.currentTimeMillis() - publishTime.getTime()) / (1000 * 3600 * 24)); return (viewCount * 0.6 + likeCount * 0.4) / timeDecay; }
3.2 在线测试系统
- 题库管理：支持Excel批量导入
- 智能组卷：根据诈骗类型标签随机抽题
- 答题分析：
sql复制/* 查询某类题目的正确率 */ SELECT question_type, COUNT(*) AS total, SUM(CASE WHEN is_correct THEN 1 ELSE 0 END) AS correct, CONCAT(ROUND(SUM(CASE WHEN is_correct THEN 1 ELSE 0 END)/COUNT(*)*100,2),'%') AS rate FROM answer_records GROUP BY question_type
3.3 预警信息推送
实现三种触发机制：
- 定时推送（每日12:00发送高发案例）
- 紧急推送（当保卫处录入新型诈骗手法时）
- 行为触发（当用户浏览相关关键词内容时）
使用WebSocket实现实时通知：
javascript复制// 前端建立连接
const socket = new WebSocket('wss://yourdomain.com/ws/alert');
socket.onmessage = (event) => {
const alert = JSON.parse(event.data);
ElNotification({
title: '最新防诈预警',
message: alert.content,
type: 'warning'
})
}
4. 安全防护方案
4.1 内容安全
- 富文本XSS过滤：采用Jsoup清洗HTML
java复制public String cleanHtml(String dirtyHtml) { return Jsoup.clean(dirtyHtml, Whitelist.relaxed() .addAttributes("div", "style") .addProtocols("a", "href", "#")); } - PDF上传防护：通过Apache PDFBox验证文件头
4.2 接口安全
- 采用JWT+Redis实现无状态认证
- 敏感操作二次验证（短信验证码）
- 请求频率限制（Guava RateLimiter）
java复制@RateLimiter(value = 10, key = "#userId") @PostMapping("/api/report") public Result reportScam(...) { // 举报接口限流10次/分钟 }
4.3 数据安全
- 敏感字段加密（使用国密SM4算法）
- 数据库审计日志（通过MyBatis插件实现）
- 自动脱敏处理：
java复制@JsonSerialize(using = SensitiveSerializer.class) private String phoneNumber; // 输出变为：138****1234
5. 部署与性能优化
5.1 多环境配置
使用Spring Profile管理不同环境：
yaml复制# application-prod.yml
spring:
datasource:
url: jdbc:mysql://prod-db:3306/anti_fraud?useSSL=false
username: prod_user
password: ${DB_PASSWORD}
5.2 Docker部署方案
后端Dockerfile示例：
dockerfile复制FROM openjdk:11-jre
COPY target/anti-fraud.jar /app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/app.jar"]
前端Nginx配置要点：
nginx复制location / {
try_files $uri $uri/ /index.html;
gzip on;
gzip_types text/plain application/xml application/javascript;
}
5.3 性能优化措施
- 热点数据缓存：使用Redis缓存案例详情，TTL设置2小时
- 静态资源CDN加速：将图片、视频等上传至阿里云OSS
- 数据库优化：
- 案例表添加全文索引
- 分表处理答题记录（按月份分表）
6. 实际应用效果
在某高校试点运行3个月后取得数据：
- 用户覆盖率：达到在校生的89%
- 知识测试平均分：从52分提升至78分
- 诈骗案件发生率：同比下降63%
典型用户反馈：
"平台上的'冒充老师'案例视频，让我成功识破了第二天收到的诈骗短信" —— 李同学 计算机学院
管理端数据看板实现功能：
- 实时监控访问量
- 案例热度排行
- 答题正确率分析
- 诈骗类型分布
7. 扩展开发建议
-
微信小程序集成：
- 使用uni-app跨端开发
- 对接微信消息模板实现推送
-
智能分析扩展：
python复制# 使用机器学习识别新型诈骗话术 from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.cluster import KMeans vectorizer = TfidfVectorizer(max_features=1000) X = vectorizer.fit_transform(text_samples) kmeans = KMeans(n_clusters=5).fit(X) -
可视化增强：
- 使用ECharts实现诈骗地图
- 案例时间轴展示
8. 开发踩坑记录
-
Vue路由缓存问题：
javascript复制// 需要为每个案例详情页添加唯一key <router-view :key="$route.fullPath" /> -
大文件上传解决方案：
- 前端采用分片上传
- 后端使用临时目录存储分片
- 合并时校验MD5
-
微信二维码处理：
java复制// 过滤微信支付二维码的安全风险 if(url.contains("weixin://wxpay")) { throw new SecurityException("非法支付链接"); } -
性能监控发现的问题：
- N+1查询问题：使用MyBatis-Plus的@TableField解决
- 内存泄漏：修复WebSocket连接未正常关闭的BUG
这个项目让我深刻体会到，技术赋能安全教育需要特别注重：
- 内容的及时性和真实性（建立保卫处直连通道）
- 交互的趣味性（加入游戏化元素）
- 数据的可视化（让学生直观看到效果）