最近学到的前后端分离知识
前言
只有光头才能变强。
文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y
前后端分离这个词相信大家都听过,不知道大家是怎么理解的呢。前阵子看项目的时候,有一段实现硬是没看懂,下面来给大家说一下一段愚蠢的经历哈。
(我没正正式式写过前端,所以如果文章有错的地方希望可以在评论区友善交流~)
一、交代背景
我一直都知道我现在的这个系统是前后端分离的,我的接口只会返回JSON出去,但我不曾关心前端是怎么处理我的JSON数据的(以及他是怎么跑通和运行的)
在某一天,我在查接口的时候,习惯F12
,想直接看一下这个请求返回的JSON数据是什么。但是一看,在network返回的是html格式:
于是,我就很好奇啊,就看一下这个接口是不是我想象中的那个。于是就去找我的接口,看一下是不是真的返回JSON(我还专门Debug了一下,看看是不是真请求到这个接口上了):
得出的结果是:我的接口的确是返回JSON数据,浏览器的reponse返回的的确是HTML格式。
于是,我就去找我前端的小伙伴,去问了一下这是怎么搞的。他回复我说:“在浏览器看到返回的是页面,那肯定是你们后端干的呀”
我说:“没有啊,我Java接口返回的是JSON数据啊,是不是中途你们用node做了些处理啊?”(我之前听过Node.js,但仅仅是听过)
他说:“Node.js也是你们后端的啊。”
我一听,啊?Node.js不是属于前端的吗?
二、初识Node.js
在遇到这个事情之前,其实我在知乎已经看了一个帖子,话题名是这个《毕设答辩,老师说node不可能写后台怎么办?》
有兴趣的小伙伴可以去了解一下,大多数内容还是挺通俗易懂的:
我在下载Node.js
的时候,发现其简介十分简洁:
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。
然后点进去Chrome V8引擎,再看了一下介绍:
V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.
V8是Google的开源高性能JavaScript和WebAssembly引擎,用C ++编写。它用于Chrome和Node.js等。
看了介绍,一脸懵逼,这是啥玩意啊。下面我来解释一下
2.1 V8引擎是什么?
众所周知,JavaScript是解析型语言,我们写好的JavaScript代码会由JavaScript引擎去解析,而V8是JavaScript引擎的一种。
- 在传统意义上,我们会认为解析器是逐条解析(一边执行一边解析),但为了提高JavaScript的解析速度(相当于提高用户体验),在解析的时候做了点“手脚”。
- V8引擎:为了提高解析的性能,引入了一些“后端”的技术(不过他本来就由C++编写的)。它是先将JavaScript源代码转成抽象语法树,然后再将抽象语法树生成字节码。如果发现某个函数被多次调用或者是多次调用的循环体(热点代码),那就会将这部分的代码编译优化。说白了就是:对热点代码做编译,非热点代码直接解析。
总结:V8引擎是JavaScript引擎的一种,这个引擎由C++来编写的,性能很不错。
参考资料:
2.2回到Node.js
浏览器为了安全,没有为JavaScript提供一套IO环境,而一门后端语言是肯定能进行网络通信、文件读写(IO)的。
后来,有牛逼的人把V8引擎搬到了服务端上,在V8引擎的基础上加了网络通信、IO、HTTP等服务端的函数。取了一个名字叫:Node.js
- 比如通过
libuv
库来进行文件读取,以及建立TCP/UDP连接。通过xxx
库解析HTTP请求和响应....这些库都是由C/C++来编写的。
所以,Node.js
是运行在服务端的,只不过在基础语言是JavaScript。
三、前后端分离入门
回顾一下自己学JavaWeb的历程:
- 刚学Servlet的时候,会在response对象上写一些
HTML
代码输出到浏览器看效果 -
后来,学习到JSP了,就纯粹用Servlet做控制,JSP做视图。
- JSP本质上还是一个Servlet,只不过看起来像
HTML
文件,在编译的时候还是会变成一个HttpJspPage类(该类是HttpServlet的一个子类)
- JSP本质上还是一个Servlet,只不过看起来像
-
再后来,学到了AJAX技术,发现我们完全可以通过AJAX来进行交互。AJAX请求Servlet,Servlet返回JSON数据回去,AJAX拿到Servlet返回的数据进行解析和处理。这里压根就不需要JSP了(纯HTML+AJAX),这算是前后端分离的一种了
- 在开发上体验:如果完全使用HTML+AJAX的话,会发现其实需要写非常非常多的JavaScript代码,而且这些JavaScript代码都不好复用。
- 在部署上,还是跟Java一起部署(放在resource下),没有将前端单独部署。
- 再后来,学到了一些在常用的模板引擎(比如freemarker),其实用起来跟JSP没多大的区别,只不过性能要比JSP好不少。
- ...流下不学无术的泪水
目前我了解到的前后端分离,首先部署是分离的(至少不会跟Java绑定在一起部署):
Java接口只返回JSON数据:
关于前端这几大框架:angular/vue/react
这几个我都是没有写过的,所以也就不多BB了。我一直想知道的是:前框框架和node是啥关系。问了一下前端的小伙伴,他回复是大致这样的:
前端现在是讲究工程化的,工程化用到了node而已(就是打包编译那些会用到,项目里面真正跑起来的话是没有这些东西的)
-----------以下引用摘录:
Webpack、Less、Sass、Gulp、Bower以及这些工具的插件都是Node上开发的---@知乎陈龙
举个例子:随着发展,前端的JavaScript需要依赖的包也非常复杂,类比于Java我们会有Maven,而前端现在有npm
(包管理)
- 而npm是随同
Node.js
一起安装的。所以前端(vue/angular/react)在开发环境下都是离不开Node.js
的(编译、打包等等)
参考资料(为什么要使用 npm):
3.1 方式一(Nginx+Server)
OK,现在假设我们用前端(vue/angular/react)开发完,开发环境下将JavaScript
编译/打包完,那我们能得到纯静态的文件。我们可以直接将纯静态文件放到Nginx(CDN)等等地方【只要能够响应HTTP请求就行】。
如果请求是调用后端服务,则经过Nginx转发到后端服务器,完成响应后经Nginx返回到浏览器。
3.2 方式二(加入Node.js)
在前边的基础上加入Node.js
,至于为啥要Node.js
,一个重要的原因就是:加快首屏渲染速度,解决SEO问题
加入Node.js
,此时的请求流程应该是这样的:
浏览器发起的请求经过前端机的Nginx进行分发.
URL请求统一分发到Node Server,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;
API请求则直接转发到后端服务器,完成响应。
最后
好的,现在问题来了:你是觉得Node.js
归属在后端还是前端?
看得不过瘾?推荐一下我认为不错的文章和资料:
- https://segmentfault.com/a/1190000009329474
- https://www.zhihu.com/question/267014376
- https://cnodejs.org/topic/565ebb193cda7a91276ff887
- https://github.com/yalishizhude/front-back-separation
乐于输出干货的Java技术公众号:Java3y。公众号内有200多篇原创技术文章、海量视频资源、精美脑图,关注即可获取!
觉得我的文章写得不错,点赞!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
编码规范 | Java函数优雅之道(上)
导读 随着软件项目代码的日积月累,系统维护成本变得越来越高,是所有软件团队面临的共同问题。持续地优化代码,提高代码的质量,是提升系统生命力的有效手段之一。软件系统思维有句话“Less coding, more thinking(少编码、多思考)”,也有这么一句俚语“Think more, code less(思考越多,编码越少)”。所以,我们在编码中多思考多总结,努力提升自己的编码水平,才能编写出更优雅、更高质、更高效的代码。 本文总结了一套与Java函数相关的编码规则,旨在给广大Java程序员一些编码建议,有助于大家编写出更优雅、更高质、更高效的代码。这套编码规则,通过在高德采集部门的实践,已经取得了不错的成效。 使用通用工具函数 案例一 现象描述: 不完善的写法: thisName != null && thisName.e
- 下一篇
自己动手写Spring框架--IOC、MVC
自己动手写Spring框架--IOC、MVC对于一名Java开发人员,我相信没有人不知道 Spring 框架,而且也能够轻松就说出 Spring 的特性-- IOC、MVC、AOP、ORM(batis)。 看那么多 Spring 源码分析,不如自己动手写 个轻量的 Spring 框架。 下面我想简单介绍一下我写的轻量级的 Spring 框架(swift-framework),并且进行核心逻辑的分析,和使用说明。 提示:以下有大量图片,可以在新页面查看图片。 目录: 自己动手写Spring框架--IOC、MVC -- 怎么使用 swift-framework 框架 -- 跟着 debug 走流程 自己动手写Spring框架--AOP、ORM -- 敬请期待 怎么使用 swift-framework 框架 下载jar包,引入到自己的新项目中。再要做的就是很简单了。 示例: @Controller 注解:标注controller类。@Inject 注解:依赖注入类,自动注入依赖的实现类。@Action(value = "get:/hello") 注解:标注访问行为,‘get’是请求类型,‘...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7设置SWAP分区,小内存服务器的救世主
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库