全栈开发经验与踩坑

场景：前端部署在 app.example.com，后端API在 api.example.com，请求被浏览器CORS策略拦截

问题：浏览器控制台报错 Access-Control-Allow-Origin，前端无法获取响应

根因：后端没有正确配置CORS响应头，或者OPTIONS预检请求没有处理

解决：后端配置CORS中间件，允许指定域名、请求方法、请求头

// Spring Boot CORS 配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("https://app.example.com")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("Content-Type", "Authorization")
            .allowCredentials(true)
            .maxAge(3600); // OPTIONS 预检缓存1小时
    }
}

场景：SPA应用首屏加载耗时3秒+，用户看到白屏，跳出率极高

问题：JS bundle 2.5MB，未做代码分割，所有页面代码在首屏加载

根因：① 没有路由级代码分割 ② 第三方库未Tree-shaking ③ 图片未压缩 ④ 没有SSR/SSG

解决：路由懒加载(React.lazy)、提取vendor chunk、图片WebP格式、关键CSS内联、骨架屏

// 路由级代码分割
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

场景：后台管理系统的页面切换越来越卡，最终浏览器标签页崩溃

问题：组件卸载后定时器、事件监听器、订阅没有清理

根因：① setInterval 没有在 componentWillUnmount 中清除 ② 全局事件监听没有移除 ③ 闭包引用了大对象

解决：在useEffect的cleanup函数中清理所有副作用

// React Hook 正确的清理方式
useEffect(() => {
  const timer = setInterval(fetchData, 5000);
  const handler = (e) => handleResize(e);
  window.addEventListener('resize', handler);
  return () => {
    clearInterval(timer);
    window.removeEventListener('resize', handler);
  };
}, []);

场景：Android浏览器正常显示日期，iOS Safari显示NaN或Invalid Date

问题：后端返回 2024-03-15 14:30:00 格式，Safari不支持含空格和横杠的日期字符串解析

根因：Safari的Date构造函数比Chrome严格，不支持非标准日期格式

解决：后端统一返回ISO 8601格式，或前端做格式转换

// 错误：Safari无法解析
new Date('2024-03-15 14:30:00')  // NaN in Safari

// 正确：使用T分隔符
new Date('2024-03-15T14:30:00')  // 所有浏览器兼容

// 或手动替换
new Date('2024-03-15 14:30:00'.replace(' ', 'T'))

场景：表格需要展示1万条数据，页面直接卡死

问题：直接渲染1万个DOM节点，浏览器计算布局和绘制时间过长

根因：没有使用虚拟滚动，所有数据都创建了DOM节点

解决：使用虚拟列表(virtual list)，只渲染可视区域内的元素

// 使用 vue-virtual-scroller（Vue 3）
<RecycleScroller
  :items="items"
  :item-size="40"
  key-field="id"
  v-slot="{ item }">
  <div>{{ item.name }}</div>
</RecycleScroller>

// 或 react-window（React）
import { FixedSizeList } from 'react-window';
const Row = ({ index, style }) => (
  <div style={style}>{items[index].name}</div>
);
<FixedSizeList height={600} itemCount={10000} itemSize={40}>
  {Row}
</FixedSizeList>

场景：Spring Boot 服务运行几天后堆内存持续增长，最终被 OOM Killer 杀掉

问题：静态 ConcurrentHashMap 不断存储用户 session 数据，从不清理，GC 无法回收

根因：① 用静态 Map 存 session 且无过期机制 ② ThreadLocal 线程池复用未 remove ③ 连接泄漏未 close

解决：session 改用 Redis + TTL；用 jmap/MAT 分析堆 dump 定位泄漏对象

// 错误：内存无限增长
public class SessionManager {
    private static final ConcurrentHashMap<String, UserSession> sessions
        = new ConcurrentHashMap<>();  // 永远不清理

    public void login(String sessionId, UserSession data) {
        sessions.put(sessionId, data);  // 只增不减
    }
}

// 正确：使用 Redis + TTL（Spring Session）
@Service
public class SessionService {
    @Autowired
    private StringRedisTemplate redis;

    public void login(String sessionId, UserSession data) {
        redis.opsForValue().set(
            "session:" + sessionId,
            JSON.toJSONString(data),
            1, TimeUnit.HOURS  // 1小时自动过期
        );
    }
}

场景：两个并发请求互相等待对方持有的锁，导致请求超时

问题：事务A先锁行1再锁行2，事务B先锁行2再锁行1 — 经典的循环等待

根因：多个事务以不同顺序获取锁资源

解决：统一加锁顺序、减小事务粒度、设置锁等待超时、添加重试机制

