day11【首页数据显示和添加Redis缓存】/08-尚硅谷-谷粒学院-首页数据显示-banner显示（前端）

我们首先做的第一件事情，咱就把这个banner在页面中做个显示，就是在页面中调接口做显示，但是显示就是调用之前，咱在这个前端的页面中先做一些准备工作，为了咱们后面更加方便。那咱们做什么准备工作，给大家写下啊，首先第一个准备工作，因为咱们现在呢，我们用的这个框架叫纳斯框架，它这个框架中啊，本身并没有自带那个AX iOS。这个不知各位是否记得啊，咱之前一直用这个东西，AXLS用它是发送阿贾克斯请求，但是现在这个框架中啊，本身并没有带这个组件，所以咱们做的第一个准备工作是什么呢？我们需要使用一个命令，先下载下这个AXLS这个依赖，把它先下下来，这是第一步，因它默认没这个东西，而命令是什么？

我觉得各位应该知道啊，咱就写个NPM。因的加上一个AXFS，用命令把依赖先给它下载下来，这是咱做的第一步啊，那我们来看一下啊，就是现在比如说呃，我就再打开一个终端。然后在里边呢，用咱刚才说的命令，N PM in道AXFS，然后你回车把这个给它卸载下来，这是咱做的第一步，这个我已经提前下载过了啊，咱们看一下啊。在这里边呢，有这么一个地方，咱找到叫AX iOS。老大看一下啊，如果没有我就重新下一下啊。呃，看这个啊。T，好像是没有啊，那我重新下一下啊，记得下个那没有，那重新下一个啊，因此动AXLS把这单E回车，然后它就会联网把这个依赖下载到我们这边来啊，咱到它联网下载啊，这应该不是很大啊，应该很快下载完成。

等他先下载出来啊。然后下载之后，在我们里边能用这个组件啊，这个是必须的，然后咱到里边看一下啊，刚才我下过就这个AXLS默认是没有的啊，这是我们要做的第一件事情，这各位要知道啊。然后这个做完之后，我们再做第二件事情，因为咱们就是之前的代码咱看啊，就之前我们写那个后台代码的时候咱看到啊，当时因为咱用之前那个wee的命令框架，它里边帮咱们封装了很多地方，比如说在YouTube中呢，有个request，你看这里边他把AX的过程帮咱们已经做了封装，就是现在咱也可以仿照他把咱们这个框架中也做类似封装，它默认是没做这封装的，所以咱们也可以这么来做啊，所以第二部分咱就来封装这个axls。不封装也可以，只是你要写代码就是更多一点，咱封装更加方便。

写一下啊，第二个封装AX iOS，那怎么做到呢？我来写一下啊，比如现在呃，我就按照之前方式啊，比如现在我在我们这个前台框架中，咱建个文件夹，名字随便起啊，我就叫YouTube，它叫它啊，然后在YouTube里边呢，咱们建一个JS文件，这个文件我还是叫这个蕊快点JS啊，这是我们写的一个文件，然后在蕊快点JS中，咱可以参考之前那个就是方法做封装，就跟这个差不多啊，那咱给他就。后撞一下啊。这个过程呢，我就到课件中给大家就直接复制一下，我的课件中，应该是在这个第二个里边啊，咱们把这个直接拿过来啊，就是之前我们写的方法啊。也就是定部分啊，那我现在把这部分咱就复制到我们这个，就是刚才建的文件中来啊，把这段直接复制。那这些过程我都写过了啊，这都写到了，刚才我们也都下载完成了，然后复制咱看一下啊，这比之前咱后台稍微简单点，但是也能做封装，然后什么意思，看这代码啊，打开第一行。

第一行就是呢，引入咱们刚才下载的axs组件，然后第二部分创建一个axx的对象，在里边只有你那个地址，还有它这个。这什么就是超时时间，然后最后啊，它可以被别的地方引用，所以咱们写的它，而这过程中呢，跟之前区别就是咱们之前在后台的时候，我们的地址。咱就写到这个文件中了，但是目前这地址咱是直接写到我们这个瑞快里边，所以这位置要写上你请求的地址，那地址写什么呢？希望各位要知道啊，就是我们现在因为咱们的这个项目中肯定有800102030405多个模块，而咱访问的话，之前咱通过是不是都是N这个词，所以你注意啊，这个要写上是什么，就是我们那个。

