day11【首页数据显示和添加Redis缓存】/09-尚硅谷-谷粒学院-首页数据显示-热门课程和名师（前端）

然后我请之后呢，现在有一个问题啊，我在昨天说过，今天再说一遍啊，什么问题呢。各位是否记得啊，因为咱们现在啊，在这个Switch里边，我们引入那个叫NAS那个依赖，包括在这些里边也做了na的配置，所以他一启动会去找你的注册中心，就是na cos，但是na cos呢，我这里边没有启动，这里边也没做配置啊，所以他报了错，说没有这个服务找到啊，就服务不可用，因为没有nacos，但是现在就算出现这个效果，它的运行是不产生影响，它还是可以运行的。那咱们啊，这样来试一下啊，看效果，但这过程中呢，有这么一个细节，就是关于我们的NEX啊，我这里边是之前配置过了啊，咱们看一下啊配置的对不对。N这个的配置文件，咱现在要加上一个新的一个规则，就是这个规则EDUCMS。看一下啊，E丢CMS，然后里边是用到这个8004端口，这个默认是没有啊，各位如果没加给他加上，要不然他找不到啊，我这是提前加过了。

对，我也截过来啊。就是我们，呃，第三个。N这个里边进行这个访问规则的这么一个配置。加上这个啊。所以咱们现在把这个就完成了啊，最后我们测试看它最终结果，咱来试一下啊。比如现在啊，为了明显我先。把那个F12啊，咱先点开，如果有错误，咱们能够方便我们找到啊。这些都打开了，另外N这个我好像没有启动N这啊。我看一下啊这个。找这个进程。啊，没有启动N啊，N这个启动一下。这个是。现在应该都万事俱备了啊，然后都具备之后，咱们到页面中，现在我做个刷新，然后咱们看结果啊，就看第一部分。

大家看啊，这里边有两张图啊，这是我找一张图，这张图这样虽然小点啊，但是效果是有了，这是第一张，这是第二张啊，这个我们做到这个效果，而现在这数据就是从我们数据库中取出的纸啊，这是我特别找的这张图片就有效果的。包括啊，咱们看一下啊这图。第二张就是这个图，现在完成了啊，首页banner的显示，但是这个显示咱一会儿肯定要用到read的缓存给它加进去，目前先做一个最基本测试。咱们完成了啊。然后这个过程中的应该没有什么特别注意的地方啊，就是各位把这个写完，前面一调就可以了，只是这个前段中需要咱们自己做一些封装，就你自己封装一个这个U中的request，加上AXLS，然后包括咱这个API，包括里边这个需要咱们自己创建，把这做到，然后变中调用，跟之前的过程应该是一模一样的，也是简单结构，Data created methods，然后里边调方法，最终变中用we-for便利啊，这些都没有什么问题。

另外就是有一个小问题，就是你写完之后可能会有报错，你多等一会儿，它是加载慢，加载之后它就没有问题了。这个测试完成了啊，关于班ner，然后班ner显示之后，然后往下看，下面咱们继续显示，把这个课程和名师在里边也是便利出来，那咱们来看一下啊，跟刚才写法应该一样的。那我就写下啊。还是来到这里边哈，首先我们在这个位置呢，我比如说现在我再来建一个JS文件，来用它快速改一个。然后这个文件因为是做那个首页面那个课程和名师的，那比如名字我就叫这个in desk也是首页面的那种。In，带点JS，然后在ins中第一部分引入这个request，第二部分咱就是查询这个。

热门课程和名师。把这个查出来，然后在里边我给它起个名字啊，比如叫这个get，这个in desk date，就是出，就是手页面的数据啊，包括课程名师，然后写完之后，下面再来调一下我们那个接口，然后把接口的路径再给它复制过来，这个接口应该在我们的E丢中。那咱找到啊，在edu里边的。Front中的in de front，咱的地址就是这个地址。这个输入过来啊。然后给它拿到这里边这个地址就是edu service index front，后面加个名字就叫做index，然后它是一个get提交能得到我们这个数据。啊，该的提交这样的话，这个定义出来了，定义之后来到我们的页面中，咱还是调用啊，刚才一个步骤啊。

