>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20962 个阅读者 刷新本主题
 * 贴子主题:  理解前后端分离的概念 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-04-16 11:57:47     消息  查看  搜索  好友  邮件  复制  引用

这里是经常容易被混淆的一些概念。
在说前后端分离之前,要先弄清楚:
1。什么是前端?
2。什么是后端?
3。什么前后端不分离?
4。什么是动态数据?
5。什么是静态文件?
6。什么是动静分离?
然后,什么是前后端分离就可以很清楚了。

所以,先来看第一个问题:什么是前端?

这又可以分解成几个小问题。
1。JS是前端么?
2。只要用JS写的,都是前端么?
3。只要是前端工程师写的,都是前端么?
4。大前端就是指的用JS语言写的前端,哪怕它是运行在服务器那一端么?
5。App算前端么?
6。Html+CSS算前端么?
7。小程序算前端么?
8。ReactNative算前端么?

这些问题其实会困扰很多人,每一个人的想法也是不一样的。
通常情况下,我们说的前端,都是指浏览器这一端,浏览器这一端,又在通常情况下,都是用JS来实现的,所以又会引申为,用JS写的大部分程序都是前端,包括App,小程序,H5等。而NodeJS出现之后,用NodeJS写的后端部分,也会被人归类为前端,为了区分之前的前端,就给他们起了一个名字,叫做“大前端”。
但,这种以语言为分界点去区分前后端,真的合理么?
在过去,我们是不分前后端的,无论是Java还是JS,全都是一个人来写。

倒底是什么原因让我们开始区分前后端了?

第一个,是可以并行开发。前后端的进度互不影响,在过去,前后端不分离的情况下,前端的工作量相对较少,一个前端可以对四个后端。 可以理解为,前端花了一周时间写好了静态页面,只需要调几个Ajax接口,不需要路由,也不需要渲染,所以他可以把时间继续在下一个项目里。
第二个,是成本问题。在过去,后端的成本还是比前端要高一些。同样的工作,如果能拆给两个人做,一个成本高一点,一个成本低一点,能接受。
第三个,CSS太难了。JS还好,和后端语言在对技能的训练上相差不大,可是。。CSS是什么鬼?记住那么多的属性,和Hash算法有关系吗?
所以才分成了前后端,而Html+CSS+JS,都是在浏览器端执行,统一称之为前端。
而Java,C,Python,PHP这些可以运行在服务器端的,统一称之为后端。

所以前后端的定义,不应该是以语言来定义,而是应该以它的运行环境,如果是在服务器端,就应该被称之为后端,代表着你看不见,摸不着。而如果运行在用户端,就应该被称之为前端,代表你是可以看得到的。
按照这种说法,前端和后端就分的很清楚了。

我们接下来再看,什么叫前后端不分离。

在Android和IOS没有出现的年代,还有一种流行的说法,叫做C/S和B/S架构。现在已经很少有人提了,如果你知道,这又是一个暴露年龄的名词。
C/S架构,指的就是Client-Server,意思就是在桌面程序上,有一个客户端,然后远程连接服务器端,用Socket或者是Http传输数据。
而B/S架构,就是指通过浏览器访问,不用提前安装一个客户端。
B/S架构,曾一度被认为是C/S架构的替代者,好处就是无须安装,简单方便,研发速度也快。
在那个时候,JSP,ASP,PHP还被称为三驾马车。
那个时候的写法,就是后端去控制一切。http://game.ptteng.com 是我很久之前写的一个前后端不分离的网站,右键的话,可以看到是一个完整的Html页。
这是什么意思呢?就是指,浏览器访问的是一个完整的Html网页,而这个网页呢,并不是一个静态的网页,写好在服务器上的,而是应用程序从数据库里取数据生成的,动态网页。

所以,前后端不分离的交互方式很简单,就是浏览器发请求,服务器端给出一个完整的网页,浏览器再发请求,服务器端再给出一个完整的网页。
坏处很明显,传输的重复数据比较多,网络又会有延迟。所以有没有办法,只传送必要的数据?
这是Ajax的起源。
Ajax就是只传递数据,不传递整个网页。这也是被用来在翻页,注册,发送验证码等场景,但也仅仅止布于此了。

