day11【过渡】SpringBoot/22-尚硅谷-尚筹网-SpringBoot-整合Thymeleaf-两种界面生成方式

好嘞，那咱们就咱们看看下一个话题哈，这个下一个话题是我们整合这个东西叫Sam。呃，这个时候呢。弗利本身就是一个新的技术。哎，咱们得先看看SF是咋回事。那这个塞利呀，它是一个视图模板技术。那我们得跟一个我们熟悉的东西去对标一下，我们才知道它是啥。啊，就好像说你假如说呢，你从来没有吃过，呃牛肉。对吧，啊，但是这个突然之间有一天有人请你吃牛肉的话，你很困惑，你说这是啥呢。我没有吃过，我不敢吃。啊，别人跟你对标一下是吧，就这个你以前吃过猪肉是吧？哎，这个东西其实你可以大致上跟你吃过的猪肉去对标一下，然后你就放心了啊，你就敢吃了对吧？啊，我们这边呢，是GSP和这个Sam lef呢，大致上啊，他们在我们整个知识体系里边在同一个位置。

他们都是我们试图模板。那怎么理解这个模板呢？哎。嗯，怎么理解这个模板哈，我们来看这么一个东西哈。就是说呢，我们用这种模板技术呀。都是用都是服务器端渲染的方式啊，去生成前端的界面的。就是任何项目呢，它一定会有界面。对吧，你就给给给普通人用的话，一定有界面啊，就是我们这种命令行的这种，其实你看还有个命令行工具，它还有个界面的。啊，那这个我们正式咱们开发的这种这个APP啊，APP这样的东西，它肯定也有这个界面，这个界面有两种生成的方式。一种叫服务器端渲染。一种叫前后端分离。啊，这个想必大家应该是听说过啊，前面好像咱们也好像是提过哈，那啥叫夫妻的渲染哈。

就用这样的GSP呀，是吧，什么wall city呀，属于marker呀，Samlif呀，哎等等这样的视图模板的技术，哎。呃，虽然说语法不同哈，但是他们都有一个共通的特点，就是在固定内容中可以去穿插。表达式啊，或者标签这样形式的动态的内容。啊，你看啊。嗯。浏览器发一个请求过来，去找我们服务器端的程序。服务器端程序呢，其实我们返回的是一个模板的一个，就是还没返回呢哈，服务器端程序呢，需要去找到这个模板的文件，这个模板文件呢，就是这些技术里边某一个去生成的。然后呢，这个模板文件里边这个红色的呀，表示它那个动态的部分。

就好比说呢，你看我们以前写这个。配置context.request.context path。就类似这样的东西。哎，这个这个东西吧，它是需要转换成Java代码。他得转换成这个Java代码，然后呢，去执行这个Java代码。哎，得到一个具体的值啊，比如说呢，At什么什么，哎，把这个一尔百达式换成这个具体的值，这个红色的部分呢，就换成具体值，就变成这个蓝色的部分了，这个呃，转成Java代码去执行，得到具体的值，这个过程呢，其实就是渲染。啊，就是渲染。嗯，执行动态部分对应的代码，计算得到具体的值，这个过程这个就叫做渲染一个模板文件，带有动态内容的这个模板文件经过渲染以后，它里边的所有的地方呢，就都是具体值了。

具体值呢，那么浏览器就可以解析了，那么就返回这个响应，那么浏览器拿到的呢，就是HM的标签。这里边儿会有这个。H天毛的标签。啊，会有我们CSS的代码，会有这个javascript的代码。就是就是就是这些东西，这些东西是在浏览器上面去执行的。哎。所以说这个这个过程啊，就是我们服务器端渲染啊，就是这样这样这样一个做法，那么我们服务器端呢，就需要一般呢，你来这个模板文件哈，就这么来的话，其实它是一个转发过来的。啊，这都是转发过来的。那你说我重定向导一个GT呢。你重新重定向到GSP的时候，你想你重镜向是告诉浏览器访问这个JSP。啊，那你要不看前面这个，你单独看它，那么还是去找服务器端程序是吧，再去找这个JP啊，当然这个时候可能你是直接找J。

啊，反正这个模板文件得在服务器端执行，把动态的东西算出来，算出来是什么样的具体的值，呃，把这个全部是具体值的作为响应返回给浏览器。这叫我们的服务器端渲染啊，这个叫服务器端渲染。那啥叫前后端分离呢？就我后端呀，我就完全不管我们页面这些事儿了，页面上你说这个写标签呀，哎，CSS怎么去这个布局呀，颜色呀，用的图片呀，样式呀，GS这个动态效果呀，我们后端程序员一概都不管了。后端程序员一概都不管了。那。全部交给前端工程师来做了。哎，全部交给前端工程师。前端工程师呢，那么他也有不管的，那你后这个数据啊，数据在后端呢，你是数据是咋来的啊，你是查数据库啊，你是查no搜QL数据库啊，哎，你还是这个，呃，调的第三方的接口啊是吧，你还是读取什么设备了等等一概不管，全都工程师完全不操心这个数据是哪来的。

