servlet里面为什么有时候覆_为什么新来的经理强烈推荐?前后端分离知识,学到了...

9eadff403e2427750172814e86d402f6.png

引言

前后端分离这个词相信大家都听过,不知道大家是怎么理解的呢。前阵子看项目的时候,有一段实现硬是没看懂,下面来给大家说一下一段愚蠢的经历哈。

(我没正正式式写过前端,所以如果文章有错的地方希望可以在评论区友善交流~)

一、交代背景

我一直都知道我现在的这个系统是前后端分离的,我的接口只会返回JSON出去,但我不曾关心前端是怎么处理我的JSON数据的(以及他是怎么跑通和运行的)

在某一天,我在查接口的时候,习惯F12,想直接看一下这个请求返回的JSON数据是什么。但是一看,在network返回的是html格式:

57e7e9c96552c92484c268fbe1cd09ac.png

于是,我就很好奇啊,就看一下这个接口是不是我想象中的那个。于是就去找我的接口,看一下是不是真的返回JSON(我还专门Debug了一下,看看是不是真请求到这个接口上了):

8a31bb232fe5c10f3bf829d5c467949d.png

得出的结果是:我的接口的确是返回JSON数据,浏览器的reponse返回的的确是HTML格式

于是,我就去找我前端的小伙伴,去问了一下这是怎么搞的。他回复我说:“在浏览器看到返回的是页面,那肯定是你们后端干的呀”

我说:“没有啊,我Java接口返回的是JSON数据啊,是不是中途你们用node做了些处理啊?”(我之前听过Node.js,但仅仅是听过)

他说:“Node.js也是你们后端的啊。”

我一听,啊?Node.js不是属于前端的吗?

二、初识Node.js

在遇到这个事情之前,其实我在知乎已经看了一个帖子,话题名是这个《毕设答辩,老师说node不可能写后台怎么办?》

有兴趣的小伙伴可以去了解一下,大多数内容还是挺通俗易懂的:

  • www.zhihu.com/question/32…

我在下载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源代码转成抽象语法树,然后再将抽象语法树生成字节码。如果发现某个函数被多次调用或者是多次调用的循环体(热点代码),那就会将这部分的代码编译优化。说白了就是:对热点代码做编译,非热点代码直接解析
d6b2c7cbc0bd5ed0559b5339b5ae016d.png

总结:V8引擎是JavaScript引擎的一种,这个引擎由C++来编写的,性能很不错。

参考资料:

  • zhuanlan.zhihu.com/p/27628685
  • 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++来编写的。
dbdcc1cdf45e623f2e3f17816705f1c0.png

所以,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绑定在一起部署):

885ecd098d72b70d39a3bc64e175b51c.png

Java接口只返回JSON数据:

61c8611b1dfe9f5445221bad59ff7feb.png

关于前端这几大框架: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):

  • 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,此时的请求流程应该是这样的:

a24a02d4ed642ccc9150f093bbdec9a4.png

浏览器发起的请求经过前端机的Nginx进行分发.

URL请求统一分发到Node Server,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;

API请求则直接转发到后端服务器,完成响应。

最后

好的,现在问题来了:你是觉得Node.js归属在后端还是前端?

小结

欢迎关注头条号:JAVA大飞哥

觉得收获的话可以点个关注收藏转发一波喔,谢谢大佬们支持!

私信本头条号:发送:“免费资料”就可以获取微服务、分布式、高并发、高可用,性能优化丶源码分析等等一些技术资料

最后,每一位读到这里的Java程序猿朋友们,感谢你们能耐心地看完。希望在成为一名更优秀的Java程序猿的道路上,我们可以一起学习、一起进步!都能赢取白富美,走向架构师的人生巅峰!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lamp 安装 mysql_linux lamp之离线安装mysql

Linux下自己创建目录/tigger上传mysql压缩包到此目录[rootlocalhost tigger]# tar zxvf mysql.tar.gz[rootlocalhost tigger]# cp -r mysql /usr/local/mysql/usr/local/mysql 为安装目录cd /usr/local/mysql[rootlocalhost mysql]# groupadd mysql[rootlocalhost mysql]# user…

microstation添加txt文件_C开发实战-文件操作

文件概述文件几乎无处不在,主要分为磁盘文件和设备文件,典型的磁盘文件有文本文件和二进制文件,磁盘文件存储在外部存储介质(例如磁盘,硬盘,U盘等等)需要加载到内存中才能使用。无论是文本文件还是二进制文件在计算机内…

怎样配置mysql数据源_mysql怎样配置ODBC数据源

选中 sqlserver选择默认连接的数据库 7、配置完成,可以测试连接 扩展资料: spring中配置数据源的几种常见方式:工具/原料 事先配置相应的环境mysql(mysql安装程序)mysql-connector-odbc-3.51.20-win32.exe(mysql数据源dobc安装程序) 步骤/方法…

python开发框架大全_最受欢迎 Top 12 Python 开源框架,你都用过吗?

作者 | 学Python的阿勇责编 | 夕颜出品 | CSDN博客今天给大家带来了12个在GitHub等开源网站中最受欢迎的Python开源框架。如果你正在学习python,那么这12个开源框架,千万别错过,这些框架包括事件I/O,OLAP,Web开发&…

python中的zip是什么意思_Python的zip()函数是什么

zip() 函数可以把两个列表“压缩”成一个 zip 对象(可迭代对象),这样就可以使用一个循环并行遍历两个列表。为了测试 zip() 函数的功能,我们可以先在交互式解释器中“试验”一下该函数的功能。>>> a [a,b,c]>>> b [1, 2, 3]>>…

