最近学到的前后端分离知识

也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本。 这个话题最近被讨论得比较多,阿里有些BU也在进行一些尝试。讨论了很久之后,我们团队决定探 阅读详情

前言

只有光头才能变强。

文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y

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

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

一、交代背景

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

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

640?wx_fmt=png
请求的信息

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

640?wx_fmt=png
接口信息

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

640?wx_fmt=png
示意图

总结: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++来编写的。

640?wx_fmt=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绑定在一起部署):

640?wx_fmt=png
前端和Java部署机器分离

Java接口只返回JSON数据:

640?wx_fmt=png
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,此时的请求流程应该是这样的:

640?wx_fmt=png
架构图

浏览器发起的请求经过前端机的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


推荐阅读:

640?wx_fmt=jpeg


200多篇 原创 技术文章 海量视频资源 精美脑图 面试题

长按扫码可关注获取 

欢迎关注640?wx_fmt=png点个再看640?wx_fmt=png

Nginx解决前后端分离(适用于传统项目改前后端分离) 用Nginx解决前后端分离(附踩坑经验) 阅读详情

相关推荐

Cadence Virtuoso里搞定斩波运放AC仿真:PSS+PAC保姆级设置避坑指南

然而,当工程师们尝试在Cadence Virtuoso环境中对这种特殊结构进行AC特性分析时,往往会遇到传统AC仿真方法失效的困境——这正是PSS(Periodic Steady-State)与PAC(Periodic AC)仿真组合大显身手的场景。实际项目中我们常采用"先快后精"的两步法:先用快速设置确认大体趋势,再针对关键频段进行精细仿真。例如某次设计迭代中,将harmonics从10增加到20后,发现在1MHz处的相位裕度估算误差达15°,这解释了之前样机测试时的振荡问题。

weixin_33508411的博客 451

JSP还有必要学吗 这篇文章告诉你

java劝退教程-操作系统篇(三)本篇文章,我们来讲讲技术,系统演进的过程对我们java开发带来的影响。本文可能会涉及到一些技术名词,不懂没有关系,先混个眼熟,我们后面会一个个详细介绍。下面会列举三个不同时期的技术,因为同时期也会有各种各样的技术,所以我们只介绍java的技术演进。混合开发时代天地初开,万物混沌,这是一个让人既兴奋又无奈的时代。因为JSP的流行,所以大量的公司采用JSP来开发系统。...

码思客的博客 3万+

避坑指南:RFSoC数据转换器多片同步配置的7个致命错误

本文深入剖析了在配置RFSoC多片同步功能时,工程师最常遇到的七个致命错误。从Tile 0的强制启用、时钟域与SYSREF时序,到跨代器件兼容性、电源序列以及动态重配置的陷阱,文章结合实战经验,提供了从原理到调试的完整RF数据转换器配置指南,旨在帮助开发者高效构建相位一致的大规模射频采样系统。

weixin_28452161的博客 533

到底什么是前后端分离

1.到底什么是前后端分离? 前后端分离的"前"特指浏览器端(或客户端),直接呈现给用户的;后端是服务器端,处理业务逻辑和数据,不呈现给用户。 Java服务器端初学者最容易引起误解的一个概念就是:JSP是前端技术。 JSP一定一定一定要知道全称:Java Server Page。是运行在服务器端JVM之上Servlet容器里的,只是执行的结果是HTML,响应给浏览器。 Java EE先有的Servlet,那时候已经有了ASP(同样要知道是Active Server Page的意思)。 由于要在Ser

顺其自然~专栏 4万+

【24届数字IC秋招总结】正式批面试经验汇总6——禾赛

15、ahb写或者读的数据存储起来了嘛,ahb读的话,apb这边是怎样的。19、覆盖率收集的时候有没有哪些是很难收集到的,然后写了定向测试。2、C++有学过嘛 还记得C++的什么内容 C++成绩多少。12、config_db机制用过嘛 四个参数的含义。8、脚本语言有学过嘛 简单学过 简单是指代码数少嘛。13、run_phase和mian_phase的区别。10、覆盖机制的创建方法 ,是不是覆盖用的很少。6、call_back机制记得哪些细节的东西。9、uvm实战学了哪些章节 印象深刻的章节。

