day20【项目总结】/04-尚硅谷-谷粒学院-总结项目功能点（前台系统1）

就是刚才呢，咱们把项目的后台系统中的主要功能，我们做这个总结啊，主要这些包括刚才强调的都给他牢牢记住，然后这个总结之后，下面给大家来总结咱们这个在线教育项目中，前台用户系统中主要用了或者主要做了哪些功能，那我在里边写一下啊。咱们前台用户系统用的就是这个3000端口进行访问，那里边有哪些功能，咱们来详细说一下啊，各位看啊，首先第一个功能。是不是这个就是咱们这个系统的首页是不是数据的显示啊，这是我们做的第一个功能，我写一下啊，就是首页数据的一个显示。而在首页数据显示中呢，咱们主要应该显示的这么几个数据，那咱给它列出来啊，首先第一个数据这部分。这一部分是不是那个幻灯片轮播图，或者叫这个banner啊，所以第一个功能咱就做到了首页显示这个。

幻灯片的这个功能，或者说它那个斑的轮播图啊，这是第一个，然后除了它之外，咱们首页中还显示了第二个，就这部分是不是有他的热门课程，包括这个名师大咖这两部分。我写一下啊，显示热门课程，包括第三个，我们显示这个名师大咖。啊，这是两部分啊，也是名师。在这个关于首页数据的显示啊，这部分没有什么特别的，就是你把这数据在里边做个显示就可以了，但是这过程中呢，就是在面试中，如果你提到有些面试官呢，可能他问问题啊，当然可能不问的，不管他问不问的，这问题各位肯定要知道，那别人可能问什么问题给大家说一下，比如说第一个别人可能问你啊。说你们这个幻灯片是显示什么，就是什么幻灯片内容显示，或者他问你这幻灯片你什么时间要做一次更换等等，这意思就是表示啊，你什么幻灯片会以显示，那你可以这么说，也可以说啊，我们当时幻灯片是显示，按照我们的实际，我们是查出根据这个ID排序，然后每次显示它的前两条最新这个数据。

包括这个课程大家也是这么做的，显示你最新的添加的几门课程，或者你根据那个播放量找出最热门播放的那几门课程，包括这个名师是不是也一样啊？所以咱们这个就是怎么区分你这幻灯片显示哪个值，或者怎么区分谁是热门课程，怎么区分谁是名师，那咱就是根据它的ID，或者根据时间我们做个排序，或者根据播放量做个排序，最终取消它的前几条数据，然后在水面中做个显示。咱应该就这么实际做到的啊，所以你把这个给他知道啊，这是第一个首页注意显示。没有什么特别的功能啊，主要就是三点，幻灯片热门课程和名师啊，这是第一个功能，然后咱们看第二部分。

在我们的项目的天台系统中，咱家有第二部分功能，第二部分呢，我们先说这个，就这个功能。这功能各位应该很熟悉啊，咱之前做过什么功能呢？咱来测试一下啊，比如现在我在里边点这个登录，咱是不是能登录系统，包括里边还有一个是不是一个注册啊，因为里边有这个首页数据，就是首页这个操作，包括还有这个项目的前台系统中的注册和登录功能。啊，那我写一下啊，第二部分。就是我们这个注册功能。另外还有一个。登录功能啊，咱做的是这两个功能，这两个功能呢，咱说里边几个细节，比如这个注册中，咱当时在做注册的时候呢，除了里边填写基本信息之外，咱是不是还做了这个功能。这是什么，是不是获取那个手机验证码呀，那你可以在里边写出来啊，就是我们在注册中，我们是获取这个手机的验证码，然后完成这个注册啊，这个是我们当时做到的。

这个啊，各位给他知道啊，如果你这么说，那别人可能问你，你们这个手机验证码，你们是怎么做的，咱是怎么做的，咱是不是就是整合了阿云的短信服务，通过它发送一个手机验证码。然后完成我们的注册功能啊，这个啊是咱们当时说这个操作啊。然后除了这个之外，咱还做了这个叫登录功能。那把这个给大家说一下啊，然后登录功能中呢，咱们包含了两部分登录，第一问登录是咱那个普通的登录，也就是说你在里边呢，输入用户名和密码，或者说手机号和密码进行登录，这是第一种登录，然后咱还做了第二个登录，就是用这个微信。做了一个扫码登录啊，主要咱们做了两个登录功能，一个是普通登录，一个是微信扫码登录，把这两个当然咱应该都做到了，那咱们啊先看一下这个普通登录。