怎么样提升访问的性能,更多的人用的是网页静态化的技术。
就是把所有的动态数据都提前生成很多很多静态的Html网页,这样就避免了从数据库里取数据的时间。
这种方式本来不会发生变化,大家都习惯了这种做法。

突然有一天,苹果说我们发布了Iphone。这个Iphone居然可以让程序运行在手机上。
很有一种C/S架构的感觉。
只是过去的C/S架构并没有大规模的应用在互联网上,多数上传统行业,互联网还是前后端不分离的多一些。
可是后端在写这些被称之为客户端的程序,就觉得太爽了。
过去还要套页面,还要控制跳转,现在呢?
面向Api编程啊,只需要告诉我Api是什么,我的每一个Api都是独立的,互相之间没有依赖。
App自己做控制,做缓存,做跳转,做交互。

后端神马都不用管,只需要保证自己的Api接口是好的。Postman很好用啊。还能自我验证。
但是不爽的在哪里?
就是针对客户端会有一个ApiServer,然后针对网页,还会有一个Home。
两个功能经常会一致,但是后端人员要写两套代码。一套是生成Json的,一套是生成Html网页的。
前端JS也很羡慕客户端的开发人员啊。过去前端就是一个打边角料的角色,只能写写静态文件,看着后端去把页面套的错误百出,偶尔写个校验,发送一个请求。
可是人家客户端!跟后端就没什么废话说,你只需要把API保证正确,剩下的全部我来。
两者之间的交互简单方便,快捷省力。多好的方式?
所以网页能否和客户端一样,也把决策权拿自己手里?
实际上是可以的啊。Angular就这么干了!
这就是SPA的含义之一,总之,到这个时候,前后端分离的意义才展示出来。

再说什么叫做动静分离,这里还牵涉到一个叫做打版本的概念。

一般而言,会分成开发,测试和线上的环境。
在SVN的年代,分成Trunk,Branches和Tags。
Tag,就是一个版本的快照。
为什么要有版本的快照?是希望能够在发生错误的时候回滚。
所以在前后端不分离的时候,如果发现网页上有一个错别字,怎么办?
不好意思,拉一个分支出来,重新打Tag,前端后端的代码一起打。不允许你手动修改。
但是后端的发布是需要重启服务的啊。
为嘛我改一个错别字就需要重启服务?有没有办法让后端和前端不在一起部署?
互相独立?前端你写错字了,你自己来,反正 你又不需要重启?
这就是动静分离的起源。
把动态程序和静态程序分开,大家互相不影响,各自部署分开。
现在,你能区分出来这些概念了吗?

-----------------------------------------
作者:技能树IT修真院
原文链接:https://www.zhihu.com/question/304180174/answer/547205270






程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->Swing组件(下)
  JavaWeb开发-->在Web应用中访问Web服务
  JSP与Hibernate开发-->立即检索和延迟检索策略
  Java网络编程-->非阻塞通信
  精通Spring-->Vue CLI脚手架工具
  Vue3开发-->创建综合购物网站应用
  web前端工程师面试题的知识考点盘总
  07、手把手教Vue--路由「Vue-router」 - TigerChain
  css3中translate、transform和translation,以及动画animati...
  Vue选项的用法
  vue中axios异步调用接口的坑
  js Worker 线程收集1~9999的之间所有质数;Worker线程交换数...
  基于vue和springmvc前后端分离,json类接口调用介绍
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  jQuery与AJAX的整合简介
  jQuery 选择器
  JavaScript的HTML DOM Parameter 对象
  CSS 盒子模型
  HTML 头部的元素的用法
  JavaScript的window.screen对象
  JavaScript 类型转换
  更多...
 IPIP: 已设置保密
树形列表:   
90后消防员张俊杰:退伍后回乡卖蜂蜜,年收入千万干将... patebeng11 2024-04-16 11:57:47
1页 2条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。