day11【首页数据显示和添加Redis缓存】/05-尚硅谷-谷粒学院-整合课程和名师页面

就是下面呢，给大家来说，这个叫路由，也就是这个纳中这个。路由。啊，那这个什么意思，给大家说一下啊，路由你理解为就是咱说那个菜单，比如说咱们看啊，我现在点击首页是不是显示首页数据啊，当我点课程是不是应该显示课程数据，这个就叫路由，点击不同路由会跳转到不同页面，那咱来说一下那中的路由我们该怎么去做啊，咱来说这么一个小支点啊，然后再来整合。我小的位置啊。那是中岛。路由这里强调啊，在net中的路由呢，咱们总结起来有两种路由啊，我写一下啊，首先第一种路由。啊，第一种它可以叫做这个固定路由啊，但是其实在真正术语中，它没这个说法，但是我就给它叫固定路由，它就是一个固定地址。然后还有一种路由解一下第二种它叫做动态路由，这是里边的两种路由，那两种路由分别都是什么意思，给大家解释一下啊，咱看实际的效果。

各位看啊，比如说我现在啊点课程，它是不是要到课程的页面中去啊，那就是我这课程这个路径是不是应该是不变的，一点它到课程页面，当我点名师一点名师是不是到名师页面，这个路径是不是应该也是不变的，所以你注意啊，固定路由是什么意思呢？也就是说你路径是一个固定的一个地址，这就叫固定路由，就是它是不变的。它是不发生变化，这个叫固定路由，比如说我们这里边这个课程。包括讲师或者包括名师，这个就是固定路由。这个啊，是我们说的第一类路由的方式，然后这个固定路由呢，我们该怎么去做，给大家来说一下啊，咱们直接来到咱的页面中。

因为我刚才提到啊，希望各位要知道啊，咱们这是头的部分，这是尾的部分，中间是内容部分，而它的头的部分和尾的部分应该在哪里？希望各位要知道啊，这头和尾的部分是不是应该不是在咱们的inext中，是不是应该在这个defat的布局中了，这里边有头和尾，Inext中是你的具体内容啊，所以咱们到这个底部的里边找到它的头的部分，因为头里边有它那个。路由的部分啊，咱往上看投的位置大家看啊，路由就是在这个位置，有首页，课程，名师文章、问答等等，咱们就看这个课程，以它为例，课程里边的路由用了一个叫rootor link。这是也是用到voe中这种方式，然后root link中呢，有这么一个属性叫to to是什么意思呢？是不是有去或者到to这里边就写上你路由的一个地址啊，所以咱们这里边路游是这么做到的。

这给大家寄过来啊，也就是说咱现在是通过这个兔。这个属性来设置你路由跳转的一个地址啊，用这个做到，但是大家看到啊，它目前的这个地址是写一个叫杠cos啊，这是目前的地址写一下啊，叫杠cos，而这个地址我们要写的话，该怎么让它跳转到页面中去呢？给大家说明啊，这在我们nat中是一个固定的一个做法。给大家写一下啊，他的做法就是。啊，就是实现的方式就是。我们啊，在这个配置次里边的，先创建一个文件夹，文件夹名字就叫扣子，跟这要一样，然后创建之后呢，你在在在这个cos文件夹里边在创建一个voe文件，这文件默认名字就叫indeting vouee，也就是说呢，当你一访问杠cos，它就会到配里边找cos文件夹，再去找里面的inext voe文件，它里边就是这么一种做法，咱通过这种方式就能写出这种动态就固定路由一个跳转方式啊，就是它是这么来做到的。

包括大家看在我开件中也写到了，你在配里边建文件夹，要cos，跟这名字一样，然后里面建个index viewuee，当你访问它就到这个ind Internet view中显示你的内容啊，这是它的固定路由，那大来写一下啊这个做法。咱来到这个位置啊，首先配置S是页面，你路由默认它都找这配置S就是框架中帮咱做到的，那我首先建文件夹，叫这个cos，在cos里边呢，咱们建个文件，它默认又叫index vuee找这文件啊，所以咱们就是。这么来创建。这个结构。各位把这个知道啊，把这个图截过来。然后咱们做个测试啊，就在这里。

