1. 项目背景与核心价值
校园防诈骗宣传网站是当前数字化校园建设中不可或缺的一环。随着网络诈骗手段的不断升级，传统的线下宣传方式已经难以满足学生群体的信息获取需求。这个基于SpringBoot+Vue3的全栈项目，正是为了解决这一痛点而生。
我去年为某高校开发类似系统时发现，学生群体对诈骗手法的认知存在明显滞后性。诈骗分子利用学生社会经验不足的特点，通过兼职刷单、虚假贷款、冒充客服等手段实施诈骗。而传统的宣传栏、讲座等形式，信息更新慢、覆盖面有限、互动性差。
这个系统最核心的价值在于：
- 实时性：后台可快速更新最新诈骗案例
- 互动性：学生可通过测试题检验防骗知识掌握程度
- 便捷性：7×24小时可访问的移动端适配界面
- 数据化：管理员可查看各宣传内容的访问数据
2. 技术架构设计解析
2.1 前后端分离架构优势
采用SpringBoot+Vue3的分离架构主要基于以下考量：
- 开发效率：前后端可并行开发，通过接口文档约定数据格式
- 性能优化：前端静态资源可通过CDN加速，减轻服务器压力
- 技术栈优势：
- 后端：SpringBoot的自动配置简化了SSM框架整合
- 前端：Vue3的Composition API更适合复杂交互场景
- 维护成本：前后端解耦，修改界面不影响业务逻辑
实际开发中发现，这种架构对团队协作要求较高，必须严格定义接口规范。我们采用Swagger进行接口文档管理，避免了前后端对接时的沟通成本。
2.2 数据库设计要点
MySQL数据库设计中，这几个表结构是关键：
sql复制CREATE TABLE `fraud_case` (
`id` int NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL COMMENT '案例标题',
`content` text NOT NULL COMMENT '案例详情',
`type` enum('电信','网络','线下') NOT NULL COMMENT '诈骗类型',
`occur_time` datetime NOT NULL COMMENT '发生时间',
`view_count` int DEFAULT '0' COMMENT '浏览次数',
`is_top` tinyint DEFAULT '0' COMMENT '是否置顶',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `knowledge_test` (
`id` int NOT NULL AUTO_INCREMENT,
`question` varchar(255) NOT NULL,
`options` json NOT NULL COMMENT '选项数组',
`answer` varchar(10) NOT NULL COMMENT '正确答案',
`analysis` text COMMENT '答案解析',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
特别注意：
- 诈骗案例表使用
view_count字段实现热度统计 - 测试题表使用JSON类型存储选项，便于前端渲染
- 所有文本字段使用utf8mb4编码，支持emoji表情
3. 核心功能实现细节
3.1 案例展示模块
前端采用Vue3的<script setup>语法实现瀑布流布局：
vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getCaseList } from '@/api/case'
const caseList = ref([])
const loading = ref(false)
const loadData = async () => {
loading.value = true
try {
const res = await getCaseList({
page: 1,
size: 10
})
caseList.value = res.data
} finally {
loading.value = false
}
}
onMounted(() => {
loadData()
})
</script>
后端SpringBoot接口需要注意：
- 分页参数校验
- SQL防注入处理
- 敏感字段过滤
java复制@GetMapping("/cases")
public Result<PageInfo<FraudCase>> getCaseList(
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size) {
if(page < 1 || size > 100) {
throw new BusinessException(ErrorCode.PARAMS_ERROR);
}
PageHelper.startPage(page, size);
List<FraudCase> list = caseService.list();
return Result.success(PageInfo.of(list));
}
3.2 防骗知识测试功能
实现难点在于：
- 随机组卷算法
- 答题进度保存
- 即时批改与解析展示
解决方案：
javascript复制// 使用Pinia管理测试状态
export const useTestStore = defineStore('test', {
state: () => ({
questions: [],
currentIndex: 0,
answers: {}
}),
actions: {
async fetchQuestions() {
const res = await getRandomQuestions(10)
this.questions = res.data
},
recordAnswer(questionId, answer) {
this.answers[questionId] = answer
}
}
})
4. 部署与性能优化
4.1 生产环境配置
推荐部署方案：
- 前端：Nginx静态部署 + CDN加速
- 后端：Docker容器化部署
- 数据库：阿里云RDS MySQL 5.7
Nginx关键配置：
nginx复制server {
listen 80;
server_name antifraud.example.com;
location / {
root /var/www/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
4.2 缓存策略优化
- 案例列表使用Redis缓存：
java复制@Cacheable(value = "caseList", key = "#page+'-'+#size")
public List<FraudCase> listCases(int page, int size) {
// 数据库查询
}
- 前端静态资源配置长期缓存：
javascript复制// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
assetFileNames: 'assets/[name]-[hash][extname]'
}
}
}
})
5. 开发经验与避坑指南
-
跨域问题：开发环境需配置代理，生产环境通过Nginx解决
javascript复制// vite.config.js server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } -
Vue3路由缓存失效：
vue复制<router-view v-slot="{ Component }"> <keep-alive :include="['CaseList']"> <component :is="Component" /> </keep-alive> </router-view> -
SpringBoot文件上传限制：
yaml复制spring: servlet: multipart: max-file-size: 10MB max-request-size: 20MB -
MySQL时区问题：
yaml复制spring: datasource: url: jdbc:mysql://localhost:3306/antifraud?serverTimezone=Asia/Shanghai
实际开发中遇到的一个典型问题：Vue3的响应式代理会导致后端返回的数据结构发生变化。解决方案是使用toRaw()获取原始数据，或者在axios响应拦截器中处理：
javascript复制axios.interceptors.response.use(response => {
if(response.data?.data instanceof Array) {
response.data.data = JSON.parse(JSON.stringify(response.data.data))
}
return response
})
这个项目最值得分享的经验是：防诈骗内容需要专业审核。我们最终邀请了辖区反诈中心的警官作为内容顾问，确保案例的真实性和警示作用。同时，系统设置了内容审核流程，所有发布的案例需要经过管理员二次确认。