一、项目背景近年来电信网络诈骗案件高发为提高社区居民防骗意识我开发了一套社区反电信诈骗宣传系统。系统采用前后端分离架构包含管理员后台管理端和用户前台展示答题端两大模块覆盖反诈宣传、案例展示、在线测试、智能客服等完整业务场景。二、技术栈后端技术版本用途Java1.8 / 11开发语言Spring Boot2.7.18核心框架整合所有组件MyBatis-Plus3.5.3.1ORM 框架简化数据库操作分页、逻辑删除、自动填充MySQL8.0关系型数据库19张业务表Druid1.2.20阿里巴巴数据库连接池Lombok1.18.30简化实体类代码Hutool5.8.25Java 工具类库FastJSON2.0.43JSON 序列化Apache POI5.2.5Excel 导入导出Maven3.6项目构建管理前端技术版本用途Vue.js2.7.16前端核心框架Element UI2.15.14UI 组件库表格、表单、弹窗、菜单等Vue Router3.6.5前端路由/admin 管理端 /front 用户端Vuex3.6.2状态管理登录态、用户信息Axios1.6.0HTTP 请求封装Vue-Quill-Editor3.0.6富文本编辑器公告、帖子内容编辑Webpack5.x构建打包vue-cli 内置三、系统架构浏览器Vue2 Element UI SPA │ Hash 路由 ├── /admin/* 管理员后台17个模块 └── /front/* 用户前台9个页面 │ Axios → /api 代理 → localhost:8088 │ Spring Boot REST API19个Controller │ MyBatis-Plus │ MySQL 数据库19张表前端开发服务器运行在localhost:8080通过vue.config.js配置代理将/api请求转发到后端localhost:8088后端采用经典分层架构Controller → Service → Mapper → Entity统一响应格式ResultT含 code、msg、data 三个字段前端路由守卫实现登录拦截和角色权限校验四、数据库设计系统共设计19 张数据表核心表关系如下sys_user用户表 ├── 关联 sys_role角色表 │ └── 关联 sys_menu菜单表 通过 sys_role_menu │ notice公告表 carousel轮播图表 ​ fraud_case诈骗案例表 ├── 关联 case_type案例类型表 └── 关联 case_comment案例评论表 ​ bbs_post交流帖子表 ├── 关联 bbs_type交流板块表 └── 关联 bbs_reply帖子回复表 ​ questionnaire问卷表 └── question题目表 └── question_item选项表 ​ answer_paper答卷表 └── answer_detail答卷明细表 ​ service_keyword客服关键词表 service_chat客服聊天记录表五、总结搭建了一个社区反电信诈骗宣传系统覆盖了前后端分离开发的完整链路数据库设计19张表覆盖用户权限、内容管理、问卷测试、智能客服等业务后端开发Spring Boot MyBatis-Plus 经典分层架构统一响应格式前端开发Vue2 Element UI两套独立路由体系管理端 用户端核心业务角色权限菜单树、问卷三级级联管理、自动评分、关键词匹配智能客服