// 死锁示例
// 事务A: UPDATE accounts SET balance = balance - 100 WHERE id = 1;
//         UPDATE accounts SET balance = balance + 100 WHERE id = 2;

// 事务B: UPDATE accounts SET balance = balance - 50 WHERE id = 2;
//         UPDATE accounts SET balance = balance + 50 WHERE id = 1;

// 解决：统一按 id 顺序更新
// 两个事务都先更新 id=1 再更新 id=2

场景：流量高峰期所有接口报错"Connection timeout: Pool exhausted"

问题：连接池最大50个连接，但某慢查询占用了40个连接长达30秒，导致其他请求无连接可用

根因：① 连接池大小不合理 ② 没有设置查询超时 ③ 慢查询占用连接不释放

解决：设置statement timeout、增加连接池监控、优化慢查询、设置连接获取超时

# Spring Boot application.yml — HikariCP 连接池配置
spring:
  datasource:
    hikari:
      maximum-pool-size: 30
      minimum-idle: 5
      connection-timeout: 5000    # 获取连接超时 5秒
      idle-timeout: 30000         # 空闲连接回收 30秒
      max-lifetime: 600000

# 慢查询超时（MySQL 驱动层面）
spring:
  datasource:
    hikari:
      data-source-properties:
        socketTimeout: 10000      # SQL 执行超时 10秒

场景：Java服务突然无响应，日志报 java.lang.OutOfMemoryError: Java heap space

问题：一次性从数据库查询了50万条数据加载到内存中

根因：① 没有分页，全量查询 ② 对象引用未释放 ③ JVM堆内存设置过小

解决：分页查询、流式处理大数据集、增加JVM堆内存、配置OOM时自动dump

# JVM 启动参数优化
java -Xms2g -Xmx4g \
  -XX:+HeapDumpOnOutOfMemoryError \
  -XX:HeapDumpPath=/logs/heapdump.hprof \
  -jar app.jar

场景：调用的第三方支付接口响应变慢，导致本服务所有线程被阻塞，其他接口也无法响应

问题：没有设置合理的超时时间和熔断机制，一个外部服务的故障拖垮了整个系统

根因：① HTTP调用没有设置超时 ② 没有熔断器 ③ 没有降级方案

解决：设置合理的超时时间(3~5秒)、引入熔断器(Hystrix/Resilience4j)、准备降级方案

// RestTemplate 超时设置
@Bean
public RestTemplate restTemplate() {
    var factory = new SimpleClientHttpRequestFactory();
    factory.setConnectTimeout(3000);   // 连接超时 3秒
    factory.setReadTimeout(5000);      // 读取超时 5秒
    return new RestTemplate(factory);
}

// 或用 OkHttp + Resilience4j 熔断器
CircuitBreakerConfig config = CircuitBreakerConfig.custom()
    .failureRateThreshold(50)             // 失败率50%触发熔断
    .waitDurationInOpenState(Duration.ofSeconds(30))  // 熔断30秒
    .slidingWindowSize(10)                // 滑动窗口10次
    .build();
CircuitBreaker cb = CircuitBreaker.of("paymentService", config);

// 当失败率超过阈值时，自动断开调用
// 一段时间后尝试半开(half-open)恢复

场景：某个接口响应时间从200ms突然变为5秒+

问题：查询条件的字段没有索引，随着数据量增长(100万行)全表扫描越来越慢

根因：① WHERE条件字段未建索引 ② 索引未命中(使用了函数、隐式类型转换) ③ 数据量增长未优化查询

解决：EXPLAIN分析执行计划、添加合适的索引、优化查询语句

-- 分析慢查询
EXPLAIN SELECT * FROM orders WHERE user_id = 10086;

-- 添加索引
ALTER TABLE orders ADD INDEX idx_user_id (user_id);

-- 索引失效的常见原因
-- 1. 对索引列使用函数: WHERE YEAR(create_time) = 2024  ✗
--    改为: WHERE create_time >= '2024-01-01'             ✓
-- 2. 隐式类型转换: varchar列用int查询: WHERE phone = 138 ✗
--    改为: WHERE phone = '138'                           ✓

场景：用户提交订单后立即查看，发现列表里没有刚下的订单

问题：写操作走主库，读操作走从库。主库写入后，从库还没同步完，就读到了旧数据

根因：① 从库同步延迟(可能数秒) ② 写后立即读走了从库 ③ 大事务导致binlog传输延迟

解决：关键写后读走主库、半同步复制、监控主从延迟

// 写后读强制走主库
async function createOrder(data) {
  await masterDb.query('INSERT INTO orders ...', data);
  // 关键：写完立即读，走主库
  return masterDb.query('SELECT * FROM orders WHERE id = ?', [id]);
}