qq_42135020的博客 1083

元数据治理实战:构建企业数据地图与血缘体系

元数据(Metadata)是描述数据的数据,是你能了解“数据是怎么来的”、“它是做什么的”、“能不能用”的基础信息。📌 举个例子:order_idstringods_order定义:平台内用户在订单系统中产生的唯一订单编号更新时间:每天凌晨 2 点,由 Airflow 调度任务生成所属人:张三(数据开发部)🔍 这些信息本身不直接参与计算,但它们是数据可管理、可追踪、可评估的基础。模块实战建议元数据类型技术 + 业务 + 操作元数据三类统一治理治理路径。

晴天彩虹雨的博客 290

Java-web:使用Axios代替JSP进行前后端分离与数据交互

使用Servlet注解代替配置web.xml文件在servlet3.0版本支持使用注解1.创建一个Servlet响应axios发送的请求 JSP代替:还原JSP到HTML:Axios:将ajax进行封装,简化JS发送异步请求的代码Axios官网:https://www.axios-http.cn/ 下载axios.js文件到本地然后再HTML头文件引入或者直接引用网址的JS头文件两种方式2.创建一个main.html文件,设置一个div用于显示axios使用回调函数时从响应体里获得的JSON数据 3.编写

Just For Learning 2029

漏检率从23%降至1.3%:YOLOv8交通车辆计数与违章识别完整落地方案

本文分享了基于YOLOv8+ByteTrack的交通视频分析系统实战经验,针对车辆计数和违章识别两大核心功能,提出了完整的工程化解决方案。系统采用边缘计算架构,单张GTX 1660即可稳定处理8路1080P视频流,实现了白天98.7%、夜间96%以上的车辆计数准确率。文章详细剖析了交通视频分析的四大落地痛点,系统架构设计思路,以及遮挡处理、光照适应、多路并发等关键技术优化方案,重点介绍了车辆计数三重校验机制和三类违章识别的工程实现细节。通过ROI裁剪、TensorRT加速、动态抽帧等优化手段,显著提升了系统

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 340

从JSP的发展历程谈谈前后端分离

