热词科普--关于前后端分离的易懂解析

2023-11-08

目录

一、什么是前后端分离?

二、为什么要前后端分离?

未分离时期:

 工作方式:

半分离时期:

三、前后端分离的优点

四、前后端分离的缺点

五、什么场景下可以考虑前后端分离

六、基于Vue + Springboot的前后端分离

Spring Boot 简述

Vue 简述

项目案例


一、什么是前后端分离?

  前后端分离是一种架构模式,说通俗点就是后端项目里面看不到页面(JSP|HTML),后端给前端提供接口,前端调用后端提供的REST风格接口就行,前端专注写页面(html | jsp)和渲染(JS|CSS|各种前端框架);后端专注写代码就行。前后端分离的核心:后台提供服务器里的数据,前端负责显示

前后端分离的"前"特指浏览器端(或客户端)。

Java服务器端初学者最容易引起误解的一个概念就是: JSP前端技术

JSP一定一定一定要知道全称:Java Server Page。是运行在服务器端JVM之上Servlet容器里的,只是执行的结果是HTML,响应给浏览器。

Java EE先有的Servlet,那时候已经有了ASP(同样要知道是Active Server Page的意思)。

由于要在Servlet里面拼大量的HTML代码,所以Java规范学习了ASP,提出JSPServlet是Java代码里混入HTML,JSP是HTML代码里混入Java。

浏览器根本不关心服务器端是JSP、ASP、PHP,或者还是原始的Servlet,或是静态服务器上的HTML,只要返回的是合法的HTML就可以。

二、为什么要前后端分离?

未分离时期:

 工作方式:

 明显可以看出:

  • 前端在开发过程中严重依赖后端,在后端没有完成的情况下,前端根本无法干活,也无法单独调试

前端:"我这里没问题啊。后端,你那里正常么?"
后端:"我这里不正常啊。要不你过来看一下吧?"
前端:"一时我也看不出问题,我也没环境,怎么办?"
后端:"你没环境,坐我这边调吧。"
然后,前端就满脸不爽的在你那调代码了。 

  •  前端不可避免会遇到后台代码
<body>
<%
request.setCharacterEncoding("utf-8")
String name=request.getParameter("username");
out.print(name);
%>
</body>

   身为前端,在页面里看到了后台代码,内心os:**,裂开了.... 这种方式耦合性太强。那么,就算你用了freemarker等模板引擎,不能写JAVA代码。那前端也不可避免的要去重新学习该模板引擎的模板语法,无谓增加了前端的学习成本。

半分离时期:

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

 步骤如下:
  (1)浏览器请求,cdn返回html页面
  (2)html中的js代码以ajax方式请求后台的restful接口
  (3)接口返回json数据,页面解析json数据,通过dom操作渲染页面

优缺点:

  首先,这种方式的优点是很明显的。前端不会嵌入任何后台代码,前端专注于html、css、js的开发,不依赖于后端。自己还能够模拟json数据来渲染页面。发现bug,也能迅速定位出是谁的问题,不会出现互相推脱的现象。
然而,在这种架构下,还是存在明显的弊端的。最明显的有如下几点:
(1)js存在大量冗余,在业务复杂的情况下,页面的渲染部分的代码,非常复杂。
(2)在json返回的数据比较大的情况下,渲染的十分缓慢,会出现页面卡顿的情况
(3)seo非常不方便,由于搜索引擎的爬虫无法爬下js异步渲染的数据,导致这样的页面,SEO会存在一定的问题。
(4)资源消耗严重,在业务复杂的情况下,一个页面可能要发起多次http请求才能将页面渲染完毕。可能有人不服,觉得pc端建立多次http请求也没啥。那你考虑过移动端么,知道移动端建立一次http请求需要消耗多少资源么?
正是因为如上缺点,真正的前后端分离架构诞生了

三、前后端分离的优点

1、前端静态化

  • 前端有且仅有静态内容,再明确些,只有HTML/CSS/JS
  • 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。
  • 前端内容的运行环境和引擎完全基于浏览器本身

2、后端数据化

  • 后端可以用任何语言,技术和平台实现。
  • 遵循一个原则:只提供数据,不提供任何和界面表现有关的内容。
  • 统一API接口,接口完全可以共用。
  • 提供的数据可以用于任何其他客户端(如IOS,安卓,pc,微信小程序等)
  • 通过一些代码重构,就可以大量复用接口,提升效率