我只管拿到数据呢，我诶看看在页面上，在界面上怎么去显示。哎，所以说呢。呃，这个HR毛页面啊，前端过程师这边呢，浏览器就加载HR毛页面，HR页面呢发请求需要接数据。服务器端程序呢，返回计算数据。这个前端工程师呢，拿到监测数据以后，他再看怎么解析。所以说呢，前后端分离的话，我们一定是双方完全按照这个阶层数据来进行这个交互的。啊，完全是按照这个阶层来交互的。嗯，那按接下来交互的话，这个我们。前端工程师和后端工程师是，那你怎么去对接，怎么去配合这个工作。

那么首先我们就得去开会去讨论啊，你这个杰森的这个格式。啊，就是你这里边儿有哪也是有哪些个属性呀，哎，属性是什么类型的数据呀，啊，哪个属性是必须的，哪个属性是可选的，哎这些东西咱们都得商量好。一般的这种吧，这个杰森可能通常都会是比较大的杰森。你想象一下啊，你你像这个京东的首页，那上面得有多少数据。啊，那数据的话，那么多的数据，那么多的数据。他接算数据接算的格式传过来，它得是多么大的一个的一个大的接算。而且其实这个其实我们说哈，这个你要看京东的话，你会发现啊，它不是一次性把这数据加载出来的。我们看一下天猫吧。因为我怕你看到我买的东西。你看这个是，你看你你这个页面你打开的时候，它才去加载这些图片。

不是，它就是这样加载的。他这么加载是合理的。哎，你看你看它不是页面一加载就要这些数据的。把这个。它当然跟你鼠标动也有关系啊。它这个预先加载一部分数据，这一部分数据加载完了以后呢，它要是你要看的话，它就在加载下边的，你要是不看的话，假如说下边还那么长呢，你要没看，你直接就点了一个这个。的话，这啥玩意。前置过滤啊。四件套，四件套哈，你看。你要点这儿的话，你直接去下一个页面了，你把这个页面关了，后边那些数据就不加载了。就不加载了，对吧，就不给服务器发请求了，服务器这不就很多请求不给服务器发，那服务器不就减轻这个压力了吗。

然后这么大的一个页面呢，其实他也不是一次性完全把这页面全部加载出来，它也是你要一部分就加载一部分。啊，是这样的。哎，对了，当然这里边儿大家想啊，还有一个问题是接算数据里边。杰森，数据里边有没有图片，你说？有没有图片本身？那应该是这图片，你说他怎么拿过来的？啊，想一想。啊，这图片哪来的图片咋办？我后端我就给你的就是杰森，那我怎么把图片给你。哎，你图片总得有一个地方存吧。a.GPG哈，假如说。我我杰森里边呢，我我只是给你一个图片的路径啊，这个图片路径呢，假设是HTTP啊冒号一个什么什么一个地址吧，啊5.2。

123.44。107哈，哎，然后一个什么什么一个路径。a.GPG。我杰森里边只有这个地址。啊，杰森里边只有这个地址，你拿到我杰森呢，就假设哈，你把它放到这个。Img，这个标签里边，比如src属性嘛，你把它放到src这个属性里边，然后呢，它你通过也可能需要写GS吧，反正是前端工程师肯定有办法，他拿到这个地址值，他再另外再发一个请求去要这个图片。啊，这个图片是这么处理的啊，图片是这么处理的。那么说这个图片呢，其实我们后边会说哈它。我们要以前的话，这用户上传的这个图片哈，我们就存到我们。项目里边了，项目里边呢，项目在tomcat里边。啊，这里边儿有一个比如说upload。啊，False这么个目录，以前这图片就在这个里边，它其实是本质上是在他们开的里边。

那在Tom里边存着海量的图片啊，这是有诸多不便。所以说呢，其实这个文件呢，其实是放在另外一个服务器上存的，跟他CAD是分开的。哎，我们这个存呢，比如说我们众筹这边吧，咱们后边用一个oss，这是阿里云上边有个oss啊，对象存储服务。这么个东西，咱们电商里边呢，咱们用的是一个叫fast DFS啊。这都是我们说在另外一个地方，另外找一个地方存图片啊，当然不光是图片哈，也可以是用户上传的别的文件啊，就是另外一个地方存用户上传的文件啊，就是这样的，这个服务器上面去存。所以说呢，既然这个图片咱也就页面显示咱都没问题了，所以说呢，这确实是可以哈，按接森方式呢去交互啊，我们这边就给你接。所以说咱们开会呢，就是先讨论确定一下这个杰森的格式。