因为普通登录呢，咱做的过程中呢，里边应该做到了很多这个流程。不知道各位同学是否记得啊，咱当时是怎么做到的啊，那给大家我来把这流程咱们简单做个描述啊，希望各位要知道，咱当时呢，在画那个图的时候，把这个流程我们应该是特别给他画过。啊，那我们来啊，大家看一下这张图，我应该是写到这里边啊，应该是我们的。第十天，第11天左右的时间。我们找一下啊呃，第11天没有，应该那应该是十二天左右。把这个找到啊，就这里面啊，咱找一下里面一张图就是登录。然后在这登录中呢，里边啊，我们涉及到其实有很多的点啊，这点比较多，包括在面试中，如果问到的话，这里边被问到问题也会比较多，那给大家啊，咱来详细说一下里面这些点，我就把这图咱打开，首先第一个就这个知识点。

嗯。但当时特别说过啊。这叫什么，就是那个叫单点登陆，或者说叫so啊，这是一点，那这里边给大家写一下啊，就登陆。呃，我先写到，我就写到这个位置啊。就是普通登录，我们现在这个叫SSO，或者说叫单点登录，就是这个问题呢，比如说在面试中，你个面试官提出来说我现在在项目中我做了登录功能，那面试官可能会问你说你们登录是做的单点登录嘛，让他回答咱做的肯定是单点登录啊，这肯定没有错，那边可能进一步问你说这个单点登录你们是怎么做的，或者说你回答一下单点登录你该怎么实现？注意啊，这个说的话有这么几种面试官的问法，别人别人问你说你们项目做的是单点登录，你回答说是，那别人就问你，但是都怎么做的，你顺理成章的说出来，但是比如说别人问你说你们项目是做的单点登录嘛，你说我们不是注意啊，你说不是的话也没有错，那这个时候不要觉得问题，他就不会问你，那别人可能这么问你。

说你不是单点登录没有问题，那你现在告诉我，就比如现在我就让你去做单点登录，你告诉我该怎么做，所以这问题你投掉，别人可能会一直问你，那这单点登录怎么实现，要各位给他记住啊，咱当时给大家分析过，那我们来看一下啊，我就不再写了，之前都说过了，就是单点登录呢，其实有很多种实验方式，我这里边给大家列出了三种比较常见方式。但我说明啊，我列这三种是说它的比较底层的这个实现过程，在实际的这种项目中，可能在线登录有很多的框架可以做的更方便，但是它的底层肯定是我说这个过程，那这个给各位快速重复一遍啊，就是第一种方式叫什么session广播机制，就是用session复制，第二种方式用cookie加radi，比如说咱们登录之后，你把这个。

数据啊，放到两个地方，一个是red，一个是cookie，然后咱们下次登录会带着cookie发送，拿着cookie值查red中有没有数据，如果有数据就是登录，没数据就不是登录啊，这是第二种方式，第三种方式用这个叫ton，也就是说咱登录之后，按照咱们一定的规则生成一个字符串，字符串中的可以包含你的用户信息，然后咱把这个图文字符串可以放到token中，就可以放到我们的token里边，也可以通过地址栏返回，然后每次访问都带着token值，从里边我们进行这个查询，如果说从token中能够得到用户信息就是登录，得不到就不是登录啊，这是咱们当时说的三种比较常见的方式。但是单点登录肯定不是说只有三种方式，只是这三种要常见，各位啊，把这个给他要牢牢记住，这面试中会经常问到你啊，单点登录怎么做到的，那咱们你可以说我们当时是用token，或者你可以说我知道有多种方式，然后把这些方式给别人都介绍一下，然后你着重说我们现在使用这种token方式。

这个啊是一道很常见问题啊，单点登录啊，所以把这个给各位做了一个说明，就是你把这张图得给他去好好去看一看，去记记啊，因为这是单点登录我们的实验方式。这个啊，给各位做一个说明，然后这个说完之后咱继续来看啊，就是单点登录中呢，刚才咱们提到这里边呢，我们是用到token方式做到的，而token方式呢，是按照一定规则，只剩一个字符串了，那边可能问到你啊。他问你说你这token是怎么生成的呢？那咱当时用的是一种方式这个东西。各位应该记得啊，咱是不是用的a wt，那这个别人可以把这个问题特别提出来，你可以说啊，我们当时是。

使用这个GWT。生成的一个token的字符串啊，咱们确实也是这么做到的啊，这个啊是咱们做的这么一个说明就GWT。就是你token生成是怎么生成的呢？用JWT生成我们的token这个字母串，然后JWT，各位要知道啊，就是JWT由几部分组成。要各位给他记住啊，如果你记住最好，如果你记不住，现在给他记住啊，我再说最后一遍啊，DWT拥有几种。是不是有三，就是有三种，或者说有三部分组成啊，不是说几种有三部分组成那三部分的，第一个就是它那个头信息，我们看一下啊，咱之前讲过，第一个是头信息，第二部分叫有效载荷，包含它的用户信息，第三部分叫签名哈希，就是它怎么加密，或者说是一个防伪标志，所以咱们用JLT生成这个托文字符串，就包含有这么三部分。