python 子线程返回值_python-从线程返回值

python-从线程返回值我如何获得一个线程以将元组或我选择的任何值返回给Python中的父级?12个解决方案59 votes我建议您在启动线程之前实例化Queue.Queue,并将其作为线程的args之一传递:在线程完成之前,它.puts将其结果作为参数接收…

python实现火车票查询_python实现12306火车票查询器

12306火车票购票软件大家都用过,怎么用Python写一个命令行的火车票查看器,要求在命令行敲一行命令来获得你想要的火车票信息,下面通过本文学习吧。Python火车票查询器接口设置先给这个小应用起个名字吧,既然及查询票务信息&#x…

python字符串用法_笔记:python字符串的使用

Python 没有表示单个字符的字符类型,只有字符串类型str。字符串是用单引号或双引号括起来的一系列字符。单引号表示的字符串中可以包含双引号字符,但不能直接包含单引号字符(否则无法知道字符串的开始和结尾分别在哪里)。同样,双引号表示的字…

new出来的对象怎么回收_JVM的内存模型及垃圾回收算法

1、什么是jvm:虚拟出来的计算机,是jre的一部分,使用jvm是为了支持与操作系统无关,实现跨平台,jvm内部体系结构主要分为三个部分:类加载器子系统,运行时数据区和执行引擎。2、jvm内存区域运行时数…

条令考试小程序辅助器_可以自己编题的答题软件,自定义题库考试出题工具,微信答题小程序...

自制题库自己编题的答题小程序要如何制作?今天给大家介绍下可以自己编题的答题软件,自制题库软件在微信小程序里自己出题,然后给别人来答题。每个人都可以通过这个小程序系统出考题,然后给到别人答题(自己、同事、学生…

python36 mysql_python-day36(初识MySQL数据库)

一. MySQL 介绍数据库分类:1. 关系型数据库(RDBMS)Oracle数据库MySQLl数据库MariaDB数据库SQL Server数据库Access数据库其他不常用关系型数据库: DB2,PostgreSQL,Informix,Sybase2. 非关系型数据库(Nosql)NOSQL>>>>> Not Olnly SQL键值(Key-Value)存储数据库me…

python解二元二次方程_寻找两个椭圆的交点(Python)

首先,您应该能够在一个方向上重新缩放椭圆。为此,需要将椭圆的系数计算为二次曲线,重新缩放,然后恢复椭圆的新几何参数:中心、轴、角度。然后你的问题减少到找到从椭圆到原点的距离。要解决最后一个问题,你…

mysql jion 三张_mysql三张表 left join

1.建表和数据学生表DROP TABLE IF EXISTS student;CREATE TABLE student (id int(11) NOT NULL AUTO_INCREMENT,name varchar(30) DEFAULT NULL,classid varchar(30) DEFAULT NULL,PRIMARY KEY (id)) ENGINEInnoDB AUTO_INCREMENT6 DEFAULT CHARSETutf8;-- -------------------…

编写有效用例电子版_软件测试人员必须编写代码吗?

相信每一个刚入门软件测试的小伙伴都会琢磨一个问题:软件测试人员,要不要写代码?其实这个问题同样困扰着已经在测试行业闯荡了几年的测试小司机们。那今天,我就来给大家分析一下~01各种软件测试角色一般而言软件测试大体可以分为两…

mysql sqlserver firstrow=2_将CSV文件导入SQLServer

基于SQL Server的CSV导入1)CSV文件数据可能具有,(逗号)中间(Ex:Description),那么如何使导入处理这些数据?解如果你用,(逗号)作为分隔符,就无法区分数据中的逗号作为字段终止符和逗号。我会用不同的FIELDTERMINATOR喜欢||..代码看…

bert 中文 代码 谷歌_ELECTRA中文预训练模型开源,110个参数,性能媲美BERT

感谢参考原文-http://bjbsair.com/2020-03-27/tech-info/7050/ 在去年11月份,NLP大神Manning联合谷歌做的ELECTRA一经发布,迅速火爆整个NLP圈,其中ELECTRA-small模型参数量仅为 BERT-base模型的1/10,性能却依然能与BERT、RoBERTa等…

python开发系统架构设计师_系统架构设计师在线题库

该课程包含了三大重磅性课程,学员 可以分三个阶段进行学习,一步一个脚印深入巩固SpringBoot知识体系栈、消息中间件RabbitMQ以及分布式锁的实现方式1、SpringBoot实战知识体系~从菜鸟到小牛 本课程可以让学员一步一个脚印学习当前微服务SpringBoot项目开…

监督学习和无监督学习_机器学习的要素是什么? 有监督学习和无监督学习两大类...

如前所述,机器学习是AI的一个子集,通常分为两大类:有监督学习和无监督学习。监督学习教学AI系统的常用技术是通过使用大量带标签的示例来训练它们。这些机器学习系统被馈入大量数据,这些数据已被注释以突出显示感兴趣的功能。这些…

如何用python计算levenshteindistance_Levenshtein计算相似度距离

使用Levenshtein计算相似度距离,装下模块,调用下函数就好。拿idf还得自己去算权重,而且不一定准确度高,一般做idf还得做词性归一化,把动词形容词什么全部转成名词,很麻烦。Levenshtein.distance(str1,str2)…

pythoncsv文件的操作_python操作CSV文件

概念:CSV是逗号分隔值或者字符分割值,其文件以纯文本形式存储表格数据。CSV文件可以用文本文件或者转换成EXCEL(直接用EXCEL也可以,但是可能会有一些问题)打开。因此更适合通过CSV文件进行程序之间转移表格数据。应用场景:需要进行…