代码编织梦想

在这里插入图片描述

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。

这个步骤是系统架构从猿进化成人的必经之路。

核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

前后端分离与前后端不分离的区别

前后端不分离

在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。

这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口。

请求的数据交互如下图:

前后端分离

在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果。至于前端用户看到什么效果,从后端请求的数据如何加载到前端中,都由前端自己决定,网页有网页的处理方式,App有App的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。

在前后端分离的应用模式中 ,前端与后端的耦合度相对较低。
在前后端分离的应用模式中,我们通常将后端开发的每个视图都称为一个接口,或者API,前端通过访问接口来对数据进行增删改查。
对应的数据交互如下图 :

在这里插入图片描述

前后端分离架构概述

1.未分离时代(各种耦合)

早期主要使用MVC框架,Jsp+Servlet的结构图如下:

[575157)]

大致就是所有的请求都被发送给作为控制器的Servlet,它接受请求,并根据请求信息将它们分发给适当的JSP来响应。同时,Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JavaBeans中的数据。需要说明的是,这个View还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎,可以使得开发过程中的人员分工更加明确,还能提高开发效率。

8575292)]

这两种共同的缺点:

1、前端无法单独调试,开发效率低;

2、 前端不可避免会遇到后台代码,

这种方式耦合性太强。那么,就算你用了freemarker等模板引擎,不能写Java代码。那前端也不可避免的要去重新学习该模板引擎的模板语法,无谓增加了前端的学习成本。正如我们后端开发不想写前端一样,你想想如果你的后台代码里嵌入前端代码,你是什么感受?因此,这种方式十分不妥。

2.半分离时代

前后端半分离,前端负责开发页面,通过接口(Ajax)获取数据,采用Dom操作对页面进行数据绑定,最终是由前端把页面渲染出来。这也就是Ajax与SPA应用(单页应用)结合的方式,其结构图如下:

在这里插入图片描述

我一直以为我学到了前后端分离的精髓,没想到是半分离?

步骤如下:

(1)浏览器请求,CDN返回HTML页面;

(2)HTML中的JS代码以Ajax方式请求后台的Restful接口;

(3)接口返回Json数据,页面解析Json数据,通过Dom操作渲染页面;

后端提供的都是以JSON为数据格式的API接口供Native端使用,同样提供给WEB的也是JSON格式的API接口。
那么意味着WEB工作流程是:

1、打开web,加载基本资源,如CSS,JS等;

2、发起一个Ajax请求再到服务端请求数据,同时展示loading;

3、得到json格式的数据后再根据逻辑选择模板渲染出DOM字符串;

4、将DOM字符串插入页面中web view渲染出DOM结构;

这些步骤都由用户所使用的设备中逐步执行,也就是说用户的设备性能与APP的运行速度联系的更紧换句话说就是如果用户的设备很低端,那么APP打开页面的速度会越慢。

为什么说是半分离的?因为不是所有页面都是单页面应用,在多页面应用的情况下,前端因为没有掌握controller层,前端需要跟后端讨论,我们这个页面是要同步输出呢,还是异步Json渲染呢?而且,即使在这一时期,通常也是一个工程师搞定前后端所有工作。因此,在这一阶段,只能算半分离。

首先,这种方式的优点是很明显的。前端不会嵌入任何后台代码,前端专注于HTML、CSS、JS的开发,不依赖于后端。自己还能够模拟Json数据来渲染页面。发现Bug,也能迅速定位出是谁的问题。
然而,在这种架构下,还是存在明显的弊端的。最明显的有如下几点:

1)JS存在大量冗余,在业务复杂的情况下,页面的渲染部分的代码,非常复杂;

2)在Json返回的数据量比较大的情况下,渲染的十分缓慢,会出现页面卡顿的情况;

3)SEO( Search Engine Optimization,即搜索引擎优化)非常不方便,由于搜索引擎的爬虫无法爬下JS异步渲染的数据,导致这样的页面,SEO会存在一定的问题;