这各位你得记住啊，也是面试中经常问到你，比如这个so，包括什么JWT。这些啊基本内容，所以这是第二部分啊，然后除了这个之外，咱继续往下来看啊。因为咱们现在做这登录就用普通方式，而咱做这个普通方式登录，咱也是做到一种基本这么一个流程啊，那这流程怎么做到的，给大家啊，咱也是看一下啊，当时咱应该都说过了啊，就登录我们当时是怎么做的。啊，应该是。看这图啊。就是那个接口部分啊，咱看那个前端。啊，前端啊，应该是有一个基本的一个流程。啊，应该是不在这天，应该是后面一天啊，这是那个注册，注册比较简单，就是你把数据注册进去可以啊，然后咱看那个。登录的账号这个这里边啊。

应该是这个过程。那我把它打开啊，咱看一下我们当时登录的一个这流程，我们来看一遍啊，首先我们的做法是怎么做到呢？就是当我们现在登录的过程中，咱们登录调用登录的接口，然后调完之后呢，它会返回一个叫token字符串，然后咱们拿着通文字符串怎么做呢？把它放到咱的cookie里面去，这是第二步，第三步咱们写一个前端的拦截器，我们做个判断，当判断cookie中有这个token字符串，那咱把字符串怎么做是放到title中去了，这是第三步，然后第四步咱们是根据你的token这字符串调接口，然后获取用户信息，把用户信息放到咱的cookie中。放完之后，最后在我们的页面中把数据咱做个显示，这个啊是咱们一个基本过程，就是过程中呢，用到咱的这个cookie和偷，然后把流程给到就能实现出来，这是咱们当时做登录的过程。

那我把这过程啊，在里边给大家写一下啊，咱这个登录的实现的一个流程，这流程要各位给他记住啊。然后写一下啊，就是首先我们登录。调用登录的接口会返回一个token的这么一个。字符串啊，这是第一部分，然后咱们把这个返回到token字符串。放到咱的cookie里面去，就放到cookie，然后放到cookie之后怎么做呢？我们就是创建了一个前端的拦截器。进行这么一个判断，如果说你的cookie里边包含这个token的字符串，那咱把这个token的字符串就放到咱那个hier里面去。啊，字符串放到我们的hier里面去，因为咱们只从hi来做这个操作，然后放完之后之后怎么做呢？咱的做法就是。

我们啊，就是拿着这个token再去调这个接口。就是根据token值获取到你的用户信息，但是这个调度介入过程中，它是从head中取值获取用户信息，然后获取用户信息之后把咱的用户信息再放到。Cookie里边最终在我们的页面中进行这么一个显示，主要这么一个流程，就是刚才我们这张图上画这过程，咱通过这个过程把登录做到，包括登录之后在你的页面中显示你的登录信息，也就是在我们的页面这个位置会把你的登录信息就会显示。这个啊，是咱们说的这个登录的一个过程。所以各位啊，把这几点要牢牢记住啊，我最后再重复一遍啊，第一个各位知道咱们登录肯定做的是单点登录，而单点登录怎么做到多种方式，这里边有三种比较常见的session，广播，Cookie加，还有这个token，咱用的是ton。

而token呢，是按照规则生字符串，咱字符串怎么生成的，只用这个JWTWT有三部分组成，各位给他记住，然后第四个各位要记住，我们现在做登录，咱们是怎么实现的，但是按照这个流程做到用到这个cookie加to报单，写接口，还用到一个前端的拦截器，然后完成了我们这个流程。这个啊，是咱们登录中的这几个点，各位给他要记住啊。这是我们说的普通登录啊，咱们就总结出来了，主要就是里边的这些东西啊。然后这个说到之后，咱们继续往下总结，咱们就是除了我们做登录用普通方式之外，我们还有一种方式，就这个叫微信扫码登录啊，当时咱也用这个，也做了这个功能，然后在微信扫码登录中，各位主要记住这么几点。

给大家列出来啊，首先第一点要各位记住啊，里边有一个知识点这个东西。不知道各位是否记得啊，叫这个奥斯to，然后还有一个都要掌握，就是咱们做那个微信扫码登录的时候。好吧，这个啊啊，这位置就是那个叫奥斯two啊第一个，然后第二个都要掌握，就是咱们做微信扫码登录中，它那个实现的过程，也就是说咱微信扫码登录如何获取。你这个扫码人的信息的过程，这过程要各位记住啊，所以它里边主要就是这么几点，那我下面啊给大家我来详细说一下啊，想看里边的几点，各位要重点记得第一个就是also to。第二个的破解过程，那咱看o two这各位知道啊，O to是个什么东西呢？所以咱们当时应该特别讲到过啊，但是各位再看一下啊，这张图上。

