前后端怎么连接_最近学到的前后端分离知识
前⾔
只有光头才能变强。
⽂本已收录⾄我的GitHub仓库，欢迎Star： github/ZhongFuCheng 3y/3y
前后端分离这个词相信⼤家都听过，不知道⼤家是怎么理解的呢。前阵⼦看项⽬的时候，有⼀段实现硬是没看懂，下⾯来给⼤家说⼀下⼀段愚蠢的经历哈。
(我没正正式式写过前端，所以如果⽂章有错的地⽅希望可以在评论区友善交流~)
⼀、交代背景
我⼀直都知道我现在的这个系统是前后端分离的，我的接⼝只会返回JSON出去，但我不曾关⼼前端是怎么处理我的JSON数据的(以及他是怎么跑通和运⾏的)
在某⼀天，我在查接⼝的时候，习惯F12，想直接看⼀下这个请求返回的JSON数据是什么。但是⼀看，在network返回的是html格式：
于是，我就很好奇啊，就看⼀下这个接⼝是不是我想象中的那个。于是就去我的接⼝，看⼀下是不是真的返回JSON(我还专门Debug了⼀下，看看是不是真请求到这个接⼝上了）：
我的接⼝的确是返回JSON数据，浏览器的reponse返回的的确是HTML格式。
得出的结果是：我的接⼝的确是返回JSON数据，浏览器的reponse返回的的确是HTML格式
于是，我就去我前端的⼩伙伴，去问了⼀下这是怎么搞的。他回复我说：“在浏览器看到返回的是页⾯，那肯定是你们后端⼲的呀”
我说:“没有啊，我Java接⼝返回的是JSON数据啊，是不是中途你们⽤node做了些处理啊？”(我之前听过Node.js，但仅仅是听过)
他说：“Node.js也是你们后端的啊。”
我⼀听，啊？Node.js不是属于前端的吗？
⼆、初识Node.js
在遇到这个事情之前，其实我在知乎已经看了⼀个帖⼦，话题名是这个《毕设答辩，⽼师说node不可能写后台怎么办?》
有兴趣的⼩伙伴可以去了解⼀下，⼤多数内容还是挺通俗易懂的：
www.zhihu/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引擎
编译树，然后再将抽象语法树⽣成字节码。如果发现某个函数被多次调⽤或者是多次调⽤的循环体(热点代码)，那就会将这部分的代码编译
⾮热点代码直接解析。
热点代码做编译，⾮热点代码直接解析
优化。说⽩了就是：对热点代码
优化
总结：V8引擎是JavaScript引擎的⼀种，这个引擎由C++来编写的，性能很不错。
参考资料：
zhuanlan.zhihu/p/27628685
zhuanlan.zhihu/p/73768338
2.2回到Node.js
浏览器为了安全，没有为JavaScript提供⼀套IO环境，⽽⼀门后端语⾔是肯定能进⾏⽹络通信、⽂件读写(IO)的。
浏览器为了安全，没有为JavaScript提供⼀套IO环境
把V8引擎搬到了服务端上，在V8引擎的基础上加了⽹络通信、IO、HTTP等服务端的函数
加了⽹络通信、IO、HTTP等服务端的函数。取了⼀个名字
后来，有⽜逼的⼈把V8引擎搬到了服务端上
叫：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数据：
我⼀直想知道的是：前框框架和node是啥关关于前端这⼏⼤框架：angular/vue/react这⼏个我都是没有写过的，所以也就不多BB了。我⼀直想知道的是：前框框架和node是啥关系。问了⼀下前端的⼩伙伴，他回复是⼤致这样的：nginx部署前端项目
前端现在是讲究⼯程化的，⼯程化⽤到了node⽽已(就是打包编译那些会⽤到，项⽬⾥⾯真正跑起来的话是没有这些东西的) ----以下⽂字摘录
Webpack、Less、Sass、Gulp、Bower以及这些⼯具的插件都是Node上开发的---@知乎 陈龙
包管理）
举个例⼦：随着发展，前端的JavaScript需要依赖的包也⾮常复杂，类⽐于Java我们会有Maven，⽽前端现在有npm （包管理
编译、打包等等)⽽npm是随同Node.js⼀起安装的。所以前端(vue/angular/react)在开发环境下都是离不开Node.js的(编译、打包等等
参考资料（为什么要使⽤ npm）：
zhuanlan.zhihu/p/24357770
3.1 ⽅式⼀(Nginx+Server)
纯静态的⽂件。我们可以直OK，现在假设我们⽤前端(vue/angular/react)开发完，开发环境下将JavaScript编译/打包完，那我们能得到纯静态
接将纯静态⽂件放到Nginx(CDN)等等地⽅【只要能够响应HTTP请求就⾏】。
如果请求是调⽤后端服务，则经过Nginx转发到后端服务器，完成响应后经Nginx返回到浏览器。
3.2 ⽅式⼆（加⼊Node.js)
加快⾸屏渲染速度，解决SEO问题
在前边的基础上加⼊Node.js，⾄于为啥要Node.js，⼀个重要的原因就是：加快⾸屏渲染速度，解决SEO问题
加⼊Node.js，此时的请求流程应该是这样的：
分发.
浏览器发起的请求经过前端机的Nginx进⾏ 分发
URL请求统⼀分发到Node Server，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页⾯的模板数据，然后进⾏页⾯的组装和渲染；
API请求则直接转发到后端服务器，完成响应。
最后
好的，现在问题来了：你是觉得Node.js归属在后端还是前端？
作者：Java3y
来源：慕课⽹
本⽂原创发布于慕课⽹ ，转载请注明出处，谢谢合作

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。