4)资源消耗严重,在业务复杂的情况下,一个页面可能要发起多次HTTP请求才能将页面渲染完毕。可能有人不服,觉得PC端建立多次HTTP请求也没啥。那你考虑过移动端么,知道移动端建立一次HTTP请求需要消耗多少资源么?

正是因为如上缺点,我们才亟需真正的前后端分离架构。

分离时代

大家一致认同的前后端分离的例子就是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。从某种意义上来说,SPA确实做到了前后端分离,但这种方式存在两个问题:

  • WEB服务中,SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式,SPA不能作为一种通用的解决方案;

  • 现阶段的SPA开发模式,接口通常是按照展现逻辑来提供的,而且为了提高效率我们也需要后端帮我们处理一些展现逻辑,这就意味着后端还是涉足了view层的工作,不是真正的前后端分离。

SPA式的前后端分离,从物理层做区分(认为只要是客户端的就是前端,服务器端就是后端)这种分法已经无法满足前后端分离的需求,我们认为从职责上划分才能满足目前的使用场景:

  • 前端负责view和controller层
  • 后端只负责model层,业务处理与数据持久化等

controller层与view层对于目前的后端开发来说,只是很边缘的一层,目前的java更适合做持久层、model层的业务。
在前后端彻底分离这一时期,前端的范围被扩展,controller层也被认为属于前端的一部分。在这一时期:

  • 前端:负责View和Controller层。
  • 后端:只负责Model层,业务/数据处理等。
    可是服务端人员对前端HTML结构不熟悉,前端也不懂后台代码呀,controller层如何实现呢?这就是node.js的妙用了,node.js适合运用在高并发、I/O密集、少量业务逻辑的场景。最重要的一点是,前端不用再学一门其他的语言了,对前端来说,上手度大大提高。

在这里插入图片描述