N个那个地址就是N这的IP和端口号啊，所以这个是咱们做的第二步做一个封装，然后里边就封装出这个代码，咱们就是在里边啊建个文件夹，建个文件，这个名字是可以随便起啊，我就叫U。然后创建之后在里边写那个封装代码，封装代码就是这个过程。把这个打开它就拿过来啊，所以第二步我们就完成了，做了这么一个封装，为了后面操作更加方便。然后封装之后，下面咱就可以用这些内容来实验我们的最终的效果，而下面咱要写的代码跟之前应该都一样啊，那咱们来写一下啊，准备工作没有做到，我这写到这个位置，先下载依赖，然后封装，那下面咱做一个显示啊，来到这个位置啊。那怎么显示呢？大家注意这个过程啊，咱们快速浏览一遍，第一步也是在API中的建构文件，然后里边引入你这个就是啊，Request，然后包括路径，最后页面中引入，最终咱还用那个date create method做个调用啊，所以你发现写法跟之前没有区别，只是说现在很多东西要咱们自己去写，之前是帮咱们封装好的，那下面我们来做一下啊。

咱看这是准备工作啊，下面咱们继续来做开发。画一条线啊，往下来做，首先第一部分呢，咱先把那个就是首页的banner。进行一个数据的一个显示，那怎么做呢？这里写一下啊，首先第一步操作，咱们就是在项目中呢，创建一个API的文件夹，然后在API文件夹中创建一个JS文件，在文件中定义你要调用的接口的那个路径，包括它的提交方式，包括它的参数等等信息，在里边做定义啊这是我们做的。

第一步，那咱们把这一步我们来写一下啊，就是现在呢，咱就在这里边我们建个文件夹，我就在根目录下建了文件夹，比如我还是叫A片啊，但是名字也可以起别的名字啊，但是为了跟之前写的差不多，然后在里边呢建个文件，文件我就叫这个banner。点JS这个做到了啊，然后做到之后在里边我们做一个就是跟之前一样，做这么一个引入啊，就是这个写法。我把它直接复制过来，再用它来改一下。这个写法我觉得各位应该一点都不陌生，咱之前写这个后台中应该起到前端都会看到，先引入这个这筷子，然后里边你的post default新的方法写上路径和调方式，现在我们也是这么做啊，那这里注意一下哈，咱写的话路径需要检查一下，因为这个东西是我们写的这个路径大家看径啊。

艾特，斜杠给动氧啊。后面加一个叫us，看它别写错啊，Us文件名字叫request re ET没有错，这个引入引入之后在下面写的方法，那这方法我给大家为了区分啊，咱改个名字叫get list的banner。这个方法的作用就是查询咱们那个就是。Banner的信息就是查询啊，我们那个前两条banner的信息。Banner的数据用这个做到在它里边呢，我们写上这个接口的这个地址啊，咱到里边复制一下啊，找到咱那个banner应该是这个，然后它的地址就是EDUCMS加上这个banner front。我改一下啊啊，但是这位置加个引号就可以，因为它没有什么参数，加个飘也可以啊，我就加个引号了，E丢CS bner front，后面加上名字叫get oner。

这个复过来，然后写完之后，下面写上提交方式是一个get提交，所以这样的话，这个方法就定出来了，咱在API中创建文件，然后写上这么一个方法，跟咱之前应该是一样的。我把这个代码。顺过来啊，就这部分啊，然后洗完之后，咱下面肯定是在页面中做调用啊，那咱们最后给他调一下啊。这个位置我就写。第二部分。咱们在。页面中调用接口，然后得到数据进行这么一个显示，那咱们调一下啊。但是调的话，各位注意啊，因为咱们现在呢，我的数据是不是在这个位置显示，也就是说啊，上午咱提了一点啊，咱们这个框架的结构中，它里边有两个页面构成，第一部分叫layout中的default，还有一个是首页面中这个叫in代词，就这个页面。