那调用首先还是引入。Inport，这叫in desk from，加上咱那个地址at，斜杠API in desk，这就引入了，引入之后来到我们这里边，咱做操作还是在里边呢，把那几个值咱先定出来，因为它里边有那个名师和那个热门课程。啊，比如说写个课程就叫edu。List。然后名师我就叫这个teacher list。这个两部分啊，咱定义了定义之后，下面调这个方法。这个位置啊，查询热门课程和名师，那这个方法，比如叫这个，呃，有一个get。Hot热门课程吗cos？

还有这个teacher。几个方法啊，在方法中调用我们刚才里边那个定义的方法，我们写一个叫index，点上这个方法，它叫get index date。然后起完之后啊，就来一个点赞，加上我们那个最终结果啊，咱来一个response。介子函数通过里边的值把这取到啊，跟这写法都差不多啊，用它就快速改出来了。咱看一下啊，第一个值我们返回的叫edu list，就是我们那个热门课程的，那把这个返回，然后复制给这个edu list。然后它有第二部分叫那个teacher list，把这个咱给它也是得到，然后在里边给它做个赋值。就是。这个teacher意思。这点teacher list。

这个稍微有点卡，我把这个复制一下啊。Teacher。所以这样的话，咱们把这个我们就完成了啊，主要这么一个特点啊。诶，那个。我们剪切出来了。我再拿回来啊。这个值啊。这样的话我们就做到了啊，这是我们写的，在页面中做调用，调用之后在edu list中，还有teacher list中，咱这值应该都可以得到啊，这个啊我们就可以做到了，包括咱们课件简单浏览一遍啊，我们写这个一样的啊，然后都写完之后，最后呢，肯定是页面中做个显示，咱做的还是这个V杠或便利一个一个显示就可以了啊，那咱们来显示一下啊。再往上涨。首先先找到这个热门课程部分。往上看啊，热门课程。应该是在东西比较多啊，在这里热门课程，然后在这个热门课程里边呢，目前是写了八个热门课程，但是现在都是固定的值，那咱看这怎么改啊，先找课程部分看它是怎么写的，咱这个结构中，在里边呢有个标签叫做ul，这一个大的ul，然后就是你看啊，每个课程是个什么，是不是一个L，它拥有八个LY，每个LY是个课程，那咱怎么做呢？我们就保留一个，其他的都删掉，咱在这一个里边用V-for便利啊，那我给它删一下啊，注意啊，别删多，以为删少。

一共会剩删剩下的七个LY，把这个先都删掉啊，应该是到。这个位置，呃，还有一个这个。把这个我们也删掉，就你把剩下七个都删掉，保留一个在这一个里边呢，咱用V-for做个便利，然后做个显示，那咱给他遍历一下啊，加一个叫。V-for啊，注意这种写法各位要熟悉啊，也会经常这么来做课程，我们叫。

Edu。比如这个名字我就叫cos音啊，就是课程的闭合，再加上一个叫冒号K。加上这个叫cos.id或者说你加个index都一样啊，然后这个写完之后，通过cos从里边取值，它这个位置有很多值，咱一个取下啊，第一个值就是我们这个课程的这个图片，把图片取下，也就是里边的这个地方啊。那咱们在里边，比如说现在我就加上一个冒号，然后加一个叫cos，点上课程中那个属性名字，咱看属性叫什么啊，到里边找一下。课程这里。课程的名字是这个title嘛啊，所以咱们把title拿过来，这是第一个，另外这位置它有一个提示信息啊，不是title title写下边啊，应该是那个图片。图片应该是找到啊这个。

Call。错了，不是title。然后这位显示那个图片，那个提示信息，这里边我们写了一个title。加一个叫cos点开头啊，这个写出来了，然后下面有一个这个名称啊，这个就是开始学习，这是固定的，下面有一个名称，名称这位置写上你这个课程名称，但是它这个名称是在这个A标签里边，所以咱怎么做呢，用这么一个符号。不是，各位是否记得啊，两个大括号是不是叫差值表达式，通过差值表达式把这值我们给它取到啊，这是名称，然这里边title。就是它那个显示那个光标上去，那个标题我们叫开啊。这就可以了，然后写可以之后下面有些值啊，咱就这个用默认的了。另外里边还有一个地方，大家看这个值。这是什么呢？也就是说啊，我们课程是不是可能是免费或者可能是收费的啊，就是免费或者收费的显示，或者咱看这一面啊，因为咱没有启用这个服务器，就是这种效果，免费或者收费，那这个怎么显示呢？