格式定了以后呢。就前端工程师，后端工程师呢，分头去开发，哎，后端工程师呢，开发这个接口。什么叫接口呢？你写过接口吗？啊，你咋说呀，面试官问你这个你咋说呀。你说我写过啊。还记不记得咱们提过这事啊？啊，记得哈，行，那就。这个这个答案是一大段哈，这个就就你心里知道就行了，我们开发的这个接口呢，就是说前端工程师可以来调。啊，前端公式是可以来调，其实后边大家慢慢你会体会哈，接口呢。有的时候是前端工程师来调哈，有的是我们自己写的后端的程序，后端也调后端。分布式嘛，后端也叫后端，那么这个时候其实接口一般返回的就是杰森啊，所以说给前端工程师返回的是杰森，后端的我们分布式架构里边各个模块之间交互，他们也用的是介。哎，所以说呢，其实我们对我们来说呢，反正我们写这东西就是反馈接，那你其实谁用的话，对我们来说就是接口啊，就这个东西其实也就就是这样一个，呃，统一就统一就都这么叫了。

嗯，我们去负责开发这个后端的这个。诶，但是我们开发呢，不是一下子能开发出来的，这个前端工程师呢，它开发这个页面，因为它只要接算格式定了页面，就他可以去开发这个页面了。但是有个问题是，他没有这数据，他咋测试呢。诶，他得用假数据啊，这个后端接口还没开发完，还不能用的时候，用mo.gs呢，生成假数据。这是一个，这就是一个纯纯纯的前端的一个技术了啊。看看这个官网哈。看一眼啊。生成随机数据，拦截Ajax请求。哎。他能把前端那些请求给。拦截到，然后呢，生成这个随机的假数据，然后按这假数据去显示。

咱们就不用管这细节了，咱们知道他有这个东西可以用啊，其实就就就足够了啊，这个这个首页很绿哈，这个首页相当绿哈。很棒。那么。他先拿这个mo.gs呢。先用假数据，他先用着，用着一段时间以后，咱们后端接口咱们已经开发完了，咱们部署到这个测试服务器上了，当然也可能也可能这边也可能是我们开发服务器哈。哎，这个开发的环境，这个看具体的团队里边的具体安排了。那么这个前端工程师呢，他们就可以去访问我们的后端的真实的这个开发好的接口，这就是有其实吧，这是相相对来说比这个更真一点。啊，就是因为这是从后端来的，但其实呢，这也是我们为了测试呢，去造的这个假数据。只不过这是从后端接口来的这个假数据啊，这个是人家随机生成的假数据哎。

那这时候他再结合这个假这个调，真正调后端接口去用这个数据，再去看这个有没有问题，他再去调整啊。所以说呢。嗯，这两种开发模式下边如果是服务器端渲染的话。前端工程师呢，把页面全部开发完。整个扔给我们啊，扔到后端程序员的脸上，人家就不管了。基本上就不管了啊。这个人家这活儿干完了，老板不可能让他们闲着啊，当然说这个尽可能的不让他们闲着吧。什么后端程序员也是一样啊，尽可能不会让你闲着。啊，然后呢，就会人家可能就进入下一个项目了，这个时候你要是什么地方，你要想再改的话，你再找人家去，这个就看你跟人关系咋样了。嗯。也有这个。那也是看大伙儿的这个运气哈，有的同学去上了班以后，这个累的跟狗似的。啊，这这净加班啊。这累的就是特别特别累，有的同学出去以后呢，可能还挺闲。

啊，但是从总的比例上来说，还是累成狗的，这种还是比例是很大的。因为你要是在那闲着，你这工资老板不能不给你发工资啊，这劳动法规定的是吧，你这个东西他也怕你去劳动仲裁那去告他。啊，但他不能不给你发工资，那他在这儿你不干活儿，老板天天发给发工资，给你发工资给老板，心里在滴血呀。啊，他这个他这是没办法，他才会让你闲着啊，他实在没活的时候才会让你闲着。当然也可能是有些时候是比较大的公司，或者说有些做金融的公司，做金融公司他有钱啊。啊，这个人家可能不在乎是吧，啊，人家最不差的就是钱。那就那就可能会好一点啊，但是金融公司呢，你像平安呀，他们这种也有很多金融的项目，他们活也很多啊，所以这个东西你去出去以后呢，是是会会很累，还是比较轻松的，这个真的是看运气啊。哎，所以说呢，这个渲染的模式呢，就前端工程师全部开发完就扔给我们，你就像我们像众筹这边呢，其实就是人家已经把。

这不是，这个页面都已经开发好了。就整个一整套啊，从前到后全有了，然后你想继续开发的话，在这些基础上去去改就好了，哎，那然后呢，如果是前后端分离的话，这个就是说咱们先开会，咱们先定这阶层格式，定了以后分头开发啊，就按这样一个流程啊。所以说这是我们作为现在来说呢，这个项目哈，生成这个界面有这两种方式啊，这两种方式什么意思，以及这两种方式模式下，我们跟前端工程师呢，我们是怎么去交互的。