Java全栈开发面试纪实：Spring WebFlux+Vue3在智慧城市平台的高并发实践

姓名：杜梓铭
年龄：31岁
学历：硕士
工作年限：7年
核心职责：

负责智慧城市平台后端高并发架构设计与开发（Spring WebFlux、Reactive、Redis、Kafka）。
参与Vue3+TypeScript前端项目开发与性能优化。
推动消息队列与缓存优化，提升系统并发能力。

工作成果：

主导开发“城市事件处理系统”，实现高并发事件采集与处理，系统峰值并发能力提升至12万QPS。
优化前端架构，提升页面响应速度与用户体验。

面试实录

第一轮：项目与基础能力

面试官： 杜梓铭，介绍下你在智慧城市平台的主要工作内容和技术栈。

杜梓铭： 主要负责后端Spring WebFlux高并发开发，数据库用PostgreSQL+Redis，前端用Vue3+TypeScript，消息队列用Kafka。

面试官： 城市事件处理系统中遇到的最大技术难题是什么？

杜梓铭： 最大难题是高并发下的事件一致性与实时处理。我们通过WebFlux响应式编程和Kafka异步处理事件，保证数据一致。

面试官： 前后端联调时遇到哪些问题？

杜梓铭： 主要是接口变更频繁和数据格式不一致。我们用Swagger规范接口，前端用TypeScript类型校验。

面试官： 接口安全如何保证？

杜梓铭： 用Spring Security+JWT做鉴权，部分接口加了限流。

面试官： Vue3的核心优势是什么？

杜梓铭： Composition API提升代码复用，响应式系统更高效。

第二轮：高并发与消息队列

面试官： 高并发架构设计思路？

杜梓铭： 用WebFlux响应式非阻塞处理请求，Kafka做异步消息削峰填谷。

面试官： 服务间通信？

杜梓铭： 用OpenFeign做RPC，Kafka做异步消息。

面试官： 服务注册与发现？

杜梓铭： 用Spring Cloud Eureka。

面试官： Kafka可靠性如何保证？

杜梓铭： 开启ACK机制，生产端和消费端做幂等处理。

面试官： Redis和本地缓存如何协同？

杜梓铭： 热点数据先查本地Caffeine缓存，未命中再查Redis。

第三轮：数据库与性能优化

面试官： 数据库表设计关键点？

杜梓铭： 分库分表，核心字段加索引，历史数据归档。

面试官： 高并发下数据库性能优化？

杜梓铭： 读多写少用Redis缓存，批量写入减少锁竞争。

面试官： ORM用什么？

杜梓铭： 主要用MyBatis，部分场景用JPA。

面试官： 数据一致性如何保证？

杜梓铭： 本地消息表+事务消息，保证分布式事务一致性。

面试官： Redis持久化机制？

杜梓铭： 支持RDB和AOF，RDB适合全量备份，AOF适合高可靠性。

第四轮：前端与用户体验

面试官： 为什么选择Vue3+TypeScript？

杜梓铭： Composition API提升开发效率，TypeScript类型安全。

面试官： 用过哪些UI组件库？

杜梓铭： 主要用Element Plus和Naive UI。

面试官： 前端权限控制？

杜梓铭： 路由守卫+后端接口权限校验，前端根据角色动态渲染菜单。

面试官： 前端性能优化措施？

杜梓铭： 路由懒加载、组件按需引入、CDN加速。

面试官： 前后端联调？

杜梓铭： 用Swagger生成接口文档，前端用Mock服务模拟数据。

第五轮：测试、运维与综合能力

面试官： 自动化测试？

杜梓铭： 后端用JUnit5+Mockito，前端用Vitest+Vue Testing Library。

面试官： 持续集成与部署？

杜梓铭： 用Jenkins+Docker，自动构建镜像并部署到Kubernetes。

面试官： 日志与监控？

杜梓铭： 后端用Logback+ELK，监控用Prometheus+Grafana。

面试官： 云原生理解？

杜梓铭： 云原生强调弹性伸缩、自动化运维，微服务、容器、DevOps是核心。

面试官： 技术盲点怎么处理？

杜梓铭： 查官方文档和社区，实在不懂就请教同事。

面试官： 今天面试到这里，回去等通知吧！

代码案例

Spring WebFlux实现事件处理（含注释）

// EventService.java
@Service
public class EventService {
    // 处理城市事件请求
    public Mono<EventResult> processEvent(EventRequest request) {
        // 业务逻辑处理
        return Mono.just(new EventResult("success"));
    }
}

Vue3+TypeScript实现事件列表（含注释）

<template>
  <el-table :data="events">
    <el-table-column prop="id" label="事件ID" />
    <el-table-column prop="type" label="类型" />
    <el-table-column prop="status" label="状态" />
  </el-table>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
interface Event {
  id: number;
  type: string;
  status: string;
}
const events = ref<Event[]>([]);
onMounted(async () => {
  const res = await axios.get('/api/events');
  events.value = res.data;
});
</script>