摘要：文本已收录至我的仓库，欢迎前后端分离这个词相信大家都听过，不知道大家是怎么理解的呢。流下不学无术的泪水目前我了解到的前后端分离，首先部署是分离的至少不会跟绑定在一起部署接口只返回数据关于前端这几大框架这几个我都是没有写过的，所以也就不多了。
前言
只有光头才能变强。文本已收录至我的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不可能写后台怎么办?》
有兴趣的小伙伴可以去了解一下，大多数内容还是挺通俗易懂的：
https://www.zhihu.com/question/327657434/answer/704249816
我在下载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++来编写的，性能很不错。
参考资料：
https://zhuanlan.zhihu.com/p/27628685
https://zhuanlan.zhihu.com/p/73768338
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的一个子类）
再后来，学到了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）：
https://zhuanlan.zhihu.com/p/24357770
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多篇原创技术文章、海量视频资源、精美脑图，关注即可获取！
觉得我的文章写得不错，点赞！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/75931.html
摘要：面试的心得体会简历制作我做了两份简历，用两个手机账号，两个简历名字，分别在各个招聘网站投了双份简历，一个是数据分析的简历一个是全栈开发的简历，我真正接触快年，不管是学习还是工作学到的东西，这两年大概掌握了前端爬虫数据分析机器学习技术， showImg(https://upload-images.jianshu.io/upload_images/13090773-b96aac7e974c...
摘要：尽量按照前端后端部署运维来讲，当然中途涉及到跨域这种前后协调的还是无法避免捎带一笔。关于我目前在写从零构建前后分离项目系列，修正和补充以此为准不断更新的项目实践地址彩蛋提前预览下一章传送门 序： 开源的意义 本系列提前首发地址 背景 从事了近4年的互联网行业，逐渐担当过团队的前端到后端的负责人，和大家一样从小白逐渐的成长起来，回首望去几年前的博客还是那么稚嫩。 回首这几年： 从一个ja...
摘要：从前端到后端到运维，经历了几次前后端架构的演变，踩了无数的坑，度过无数难免的夜。为了工作或学习，确实造过一些轮子，前端的后端的，也开源出来过觉得能提高生产力的。 showImg(https://segmentfault.com/img/bVbgeXP?w=713&h=275); 序： 开源的意义 本系列提前首发地址 背景 从事了近4年的互联网行业，逐渐担当过团队的前端到后端的负责人，和...
摘要：并把它部署到线上，同时，使用了格式。我使用阿里云的服务器。接下来，就是域名解析和绑定，并结合。配置阿里云证书申请阿里云服务控制台安全云盾证书单击购买证书，前去购买证书，填入补全资料，按照默认提示勾选，并绑定域名，即可申请成功。 导读 如今，毕业将近一年了。一直使用公司的老框架，该框架采用前后端不分离的模式。但是，最近公司想要采用前后端分离的模式，并让我重新架构新框架。对于，毕业不久的我...
阅读 3234·2021-09-22 10:52
阅读 1412·2021-09-09 09:34
阅读 1710·2021-09-09 09:33
阅读 570·2019-08-30 15:54
阅读 2389·2019-08-29 11:15
阅读 608·2019-08-26 13:37
阅读 1543·2019-08-26 12:11
阅读 2849·2019-08-26 12:00