咱看一下表里边啊，我们找个字段看这课程。在课程里边呢，咱看字段中啊，有很多字段，咱们怎么知道它是免费和收费的呢，大家看这个。这叫price，就是价格，你注意啊，如果价格是零是不是就是免费的，不是零是不是就收费的啊，就是用零判断，是零就是免费，不是零就是收费，那在里边咱可以把它简单做个判断，判断方式呢，并不复杂，咱之前都写过类似的，比如说你可以写一个三元运算符，或者三元表达式，或者说咱现在啊，换一种写法，就用之前咱学的三元运算符没有问题，但现在我这么做。大家看这写法。我说是否记得啊，V-E。这是什么？是不是那个徐就是判断的那个指令了，所以咱V-E通过它这个判断啊，那我来写一下啊，在这个免费这个此盘的标签里边，咱加上一个叫V-E。

在这个位置啊，V-E。然后在V-if里边，我们做个判断，怎么判断呢？就判断那个课程的那个价格加个price，如果它的值等于这个零，那咱就是显示免费，如果不等于零，就不显示免费，就是做一个V-U判断，但这价格呢，因为价格呢咱是根据数字判断，包括你看这个位置啊，三个等号咱说过。类型值都一样，所以咱为了更加的就是准确，可以加上一个函数，这个函数就叫number。Number什么意思呢？根据数字判断，判断的就是零啊，Number是这个里边内置一个函数，这样的话，当你是零就显示免费，如果你不是零就不显示免费啊。

这样的话，咱们把里边几个值都做了显示啊，就是里边的这几个啊，比如咱会看到效果。所以现在啊，把便利就做到了啊，当然咱们这里边好像没显示价格啊，这咱就不显示了啊，咱就把这个做到还有几个值，呃，我都给它显示全了啊，这叫就是学习人数或者说评论人数，其实它也是区里边的，就是其他的几个值。就是比如说浏览数什么的啊，就不一一写了，咱把核心的写出来就可以了，这样的话V-for就遍利出来了，每个这个课程在中用v for便利的课程的集合得到每个课程，然后取里边这些值，包括封面这个标题，还有它里边的价格是否免费。这个完成了啊，所以各位能把这个快速做到啊，你知道怎么去改页面嘛，每公顷页面都是一个很多的静态资源，那咱做的就是把静态资源改成查数据库得到，那我们刚才方式就是多个LY。

保留一个，其他都删掉，然后用V杠后便利就可以得到啊，这个我们写出来了啊。然后写出来之后，还有最后一个就是他这个名师的部分，也就这里边跟刚才写法一模一样，咱就写完啊。这位置多个LY，咱还是保留一个LY，其他的先都去掉。在一个中，我们加上一个叫V杠。然后他的名字叫这个teacher list。我们叫teacher这个音。再写上一个叫冒号T。加上一个叫teacher的ID。把这个变历啊，然后遍历之后，下面也是显示里面这些值跟刚才一样，比如说第一部分是以那个讲式的，应该是一个头像的部分。啊，那我们显示啊。他叫teacher，点上这个头像。

那咱找一下啊。他那头像它那个属性叫什么名字。头像应该是这个。然后讲师名字叫这个name。啊，那我们写出来啊，这叫AVA，这里边就是teacher。点内。但你注意啊，这里面要加个冒号，加冒号表示它是一个表达式，你不加冒号会怎么显示的，它把切点内部就这么显示，不会把这个执行再加上冒号，然后下面同样啊，这是那个名称用差值表达式。加一个叫teacher name。这个位置显示它那个名称。teacher.name然后再加个冒号。这个可以了啊，然后这里边有它那个资历，包括他的简介这些信息。咱都是用差值表达式，直接取下就可以了。单给它复制啊，就是里边有一个资历，还有一个简介。这是一个资历，下面这是一个简介部分。

最终显出来啊。加上一个叫做teacher。点上他这个简介，简介就是这个intro。所以这样的话啊，我们写到这里，咱把这过程应该就最终建出来了啊，就是这么一个基本过程，所以各位啊，按照我这种写法，能把它快速整出来。然后咱看一下哪个没写全啊，这类对比title，把名称也改一下啊。改成这个名称啊，就是总体上核心都小，当然还有一些小的地方啊，各位给他完善，但是核心的都完成了，这个各位能给他快速做到啊，没有什么难点，但是要求写代码的时候呢，我们一定要细心，因为在实际的项目中，这种东西我们也会经常写到，包括每一工音乐给你，然后你做这个便利做循环，就是把这个过程做到。这个啊，我们就写完了啊。