从JSP的发展历程谈谈前后端分离 最近工作里写前端写得很是快(yu)乐(men),每次在浏览器调试JS,CSS的时候就会想为什么我一个后端要去做改界面的工作。当然了其实在以往web应用还不是很庞大的时候,后端程序员都是既当爹又当妈的,根本不需要什么分布式,前端也不需要做工程化:只要UI改好静态页面(html),你后端自己拿去爱干什么干什么,后面的事情包括js都跟我无关(第一个实习公司就是这么干的...

#include 1万+

手把手教你玩转RISC-V指令集​​​专栏--​​1.2 对比x86/ARM:RISC-V的三大核心优势(开放、灵活、可扩展)​

​:RISC-V以“开放打破垄断、灵活适配场景、扩展定义未来”的三大优势,正在重塑计算架构格局。其核心价值不仅是技术革新,更是对全球半导体产业链话语权的重新分配。

amy_mhd的博客 130

计算机组成原理(第三版)唐朔飞-第七章指令系统-课后习题

机器字长是指CPU一次能处理数据的位数通常与CPU的寄存器位数有关。指令字长是指机器指令中二进制代码的总位数。存储字长是指存储单元中存放二进制代码的总位数。三者可以相等也可以不等视不同机器而定。答:OP(4位)A1(6位)A_1(6位)A1​(6位)A2(6位)A_2(6位)A2​(6位)设二地址指令格式为该指令系统的基本格式,4位操作码共有16种编码,其中13种用来定义二地址指令,还剩3种可用作扩展标志。一地址指令条数=3∗26=192。

weixin_45735391的博客 7万+

前后端分离项目整体知识点

起别名可让字段和接口文档字段保持一致

寂寥人生 481

【图像超分】论文复现:新手入门!Pytorch实现SRCNN,数据预处理、模型训练、测试、评估全流程详解,注释详细,简单修改就可以训练你自己的图像数据,有训练好的模型下载地址,随取随用

【图像超分】论文精读:Image Super-Resolution Using Deep Convolutional Networks(SRCNN)请配合上述论文精读文章使用,效果更佳!图像超分辨率SRCNN和FSRCNN复现代码,除基本的网络实现外,还有特征图可视化,PSNR曲线图可视化,测试自己的图像数据等不想理解原理,希望直接跑通然后应用到自己的图像数据的同学,请直接下载上面的代码,有训练好的模型,直接用即可。具体使用方式见代码中的README!有问题来本文评论区留言!准备数据集,以及数据预处理。

主要更新底层视觉(去噪、超分等)相关的科研内容,形式为【论文精读】+【论文复现】 2万+

前后端怎么连接_最近学到的前后端分离知识

前言只有光头才能变强。文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y前后端分离这个词相信大家都听过,不知道大家是怎么理解的呢。前阵子看项目的时候,有一段实现硬是没看懂,下面来给大家说一下一段愚蠢的经历哈。(我没正正式式写过前端,所以如果文章有错的地方希望可以在评论区友善交流~)一、交代背景我一直都知道我现在的这个系统是前后端...

weixin_39742727的博客 4909

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

基于Vue和Django搭建前后端分离项目

前言 最近公司要做一个系统,需要前后端分离,后端使用Django,前端使用Vue,因为之前主要做的是后端开发,前端只会写一写简单的,Vue只会绑定数据,至于Vue怎么与Django结合还是第一次接触,所以去看了一些资料和官方文档,接下来就简单介绍一下流程吧! 创建Django项目 django-admin startproject test_demo cd test_demo django-a...

ALLENsakaru的博客 1万+

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

前后端分离的优缺点

WEB 前后端分离三个最大的优点在于:1:最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小2:后台错误不会直接反映到前台,错误接秒较为友好3:由于后台是很难去探知前台页面的分布情况,而这又是JS的强项,而JS又是无法独立和服务器进行通讯的。所以单单用后台去控制整体页面,又或者只靠JS完成效果,都会难度加大,前后台各尽其职可以最大程度的减少开发难度。   为了解决传统...

__静禅__ 4万+

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

SSM框架中的前后端分离

认识前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。 由于前后端分离这个概念相对来说刚出现不久,很多人都是只闻其声,不见其形,所以可能会对它产生一些误解,误以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是...

Tu9oh0st的技术栈 9891

对前后端分离和FastDFS的使用的再理解

【前言】 最近我们上线一个新功能,在进行部署的时候出了个奇葩的问题,在解决这个问题的时候对前后端分离和FastDFS的认识又加深了许多。 【背景—问题&解决—小结】 背景 1.上线功能是完全的前后端分离 (1)前端:AngularJS2 (2)后端:SSM(SpringMVC+Spring+MyBatis) 2.图片管...

通往精英的成长之路 2万+

前后端分离的图像检测上位机软件知识点拆解

介绍下多线程,qt的信号与槽机制,QWebSocketServer库和QWebSocket库,共享内存,opencv库,实现摄像头画面捕获,图片相关的操作等知识点

记录自己喜欢的技术知识 1260

前后端分离

前言 最近这一段时间由于Nodejs的逐渐成熟和日趋稳定,越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手,尝一尝鲜。 一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行。而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验。 同样,我们的大网盘团队...

weixin_42117918的博客 562

关于前后端分离的思考和总结

对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢?我之前一直对前后端分离的思想一直很模糊,最近恰好碰上公司的项目进行重构,也采用前后端分离。所以就根据自己在实际项目中的开发,总结自己对于前后端分离中遇到的一些疑惑。 前言 首先在此之前,我跟大多数人一样,心中有如下疑问? 什么是前后端...

bobozai86的博客 1357

前后端分离的好处是什么?

最开始组内讨论的过程中我发现,每个人对前后端分离的理解不一样,为了保证能在同一个频道讨论,先就什么是”前后端分离”达成一致。大家一致认同的前后端分离的例子就是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。从某种意义上来说,SPA确实做到了前后端分离,但这种方式存在两个问题:WEB服务中,SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式,SPA不能作为一种通用的解决方案。

黑马程序员官方博客 1204
上一篇: 记一次愚蠢的操作--线程安全问题
下一篇: 小白入门学习打日志
Java3y
Java3y 领域专家: 后端开发技术领域 领域专家: 后端开发技术领域
博客等级 码龄9年 1万+粉丝 509原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值