3、平台无关化

  • 前端三大技术(HTML/CSS/JS)本身就是平台无关的。
  • 后台链接部分的本质是实现合适的RESTful接口和交互JSON数据,就这两者而言,任何技术和平台都可以实现。
  • 前后端交给不同的人来编写,明确划分职责,发现bug的时候可以快速定位。
  • vue.js等框架编写前端的时候,会比之前写Jquery更简单快捷。

4、架构分离化

  • 前端架构完全基于HTML/CSS/JS的发展和js框架的演变,由于前台是纯静态内容,大型架构方面可以考虑向CDN方向发展。
  • 后端架构几乎可以基于任何语言和平台的任何解决方案,大型架构方面,RESTful Api可以考虑负载均衡,而数据,业务实现等可以考虑数据库优化和分布式。
  • 在大并发情况下,可以同时水平扩展前后端服务器。
  • 即使后端服务器暂时超时或者宕机,前端页面也会正常访问,只是数据刷新不出来而已,当然现在一般是服务器集群,少有出现这种现象

四、前后端分离的缺点

  • 前后端学习门槛增加
  • 数据依赖导致文档重要性增加
  • 前端工作量加大
  • SEO的难度加大
  • 后端开发模式迁移增加成本

五、什么场景下可以考虑前后端分离

  • 页面布局复杂,使用了主题和样式。
  • 需要有较高的页面渲染效果
  • 前端页面中包含复杂业务逻辑
  • 页面需要渲染的数据量较大

六、基于Vue + Springboot的前后端分离

静态资源和服务(实现接口的业务逻辑),在开发阶段就分离开发,而部署阶段分离部署在不同服务器上,算是严格意义上的前后端分离。

Spring Boot 简述

  Spring 作为一个软件设计层面的框架,在 Java 企业级开发中应用非常广泛,但是 Spring 框架的配置非常繁琐,且大多是重复性的工作,Spring Boot 的诞生就解决了这一问题,通过 Spring Boot 可以快速搭建一个基于 Spring 的 Java 应用程序。同时 Spring Boot 对常用的第三方库提供了配置方案,可以很好地与 Spring 进行整合,如 MyBatis、Spring Data JPA 等,可以一键式搭建功能完备的 Java 企业级应用程序。

Vue 简述

  Vue.js 是一套响应式的前端开发库,其他前端开发库也有很多,如 jQuery、ExtJS、Angular 等,Vue 自问世以来关注度不断提高,当前市场中,Vue 是非常流行的 JavaScript 技术开发框架之一,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

  Spring Boot 和 Vue 都是各自领域最热门的技术栈,把二者整合起来进行前后端分离的开发是很好的选择,非常方便。

项目案例

  下面来看一个实际案例,分别创建 Spring Boot 工程和 Vue 工程。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

热词科普--关于前后端分离的易懂解析 的相关文章