把数据在里面显示，然后洗完之后，咱们最后把这效果我们来试一下啊，看这效果能不能达到我们最终这个结果，那我们来试一下啊。咱们先把这个服务先启动，CS已经启动了，然后我们启用这个edu，在edu中有咱们刚才那个接口，然后这里边接口就是这个in that front controller，包括里边跨域这个我也加上了。咱们来做个最终测试。看一下啊，最后的结果啊，当然这里边呢，我这个可能没有图片，我把图片咱们找几个啊，就为了让他有可以。看啊课程来试一下啊，看这课程图片有没有啊。没有的话，它显示应该是没有那个图片的。啊，有这图片就用它了啊，然后那个讲师咱看一下啊，讲师里边那个头像。这头像咱看有没有啊，没有的话一会给他我再找一个啊，能看到效果啊。

也有啊，就是他了，暂时无法查看，就用这个头像啊。就这些啊。包括这些就是咱们给他。啊有是不合适咱再加啊，现在把这个服务器启动了，然后咱们看结果啊，看它最终效果啊，当然这个启动啊，咱先试能不能用，能用把那na再给他启动项啊，因为它本身咱配置了na那个服务。现在来到咱们的首页面中，我们最终试一下啊，现在我就回车。大家看一遍啊，你注意这个部分是没有错，然后下面有问题啊，咱看是不是因为那个na造成的。往下找啊，就是下面呢，我们要请求我们的这个接口。啊，应该就是na问题啊，那我把na给它也启动起来啊。咱启动一下怎么启动，昨天都说过了啊，就找到我这里边，嗯，NAS。昨天这个位置，然后那的里边咱们是B目录中把这个点开。

我给他啊运行。先请起来啊，然后咱再请伏。啊，等它启动啊。这个应该可以了啊，然后启动之后，咱们把这个edu我们重新启动一下啊，看它能不能启动成功啊。成功之后再来测试。Edu现在启动一下啊。就是因为它的问题是什么呢？我们在CF里边没有配置那个，那那个配置文件，包括注解咱没有加，所以它启动虽然报错也能用，但是E丢里边呢，但是把那东西都加上，所以它这里边啊，必须你要把那启动才可以。啊，这各位要知道啊，然后启动之后，现在这个应该启动成功了，咱最后再看一下效果对不对啊，来试一下最后的结果。好，这里边啊，咱检查一下，应该都做了查询，应该也没有错了啊。

啊，来到手页面中啊。在首页面中，我现在咱做一个刷新，然后看最终的这个结果。我们发现啊，Banner是有，然后后面那个没有啊，那大家看什么问题啊。首先如果说各位在开发中啊，遇到这种问题，那咱怎么做呢？还是我说的一贯方式，先看里边有什么什么错误提示，但发现没有，那咱怎么做呢？我们先用swagger先测试一下，看咱写这个接口对不对，如果对的话，咱就看前端啊，那我来测试一下啊，因为咱们之前是没有测试，现在用swa试一下。那swa呢，我现在给它打开。找到这个位置啊，出错误挺好啊，咱可以一步调试把它解决，8001加上swaer把这个打开，打开之后呢，找到我们那个controller，咱是inex front，这是我们刚才写到的，然后在里边有咱这方法，方法里边我现在点这个叫try it out，咱看结果。

大家看。数据是没有问题啊，你看啊，第一个是讲师，咱应该显示那个四个讲师，就是四个，第二是课程，我们应该显示有八个课程，这些应该都对啊，都做了显示，所以证明咱的接口应该没有错，然后接口没有错的话，那咱就看一下前端。但是这个前端测试中呢，有一个特点啊，因为咱们现在用的是不是叫get提交，Get提交一个好处就是你通过浏览器其实能直接访问啊，那我用浏览器啊，咱直接访下这个地址啊，看他能不能访问到，通过801，包括那个901咱都试一下。为了验证这个问题在哪里啊，先把后端排除掉都没有问题，最后再看前端。然后这个名字叫。Index大家看用801数据可以得到，然后把它呢改成这个叫9001，再回车。

比如刷新。大家看是不是没有错证明啊，咱现在请求这些应该都没有问题啊，然后都没有问题，那咱最后就来查一下这个前端是哪里错误。我觉得各位啊。各应该能找到问题在哪里啊？大家说在哪里？好，这个我先。