看完这张图你就明白了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRJR3RC5-1598497713183)(https://imgkr2.cn-bj.ufileos.com/05fd78ff-a9ee-4211-9da0-e32306f6283c.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=BSczWxTuPbTIDiHCpL0jXbEHT8g%253D&Expires=1598576264)]

总结

从经典的JSP+Servlet+JavaBean的MVC时代,到SSM(Spring + SpringMVC + Mybatis)和SSH(Spring + Struts + Hibernate)的Java 框架时代,再到前端框架(KnockoutJS、AngularJS、vueJS、ReactJS)为主的MV*时代,然后是Nodejs引领的全栈时代,技术和架构一直都在进步。虽然“基于NodeJS的全栈式开发”模式很让人兴奋,但是把基于Node的全栈开发变成一个稳定,让大家都能接受的东西还有很多路要走。创新之路不会止步,无论是前后端分离模式还是其他模式,都是为了更方便得解决需求,但它们都只是一个“中转站”。前端项目与后端项目是两个项目,放在两个不同的服务器,需要独立部署,两个不同的工程,两个不同的代码库,不同的开发人员。前端只需要关注页面的样式与动态数据的解析及渲染,而后端专注于具体业务逻辑。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_43688587/article/details/108255779

Spring - 在一般 JAVA 类中引入被 Spring IOC 容器管理的 Bean-爱代码爱编程

本文主要简述如何在一般的 JAVA 类 (没有被 Spring IOC 容器管理的) 中获取被容器中的 Bean. 虽然测试用例是用 Spring Boot Test 跑的, 但是特性本文介绍的特性主体是 Spring 的, 所以归类到 Spring 专栏中… 如果什么都不做的话, 我们在一般 JAVA 类中注入一个容器 Bean 是无效的,

feign远程调用MultipartFile文件上传格式问题-爱代码爱编程

feign远程调用MultipartFile文件上传格式问题 1. Current request is not a multipart request feign远程调用文件上传时常用的接口写法会报出Current request is not a multipart request错误 解决方法需要在post请求中添加consumes = Med

算法——LeetCode17. 电话号码的字母组合-爱代码爱编程

17. 电话号码的字母组合 原题链接 题目: 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。 给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。 示例: 输入: 输出:["ad", "ae", "af", "bd", "be", "bf", "cd", "ce", "cf"]. 说明: 尽管上面的答

Java-API常见的练习题Demo02-爱代码爱编程

Java-API常见的练习题Demo02 1. 定义私有属性: String name; int age; String gender; int salary; Date hiredate;//入职时间 定义构造方法,以及属性get,set方法.定义toString方法,格式如:张三,25,男,5000,2006-02-15 定义equal

力扣——70.爬楼梯(简单难度)——学会将实例化的问题剖析为规律性问题-爱代码爱编程

力扣——70.爬楼梯 一、算法目录合集1.地址2.说明二、题目说明1.题干2.原地址三、实现步骤1.思路分析1.1.分析问题1.2.转化问题1.3.具体步骤① 特殊情况分析② 常规分析2.代码实现2.1 方法代码2.2 测试部分代码2.3 耗用资源情况四、官方题解1.原地址2.方法一——动态规划思路分析代码实现复杂度3.方法二——矩阵快速幂思路分析

Java枚举类详解-爱代码爱编程

枚举类的作用:程序执行成功但是存在风险,程序中的问题要是能在编译中解决绝不会放在运行期间解决,所以引入枚举类型定义一个存在风险的方法package packagetest.enumtest; /* 需求:定义一个方法,计算两个int的商 如果计算成功返回1,如果失败返回0 程序执行成功但是存在风险,程序中的问题要是能在编译中解决绝不会放在运行期间解决,所

JNPF低代码开发平台——SpringCloud微服务解决框架-爱代码爱编程

JNPF低代码开发平台总体介绍 JNPF低代码开发平台是由引迈信息完全自主研发的专业的前后端分离java低代码快速开发平台, JNPF含盖SpringBoot+SpringCloud的所有必要的核心功能,JNPF的目标是更轻量级、更快速、更全面、更低代码量、更易于学习和使用的前后端分离的开发平台,可以实现无代码快速开发服务。 JNPF通过建立数据模型和

前后端分离,接口调试利器--Swagger-爱代码爱编程

目录 一、背景 二、Swagger使用介绍 三、Swagger环境搭建 一、背景 前后端分离时,后端人员往往是要自己独立开发出一个能使用的接口,此时,类似于postman、Swagger、idea插件等等这些api工具就用的上了。当然这篇文章主要介绍Swagger搭建和使用。 环境:SpringBoot + Swagger2 二、Sw

前后端分离——后端设计接口的几个点总结-爱代码爱编程

写在前面 前后端分离开发的模式已经是项目开发的主流,它相比于传统的开发(例如jsp+servlet、asp+.net、thymeleaf等)可以使开发者可以更专注自己的业务,这里先不讨论性能的问题,传统开发前后端往往耦合较大,开发过程前后端相互牵制,或者说后端几乎把前端的事情都做了,这种开发模式持续了很长时间,直到有一天ajax的出现,才打破了这种开

SpringBoot + Vue (axios)实现 Restful API 交互-爱代码爱编程

SpringBoot + Vue 实现 RestFul API 交互 一、SpringBoot 编写后端 API1.1 编写一个最简单 API 服务1.2 常见接收参数的方式二、使用 axios 完成 ajax 请求2.1 axios 基本配置2.2 axios 实例2.2.1 GET 请求一、不带参数的 get 请求二、带参数的 get 请求三、

SpringBoot+vue+JPA实现前后端分离简单流程(后端)-爱代码爱编程

一、准备数据源 在mysql创建下表university: 二、后端 1、持久化  (1)创建实体类 因为持久层采用的JPA,所以注意类名和表名对应,类属性和表属性对应。如下UniversityList: @Data @Entity public class University { @Id private String u

当心这些“坑”!阿里云服务器部署前后端分离项目-爱代码爱编程

前言 Hi,大家好,我是麦叔,今天给大家带来使用阿里云服务器部署前后端分离项目的实战。最近买了个阿里云服务器和域名,买来之后就扔在哪里放着了(想不通当时为什么买,哈哈哈)!刚好赶上公司新项目上线,老大让我部署前后端分离项目,就用他来搞一场演习部署吧! 阅读完本文章,你会掌握利用nginx做代理和跨域处理,如果在两台服务器部署前后端分离项目。如果以后