前后端分离模式介绍

简介: 前端与后端分别独立开发,独立部署服务器端。前后端工程师需要约定交互接口,实现同步开发。前端通过接口来调用调用后端的API,前端只需要关注页面的样式与动态数据的解析和渲染,而后端专注于具体业务逻辑。

前后端不分离的架构叫什么 前后端不分离的坏处_前端

用户每打开一个网页本质上是向服务器发送一个请求(url链接,可以存储数据与参数),服务器接受到请求后悔向前端返回一个页面,浏览器接收之后将页面内容显示。

前后端不分离: 用户在客户端每发一个请求,服务器端直接返回一个完整的 html 网页——html 网页在后端完成直接返回。前后端分离: 用户通过客户端发送请求,服务器将数据传递给用户浏览器,浏览器端动态用js填充渲染完整的 html 网页——html 网页在前端用 js 填充渲染。

前后端不分离的架构叫什么 前后端不分离的坏处_javascript_02

客户端第一次 url 请求,后端将整个前端模板发送给客户端(此时不发送数据),然后用到哪些数据再去跟服务器请求。之后每次前端向服务器发送请求,后端只讲数据发送给前端然后前端接收到数据之后在客户端浏览器中动态将数据拼接到模板中(js 代码实现)。

优势:

1、 同一个后端可以支持多个端口,后端实现数据,不同前端显示不同的界面(Web、App 等)。不同前端返回的数据相同,仅仅展示格式不同。
2、按需加载,动态无刷新渲染。无需一开始加载首页便加载网站的所有的资源,服务器也不再需要解析前端页面,在页面交互及用户体验上有所提升。
3、分工更加明确,提高工作效率。前端只关注前端的事,后台只关心后台的活,两者开发可以同时进行,页面的增加和路由的修改更加灵活。
4、实现高内聚低耦合,减少后端(应用)服务器的并发/负载压力。

缺点:

1、首次渲染时间较长。页面一开始需要加载的东西会非常多,所以会导致首屏渲染时间很长。首屏渲染后无刷新更新,用户体验相对较好。
2、前端也必须关注业务逻辑。前端不再只考虑视觉交互的部分,也需要考虑controller层。这就要求前端必须对公司的业务流程有深入的了解,才能准确的写出显示逻辑。