// 普通读走从库
async function listOrders(userId) {
  return slaveDb.query('SELECT * FROM orders WHERE user_id = ?', [userId]);
}

场景：明明建了索引，但查询还是全表扫描

问题：联合索引 (a, b, c)，但查询条件只有 b = 1，索引未命中

根因：联合索引遵循最左前缀匹配原则，跳过最左列无法使用索引

解决：调整查询条件顺序或创建合适的索引

-- 联合索引 (name, age, city)
ALTER TABLE users ADD INDEX idx_name_age_city (name, age, city);

-- 能命中索引 ✓
WHERE name = '张三'
WHERE name = '张三' AND age = 25
WHERE name = '张三' AND age = 25 AND city = '北京'

-- 不能命中索引 ✗
WHERE age = 25              -- 跳过了name
WHERE city = '北京'          -- 跳过了name和age
WHERE age = 25 AND city = '北京'  -- 跳过了name

场景：运维在生产数据库执行 DELETE FROM users; 忘记加WHERE条件

问题：全表数据被删除，影响100万用户

根因：① 直接在生产库操作 ② 没有先SELECT确认 ③ 没有事务保护 ④ 没有开启安全模式

解决：① 立即停止写入，防止binlog覆盖 ② 使用binlog回放恢复数据 ③ 耗时约4小时

-- 安全操作流程
START TRANSACTION;
SELECT COUNT(*) FROM users WHERE status = 'inactive';  -- 先确认影响范围
DELETE FROM users WHERE status = 'inactive' LIMIT 1000; -- 分批删除
-- 确认无误后
COMMIT;
-- 如果有问题
ROLLBACK;

场景：一次性在一个事务里更新10万条数据，主从延迟飙升到5分钟

问题：大事务产生大量binlog，从库回放耗时过长

根因：① 事务粒度过大 ② 一次性操作太多数据 ③ 没有分批处理

解决：将大事务拆分成小批次，每批1000条，每批一个独立事务

// Spring Boot 批量更新 — 分批处理（MyBatis）
@Service
public class UserBatchService {
    @Autowired private UserMapper userMapper;

    private static final int BATCH_SIZE = 1000;

    @Transactional
    public void batchUpdate(List<Long> ids) {
        for (int i = 0; i < ids.size(); i += BATCH_SIZE) {
            List<Long> batch = ids.subList(i,
                Math.min(i + BATCH_SIZE, ids.size()));
            // 每批一个独立事务
            userMapper.batchUpdateStatus(batch, "active");
        }
    }
}

<!-- MyBatis XML -->
<update id="batchUpdateStatus">
    UPDATE users SET status = #{status}
    WHERE id IN
    <foreach collection="ids" item="id" open="(" separator="," close=")">
        #{id}
    </foreach>
</update>

场景：开发环境正常，部署到测试服务器就报错

问题：本地 JDK 17，服务器是 JDK 8，部分语法/API 不兼容

根因：① 开发和生产环境版本不一致 ② pom.xml 没锁定 JDK 版本 ③ 依赖锁文件不全

解决：使用 Docker 统一环境、在 pom.xml 中固定 JDK 版本、CI/CD 构建产物

# Dockerfile — 统一 Java 运行环境
FROM eclipse-temurin:17-jre-alpine
WORKDIR /app
COPY target/app.jar /app/app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-Xms512m", "-Xmx512m", "-jar", "/app/app.jar"]

<!-- pom.xml 锁定 JDK 版本 -->
<properties>
    <java.version>17</java.version>
    <maven.compiler.source>17</maven.compiler.source>
    <maven.compiler.target>17</maven.compiler.target>
</properties>

# Maven Wrapper — 统一 Maven 版本
# 项目根目录执行: mvn -N wrapper:wrapper -Dmaven=3.9.6
# 之后所有人用 ./mvnw 而非 mvn

场景：前端容器无法访问后端API容器，报Connection refused

问题：两个容器在不同的Docker网络中，互相无法访问

根因：① 没有使用docker-compose管理网络 ② 容器间用localhost互相访问(应该用容器名) ③ 端口映射配置错误

解决：使用docker-compose定义共享网络，服务间通过服务名通信

# docker-compose.yml
version: '3.8'
services:
  frontend:
    build: ./frontend
    ports: ["3000:3000"]
    depends_on: [backend]
  backend:
    build: ./backend
    ports: ["8080:8080"]
    environment:
      DB_HOST: db  # 用服务名，不是localhost
  db:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: secret

场景：部署到staging后，服务还在连开发环境的数据库

问题：数据库连接地址硬编码在代码里，没有区分环境

根因：① 配置硬编码 ② 没有多环境配置文件 ③ 构建时没有注入环境变量

解决：使用 Spring Profiles + 环境变量管理配置，不同环境加载不同 yml

