1. 项目概述
校园防诈骗宣传网站是一个典型的Web应用系统，采用前后端分离架构设计。前端使用Vue3框架实现响应式用户界面，后端基于SpringBoot构建RESTful API服务，数据存储采用MySQL关系型数据库。该系统主要面向高校师生群体，旨在通过数字化手段提升校园反诈宣传效果。
我在实际开发中发现，这类系统有几个关键特性：首先需要处理大量多媒体宣传内容（图文、视频），其次要支持用户互动（评论、举报），最后还要考虑移动端适配。Vue3的Composition API和SpringBoot的自动配置特性恰好能很好地满足这些需求。
2. 技术选型解析
2.1 前端技术栈
选择Vue3作为前端框架主要基于以下考量：
- 响应式系统升级：Vue3的Proxy-based响应式系统性能提升40%，特别适合频繁更新的宣传内容展示
- Composition API：相比Options API，更利于抽离防诈骗案例展示的逻辑复用
- TypeScript支持：完善的类型检查能减少30%以上的运行时错误
- 体积优化：Tree-shaking后核心体积仅22.5KB，加快首屏加载速度
实际开发中我搭配使用了这些关键库：
javascript复制// package.json核心依赖
{
"vue": "^3.2.0",
"vue-router": "^4.0.0", // 处理嵌套路由
"pinia": "^2.0.0", // 状态管理
"axios": "^0.27.0", // HTTP请求
"element-plus": "^2.0.0" // UI组件库
}
2.2 后端技术栈
SpringBoot的选择理由：
- 快速启动：通过starter依赖可在5分钟内搭建完整后端环境
- 内嵌Tomcat：简化部署流程，直接打包可执行JAR
- 安全集成：Spring Security可方便实现RBAC权限控制
- MyBatis-Plus：极大简化诈骗案例数据的CRUD操作
关键配置示例：
java复制// application.yml核心配置
spring:
datasource:
url: jdbc:mysql://localhost:3306/anti_fraud
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
servlet:
multipart:
max-file-size: 50MB # 支持大文件上传
3. 核心功能实现
3.1 诈骗案例展示模块
采用瀑布流布局实现案例展示，核心要点包括：
- 分页查询：后端使用MyBatis-Plus分页插件
java复制// CaseController.java
@GetMapping("/cases")
public Result<Page<Case>> getCases(
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size) {
return Result.success(caseService.page(new Page<>(page, size)));
}
- 前端无限滚动：通过Intersection Observer API实现
javascript复制// CaseList.vue
const loadMore = () => {
if (loading.value || !hasMore.value) return
loading.value = true
caseStore.fetchCases().finally(() => {
loading.value = false
})
}
onMounted(() => {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadMore()
}
})
observer.observe(loadMoreTrigger.value)
})
3.2 诈骗举报功能
举报流程设计要点：
- 表单验证：使用Vuelidate进行多级验证
- 文件上传：SpringBoot处理multipart/form-data
- 实时反馈：WebSocket推送处理进度
关键实现代码：
java复制// ReportController.java
@PostMapping("/report")
public Result<String> handleReport(
@Valid @RequestBody ReportDTO dto,
@RequestParam("files") MultipartFile[] files) {
// 保存到数据库
Report report = convertToEntity(dto);
reportService.save(report);
// 处理上传文件
fileService.uploadFiles(files, report.getId());
// 异步通知处理
notificationService.notifyAdmin(report);
return Result.success("举报已受理");
}
4. 数据库设计
4.1 主要表结构
sql复制-- 诈骗案例表
CREATE TABLE `fraud_case` (
`id` bigint NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL COMMENT '案例标题',
`content` text NOT NULL COMMENT '案例详情',
`type` enum('电信','网络','金融') NOT NULL,
`occur_time` datetime NOT NULL COMMENT '发生时间',
`views` int DEFAULT '0' COMMENT '浏览次数',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 用户举报表
CREATE TABLE `user_report` (
`id` bigint NOT NULL AUTO_INCREMENT,
`user_id` bigint NOT NULL,
`case_id` bigint DEFAULT NULL COMMENT '关联案例',
`content` text NOT NULL,
`status` enum('pending','processing','resolved') DEFAULT 'pending',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user` (`user_id`),
KEY `idx_case` (`case_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
4.2 性能优化实践
-
索引策略：
- 为高频查询字段添加组合索引
- 使用EXPLAIN分析慢查询
-
缓存方案：
java复制// 使用Spring Cache注解
@Cacheable(value = "cases", key = "#id")
public Case getById(Long id) {
return baseMapper.selectById(id);
}
@CacheEvict(value = "cases", key = "#case.id")
public void updateCase(Case case) {
baseMapper.updateById(case);
}
5. 部署与运维
5.1 前端部署
采用Nginx作为静态资源服务器，关键配置：
nginx复制server {
listen 80;
server_name antifraud.example.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
5.2 后端部署
使用Docker Compose编排服务：
yaml复制version: '3'
services:
backend:
image: openjdk:17-jdk
ports:
- "8080:8080"
volumes:
- ./app.jar:/app.jar
command: java -jar /app.jar
depends_on:
- mysql
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: 123456
MYSQL_DATABASE: anti_fraud
volumes:
- ./mysql-data:/var/lib/mysql
6. 开发经验总结
6.1 跨域问题解决方案
前后端分离开发时遇到的典型问题及解决：
- 开发环境配置代理：
javascript复制// vite.config.js
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
- 生产环境CORS配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
6.2 性能优化技巧
- 前端懒加载：
vue复制<template>
<img v-lazy="imageUrl" />
</template>
<script setup>
import { useLazyload } from 'vue-lazyload'
useLazyload()
</script>
- 后端接口缓存：
java复制@Cacheable(value = "hotCases", keyGenerator = "hotKeyGenerator")
@GetMapping("/hot")
public List<Case> getHotCases() {
return caseService.lambdaQuery()
.orderByDesc(Case::getViews)
.last("limit 10")
.list();
}
7. 安全防护措施
7.1 常见安全防护
- XSS防护：
java复制@Configuration
public class SecurityConfig {
@Bean
public FilterRegistrationBean<XssFilter> xssFilter() {
FilterRegistrationBean<XssFilter> registration = new FilterRegistrationBean<>();
registration.setFilter(new XssFilter());
registration.addUrlPatterns("/*");
return registration;
}
}
- SQL注入防护：
- 始终使用MyBatis参数绑定
- 避免直接拼接SQL语句
- 定期更新MySQL补丁
7.2 内容安全策略
- 敏感词过滤：
java复制public class SensitiveFilter {
private static final TrieNode root = new TrieNode();
static {
// 初始化敏感词库
loadWords(Arrays.asList("诈骗", "赌博", "色情"));
}
public static String filter(String text) {
// 实现过滤算法
}
}
- 图片内容审核：
- 接入第三方内容安全API
- 对用户上传图片进行色情、暴力识别
8. 项目扩展方向
8.1 移动端适配方案
- 响应式布局：
css复制/* 使用CSS媒体查询 */
@media (max-width: 768px) {
.case-card {
width: 100%;
margin-bottom: 1rem;
}
}
- PWA支持：
- 通过workbox实现离线缓存
- 添加manifest.json配置
8.2 数据分析扩展
- 用户行为分析：
javascript复制// 埋点示例
const trackEvent = (eventName, payload) => {
if (process.env.NODE_ENV === 'production') {
axios.post('/analytics', { eventName, ...payload })
}
}
- 可视化报表：
- 使用ECharts展示诈骗类型分布
- 按时间维度统计举报量变化
在项目开发过程中，我特别建议重视日志系统的建设。完善的日志可以帮助快速定位线上问题，建议采用ELK栈（Elasticsearch+Logstash+Kibana）实现日志集中管理和分析。以下是一个实用的日志配置示例：
java复制// logback-spring.xml
<configuration>
<appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
<file>logs/application.log</file>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<fileNamePattern>logs/application.%d{yyyy-MM-dd}.log</fileNamePattern>
<maxHistory>30</maxHistory>
</rollingPolicy>
<encoder>
<pattern>%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n</pattern>
</encoder>
</appender>
<root level="INFO">
<appender-ref ref="FILE" />
</root>
</configuration>