那咱们。做个测试呢，我在里边写个内容啊，咱就比如随便写这么一个内容加一个。汤里就叫课程列表啊，这个就叫固定路由，我们就是这么做到的，那做到之后咱把这效果我们来看一下啊，看目前是什么样效果，因为刚才我点课程直接报错，咱没有写东西，现在我们加了这个内容，先看能不能跳转，再看一遍内容显示对不对。那我点课程大家看啊，因为我没加样式，你看这个位置，这是不是叫课程列表啊，咱这么看在这里啊，因为我就显示一行文字叫课程列表，所以大家看这路由是不是就跳过来了，当我点课程到达那个house里边的index页面中，显示我们的课程列表。啊，这是我们做的第一个叫固定路由，我们就演示出来了，包括讲师跟他一样，一会咱再改啊，然后这个做到之后，咱还有第二部分，第二部分是什么呢？它就叫做动态路由。

那什么叫动态路由呢？给大家说一下啊，比如说啊，一会儿咱们整那个页面啊，那页面我先整出来啊，咱现在把那个课程那个页面整出来，这页面我在里边都有，我把它先复制过来啊，就是课程那个index页面。这个得先给它覆盖掉。这个页面啊，然后咱们看一下啊，这是一套静态页面，现在我点课程。收不到这个页面啊，这是静态页面，然后大家注意啊，我在课程页面这页面中其实就是显示它的课程列表，大家注意，当我现在点击某一个课程，它是要进入到这课程的详情页面，什么叫详情呢？就是详细信息，这里边只显示了这个标题和图片，咱们点击之后能看到里边更详细信息，比如说里边哪些简介，哪些章节是哪个讲师讲的，它是哪个分类等等，里面应该都有，所以咱们下面点这个就要它的详情页面，当误一点可以记住啊，只是还没有写到。

但你注意啊，里边有个特点大家看啊，比如现在，呃，我先刷新啊。有缓存，就是现在我一点大家注意在我这后面是多个一啊，就这个一呢，咱后面要传就是课程的ID。当然各位注意啊，每个课程ID是不是都不一样，比如说你比如说我点第一个课程，他ID可能是一，第二课程ID肯定不是一，ID可能是二，第三个可能是三，第四个可能又是四，每个课程ID是不是都不同啊？所以这种方式叫什么？又叫动态路由，就是你每次点击不同的那个超链接，它的路由地址都不一样，这就叫动态路由，而咱一个最典型场景就是我这个详情页面，因为每个课程的ID都不一样，这叫动态路由。大家啊，把这知道我在里边写下啊，就是第一个固定路由，咱刚才已经说过了啊，就是里边的一部分。

就是它啊，然后第二个给大家说这个叫动态路由，动态路由什么意思呢？就是你每次它这个生成那个路由的地址都不一样。比如说我们的课程的详情页面。就是每个课程的ID都不一样，所以他每次生成的地址也不同啊，这是一个典型的动态路由的这么一种做法，根据你的每个ID不一样，查询出不同课程，这叫动态路由啊，大家把这知道很好理解，固定路由嘛，地址都一样，动态路由每个地址都不同，而这不同就是每次ID都不一样。那这动态路由该怎么创建，给大家说一下啊，这是一种比较固定一种结构来看，我还是这个课件中啊，这里写到还有一个固定的一个规则。

看我里边啊，有句话。就是这里写到的啊，这里。我这里写的啊，就是我们需要ID长一条记录，那要用到动态路由，就刚才我们说的那个详情页面，而纳中动态路由有个规则，看它什么规则啊，这里写的很清楚，以什么开头。叫下划线开头，然后参数名字。作为下划线后面的文件名字，比如说我们这种形式下划线id.voe这就是创建那个动态路由页面，咱们是这种规则。然后把这个啊给大家输过来，咱是按照这种方式。做的一个创建，那下面按照这种结构，我把页面给各位来创建出来啊，咱就做一个课程详情，那怎么做呢？还是在cos里边咱建个页面，页面的规则，第一个加个下划线，这是必须的，第二个给页面起个名字，这名字理论上可以随便起。

