web 前后端分离演进
1.servlet
早期的web开发,一般是前端人员写好ui(html,css)就不管了。然后后端人员用servlet一行一行print,插入变量,拼接。
由于各种拼接太麻烦,出现了JSP。
2.JSP
JSP实际上最后也要被编译为servlet。如果我们把servlet看作是在Java中写html,那么JSP就是在html中写Java。JSP可以在html中插入变量,然后编译为servlet。
这样的问题是随着项目增大,html和Java代码耦合越来越严重,又出现模板引擎。
3.模板引擎
模板引擎有很多,比如Spring的Thymeleaf。在模板引擎中,使用 ${name} 这样模板可以实现动态加载html,这样前后端都由后端人员负责了。
这样,后端人员的工作量会很重,出现前后端分离的架构。
4.前后端分离
前端人员写html,css,JavaScript,用ajax请求数据。后端人员写接口。结构如图。
RESTful风格的这种后端接口一般是通用形式的,不能满足前端的业务逻辑,比如前端想要获取一个按照积分高低排好序的用户列表,这个操作放在浏览器js操作和后端Java操作都不是那么合适,又出现了Node.js中间层。
5.Node.js中间层
Nodejs中间层转发数据,结构如图。
这种结构是在客户端渲染的完整页面,浏览器从网站服务器获取代码再执行js请求数据,然后加载数据。存在两个问题:1.SEO不好优化,搜素引擎爬不到;2.相应速度慢。所以出现了服务端渲染。
6.服务端渲染
一般的前端框架都有服务端渲染框架,比如Vue的Nuxt.js等等。它的结构如图。服务端渲染还有一个好处,因为是在服务端渲染好的,直接发送给浏览器html代码,所以在浏览器点「查看网页源代码」不会看到js中网络请求部分,也就是说能隐藏接口,防止攻击。
附:如何判断页面是服务端渲染的还是浏览器渲染的
1、在页面上鼠标右键查看源代码,页面中看到的内容在源代码中也可以查看到,则是服务端渲染得到的,也就是服务器把完整的页面代码发送到了浏览器。
2、在页面上鼠标右键查看源代码,页面中看到的内容在源代码中不可以查看到,则是浏览器渲染得到的,也就是浏览器自己向服务器请求然后再填充的数据。
服务端渲染举例:
浏览器渲染举例: