day17/下午/352-尚硅谷-尚融宝-投资列表的展示

好，那么嗯，今天的最后呢，我们来讲一个我要投资，我要投资这面呢，咱们就呃先实现它的这个投资列表啊，然后呢，后面这个还有这个投资详情，我们点进去之后的投资详情呢，我们会在投标这个里面去具体的去做，所以呢，今天的这个我要投资这块呢，我们只实现列表这一部分，那列表这一部分呢啊，就是我们在我们网站的首页点击这面的我要投资，我们就可以来到这个列表页，那列表页这块呢，我们就实现一下下面的这个列表展示这一块的内容，那大家如果感兴趣的话，你自己可以实现一下上面的这个复杂查询这一块，其实呢，这个查询这一块呢，对于我们后端来说，其实就是传进去一些查询参数啊，然后它这块比较复杂的，其实是前端的事情，所以呢，我们就不去关注这这一块了，我们就只是做一个简单的一个列表展示就可以了啊，然后呢，所以首先呢，我们就去来在后端啊，先把所有的标的列表呢。

给它查询出来啊，那我们要创建一个land controller这样的一个接口，嗯，所以我们打开我们的后端代码。打开后端代码呢，我们找到controller这一个包，然后在controller这个包当中呢，我们把烂的controller呢移植到API这个包里面去，好接下来呢，我们打开这个land controller啊，把相关的这内容呢，我就直接粘过来了啊，你看这里面没有任何复杂的业务，所以呢也是一些套路哈，我直接把它粘过来了，那这些包括API，嗯，Controller request mapping以及沙拉翁这几个注解，然后接下来呢，包括我们的land service的一个注入，还包括我们的一个标的列表的一个接口的定义，好我们先把R给它引进来，引进来之后呢，我们再把这个select list呢给它做一个实现。诶，这个发现已经有了，是不是连业务都不用写了，好上堂课呢，我们在后台管理系统当中呢，已经对这个select类似的业务呢做了实现，那么正好我们的前台的网站端和后台管理系统端这个业务呢，其实是一模一样的，只不过呢，一个是用于后台网站的展示，我们写在了命里面，另一个呢，是用于前台网站的展示，我们写到了这个啊这个API里面，但是业务是一模一样的，所以呢，作为两个接口，我们可以复用这个业务啊，所以呢，这样的话呢，我们的controller层的这个代码呢，咱们就编写完成了，还是比较容易的哈。

我们把这个呃，思维斯考呢，给他重新启动一下。好，接下来呢，我们来到了整个的这个功能当中，其实最为关键的一个步骤就是前端整合，为什么说前端整合这块比较关键呢？虽然这个代码比较简单，就是这么一行核心代码，但是实际上它的核心呢却在这儿，就是什么呀，这是一个服务器端渲染，大家还记得之前我们在学习这个啊。

前面的这个第二部分的时候学过一个知识点吧，叫na的服务器端渲染，那么学完了这个，那服务器端渲染之后呢，有的同学就课后私聊我说老师这个感觉这后面这个地方没有用到服务器端渲染呀，是的，确实呢，到现在为止都没有用的，那么现在呢，我们就用一下啊，也就是说实际上这个服务器端渲染什么时候用啊，当我们在网站端去展示一些就是个人信息的时候呢，我们其实是用不上这个服务器端渲染的，因为你的个人数据呢，其实你并不希望啊，就是被这个爬虫啊，被搜索引擎啊给它收录进去，对不对，那我们希望搜索引擎收录的是什么呀？是收录我们啊这个网站当中的一个产品信息，比如说呢，我们的啊商城里面的一些商品信息，比如说呢，我们在线教育里面的一些啊课程信息，再比如说呢，我们的投资啊，就这样的金融平台当中的一些投资产品信息，所以其实我们希望呢，爬虫爬的是这些内容，我们希望呢啊我们的搜索。

引擎程序收录的是这些内容，所以说针对这些内容的话，我们呢，是需要做服务器端渲染啊，然后呢，增加我们的这个通过这个哈，然后增加我们的这个搜索引擎的这样的一个排名，明白吧啊，所以说到这儿为止，我们才去做服务器端渲染，那么这个里面呢，代码就很简单了，但是呢，大家一定要记得用服务器端渲染啊，所以说根据我们之前学的内容，这面呢，就用的是一步，然后前面呢，因为我们这款。之前讲过啊，这是在服务器端执行的，我们希望呢，在服务器端把这个数据都准备好之后，然后再送到前端，所以呢，在服务器端呢，我们就啊用了一个wa做一个同步这个数据查询，然后接下来呢，Wait啊，也就是说等这个数据结果都查到了之后，我们呢再给它复制给response，最后呢，我们把这个啊response啊，也就是说从后端刚才咱们写的这个接口当中得到的这个land list。

刚才我们写的这个接口是不是这里面不有个landless嘛，我们把这个数据呢，在呃，绑定到我们的呃呃页面当中的landless这个模型当中，然后最后呢，我们通过这个页面就把它绑定上，明白吧，所以接下来呢，我们就把这个pages land index.view啊这个页面呢给大家。整合进来，那这个页面里面关于这个啊，页面样式展示的部分呢，实际上呢，我们都已经。啊，就是给大家整合好了，然后我们现在呢，其实就只需要整合这一部分的内容就行了啊好，那所以呢，我们找到我们的嗯资料，然后找到第四部分pages啊，然后land里面呢，有一个index点，我们把它拿到我们的。页面当中，所以我们找到我们的service s2b site，然后找到pages，然后在这个pages下面呢，咱们新建一个目录叫L啊，然后呢，在这个目录下面。

把index呢给它移植进去就可以了，好，然后呢，这个里面所有的关于HTML的部分的内容呢，就不需要大家自己去做了啊，这里面都给大家做好了，我们只需要去熟悉一下后面的这个服务器端渲染的这个步骤就可以了，所以呢，在这个位置，我们把整个的这个流程呢，写在a c data里面，然后前面呢，不要忘了这个asy c data呢，是做同步数据获取用的啊，然后之前我们在讲这个na的这么一个远程数据获取的时候呢，也曾经讲过在这个啊as y c data里面，如果我们想拿到X的话呢，直接啊用这种结构赋值的方式把X就自动注入进来就行了啊，如果这个地方忘记了的同学呢，你可以去回顾一下，之前咱们讲纳斯服务器端渲染啊，然后零三这块远程数据的绑定和获取这块啊的这个知识点啊，来回顾一下这个X是怎么定位到这块的，那所以呢，这个地方呢，我们就直接可以去啊啊wa了对吧。

Wait啊，然后呢是Dollar Dollar X，然后点Dollar get，然后接下来呢，我们就直接杠A，然后杠code，然后接下来杠L，然后再接下来list，好吧，然后呢，我们把这个数据拿到之后呢，我们let啊把它放到response里就可以了，那接下来呢，我们通过同步的方式获取到这个response之后呢，我们就可以return这个数据模型了，我们呢return land list，然后接下来呢是response response对点data.land list啊那接下来呢，我们这个数据呢，我们就绑定上，绑定上之后呢，前面这面呢，已经给大家呢做了数据渲染了，就是在这个地方对这个烂的类似呢做了一个啊便利，然后呢，便利的过程当中呢，我们就把它的这个啊路由啊还。

还有这个样式呀，还有这个内容啊，就全都给他写到这儿了啊好，那现在呢，我们啊先来看一看吧。刚才后台我。我有没有重启，我重启一下啊。好，接下来呢，我们来看一下，在前端页面当中呢，我们刷新啊刷新这个页面啊，刷新这个页面之后呢，你会发现这个地方实际上就是我们动态获取出来的这个数据了啊，这个是我们从服务服务器端数据库当中获取出来的这个数据，然后借款进度这块呢，是0%啊啊，然后接下来呢啊，我们来看一下F12。

F12啊，F12呢，我们看一下network啊，然后我们看XHR，我们刷新一下，你会发现呢，在这个里面并没有这个一个阿贾克斯调用，为什么？因为我们做的是服务器端渲染啊，服务器端渲染呢，它这个阿贾克斯调用呢，是在服务器端执行的，是在前端服务器端执行的，并没有在浏览器端执行，所以呢，刚才的这个。API靠land list的这个接口也并没有出现在浏览器端，明白吧？啊，那么咱们怎么去看它的这个接口到底执行了还是没执行呢？啊，那实际上呢，我们可以在这个位置哈，就是打印一下pencil点啊啊，然后服务器端获取远程数据是吧。来打印一下，打印一下之后呢，我们来刷新一下这个页面，好，那实际上呢，这个服务器端获取远程数据呢，就应该打印出来了，然后呢。

我们来看一下啊，这面大家看这浏览器端呢，打印了这个内容，但是呢，这个内容其实并不是在我们客户端打印出来的，这块写了一个next SSR什么意思呢？就是next的服务器端渲染，说明这个内容呢，是在服务器端打印出来的啊，那么我们也可以去看一下我们的前端的控制台。前端的控制台这块呢，你会发现实际上这个才是服务器端的控制台啊，然后呢，这个地方呢，我们其实是打印了这样的一个服务器端远程数据获取的这样的一个内容，所以这个其实是前端服务器的控制台，明白吧啊，所以这个呢，是我们整个的服务器端渲染的一个具体的过程了，那所以这块大家需要了解一下啊，然后整个这块呢，我们的这个投资列表呢，就就做好了。