各位记住啊，Auto two是什么？它是针对一些特定问题的一种解决方案，就是它是一种解决方案。是针对特定问题的解决方案，就是它能解决一些特别问题，那它能解决什么问题？主要注意有两个问题，就我的描述啊，不是说只有两个是主要两个是什么问题，第一个问题叫开放。系统间的一个授权，第二个叫做分布式访问，就咱说那个单点登录主要两问题，那第一个咱看一下啊，比如我现在不同系统之间要互相访问，默认肯定访不到，咱需要对这个授权，这是奥to这些问题，然后第二个你作为单点登录，第一个模块登录，其他模块不需要再登录，可以直接访问，这是它解决问题，而它解决问题方案是什么？就是让你按照规则生成字符串，字符串中可以帮助用户信息，然后完成这个操作，就咱们DWT是它一个具体实现，但是这auto to这里强调。

第一个它只是一种解决方案，只是让你去按照规则生成字符串，但是什么规则它没有定义，只是一种告诉你是一种规则，什么规则它没有规定。另外o two只是一种方案，它不是一种协议，这个啊各位知道，这是咱们当时讲的这个概念，叫o two，可以把这个记住啊，它只是一种解决方案，没有规定里边的细节问题，而细节咱需要自己来制定。这个啊，我们做一个说明啊，然后这个说完之后，咱们在做微信扫码登录中，把这流程当时咱应该做过了，就是我们在做操作中，当么一点有二维码，咱一扫可以得到扫码人的信息，得到信息之后，然后在首页面中显示我们的数据啊，当然显示数据还是用咱的cookie加哈，这个做到。主要各位掌握就是咱们如何获取三万人信息，它这个实现过程，这过程呢，虽然说是比较固定的，是由微信提供一个固定流程，但是我希望各位把这过程主要给他记住啊，如果说以后编制中别人问到你，你把流程能给别人说清楚，就是他每步是怎么做到的。

这个啊，是咱们要总结这个啊，那我这里边给大家咱先看一下啊，然后我快速写一下，你之前咱都说过了啊。怎么得到这个信息？是这个啊。那我们看怎么做的啊，就这里做法就是第一部分，当咱们扫码之后，在这个微信这过程中，会给咱们返过来一个值，这个值叫code code的代表什么呢？是这个叫临时票据，或者说类似于咱们的验证码，然后这个得到之后，咱的第二步拿着这个code去请求微信的一个固定地址，然后请用之后得到两个址，一个叫a set token，一个叫open ID s token理解为就是你的访问凭证，Open ID是你每个微信那个唯一标识，类似咱们那表中的主键。

然后第三步，咱拿着两值a set token和open ID，再去请用一个地址，最终它可以得到你微信人，微信收款人的信息，包含你的什么微信昵称，什么微信头像等等啊，这是一个基本的过程，各位把这个肯定要知道啊，我在里边写下啊。它的这么一个过程。就是它的做法就是呢。在我们扫码之后，微信它那个接口给咱们返回一个叫扣的这个值，扣的值是什么呢？它叫做临时票据啊，就类似于我们的验证码。然后咱们怎么做呢，拿着这个扣的这个值去请求微信的一个固定地址，然后得到。两个值，一个值叫这个size token。

我写一下啊，Access token。还有一个值叫做open ID access token，理解为就是咱们那个访问的凭证。然后open ID是你微信那个唯一的一个标识啊，得到这两个值，然后这个得到之后怎么做呢？咱就拿着这两个值。啊，拿着。这两个值我们再去请求微信一个地址。也是一个固定的地址，然后请求这个地址之后，我们才可以得到那个微信扫码人的信息，比如说你那个微信的这个昵称，包括你的头像等等，这个都可以得到，所以咱们啊做这个微信扫码登录，就是按照这个过程，最终把这个信息得到，得到之后咱再加入数据库来完成他的一些其他操作啊，这个叫微信扫码登录，当时咱应该是特别把这功能都完成了。

所以各位啊，这流程给他记住啊，你虽然是一个固定流程，但是面试中别人可能也会问到类似问题啊，别人别人问你说你微信策划都是怎么做到的，那咱怎么说，你不要说我用微信的文档一看我们就做出来了，等于没说你把流量给人说一遍，那别人证明你的东西真正你实际去做过。这个啊，咱们把这个总结出来了，关于微信扫码登录啊，主要这么有功的啊。比如说现在啊，咱就总结出来了，我们这个项目的前台系统中的首页数据，包括注册，注册里边呢，咱是发送了一个手机验证码，整合了阿里云短信服务，然后除了这个之外，我们做到登录，登录中有普通登录，就是单点登录，包括GWT，包括咱的流程各位都记住。另外咱做到了微信扫码登录，微信扫码登录中你记住also two是什么东西，包括咱们怎么来获取到你这个骚人的信息，就是这么一个流程。

啊，当然咱们代码应该都做到了，这是啊，咱们里边的登录这个功能的一个总结。