从Java全栈到Vue3实战：一次真实的面试对话

原创于 2025-11-26 08:51:27 发布 · 397 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Java #Spring Boot #Vue3 #Element Plus #RESTful API #JWT #Redis

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

974 篇文章

订阅专栏

从Java全栈到Vue3实战：一次真实的面试对话

面试官与应聘者的开场

面试官（李工）: 嗨，小张，欢迎来参加我们公司的面试。我是李工，负责后端和前端的技术架构设计。今天咱们就聊聊你的技术栈和项目经验。

应聘者（张明）: 李工好，感谢您给我这次机会。我叫张明，28岁，本科学历，有5年左右的Java全栈开发经验，主要做前后端分离的项目。

李工: 很好，那我们先从你熟悉的语言和框架开始吧。你用过哪些Java版本？

张明: 我主要用的是Java 11和Java 17，这两个版本在公司项目中应用比较多。JVM调优方面我也做过一些优化，比如内存分配和GC策略调整。

李工: 不错，说明你对底层机制有一定的理解。那你在工作中都使用过哪些Web框架呢？

张明: 主要是Spring Boot，还有Spring MVC。另外也接触过一些微服务相关的框架，比如Spring Cloud。

李工: 很好，Spring Boot确实是目前最主流的Java Web框架之一。那你有没有用过Vue或者React这样的前端框架？

张明: 有的，我之前做过一个电商系统，前端用的是Vue3和Element Plus，后来还尝试过React，但Vue3更符合我们的项目需求。

李工: 看来你对前端技术也有一定了解。那你能说说你在项目中是怎么实现前后端交互的吗？

张明: 通常我们会用RESTful API进行通信，后端提供接口，前端通过Axios或Fetch API调用。同时也会用Swagger来做接口文档。

李工: 很好，说明你对API设计和文档管理都有所关注。那你在项目中有没有处理过跨域问题？

张明: 有，我们在Spring Boot中配置了CORS，允许特定的域名访问，避免了浏览器的安全限制。

李工: 很专业。那你说说你是怎么处理用户认证和权限控制的？

张明: 我们使用的是JWT和Spring Security结合的方式，用户登录后生成Token，后续请求带上这个Token，服务器验证后再决定是否放行。

李工: 不错，这在微服务架构中非常常见。那你有没有用过消息队列？比如Kafka或者RabbitMQ？

张明: 有过接触，我们之前有一个订单系统，用到了RabbitMQ来处理异步任务，比如发送邮件和短信通知。

李工: 很好，说明你对系统的解耦和扩展性有一定的理解。那你在项目中有没有使用过缓存？比如Redis？

张明: 有，我们在商品详情页用了Redis缓存热点数据，提升性能的同时减少了数据库压力。

李工: 很不错，说明你对性能优化有一定经验。那你觉得在实际开发中，如何平衡代码质量和开发效率？

张明: 我认为代码质量是基础，所以我们会用SonarQube做静态检查，同时写单元测试确保功能正确。不过在紧急情况下，效率也很重要，需要根据实际情况权衡。

李工: 很好的思路。那最后一个问题，你有没有参与过CI/CD流程？

张明: 有，我们用的是GitLab CI，每次提交代码都会自动构建、运行测试，部署到测试环境，再由人工确认后上线。

李工: 很棒，说明你对整个开发流程有完整的理解。今天的面试就到这里，感谢你的参与，我们会尽快通知你结果。

技术点总结与代码示例

Java 11 + Spring Boot + Vue3 + Element Plus 实现一个简单的购物车功能

后端部分（Spring Boot）

@RestController
@RequestMapping("/api/cart")
public class CartController {

    @Autowired
    private CartService cartService;

    // 获取用户的购物车信息
    @GetMapping("/{userId}")
    public ResponseEntity<Cart> getCart(@PathVariable String userId) {
        return ResponseEntity.ok(cartService.getCart(userId));
    }

    // 添加商品到购物车
    @PostMapping("/add")
    public ResponseEntity<Cart> addProductToCart(@RequestBody AddProductRequest request) {
        return ResponseEntity.ok(cartService.addProduct(request.getUserId(), request.getProductId(), request.getQuantity()));
    }

    // 更新购物车中的商品数量
    @PutMapping("/update")
    public ResponseEntity<Cart> updateCartItem(@RequestBody UpdateCartItemRequest request) {
        return ResponseEntity.ok(cartService.updateCartItem(request.getId(), request.getQuantity()));
    }

    // 删除购物车中的商品
    @DeleteMapping("/delete/{itemId}")
    public ResponseEntity<Void> deleteCartItem(@PathVariable String itemId) {
        cartService.deleteCartItem(itemId);
        return ResponseEntity.noContent().build();
    }
}

前端部分（Vue3 + Element Plus）

<template>
  <div>
    <el-table :data="cartItems">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column label="数量">
        <template #default="{ row }">
          <el-input v-model.number="row.quantity" type="number" min="1"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="updateCartItem(row.id, row.quantity)">更新</el-button>
          <el-button @click="deleteCartItem(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

const cartItems = ref([]);

// 获取购物车数据
const fetchCart = async () => {
  const response = await axios.get('/api/cart/123');
  cartItems.value = response.data.items;
};

// 添加商品到购物车
const addProductToCart = async (productId, quantity) => {
  await axios.post('/api/cart/add', { userId: '123', productId, quantity });
  await fetchCart();
};

// 更新购物车商品数量
const updateCartItem = async (itemId, quantity) => {
  await axios.put('/api/cart/update', { id: itemId, quantity });
  await fetchCart();
};

// 删除购物车商品
const deleteCartItem = async (itemId) => {
  await axios.delete(`/api/cart/delete/${itemId}`);
  await fetchCart();
};

onMounted(() => {
  fetchCart();
});
</script>