随机推荐

  • vue的el-form-item标签的label展示名称左右对齐

    vue的el form item是下面的样子
  • 报错Failed to load resource: net::ERR_FILE_NOT_FOUND--浏览器设置跨域

    浏览器报错Failed to load resource net ERR FILE NOT FOUND代表此应用运行需要做跨域 推荐使用火狐浏览器做跨域 之后也用火狐访问 在地址栏输入 about config 点击接受风险并继续 输入se
  • xxl-rpc remoting error(connect timed out), for url : http://172.26.112.1:9999/run

    查看你部署的xxl job admin程序是否部署在外网的 如果是在外网 外网访问不到本地局域网主机 可以使用内网穿透 然后在执行器那里不使用自动获取地址 手动把穿透的地址填进去
  • 1477. 找两个和为目标值且不重叠的子数组

    1477 找两个和为目标值且不重叠的子数组 题目描述 样例1 样例2 样例3 样例4 示例 5 提示 解题思路 代码实现 题目描述 给你一个整数数组 arr 和一个整数值 target 请你在 arr 中找 两个互不重叠的子数组 且它们的和
  • 智慧疫情防控平台(图形化编程mind+)

    本文系湛江市第十七中学星火创客团队及岭南师范学院物联网俱乐部原创部分参赛项目 转载请保留声明 前言 本文章将教会大家如何使用图形化编程制作简易的智慧疫情防控平台 这个项目非常适合于低年级的学生去实践 锻炼自己的逻辑思维和积累一定的项目开发经
  • 嘉兴市人才网即时招聘栏目Ajax动态翻页爬虫练习

    声明 代码仅供技术学习交流 不作其他用途 即时招聘 https www jxrsrc com Index MoreInfo aspx TypeID 34 打开页面后拉到底下点下一页翻页发现浏览器中的地址没有发生变化 分析后这个网站是用ASP
  • 区块链技术在食品供应链领域的应用

    现如今 食品供应链的复杂程度变得越来越高 由此对于食品生产者 供应商和零售店 很难确保整个供应链上产品的真实性 食品安全的问题包含跨供应链认证和食品问题的普及 都是因为缺乏数据和可追踪性 导致事情更加不好 如果需要查询真正的原因 现在则需要
  • MyBatis映射关系

    目录 数据库的配置 一 映射关系一对一 1 映射关系 1 对 1 基本介绍 2 映射关系 1 对 1 映射方式 3 应用实例 3 1方式一 方式二 重点解析 注解的方式实现 注意事项和细节 二 映射关系多对一 1 基本介绍 2 注意细节 3
  • APAC 2013 部分题解

    目录 A The Alphabet Sticker C Increasing Shortest Path D Cup of Cowards E Balloons Colors F NASSA s Robot G The Stones Gam
  • 计算机视觉与深度学习-卷积神经网络-纹理表示&卷积神经网络-卷积神经网络-[北邮鲁鹏]

    这里写目录标题 参考文章 全连接神经网络 全连接神经网络的瓶颈 全连接神经网络应用场景 卷积神经网络 卷积层 CONV 卷积核 卷积操作 卷积层设计 卷积步长 stride 边界填充 特征响应图组尺寸计算 激活层 池化层 POOL 池化操作
  • 基于HSV颜色空间用OpenCV-Python给照片换底

    前往老猿Python博文目录 https blog csdn net LaoYuanPython 一 引言 在 基于RGB颜色空间用OpenCV Python给蓝底照片换底 链接地址 https blog csdn net LaoYuanP
  • Kali 2.0安装之后的简单设置

    使用的是Kali Linux 2 0 0 vm amd64 下图是安装后的桌面 一 汉化 Applications gt Usual applications gt system tool gt preferences gt setting
  • 【详细了解c++模板】

    目录 前言 一 泛式编程 函数模板 类模板 总结 前言 打怪升级 第40天 在c 的开始阶段我们了解到了函数重载 函数重载可以允许我们使用同名函数 方便我们编写那些功能类似但参数不同的函数 例如 void Swap int x int y
  • leetcode刷题:爬楼梯

    题目 分析 通过分析得知 当台阶只有两层时 方式是两种 当台阶是1层时 方法有一中 三层时方法有三种 所以台阶每加一层 当为n层时 那么就方法就会变成爬n 2层和n 1层的方法数之和 代码如下 int climbStairs int n i
  • 深入解析Linux进程调度器-CPU负载

    说明 Kernel版本 4 14 ARM64处理器 Contex A53 双核 使用工具 Source Insight 3 5 Visio 1 概述 CPU负载 cpu load 指的是某个时间点进程对系统产生的压力 来张图来类比下 参考U
  • 高德地图----在vue中使用了vue-amap给信息窗口增加点击事件和样式【vue】【vue-amp】

    在vue中使用了vue amap给信息窗口增加点击事件和样式 在vue amap中给信息窗口增加点击事件content属性是不行了 template又一直报错 那怎么办呢 当然是简单便捷的slot啦 直接上代码
  • Hyperledger Fabric 链码启动过程实现

    注 本文最早发表于 2017 09 22 Hyperledger 源码分析之 Fabric 简介 这里讲的 Chaincode 是用户链码 User Chaincode UCC 对应用开发者来说十分重要 它提供了基于区块链分布式账本的状态处
  • Python爬虫批量访问突破访问限制封禁的方法

    坑述 数据采集常用的方法是写一个爬虫程序向网络服务器请求数据 通常是用HTML表单或其他网页文件 然后对数据进行解析 提取需要的信息 然而 批量访问时会有访问限制 更会认为频繁访问是恶意攻击 对ip进行封禁 导致我们的爬虫程序被终止 tim
  • 【css】动画:立方体相册

  • 热词科普--关于前后端分离的易懂解析

    目录 一 什么是前后端分离 二 为什么要前后端分离 未分离时期 工作方式 半分离时期 三 前后端分离的优点 四 前后端分离的缺点 五 什么场景下可以考虑前后端分离 六 基于Vue Springboot的前后端分离 Spring Boot 简