只要是个单词，比如我来一个C啊，来一个A，来一个B都可以，单单一般啊写的有点实际意义，我就来一个id.voe啊，这个ID随便写，但是第一个必须是下划线啊，这是必须的，这就是一个。动态路由键的页面，然后建完之后，咱把那个内容给它复制过来，因为咱是课程详情嘛，课程详情我到这里边，这是列表。来找那个详情往下找啊。就是这个页面，我这里写到cos中的下划线id.voe然后咱们把这个内容复制到我这个下划线ID这个页面中来，这是详情页面。这个复制出来了，然后复制之后咱们把效果咱试一下啊，看什么效果。我重新演示啊，先回到我们最初始这个页面。3000这个端口，然后现在我点课程用的是固定路由到课程列表，当我点击某一个课程，它是要根据ID查询，根据ID查询到的是不是咱的动态路由，比如说现在我一点。

大家看。页面输不进来了，它就到动态路由，它就根据ID识别你这是否是动态路由，然后到你的不同页面啊，只是现在我是都写了一，后面咱这一肯定会改成句的值，查数据库得到这个叫动态都有啊，所以这两种方式给各位都做了演示，你把这个给他要知道啊。关于固定路由和动态路由，固定路由就是地址是一样，动态路由来用在查询详情页面中，每次它那个地址都不一样，这叫动态路由。咱就最终说完了啊。所以现在啊，按照这个过程呢，咱就把这个课程的列表，还有这个课程的详情，我们应该都做到了，然后做到之后呢，在过程中啊，还有这个讲师的列表详情，那咱把它也快速整合出来，过程跟这个是一样的，页面咱都看出复制，但是里边也用到。

这个动态和固定路由啊，那咱们来给它复制一下啊。首先按照结构咱看一下啊，在DEF里边，这是名师，它的名字叫teacher，跟刚才课程一样，咱在配里边呢，先建个文件夹，调这个teacher。然后teacher里边呢，我们建一个列表文件，还是叫这个index.vuee注意别写错啊index.vuee然后还是建一个那个动态路由，就是它的详情页面，我们叫做下划线id.vuee刚才有提到过啊，下划线开头是必须的ID可以改别的名字啊，但是我就写成ID了，这是讲师列表，还有这个讲师详情两个页面创建了，然后创建之后我把内容从我们的课件中直接咱就复制过来啊，就是到这个笔记中。这是讲师列表，把这复制。

你这是都是美工写好的，咱直接拿过来用就可以了啊，讲师列表还有一个讲师详情，就是下颚线ID讲师详情我这里边也都听出来了，把这个复制详情你看里边啊，在下划线id.voe中，咱刚才写的就是这个页面。这个也做一个复制。所以这样的话，页面我们就整个完成了，包括课程列表，课程详情，讲师列表讲师详情啊，主要讲到了动态和这个固定路由，那咱们看一下最终结果啊。首页先回来，然后点课程，课程列表，课程详情啊，这都没有错，然后点名师，名师列表。咱点某一个名时，就是它的相页面啊，这样的话，咱们把这个最终就现出来了啊，完成了。这个路由包括页面的一个对你们整合，然后咱们后面要做的功能是就这几个功能，首页数据的显示是咱今天做到的，后面咱会做这个名师的列表和详情，包括这个课程的列表，还有它的详情，而在课程详情中咱们做到这些功能。

包括大家看啊，在这里边，咱们这个课程里边。是不是有章节小节，我们后面会实现当点小节，这小节的视频可以播放，就做一个在线播放，另外的课程它免费可以播放，如果可能是收费的话，那这课程应该可以做支付，只有你支付付钱之后才可以播放啊，这个后面咱会做到。另外还有一个就是登录注册，咱会实现登录，咱会用最普通方式，还有微信扫码登录，支付用的也是微信支付。啊，所以咱们现在页面有了一个最基本效果啊，咱们把它就整出来了，就这一个过程，也就是我们文档中的。11中的第一个文档，主要是整合页面过程，各位按照文档把这流程整合出来就可以了啊，主要这么一个特点啊。