但是它现在结构就是在default这个页面中是布局页面，里边有它的头和尾的信息，而咱们在inext中是我们的首页数据，现在咱要显示这个班的部分应该是在我们的首页中，而不是在底po的中啊，所以你要找对位置，那咱就找到我们的首页面，也就是inex页面，在里边我们做个显示。啊，那我们来写一下啊。就是在index和点E页面中进行调用，那咱给它调一下啊，咱看怎么写啊，首先来到页面中找到它那个Java思维部分。在这里啊，在这里边咱们第一部分先把咱那个banner.js文件给它先引进来，因为要调里面的方法，那我们来一个叫port banner。加个from加上地址就是艾特斜杠API。

Final。这个就引入过来了，跟之前写法一样，然后引入之后在下面我们做个调用啊，但是怎么调用来看这个结构。希望各位要都知道啊，咱现在有一个叫date啊，注意啊，括号别写错啊，对照括号到这里，然后date后面有个什么。是不是叫这个。Create，在你页面渲染之前执行，然后create下边有一个叫。Methods，我们定义就用这个方法，所以咱们是这么一个结构，然后结构写完之后，咱下面写它的内容啊。但是内容怎么做呢？因为现在大家看接口中是返回我们这个所有的班的是一个集合，那咱现在在这里边date中先把这个班的这个数据给它定一个初始值啊，那我们来做个定义啊，来一个初始值。应该是这个位置啊，咱做一个定义，比如我叫这个banner。List。是一个速度，这个我们作为定义，然后D的时候呢，有一点各位注意啊，这个别写错位置。

我看啊，我这就写错位置了啊，你看什么叫写错位置了，你注意啊，大家要写是不是写这个蕊屯里边，但是蕊的时候你注意啊，我现在位置是不是放到了这个对象中，这肯定不对，咱要放到这个对象外边，你放到里边啊，下面用不了啊，在这位置不要写错啊，我刚才就是写错位置，它放到这里边。然后这里边加个逗号，因为这是一个对象，只里面有更多数据，他为了做那个就是幻灯片那个切换，然后下面啊，咱要写到这位置，这就表示。Banner的那个。数组啊，咱为了存储数据啊，这做的定义，然后定义之后在我们的master里边，咱调一下这个方法就是查询列表banner的数据，那我们调一下啊方法起个名字我就叫get banner。然后洗完之后在里边咱就调这个banner中的方法。

啊，他这个方法咱到里边复制一下啊。这个名字叫get粒子的班。就是它里边没有参数，我们加上一个点，然后加上一个response。箭头函数通过response把里面的数据得到。但是怎么得到，给大家特别说一下，跟咱之前后台写的稍微有一点区别啊，我先写完，然后我解释啊，就是点date，再点个date，再加上里面这个叫list。然后洗完之后咱做个赋值。这点banner。List等于这个数据，咱现在需要这么来做，但是为什么这么做，给大家说明啊，就是咱们之前啊，在写后台那个页面调用的时候，就是咱们随便找一个啊，当时咱们写那个调用好我们当时的写法。随便找一个啊，大家看啊，当时写法than棒后面是不是加上一个date，但是我刚才这里边是不是加了两个date，为什么这样子，因为之前啊，在咱们这个后台系统中，它在这个request里边是帮咱们做了这个封装，就咱们找到你看request中它给咱们瑞吞这个值就叫做点date，所以咱们写一个date就可以了，但是现在我们这个风能中没有做到，所以咱们本质上它是有两个date做到。

啊，所以它是这个写法，包括这个知识点，我们在讲那个前端中，比如说应该也演示过啊，你把这记住啊，因为咱们这里边没有分常那么多，就咱写两个date，把这取到，你写一个date，这值肯定没有啊，这样的话，数据得到了般的list，然后得到之后，注意啊，这方法咱肯定是一进入页面它就要调用，所以在这KT里边做个调用。就是调用查询banner的这个方法，咱调一下啊，这次点get banner list。

我们就完成了啊，所以页面中我们就是这么来做的啊，用这个基本的过程把这个做实验。我把这结构给大家直接截个图，然后放到我的。色涂上啊，这样的话我们调用就完成了，然后完成之后，咱最后页面中做个显示，就是把这个斑的例子显示就可以了，那咱看怎么显示啊，咱们往上找。找到我们这个位置啊，大家看啊，它的位置应该就是在。这个地方叫幻灯片，各位仔细看啊。他之前的幻灯片呢，在这里边呢，是这么写的。你看这个位置啊，它是写了两个D。然后每个div中的显示。不同的图片，比如说这个图片目前是写固定的，而咱们现在做法就是把这过程中的图片是不是要从数据库中查出数据取出来呀，我们要这么来做，所以咱们怎么来做到呢？返回是个数组，那咱把这个返回的值，就是咱们刚才看那个叫班的list这个数组，给它做个便历是不是可以做到啊，就是一个简单的便例啊，那咱写一下啊。

首先这个先删掉，保留一个，然后在一个里边我们加一个叫V-for，就是一个VE中的便利指令，加一个叫banner list，然后在里面加个音。给它起个名字叫这个B啊，然后加上之后再来一个叫冒号key，就是它的唯一标识，因为每次变异之后东西要不一样，要区分，用ID区分，这个啊是咱写的一个最基本一个便利。Banner，然后给它便利，最终冒号K标里面这个值。啊，这各位知道啊，然后这个做到之后呢，咱下面在这个位置要把它那个内容做个显示，而咱要显示出来的肯定是他那个图片的这个相应信息，就把图片做显示，那咱们啊找一下那个图片那个属性。

就找这个班长。我们找一下啊。CMS里边有那个叫banner。找到啊，就这个实体类，然后它里边我们要显示图片。大家看啊，图片的地址是不是这个叫隐秘值ul，所以咱把这个在里边显示就可以了啊，那我们来显示一下啊。啊，就这里边有个小问题啊，就是啊，你在写完之后啊，他可能会报错，它是因为啊没有加载完成，没有编译完成，你等一会儿帮你看，我刚才就是错了，我一会儿又回来是不是就没问题了啊，这不是代码错是吧，变异卖，然后再改的话，就是把这个改一下，这位置要写上咱们那个图片的那个地址。那怎么做呢？大家写一下啊，首先我们加一个什么冒号，就是单项绑定，然后里边加一个叫按。点上你里边那个名字，就是咱刚才看到这个名字叫隐秘值ul，把这给他拿过来，这样的话可以了，然后后面还有一个叫LT啊，咱把他的名字做个显示。

写一下啊，就是写一个叫。Banner点上他那名字，名字叫title这个啊，我们做个显示。所以这样的话，这个效果就是这个代码我们就完成了啊，然后咱们马上看效果，这就是用微杠for作为便利，然后这个你知道啊，冒号表示表达式就取到你变译之后这个地址，然后这里边取它那个标题，另外就是这个标签中，不知各位是否记得啊，是咱们H填阶段学到的啊。应该过得比较久远了，里面有个属性src好理解，就是图片地址，这个al LT是什么意思？希望各位要知道啊，我来说一下啊，各位给他记住，LT呢有两种情况，就是在不同浏览器中它情况不一样，就是在有些浏览器中LT什么效果，当你把光标移到图片上，会显示这个内容，这是第一种情况，但是有些浏览器中它没这效果，它什么效果呢？当你图片没有显示，就是图片地址错了，它会显示这个内容啊，就是要么光标上去演示，要么图片没有显示，这个纸就是为了做一个提示的信息，叫LT。

啊，这大家了解一下啊，所以现在咱把这个便利就完成了，就是咱们给这代码啊，这跟我写的一样啊，加上这个地址，还这个title，咱们做个便利啊，另外这图片上其实可以加一些超链接路径啊。这个呃，这个单也加上了啊，加个路径。就这位置h ref。里边我们加个冒号，然后第二个叫。Banner点上那个路径，路径咱用这个叫link ul。这个啊，所以咱们把它就完成了，这是我们在页面中做的这么一个显示。然后咱们啊，代码完成啊，完成之后呢，最后咱们把这效果我们就最终给到试一下，看一下它最终的结果是什么样的，那我们下面啊，咱就来看一下啊。

啊，首先啊，你看啊，课件中跟我的一样啊，没有区别，然后咱们下面这个位置啊，我们来试一下最终结果。这还没有编译过来。Banner link啊，这个可以啊，编译比较慢啊，然后最后试一下啊。因为咱们刚才呢，改了很多地方，所以为了保险我给他还是重启一下啊。点个CTRLC，然后Y重启。再启动一下。最终看结果啊，包括接口我们也都写完了，我把接口部分我们也重启一下，现在接口这个CMS，包括E丢暂时用到啊，一会咱用到已经把CMS也做个启动。咱们等他啊，看效果。