从Java全栈到Vue3实战：一次真实面试的完整记录

最新推荐文章于 2025-11-11 15:38:28 发布

原创最新推荐文章于 2025-11-11 15:38:28 发布 · 960 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#Java #Vue3 #SpringBoot #MyBatis #Docker #JWT #前端开发

Java全栈面试指南大全专栏收录该内容

966 篇文章

订阅专栏

从Java全栈到Vue3实战：一次真实面试的完整记录

面试官与应聘者的初次接触

面试官（以下简称“面”）：你好，欢迎来到我们公司。我是今天的面试官，我叫李明，负责技术架构设计。你今天来是应聘Java全栈开发岗位，对吧？

应聘者（以下简称“应”）：是的，李老师好！很高兴能有机会和您交流。

面：很好，那我们就直接进入正题吧。先简单介绍一下你自己，比如你的学历、工作年限和目前的技术方向。

应：好的，我叫张浩然，28岁，本科学历，计算机相关专业。有5年左右的开发经验，主要集中在Java后端和前端Vue3的技术栈上。我之前在一家电商公司做全栈开发，主要负责系统重构和性能优化。

面：听起来不错，那你具体做过哪些项目呢？

应：我参与过一个电商平台的微服务改造项目，用的是Spring Boot + Spring Cloud，前后端分离，前端用的是Vue3 + TypeScript。另外还有一个基于React的后台管理系统，支持多角色权限控制。

面：嗯，挺全面的。那我们可以从后端开始聊起。你有没有使用过Spring Security？你是怎么实现权限控制的？

应：是的，我在电商项目中用到了Spring Security，主要是通过JWT来处理认证和授权。用户登录后会生成一个Token，后续请求都会携带这个Token，服务器会验证Token的有效性。

面：很好，那你能说一下JWT的结构吗？

应：JWT由三部分组成：Header、Payload和Signature。Header通常包含算法（如HS256）和类型；Payload存放一些声明（claims），比如用户ID、角色等；Signature则是将前两部分用密钥加密后的字符串。

面：没错，那你有没有考虑过Token的刷新机制？

应：有的。我们使用了一个refresh token来延长用户的登录状态。当access token过期时，可以通过refresh token换取新的access token，同时更新refresh token。

应：是的，我们用Redis来存储refresh token，设置一个合理的过期时间，避免被滥用。

面：这很合理，说明你对安全机制有一定的理解。接下来我们聊聊数据库相关的技术。你有没有使用过MyBatis或者JPA？

应：我主要用的是MyBatis，因为它更灵活，适合复杂的SQL查询。不过我们也用过JPA来做一些简单的CRUD操作。

面：那你能不能举个例子，说明你在MyBatis中是怎么进行分页查询的？

应：当然可以。我们一般会用PageHelper这个插件来实现分页。例如，我们有一个订单表，要查询用户最近的10条订单，就可以这样写：

// 使用PageHelper进行分页
PageHelper.startPage(pageNum, pageSize);
List<Order> orders = orderMapper.selectByUserId(userId);

面：很好，那你知道PageHelper的工作原理吗？

应：PageHelper其实是在执行SQL之前，动态地在SQL语句后面添加LIMIT语句，从而实现分页。它依赖于MyBatis的拦截器机制。

面：非常准确。那你觉得MyBatis和JPA相比有什么优缺点？

应：MyBatis更适合需要精细控制SQL的场景，比如复杂的查询或性能优化；而JPA更适合快速开发，特别是对于简单的CRUD操作，可以减少大量的重复代码。

面：说得很好。接下来我们聊聊前端部分。你有没有使用过Vue3？

应：是的，我之前在一个后台管理系统中使用了Vue3 + TypeScript，还结合了Element Plus组件库。

面：那你能说一下Vue3的响应式系统是如何工作的吗？

应：Vue3的响应式系统基于Proxy对象，而不是Vue2中的Object.defineProperty。Proxy可以拦截对象的操作，比如读取和设置属性，并且能够追踪依赖关系。