# 错误：硬编码
spring:
  datasource:
    url: jdbc:mysql://192.168.1.100:3306/prod_db

# 正确：application.yml 用环境变量占位符
spring:
  datasource:
    url: jdbc:mysql://${DB_HOST:localhost}:3306/${DB_NAME:dev_db}
    username: ${DB_USER:root}
    password: ${DB_PASSWORD:}
  profiles:
    active: ${SPRING_PROFILES_ACTIVE:dev}

# application-dev.yml / application-prod.yml 分环境配置
# Docker运行时注入
docker run -e DB_HOST=staging-db -e SPRING_PROFILES_ACTIVE=staging app:latest

场景：用户突然无法访问网站，浏览器提示"连接不安全"

问题：SSL证书过期，Nginx拒绝HTTPS连接

根因：① 证书有效期1年，没有续期 ② 没有证书到期提醒 ③ 没有使用自动续期工具

解决：使用Let's Encrypt + certbot自动续期、添加证书到期监控告警

# Let's Encrypt 自动续期
# 安装 certbot
sudo apt install certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d example.com

# 自动续期（certbot会自动添加cron）
sudo certbot renew --dry-run

# 监控证书到期
# 在Prometheus中添加 ssl_certificate_expiry_seconds 指标

场景：服务突然无法写入数据，日志报"No space left on device"

问题：日志文件无限增长，占满了整个磁盘

根因：① 日志没有rotate策略 ② 临时文件未清理 ③ Docker镜像积累过多 ④ 没有磁盘监控

解决：配置logrotate、定期清理Docker镜像、添加磁盘使用率告警

# logrotate 配置示例
/var/log/app/*.log {
    daily
    rotate 30        # 保留30天
    compress         # 压缩旧日志
    missingok
    notifempty
    copytruncate
}

# 清理Docker
docker system prune -a --volumes  # 清理未使用的资源
docker image prune -a             # 清理未使用的镜像

场景：后端悄悄修改了接口返回的字段名，前端没更新，导致页面显示异常

问题：后端把 userName 改成了 nickname，前端代码还在用 userName，显示为 undefined

根因：① 接口变更没有通知前端 ② 没有接口版本管理 ③ 没有变更通知机制

解决：接口变更必须在群里通知、更新接口文档、兼容旧字段(过渡期两个都返回)、引入API版本号

场景：两人同时修改了同一个文件，merge时冲突解决不当，导致功能丢失

问题：解决冲突时选择了错误的代码段，另一个人的修改被丢弃

根因：① 长时间不合并导致冲突范围大 ② 不理解对方代码就解决冲突 ③ 解决后没有测试

解决：频繁合并(每天至少一次)、解决冲突后找对方确认、合并后必须通过全量测试

场景：新人入职，搭建开发环境花了两天，各种配置问题不断

问题：没有环境搭建文档，全靠口头传授。老员工离职后没人知道怎么配

根因：① 没有新人入职文档 ② 环境依赖靠经验积累 ③ 没有自动化初始化脚本

解决：编写详细的环境搭建文档、制作Docker开发环境、创建项目初始化脚本(make setup)

# Makefile — 一键初始化（Java + Vue 全栈）
setup:
	cp src/main/resources/application-dev.yml.example src/main/resources/application-dev.yml
	docker-compose up -d  # 启动 MySQL Redis 等依赖
	./mvnw clean install -DskipTests
	./mvnw flyway:migrate      # 数据库迁移
	cd frontend && npm install  # 前端依赖
	@echo "开发环境准备完毕！后端 ./mvnw spring-boot:run，前端 cd frontend && npm run dev"

场景：后端A修改了表结构(删了某列)，但后端B的代码还在用这个列，上线后报错

问题：数据库结构变更没有通知所有相关开发人员

根因：① 数据库变更没有评审流程 ② 两个需求并行开发互相不知道 ③ 没有数据库变更通知机制

解决：数据库变更必须走Migration、创建变更通知群、数据库结构变更是技术方案评审的必选项

场景：项目A需要 library@2.x，项目B需要 library@1.x，共用一个Monorepo

问题：升级公共依赖后一个项目正常运行，另一个项目各种报错

根因：① 共享依赖版本不兼容 ② 升级前没有全量测试 ③ 没有锁文件机制

解决：使用workspace的版本管理、升级前全量回归测试、引入Semantic Versioning

// Monorepo 依赖管理 (pnpm workspace)
// packages/shared/package.json
{
  "name": "@company/shared",
  "version": "1.2.0"  // 语义化版本
  // MAJOR.MINOR.PATCH
  // 不兼容变更.新功能.Bug修复
}

// 升级前：跑所有项目的测试
pnpm -r run test