前后端分离：Vue 和 Java 之间隔着什么

我入职第一家公司的时候，接手的第一个项目是 JSP 加 jQuery。一个页面里塞着 Java 代码片段，SQL 字符串拼在 Service 里，前端想改个按钮样式，得等后端重启 Tomcat。我当时以为这就是 Web 开发的全貌。

后来需求一改再改，前端说接口字段对不上，后端说页面没跟着改。两边各自改各自的，联调那天永远在互相等。谁都没写错，只是谁都不知道对方改了什么。

换到 Vue 加 Spring Boot 之后，我才想明白，之前的问题不是谁写得不好，而是两样东西长在一起了。

一、隔着的到底是什么

不是技术，是契约。

前后端一旦分开，代码就变成两套：两套构建、两套部署、两套发布节奏、两拨人。它们之间能对话的只有 HTTP 加 JSON，剩下的一切，都得事先说好。字段叫什么、日期给时间戳还是字符串、空值给 null 还是空串、分页的总数放在哪一层，这些不是实现细节，是协议。

分开之后有个直接好处：前端打包出来的静态文件扔到 Nginx 就行，后端接口挂在另一个端口，两边谁也不会阻塞谁的发布。以前 JSP 项目里，前端改一个样式都要走一遍完整的构建和部署，一次十分钟，一天改三次就没了半小时。

这句话我一开始没当回事。

真正撞上去是联调那天。后端把创建时间返回成了时间戳，前端按字符串解析，列表里所有的日期全变成 1970 年；分页的 total 放在 data 的上一层，前端照着老接口写，取出来永远是 undefined。查了半天，最后发现是两个人对同一个 JSON 的理解不一样。

这些都不是 bug，是没说清楚。

二、先把契约定下来

我现在写接口之前会先看三样东西：字段命名风格、空值怎么给、分页结构长什么样。定下来之后不再改，谁改谁负责通知另一边。接口定了也别在实现里偷偷加字段，加了要同步改文档，不然前端永远不知道。

Java 侧统一返回一个包装对象，前端只认这个壳。

@Data
public class Result<T> {
    private Integer code;
    private String message;
    private T data;
}

前端 axios 封装里只做一件事：把壳剥掉，code 不对就抛。

axios.interceptors.response.use((res) => {
  const body = res.data
  if (body.code !== 0) {
    return Promise.reject(new Error(body.message))
  }
  return body.data
})

字段名统一用驼峰，靠 Jackson 的 PropertyNamingStrategy 一次配好，别在字段上一个个写 JsonProperty。这坑我踩过：老接口返回 user_name，新接口返回 userName，同一个页面里写了两种取值方式，上线前才发现。

三、跨域：本地最先撞上的墙

本地开发我把 axios 的 baseURL 直接指到后端地址，浏览器立刻报了 CORS。当时第一反应是后端没配好，让同事加个注解。

@CrossOrigin(origins = "*")

加完还是不行。带 cookie 的请求，通配符来源加上 credentials 会直接被拒。这是浏览器的规矩，不是谁写错了，调了一下午才想明白。

后来改成 Vite 代理，本地所有请求走同一个源。

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

后端只需要在正式环境的网关上处理跨域。本地开发别绕浏览器这道墙，绕开它就行。

四、文档：比写代码更花时间

分离之后我花在接口文档上的时间比写业务代码还多。一个字段改动，后端改了实体类，前端拿到的还是旧文档，等联调时才发现对不上。

我后来用 knife4j 挂在项目里，接口签名变了文档自动跟着变。但有个前提：发布前必须重新构建一次，否则前端看到的还是上一次的快照，这个前提我在新人交接时说漏过一次，两个人白联调了一下午。

前端侧我用 Apifox 的 Mock，不等后端接口就能先把页面跑通。这个习惯救过我几次，有次后端排期压后了两天，前端页面已经写完，联调当天只改了三个字段。

五、分离不是各干各的

说实话，分开之后协作的负担没有消失，只是换了形态。

以前是页面和逻辑缠在一起，改一处牵一片；现在是两个系统之间靠一份约定连接，改一处要通知另一边。前者慢在改动本身，后者慢在沟通，而沟通这件事没有工具能替你省。

我的建议是三条：写接口之前先把契约定死；谁改接口谁负责同步给对方；本地开发一律走代理，别直连。我带新人的时候会先让他在本地把代理配通，再谈写页面，代理配不通，后面全是坑。

这三点做到了，前后端分离就是省事。做不到，你会有两个团队互相等，还多了一堵叫跨域的墙。