面：没错，那你知道Vue3中的Composition API和Options API的区别吗？

应：Options API是基于选项的对象方式，比如data、methods、computed等；而Composition API是基于函数的方式，把逻辑封装成函数，便于复用和测试。

应：是的，我们在项目中主要使用Composition API，因为它的灵活性更高，尤其是在大型项目中，更容易管理复杂的逻辑。

面：很好，那你能举一个具体的例子吗？

应：比如我们有一个用户信息页面，需要从接口获取数据并显示。我们可以使用useEffect和ref来管理状态和副作用：

<script setup>
import { ref, onMounted } from 'vue';
import { getUserInfo } from '@/api/user';

const userInfo = ref({});

onMounted(() => {
  getUserInfo().then(data => {
    userInfo.value = data;
  });
});
</script>

<template>
  <div>
    <h1>{{ userInfo.name }}</h1>
    <p>{{ userInfo.email }}</p>
  </div>
</template>

面：这个例子非常好，说明你对Vue3的Composition API掌握得不错。那你还用过其他前端框架吗？比如React或者Angular？

应：我有接触过React，但主要还是以Vue为主。在另一个项目中，我们尝试用React做一个轻量级的后台界面，但后来因为团队熟悉度问题，最终还是换回了Vue。

面：明白了。那你在前端开发中有没有遇到过性能优化的问题？

应：有，比如页面加载速度慢、渲染卡顿等问题。我们通过懒加载、代码分割、使用Vite构建工具等方式进行了优化。

面：那你能说一下Vite的优势吗？

应：Vite是一个现代前端构建工具，它利用ES模块原生支持，不需要打包，可以直接运行代码，大大提升了开发体验。特别是在大型项目中，启动速度更快。

面：没错，这确实是Vite的一大亮点。最后一个问题，你有没有使用过Docker或者Kubernetes？

应：有的，在电商项目中，我们使用Docker容器化部署服务，同时也用Kubernetes进行集群管理。

面：那你能说一下Docker的基本原理吗？

应：Docker基于Linux的cgroups和namespaces技术，实现了资源隔离和进程隔离。每个容器都是一个独立的运行环境，包含了应用及其依赖。

面：非常准确。看来你对这些技术都有一定的了解。感谢你今天的时间，我们会尽快通知你结果。

应：谢谢李老师，期待能加入贵公司。

技术点总结与代码示例

JWT认证机制

JWT（JSON Web Token）是一种用于身份验证和信息交换的标准，常用于分布式系统中。以下是JWT的典型结构和实现方式：

// 生成JWT
public String generateToken(User user) {
  return Jwts.builder()
      .setSubject(user.getUsername())
      .claim("roles", user.getRoles())
      .setExpiration(new Date(System.currentTimeMillis() + 86400000)) // 1天有效期
      .signWith(SignatureAlgorithm.HS512, "secret")
      .compact();
}

// 验证JWT
public boolean validateToken(String token) {
  try {
    Jwts.parser().setSigningKey("secret").parseClaimsJws(token);
    return true;
  } catch (Exception e) {
    return false;
  }
}

MyBatis分页查询

MyBatis是一个优秀的持久层框架，支持灵活的SQL编写和映射。以下是一个使用PageHelper进行分页查询的例子：

// 启动分页
PageHelper.startPage(1, 10);

// 查询用户订单
List<Order> orders = orderMapper.selectByUserId(userId);

// 获取分页结果
PageInfo<Order> pageInfo = new PageInfo<>(orders);

Vue3响应式系统

Vue3的响应式系统基于Proxy对象，提供了更高效的响应式机制。以下是一个简单的响应式示例：

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

Docker基础命令

Docker是一个容器化平台，可以简化应用的部署和管理。以下是一些常用的Docker命令：

# 构建镜像
docker build -t myapp:latest .

# 运行容器
docker run -d -p 8080:8080 myapp:latest

# 查看运行中的容器
docker ps

# 停止容器
docker stop <container_id>

# 删除容器
docker rm <container_id>