什么是前后端分离？

这是一个很基础但很重要的概念，今天来说说。

以前是怎么做的

在前后端分离之前，网站是这样开发的：

后端不只是写逻辑，还要写页面。比如用JSP、PHP这些技术，把数据和HTML混在一起，服务器渲染好页面再发给浏览器。

这种方式叫服务端渲染，前后端代码混在一起。

什么是前后端分离

前后端分离就是：前端和后端各干各的，通过接口通信。

  • 后端只负责提供数据接口（API）
  • 前端只负责页面展示和交互
  • 前端通过Ajax调用后端接口获取数据

前端和后端是两个独立的项目，可以独立开发、独立部署。

为什么要前后端分离

1. 分工明确

前端专注于页面和交互，后端专注于业务逻辑和数据。各自深耕自己的领域。

2. 开发效率高

以前前端要等后端把页面模板写好才能开发。现在定好接口之后，前后端可以并行开发。

3. 方便维护

代码分开了，改前端不影响后端，改后端不影响前端。

4. 复用性好

同一套后端接口，可以给网页用，也可以给App用，也可以给小程序用。

怎么实现前后端分离

后端

提供RESTful API，返回JSON格式的数据。

@GetMapping("/users/{id}")
public User getUser(@PathVariable Long id) {
    return userService.getById(id);
}

前端

通过Ajax（或者axios这样的库）调用接口，获取数据后渲染页面。

axios.get('/api/users/1').then(res => {
    this.user = res.data
})

接口文档

前后端要约定好接口：什么地址、传什么参数、返回什么数据。

通常用Swagger或者Apifox这样的工具来管理接口文档。

现在的主流

现在绝大多数的互联网项目都是前后端分离的。

你学Java后端，写的就是API接口，不用管页面怎么展示。

你学前端，用的是Vue/React这些框架，调用后端接口获取数据。

如果你做的项目还是前后端不分离的（比如JSP），那可能是比较老的项目或者教程了。

最后

前后端分离是现代Web开发的标准做法。

理解这个概念，有助于你理解整个Web系统是怎么运作的。

上次更新: