day11【首页数据显示和添加Redis缓存】/04-尚硅谷-谷粒学院-整合项目首页面

就是下面呢，咱先把这个项目中这个页面先整合出来啊，咱做一下啊，那怎么整合，我就按照课件中的流程做到了，各位自己在测试中也按照这个流程写就可以了，那怎么写啊，咱一步来看啊。我写到这个位置啊。咱们就来整合。我们项目中那个前台的这个页面啊，项目的页面整出来。那怎么整合，我们就按照我这个文档中的流程，我们来做一下。流程整合不需要各位写代码啊，然后怎么做呢？首先第一部分咱需要先安装这么一个组件啊，这组件呢，是为了什么呢？后面咱做那个幻灯片做准备，就幻灯片一个插件，也就是说咱们在首页面中一进入是不是有这个东西，咱为了这个做准备，所以咱们先安装一个幻灯片的一个插件啊，这个咱们直接用就可以了，然后里边有这个过程，那咱们一步来做啊，第一步用个命令叫n PM in死的，把这个我们先给它做个安装啊，这是它的第一步安装这个插件。

那给大家啊写过来，然后咱们给它就装一下啊，怎么装我说一下啊，咱们来到这里边终端中啊，那这个我先可以先给他停掉。先给他停止，咱来安装一会儿再重启啊。就是CTRLC停止。然后停止之后我们用命令，这个命令。诶，不是这个啊，没分过来。就是咱们看到的它NPM，因到这个命令安装的是一个幻灯天插件，是不是咱们一会儿做那个效果使用的，咱给他装上就可以了，那我易回车现在他就会联网去下载我们这个内容。这是第一步，我们等他先下载出来啊。就是他啊。这个我先给大家截个图。

把这个直接截过来啊，先下载，然后下载之后在里边呢，咱需要在这位置给他做到一些其他东西啊，我这应该下载过了啊，我就不在课上浪费这个时间了啊，看一下啊，就用命令就可以做到，下载之后呢，在里边咱找到叫VE这个东西啊，找这个啊也比较多找那个V开头的。V开头的vuee这个啊，我提前下过了，各位按照步骤给它下就可以了啊，这就是往快往慢，快和慢的问题啊，然后下载之后呢，我们的第二部分按照流程，咱需要把这个插件做过配置，然后能实现这个效果，那我们来配置一下啊，按照流程来做的。第二步。配置这个幻灯片的这么一个插件。把这个做到啊，然后配置就是我里边这个流程啊，用这个步骤直接做就可以了，我把它给大家就直接复制过来了啊，然后咱们就按照流程写下就可以了。

这个过程啊。就是他啊，那咱们看怎么做啊，这里写的很清楚啊，每步都有，就是咱们第二步要配置插件，那首先呢，我们做法就是咱们先在这个叫里边建一个文件，然后文件中加这个内容，打开内容是什么？你看啊，Import from，就是引入viewe，引入刚才咱们下载的那个插件，把这引入，然后在这个就是纳斯的核心配置文件中加上这部分就可以了啊，就是做这个事情，那咱写下啊。现在我在play里边，咱们给它创建一个文件，那我们找到plug这个位置建一个文件。就是我们的这个文件，然后D完文件之后呢，在文件中引入咱们刚才就是下载那个插件，还有一个是voe插件。就是这个过程，然后用voe来使用这个插件。

这是前端写法啊，当然各位应该能看懂，这是引入vuee，这是引入咱们刚才下载那个插件，就这个插件，然后最后通过VE使用咱这插件把这个做到啊，这是第二部分，然后做到之后咱最后在这个那次的核心配置文件中加上咱这插件，然后最终能生效。那怎么加在里面都写到了啊，你找的这个你的po里边就这位置。然后你在pod里边呢，复制这两段话就可以了，注意啊，我之前提到过啊，它这里边呢，还有其他配置，你其他配置不能变，然后咱给它加上两个C的那种，我就给它放到最上面啊，然后下面加个逗号，因为它还有其他那种。啊，这个位给他复制手注意一下啊，当然复制中啊，之前有同学遇到过这么一个小问题，有同学呢，他没放到前面，他放到后面，放后面也没有问题，但是你别放错，有同学怎么放呢？你看啊，这里有个叫build，它就放到了build里面肯定不对，你要放后面的话，要放到build后面。

啊，当然我们建议放到第一个，这个没有什么问题，你这里边直接复制就可以做到啊，这是我们这个插件的安装，为了咱一会儿做准备，因为这是voe中啊，他给我们提供好的一个简单的混动下插件，为了咱们后面方便。安装上了啊，然后安装上之后，下面呢，咱来复制我们的页面中的内容，就是把页面中的元素，包括页面中的样式东西给它做个操作啊，那咱写一下啊，第一步幻灯片，然后第二步这个东西咱都做到了。我给他。大家画一下啊，这是第二步，这是第一步。然后咱们写第三步。调这位置第三步我们要干什么呢？第三步做法就是咱就复制我们项目中使用的那些静态资源到我们对应的页面中，而静态资源呢，我们要到的页面应该都是放到刚才咱们提到这个叫做set里面去，这面中as EPS里面，好把这目录写一下啊。

Ass sets辅录中，那咱们把静态资源复制，静态资源就是这些CSS javascript，还有一些相关的图片，那咱们来找一下啊。在我这个资料里边有一个叫前端相关资源，然后里边有一个叫页面原型，在因为原型中有一个叫access，咱们把这些内容就复制到我们的项目中就可以了啊，你就复制这个内容。这是我们的位置啊，在我资料里边都有，各位就复制这个内容。然后把这张图截过来，咱给他就复制一下啊。我们找到。这个内容直接我复制，然后复制到我当前这个项目中，我的项目是在WORK1010，然后FRONT1010里边有一个叫access，把这个直接复制。

相同的替换。这样的话就可以做到啊，这是我们的第三步，各位也是怎么来整合。而你看这里边到底都是什么东西？咱看啊一部分。是不是一些CSS样式，包括这位置就是一些相关的图片啊，就是用到的一些图片中的这些内容啊，咱项目中要用到，然后除了图片之外，下面还有一些那个javascript那种包一些什么，你这个。相关的什么网页中要的图片啊等等，就是这些内容啊，这个啊是咱们复制静态资源，不需要过去写，实际中这些CSS包括图片都是由美工帮你写好的，咱把它直接整合过来就可以了啊，这是它的第三步，直接复制。这么一个内容啊，这咱们就整出来了，然后复制之后，咱下面来复制里边的页面的部分，而页面部分刚才我们刚讲到里面这个特点啊，还有一个叫布局页面，还有你的首页面在布局中只有头和尾信息，然后中间它有nott标签，引如你的其页面啊，所以咱下面就来把这个default和Internet页面给它快速复制出来啊，把两个页面做个复制。

那大做一下啊，我这边都有，首先第一个呢，咱先复制那个default的页面，把这页面内容先做个修改。我写到这个位置啊。这张图上我们到第四步。咱的做法就是。各位，就是从我的课件中复制这个代码。到这个layout同录下的DEF fort.view页面中，把这步做个复制啊，这代码就不截过来，因为都是页面部分，然后咱就做一下啊，找到的课件中有一个叫layt default啊，这是一个结构，结构中的有头有尾，中间是枪那种，然后这里边有一个叫完整，那容你把这段代码复制替换到你的def fort中来，那我就直接ctrl a ctrl c就复制了。

啊，这是首页面，就是由美工写好的，然后复制之后，咱给它来到我们的页面中，我先关掉啊，在页面中的有一个叫default.voe把这里内容给它都替换掉，直接换成我们新的这个内容。啊，这是一个。底的页面，然后这个页面咱们大概看一下啊，里边结构很清晰啊，第一个结构叫hier，就是你的头信息，这是头，然后还有叫foot，是它的尾信息，中间部分有一个叫na，就是引入其他的页面啊，所以咱们把这个就复制了，然后复制之后在这里边的最后这位置就是引入你的一些相关的set样式，就是咱刚才写的这些。里边都做到了啊，这是DEF的页面，咱就完成了，然后完成之后啊，这里边继续往下走啊，但是这个DEF中呢，咱复制这部分，它是没有那个幻灯片的，咱需要把那幻灯片也做复制啊，那咱一会儿复制啊，咱先往下看下面的再复制你的首页面，就是这个配置是中的indext页面。

这个咱需要做个复制。写一下啊第五步。这里边。咱们需要就是从我的课件中复制代码。到这个就是配置四里边的inext页面中，把首页面咱需要做个修改，因为刚才只是里面那个布局，还有首页面，那咱们啊也是复制一下这个部分。把它直接CTRLCCTRL啊直接CTRLCTRLC复制一下，就这些，然后复制之后把这个放到咱们的配置最中的index页面，把这里面内容给它替换掉，换成咱们的。进那种啊，然后这些就是你的具体的静态页面里边都是写固定值，咱一块儿把这值肯定要换成咱们数据库中数据，目前只先整合一个静态效果。

这个啊，我们就触做到了，但是里边呢，还没有加幻灯片，咱一会儿再加啊，就下面啊，咱先看我们到这步之后，我们目前的效果是什么样的，先看一下当前的效果。那现在这些都复制了，也都保存了，咱们把这服务启动起来啊。启动下。NPRUDV啊，我们做个启动，看一下目前的效果。等它停起来啊。然后就是这个纳测框架本身有一个特点，希望各位注意啊，就是这个框架呢，它特别耗内存啊，内存可能这样，比如说你这个框架一直在启用状态，一直你没关掉，可能会造成你内存啊大量占用啊，所以各位如果说你在用这个框架的时候，可能你发现很慢，你可以把它先停掉，再重启一下，要不然它可能会特别耗你内存。

啊，就是一个小问题啊，然后这个启动了，咱看一下目前的效果，先都关掉啊，咱就是访问local house3000我们这个地址，现在我给他再重新刷新一下。咱们看目前效果就有了，这就是一个静态页面，大家看页面中这个结构啊，这是头的部分。这是尾的部分，头和尾在底中定义，然后中间是你一遍内容在音带的定义，大家看目前的静态效果就有了啊。这个啊是咱们简单做一个整合，把这个做到了啊，然后都整了之后，最后呢，咱就把那个幻灯片，或者说那个叫做轮播图的效果给它就整进去。啊，写一下第六步啊。就是各位按照我那个课件中的流程。咱们就是整合这个。幻灯片把这个做到啊，这是最后一步，那咱就按照课件中流程把这个整合一下啊，这段代码就是一个操作过程，不需要各位去记，因为都是前端中这个流程啊，但是在实际的工作中啊，有的时候咱可能也要做这些事情，美工把页面发给你，你需要把页面整合到你项目中，那怎么做？

嗯，就是这个过程啊，就是实际中呢，可能没有这么详细的文档，咱做的过程中可能要去问美工，你那个页面是干什么的，这是做什么的，但是过程肯定也是做这个事情，那咱们啊，最后幻灯片整合过程也是。第一部分有一个幻灯片的这么一个页面的结构，把它复制，然后复制之后呢，咱放到哪里呢？各位注意啊，在咱们的default里边，这位置不需要咱来到我们的首页面，就是配置中的inext中，在这个页面中，咱看这位置我加了一个注释，目前没有那种把这个给它复制过来，这就加上一个幻灯片的这个东西直接放到我们的INEXT1文中啊，幻灯片包括里边有图片。

然后除了它之外，下面还有这么一段Java代码，这代码我就直接复制啊，这是一个简单的幻灯片的切换效果，咱们把代码也是复制到我这个inext页面的最下边。就是这个位置。所以这样的话啊，咱们现在就把这个幻灯片就做了一个简单的整合啊，就是这么一个基本过程啊。按照课件整个幻灯片，这里特别标注一下啊，咱是在这个。Inex.Vue页面中。做我们这个具体操作。这个完成了啊，关于整合，然后整合之后咱们把效果我们最终给他就试一下啊，看一下目前的效果到底是什么样的。啊，当然里边有这么一个小问题啊，咱找那幻灯片。往上啊。就是幻灯片里边呢，我这个位置写了两张图，但是图片是一样的，比如咱给他换个图片啊，让它更明显。

这图片我就到这位置来找phoTo Band里边啊有两图片，咱这里边用的是这个202图片，那我换成这个图片啊，这个给它加一个，为了让它效果更明显。把这个图咱们给它复制过来。直接拿到。这里啊，这样的话啊，应该就有两张图的切换了，那咱下面把这个效果我们来看一下啊，看一下最终的结果是什么样的，比如现在重新刷新。然后大家看啊，就这个结果，上面有一个幻灯片这么一个啊，咱只做了一个简单切换，因为重点咱不是做幻灯片，让大家有个效果就可以了，你看啊，有不能图切换，然后下面有热门课程，有这个名师大咖包有他的头和尾啊，这就是一个首页面的这么一个整合，咱们把静态效果做到了。但是这个幻灯片呢，我只是做了一个简单事情啊，这些幻灯片目前没有做那个自动切换，只是你点啊它可以切换。

这个啊，各位给他指导一下啊，所以现在完成了啊，整合也就是各位能按照我课件中的流程把这个快速整合出来就可以了啊，就是一个。没有什么技术含量啊，就是一个操作的过程，按照里边的每一步，这些我在这图上都画出来了，包括在我课件中也都有对应的代码。这个啊，保存下第五个。咱们就是整合项目的首页面。它这个内容。完成了啊，然后完成之后呢，大家看啊，在这里边呢，咱刚才做的是首页面，然后后面还有什么课程名师等等啊，这是咱们一会儿给他做到操作啊，而这个课程名师中呢，咱要整合中会讲到这么一个简单的技术点，叫做路由操作，就是在纳中的路由该怎么进行跳转。给咱们马上说到啊，现在咱们是整合出来了。