Vue3.x从入门到项目实战 41.分类和详情 学习猿地原创

上次课呢，咱们这个分类这个就学完了，但是呢，咱们再选择，像有些没有的话，假如一个分类获取到其他没有的话，是里边分类里边没存没存作品啊，所以就没有，那现在默认显示十个肯定不行的，咱们得下拉加载更多是不是做这个啊，那这个呢，咱们是做过一遍的，对吧？做过一遍那咱们就把首页上咱们做过这个在原封不动的在这里边咱们再做一遍，你看啊，这个我就不给你敲代码了，因为都做过一遍，但是流程我给你写一遍。给你看一遍啊，咱们找home页面把这个下拉加载更多做完，那首先呢，我们下拉下载更多使用的是一个组件，叫做这个对吧？呃，Better screw使用这个，那咱们也得导入这个都已经在手页上，咱已经装过这个组件了啊，所以呢，你就不用重装一下，然后呢，我们到呃，我们这个分类页面里边把这个加上。

把这个加上，这样的话是引入这个组件，引入这个组件第二步我们需要干嘛呀？看往下看。这里边儿都不需要，然后我们前面呢，得先按照这个。我们得声明一下对吧，声明一个空的用这样的话放到最外边，我们在里边每一个里边使用的时候就不用使用了，这个去掉啊，省得我们总总点点这些先去掉，然后到分类这里边，那我们也得在呃。在。这个初始化的上面吧，咱们在最上面这都行，先引入一个这个啊，那先看看咱们这块也引入了，是可以用的，拿到这个，然后我们初始化完成，那你看一下我们需要下一步创建对象的时候，我们需要在哪块创建那。

初始化这里边是别人调用的，我们不用每次都创建，创建这个对象，只要创建一次就行了，所以呢，我们直接在al amount里边，当我们页面编译完成之后，我们在这个地方创建，那在home里边我们找到，因为这里边也是在这里边创建的，诶就把这个拿过来，一个一个拿过来，这个就是按照手册的顺序对吧，创建一个这个对象，但是创建这个对象的时候，我们这边外边不叫wiper，咱们这块不封装两层吗？这个就不需要了。去掉上次注释的。你看我们里边的内容，外边固定高度是这个，看到了吧，外边固定高度是这个，我们往前查一下，看一下这里边固定位置对吧，顶部是100，左部是这个，然后高度100%，这是外层里边是不是一层这个呀，所以呢，咱们最外层现在变成了这个，所以呢。是顾丽，不叫那个名了，要注意一些。

改的时候注意一下啊，所以呢，我们在这块需要把这个名改掉，诶刚才。这。这块改成good，呃，List对吧，然后这里边这三个参数不用动，这三个参数不用动，OK，然后再往下来得让它监听两个事件，一个呢是监听滚动事件，监听滚动事件，但是现在咱们这个监听滚事件暂时还用不上，对吧，你先放在这块，先放在这块，我们先呃去掉这个里边现在用不上，只是我们一监听这个它就怎么着，它就可以可以滚动了，你看。对吧，有这样的弹性的东西了，对吧，鼠标一拉拽有这样的一个效果了啊，然后我们得监听下拉键得更多，下拉键得多，是不是这个里边是下拉线得更多呀，在这块。这个是我们主要要写的，用它里边的凹家庭，这个就是上拉加载更多啊，总说下拉加载更多，因为上拉下拉这个经常咱们呃会用到，你要是下拉的话就变成档对吧，就是往上拽的时候对吧，去加载上面的数据的时候，对吧，这往下拽，往上拽的一个是下拉，一个上拉监听不同的呃不同的事件，所以呢，不同的事件处理的时候，咱们使用这个，然后呢，我们在这里边把这个页数咱们就得改一改了，对不对，这个是咱们就不是当前类型了。

呃，这换成CT当前的，你看咱们是，呃，当前的咱们是一个排序条件对吧？因为在首页是类型，然后得加V流值，这个从这个数据模型里边找到当前你哪个分类的，然后这个页面加一，当前是默认第一页面对不对？加一那就是什么呢？一加一这块就是二，那我们这块传递通过这个方法传递的时候就第二个页面了，对不对，但是我们这个方法也不对，我们得换成谁呀？Get咱们自己里边有一个什么分类商品。

对吧，分类商品，那第一个参数咱们也得换成谁啊，换成这个CCT排序的V6放上它，那第二个参数呢，咱们放的是什么？放的是分类的，呃，分类的ID对吧，放了分类的ID。嗯，第三个参数是页数对不对，那咱们这块存一个分类的ID CU rt这块分类的ID都是什么ref声明的，所以呢，都要加微流值，OK，都要加微流值，那这样的话。我们就能够把这个页面这块加一，然后存进来，获取到这个，然后再然后获取数据，获取数据之后，那我们这块里边所有的这个类型的是不是都得换成谁呀。

呃，换成这个，那我们就把它怎么办呢？CTRL一下。CTR一下，把所有的这个CTRL类型都换成这个替换一下。替换所有这样的话就直接呃换过来了，让他列表里边对吧，Push然后加到咱们说呃，这个数据的date拿过来，但是这块一定用三点运算符展开对吧，这样的话才能够跟原来数组里的是平级，不然是一个子数组一定要加这个，然后加当前一页，加1OK，加当前一页这个再加一下一页，这样的话我们再获取的时候这个方法。下拉一次，再执行一下，是不是这里边又加一又获取下一页的数据就可以了啊，每次获取下一页的数据，OK，这块别忘了这样的一个呃，一个流程，OK，然后我们完成下拉之后，等待数据请求，这样将数据重新展示，然后重新计算一下高度就可以了，那这样的话，我们的下拉加载更多就完成了，那除了这个下拉加载工作完成之后，那我们还要注意几件事儿，对吧？刷新高度，我们只要页面有变化，我们是不是就得刷新一下这个高度啊，所以呢，在这里边我们也得做一个什么，做一个监听放在最下边吧。

放最下边加一个这样的一个。呃，监听的一个方法啊，当然这个像监听的方法我们也可以，呃，每次拉动一下在这里边，嗯。刷新刷新，其实我们也可以通过这种方式刷新啊，当页面加载完刷新一样的啊，你跟那个是加不加那个都是，呃，都是可以的，OK，然后呢，我们在切换的时候，在切换的时候是不是也得刷新的，切换的时候是不是也得刷新，再重新计算高度什么的，所以点击这个table的时候，点击table的时候是不是也是相当于一个切换，对吧。

那点击table切换的时候，获取当前的这个数据，我们是不是也得刷新，重新计算一下这个高度？对吧，你点table重新计算一下，获取一下这个高度OK。然后呃，其他的就不需要了，来咱们试一下。来咱们看往下拉动。你看现在是不是就可以不断的往上拉了，对吧，可以不断往上拉了，然后现在我现在可以选择一个有商品的，比如说javascript点击的时候。

嗯，PP里边没多少书也有。这个排序它就两页就拉到头了，应该是。你看配置到二对吧，没有其他页面我们就获取不到了啊两页，那我们再看一下前沿的里边，其他的分类里边。诶。再点其他分类，我们也得刷新一下，不然的话。点击分类。呃，得到这个分类初始化，初始化完之后，我们再点击分类的里边，是不是我们也得重新更新一下啊。不然的话，你想想这里边儿。重新获取一下分类初始化了，这些值都初始化了，也得重新计算一下高度啊。这里边儿这个方法都写一下就行了。

那这个呢，咱们下拉加载更多这个步骤咱们就完成了啊。跟咱们首页用的一样，那你如果做下拉加载更多，或者上拉加载更多，你就按照这个呃步骤你就去做就行了，OK，所以呢，这个也没有什么逻辑可言，手册里边告诉怎么用就怎么用，这是用别人的东西，对不对，这样规定的去用就行了，那咱们下拉加载更多，加载完之后是不是也得回到顶部啊，对不对，那回到顶部我们也需要用。咱们首页里边是不是也有一个组件啊。找到。啊，回到顶部这个。直接拿过来用就行。这就是组件共用的一个好处，不用写任何的东西去使用就行啊。回到顶，整错了啊。在。组件的放在一起回到顶部，然后这里边加上这个back，呃，Back top。

这块大小。戴个套吧，加上这个。然后呢，我们需要在这里边把这个。加进来，然后事件也调用这个方法，那咱们也可以写一个这个方法啊，要用这个组件，然后在这个回到顶部的一个组件里边，它会怎么呢？给我们返回，呃，注册一个用EMIT返回一个事件这个，所以呢，我们也得把这个方法加上，这个方法我们在这个里边叫。这个。对吧，所以我们把它加进来就行了。加到。这里边咱就往最后加吧，跟上面的执行顺序是一样的，最好这样的话我们找顺序是比较好找的，也让它500毫秒对吧，有一个动画，然后别忘了在这块加上这个d top，把这个加上，然后这个呢，我们运行的时候。

运行的时候需要干嘛呀，需要让我们的，呃，这个。回到顶部需要有一个变量给我们返回，也就是。呃，在啊。在这个滚动的里边，在滚动的里边我们得需要做什么，我们得需要，呃，这里边设置一个变量，让它变成真假，因为我们加这组件的时候，这块需要了什么，需要了这个变量，对吧？所以呢，我们就得声明一个这个变量，Light声明这个变量比如说默认等于甲，就让它怎么的不显示，因为这块用的是V杠受默认是不显示的，对吧？那什么时候显示，也就是让我们的一个高度超过了这个高度的时候才显示，所以在滚动的时候，我们通过这个位置杠Y再取一个负值，我们知道什么是能获取到这个呃这个高度的，对吧？所以我们就让这个刚才咱起的那个变量，这个里边的什么微流值value，这个V流值它等于什么波尔形值，咱们得加个负号啊，因为。

这个值是负数的，这个值是负数的，它里边的Y的坐标，Y的坐标，比如说大于500的时候。大于500的时候，那我们就让它变成真，变成真的时候它就显示。来，我们往下往上拉。写错了。这个微流直。往上初始化变量的地方，这块咱们得用什么ref啊得用ref。知道。这样的话，我们就相当于把这上来加载更多和这个组件，咱们现在就加载完了，那这样如果多的话，也会出现那个呃，浮动的一个。

呃，按钮一点就回去，OK一点就回去，这样的一个一个效果，那这个分类页面咱们基本上就完成了，但是呢，咱们还需要做一件事，什么事情呢？就是一点击这个卡片的时候，我们是不是得让它跳转到商品页面啊，对吧，这样的话我们就可以做商品列表页面了，就每个商品它都有一个点击的时间，所以呢，在这里边我们在每个商品，每个商品我们都加一个嗯，Click点击事件，点击的时候我们调用一个方法，比如说item里边的。嗯，这样吧，先叫I tmk，就是选项的点击，咱们通常都是习惯这样的命名item点。获取到他的一个商品的一个ID，把这个ID传过去，每个商品里边它都有一个ID的，把这ID传过去，那传过去这个ID之后，我们一点击调用这个方法，那我们就需要在我们的这个页面里边，是不是也得声明这个方法呀。

对吧，这样的话，我们在一点击的时候，才能让我们这个商品呃，跳转到我们指定的一个页面的地方，所以我们需要。在这里边先加上这个。再声明一个，加一个路由，I p rity加一个路由叫做嗯，From，从v UE root里边拿过来这个数据。Use加一个这个router，把这个拿过来。这个拿过来之后，我们在这里边就需要进这个路由，你看这个数据现在又过来了，你看下边出来这个了，对吧，一点又回去了，是不是可以了，对吧。

那我们加上这个，呃，Voe us routeor，然后呢，我们必须得创建这个对象，找在前面创建这个对象就行啊，Cost，然后是Lu等于u router加进来才可以，然后我们做一个这样的一个点击的一个一个方法，对吧？这点击的方法你做在呃，在哪块做都可以啊嗯，只要是在这里边我们显示一点击能跳转就可以啊。商品列表，嗯，在这儿做吧。最下边吧，按照咱们这个顺序cost声明一个这样的方法，然后呢，我们里边传一个呃，ID过来。这里边，然后用ru，呃。是route RO里边的SH，我们跳转到哪呢？这里边来一个这个对象pass路径跳转到呃，斜杠de这个盖这里边，然后呢，Q。

这个参数，呃，Qqu这块啊，QE路这个参数是什么呢？这块传一个传一个直接就是这个ID，把这个ID传过去，这样的话我们点击一个商品，当然我们这个我们得在这里边加上啊。这样的一个过程才可以。这样的话，点击某一个商品的时候，一点击诶商品四就过来了，对不对，然后。一回来点击这个11是不是就过来了，就这样的一个过程，那这个分类页面咱们到这基本上就呃完事了，那分类页面完事之后下一步。当然你可以细化在分类上面，还可以加搜索啊，好多页面都可以加搜索，你就看这个产品的，呃，一个这样的一个设计，然后呢，我们看商品详情页，这个做完之后，现在咱们一点到这个商品详情页，现在咱家什么都没有呢，对吧，什么都没有呢，这个商品详情页我就不给大家写了啊，那首先呢，先不是不给大家写了，咱们就不给大家手写了，因为这个技术含量比较低。

嗯，15这个先找到这个API。找到这个API前台的API，那我们商品前面咱们用的是商品列表，是不是用这个API啊，那商品详情我们获取的时候，就这个API里边只要存一个什么商品，这个就是商品的ID，咱们是不是每点个商品都把商品ID传过来，那我们也能怎么的也能接受过来，所以我们需要传一个这个参数，存一个这个参数，那就能获取这个呃，商品的ID。我看参数它直接这么算，那咱们就直接这个大括号代表是让我们存参数的，不是用问号存参数的啊，有些接口用问号存参数，有的接口是直接这么存参数，就跟我们自己做的那种子路由的那种是差不多的啊，然后返回商品的详情，商品详情里边你看有商品的ID，标题描述，价格什么库存销量对吧，封面图，封面图的一个URL对吧，什么还有小图集，就有可能说你下边有一个商品，两个商品，三个商品，这样小图集都有啊，后台管理的，然后详情对吧，添加时间这概述这些都有，然后呢，还可以获取这个在商品列表里边可以获取商品的评论，就是呃，用户购买过，假如说咱们可以让他评论，那么可以获取评论列表，OK。

然后相关联的，呃，这个评论相关联的所有用户对吧，一共有多少用户参加评论了，然后呢，还可以在商品详情里边找到相似的产品，也就是你看那商品的时候，跟他相似的推荐给你都有这些啊，但咱不用做这么复杂的了，这是商品的一个所有数据的一个积分格式，有这么多啊，那咱们就通过这个获取一下这个商品的数据，所以呢，商品详情那你可以咱们要获取的时候，是不是在网络里边获取。

你不用放分类里边，你当然商品你可以都专门建一个商品的JS啊，那咱这既然起这个分类JS了，那我们再单独再建一个吧，新建一个JS，我们叫做呃，叫做什么呢？det.JS这商品详情点JS啊，然后我们随便找一个商品分类的，我们复制一下。这样写快一些啊，咱们写的时候也可以这么快的去写啊，然后这样的话，像包含请求啊，很快就出来了，然后呢，我们呃，直接get，比如说detl得到这个详情，但我们需要一个参数ID，对吧？那我们再看一下这个它的请求方式也是get对吧？那这些方式都是get，直接写就可以了，但是我们在这个下边传递这个接口，我们需要传递这一个ID，直接ID，所以我们传五，那么就获取API good下边五。

就请求这个就把ID15的商品给我们返回来了，如果传六就把这个六这个商品给我们传回来了，这样的话我们就可以获取商商品详情了，然后我们打开商品详情的这个。页面是页面。吃饭。商品心情的页面，现在什么都没有对吧？这是商品详情的页面，只是获取ID了。获取这个ID，咱们还没有通过这个路由咱们获取到，所以商品详情页面这个没有技术含量，就是拿过来摆对吧，用现有的组件咱们找一下这里边有没有商品详情的页面，这个就是啊。

啊，这个是商品详情的页面，咱们直接拿这个看一下，到时候粘过去就行啊，先看数据的部分，先看数据的部分，那我们得包含谁啊，包含这回得包含路由了，而并不是路由器了，路由器是跳转的，咱们也用跳转对吧？但是这两个就一起都拿过来，然后还有状态管理的拿过来，对吧？然后这里边包含这些，然后用到了上面这个组件对吧？商品列表的组件，这两个组件咱们都用到了。然后名字是这个，把两个组件加过来对吧，然后这里边获取路由，路由器状态管理。然后你看。通过网络里边network里边是不是找这个JS，咱们假如刚才写的这个里边是不是有一个这个方法，所以呢，这里边请求的是通过这个路由找到这个ID，把ID这个值拿过来，对吧？前面声明了这个ID是零，然后把对应的ID拿过来，然后在这个方法里边直接把ID一传，或者你直接把这个传到这里边也都行，不一定非得复个值，OK，然后获取ID，把这个ID所以放在什么book详情里边，对吧，还有什么喜欢的商品呢，对吧。

这里边你可以打印这数据，通过这里边就获取到了。但这个。这会少一个date啊，一会咱们加上，然后里边购物车调换方法返回没什么，然后加几个样式就行了，咱整体复制吧，然后咱再优化改一下。把这个拿过来，这个商品详情页我全覆盖了，因为是整体复制的啊。整体复制的，然后需要改的地方，其他的没什么了，这里边只是用到微引器的这个视图，也是这个卡片对吧？插槽，新书推荐对吧，页表，然后呢，下边是概速啊，热评这块用了一个什么 tablev-table对吧？没什么，然后相关图书这里边，相关图书这里边把相关图书的也拿过来了，就这些啊，那现在一保存，我们这块应该是有错误的。

应该是有错，你看数据都没拿过来，数据都没拿过来，为什么数据没拿过来，因为我们，呃，这课件里边用的例子是。咱们在。呃，这个请求的地方，也就是request。网络请求的地方，这个网络请求地方在这，咱直接是返回的什么，呃，请求拦截。呃，这块啊，直接返回的这个显要拦截直接返回到I对吧，而如果你返回i.data那这个就对了，就多返回一层，咱们就直接返回根相当于对吧，所以呢，这块少了一层date，那我们在这里边就要把这个data给加上。那不是home里边这个关掉。这个关掉这个里边，在这里边把is加上date。

然后date所有的is这块都加个date这个数据。看你看这个上面一放本书，跟这个是对应的这个样式啊书，然后呢，概素全拿过来了，这是数据库里边存的对吧，这是存的概述，然后热评咱们没加对吧，相关图书你看咱们加了，这是相关图书。因为这几个组件都是现成的，你看代码一共没多长，就这么多对吧，就拿过来了，诶上边怎么。这什么东西？这个主角之外的。就拿过来一下就没问题了，就这些东西了。然后这里边每一本书都是一点击的时候，相似图书是不是在跳转再返回这个页面啊，里边加个链接就行了。

然后咱们再找，比如说吸收完意制作，你看就有这个热评，没有评论相关图书就有了这个样式。在这块可以调调一下这块，这个零是评论个数的，评论个数是零。评论个数实例。不行。嗯，评论个数是零，这个这个位置。应该我们看一下啊。把它找一下它的样式，给一下它的位置就行了。怎么跑这儿来了？这里边儿有顶右这个位置，你看顶多少右多少对不对，咱们先调一下，你看这块能过来诶。他热评一直在这儿对吧。

放在这家就行，所以呢，右负194或者给左多少，那咱们就把这个值改一下。又是负一百九十一百九十三对不对，这个拿过来拿过来这个。看一下粘过来这个样式，看怎么穿透，那这个拿过来到我们程序里边找到。这个样式。有没有这个。啊，这块负五，刚才咱们是不是这个对吧，那这块负一百一百九十四，这怎么会跑那去呢。保存一下。就可以了。你看咱们再点一下别的商品，看能不能过来啊，点这个。你看就在这了，所以哪个样式有问题的话，你就找具体哪一个去调一下就可以了。

好，那我们这个商品详情页现在就做完了，那有的说现在做加入购物车立即购买吗？这回咱先不着急了，按照这个流程，因为咱是自己开发的流程啊，如果是多人开发的话，会分模块，比如登录授权的流程归谁写对吧？那购物车页面归谁写，订单归谁写，当然咱说大项目啊，小项目有可能自己完成一分就行了，如果咱们自己开发的话，你就可以按照咱们现在的这个流程，没有商品你怎么加入购物车对不对？那加入购物车呢？如果咱们再写详细一些可以干嘛呀？可以让用户不登录就可以加入购物车。清楚吗？你可以看咱们原来我写的那个，呃，PP那个项目就是不加入就可以登录购物车，然后呢，加入完之登录完之后就把你没有什么没登录之前加入购物车的转到你登录用户里边。

我看就仿京东的或者什么的也行，但是现在大部分系统都要求我们先，特别是移动端都要求我们先登录之后，因为有的时候用什么呢？用微信登录的时候就强制你对吧，你在微信一些程序啊，强制在什么呢？在微信的生态里打开对吧，强制用微信先登录。对吧，可以这么做，所以呢，大部分都是登录之后咱们去加入这个购物车的啊，所以咱们就做登录之后加入购物车，那有了这个商品详情，那下一步咱们是不是就开始登录了，但是这里边。在这个页面还有好多东西都要做，后边我有补全的项目，因为咱们把所有功能都写完，是太那什么了，对吧，后边有补全项目干嘛的，补全项目呢，就是。你这会还得加一个，像这个怎么还得加一个收藏之类的吧，对吧，一点就收藏，那收藏呢，咱们接API接口里边详情这块咱们也有的啊，你比如说在。

在这块你看是专门有收藏，你看我的收藏对吧？在个人中心里边能列出我的收藏有哪些数据对吧？然后收藏和取消就访问这个API，你只要把商品ID给他对吧，一请就得API，他就收藏了，收藏成功返回201的状态对吧？取消收藏返回204的状态啊，这可以留作作业，那后这个代码咱们也有啊，就是你只要写两个两个操作方法就可以写两个操作方法，然后在程序里边一点调用的方法，收藏1.a取消就完事了，对吧？然后呢，你请求这个接口，它就在数据库里边，针对这个商品，针对这个用户，就标记上去收藏，但是呢，咱们必须也得是什么，也得是登录之后，接着是登录之后。我们才能收藏，不然收藏给谁呀，对吧，所以得登录用户的收藏。那我们这个呃过来了，那下一步重点就是登录，登录处理是一个知识点，OK，登录处理是知识点啊，那后期您可以可以看一下怎么用微信登录，但是微信登录呢，你得有一系列的什么企业的一些资质啊，什么获取那些什么open ID啊什么之类的，才可以做那个呃，微信登录啊。

咱现在没有那些，所以呢没法做，那咱就做传统的登录，通过用户名密码登录的，OK，你要用微信登录的代码也很好写，因为他都给我们提供了手册，提供了方法，你只要注册好你这些资质之类的，对吧，拿到那些K，那我们就可以做，呃，微信登录的那些东西啊。那家看传统的登录，先把这个东西咱们研究明白了，然后呢，有些页面请求需要授权的，那我们再去授权，OK，因为你看收藏和取消这个也告诉我们了，需要使用post去提交，然后必须得GW授权，所以想做这个功能也得有这个授权，所以首页和商品页面我们基本上都是get的方法去获取，不需要任何权限，对吧，都可以展示商品页面，你看这两个我们也都是get，不需要任何授权，但是你像个人中心用户详情对吧，哪个用户的是不是都得JWT这个talkn这个授权呐，对吧，使用这个参数。

对吧，这是这个协议规定好的，用什么样的参数啊，什么样授权，对吧，就像我们这个说明文档里边，前面这块也给大家。标记了，你看啊，用户认证咱们使用的是JWT认证，那有JWT认证，有没有其他认证啊，都有对不对？微信认证或者什么其他认证，这些只是一个协议对吧？认证需要认证API，那需要在我们的请求投请求的时候HTTP对吧，Http hier投的部分我们得加上这个，加上授权这个，然后呢，前面得加这个词，然后得有空格，后边就是服务器给我们返回的这样的一个token对吧，我一认证登录成功之后返问token，那token是什么呢？就是咱们说的暗号对吧，你比如说敲门让别人开门对吧，比如说你是谁呀？对吧，你得得对上暗号，什么天王盖地虎对吧，宝塔镇河妖A自己人对吧，就通过那token生成呢？会根据你用户客户端的，你比如说呃，你的客户端的IP地址啊，什么浏览器信息啊，对吧，用户名密码啊，然后生成一个暗号对吧，加密之后。

一般都是2048位的加密，呃，加密之后，然后呢，把这个token就会临时的有效，有有个期限的啊，保存多长时间，在服务器上保存多长时间，然后呢，这个token会给到你客户端，咱们得说一下这个登录的这个token这这一个流程啊，我跟你说一下啊。你看咱们得有这样的一个流程要明白啊，因为呃，你如果不做APP这样的项目，比如说不做像小程序啊，呃，APP啊，移动端这项目，那我们传统的网页的登录，我们通常使用什么？Cookie session，大家都会听过这样的一个概念啊，Cookie session，当然服务器也可以借借助一个session这样的一个概念啊，那客户端这是浏览器。

你看但是呢，我们做APP呀，或者什么这样的程序的时候呢，就不能用这种cookie session了，因为它APP那种什么没有客户端的那个cookie你可用，所以那种登录验证是不能用的，那我们现在都采用这种令牌式的这样的一个验证方式啊，那这块客户端这块是服务器这块服务器，那我们在输入一个网址的时候，输入一个网址请求服务器的时候，需要授权的时候，那第一步我们肯定得是先登录到服务器对吧，通过我们这里边提供的嗯，用户名。用户名，然后呢，密码对吧，比如说用户名hello喽，密码123123是不是有用户没有密码了对吧？然后你在登录的时候一点确定灯功成功，那登录的原理什么呢？过来之后是不是你把这个用户名哈喽拿过来了对不对，123拿过来了，那他会根据这个条件形成类似于一个四个语句到数据库里边去查对不对，查什么呢？从这个用户表里边查外条件是什么呢？呃，Username是否等于这个hello对吧？并且并且就是and并且什么呢？并且password等不等于谁啊等不等于123，当然这是加密的，数据库里边是加密的啊，但假设那这样的话就查到这个数据了，查到这个数据证明你这个用户和这个密码你是注册过的，如果查不到就告诉他没有这个用户对吧，返回错误。

那查到了之后，那怎么个登录方法呢？它就会根据这个用户名密码，根据你客户端传过来这个用户密码，以及你在登录过程中，你是不是能把你客户端的。

嗯，客户端的笔呢，画笔呢，主页啊，能把你客户端的，比如说浏览器使用的是什么浏览器这个代理对吧，然后你客户端的IP对吧，因为在请求的时候，除了这些是从表单过来的，还有一些通过投着投过来的，对不对，这两部分信息，像IP啊和浏览器信息啊，都通过这个投过来信息，然后结合这个，结合这个结合IP，客户端的IP，结合浏览器用户代理user这么几个信息，对吧，给我们形成一串什么一串乱码，这个乱码就是生成的一个密钥，咱们就叫token对吧，一个暗号，这个暗号呢，就会保存到服务器，你是文件里也好，Session里也好，还是保存到通常那临时的都会保存到30里啊，然后或者是嗯。

保存到数据库表里边对吧，数据表里边，那这样的话保存到表里边，然后保存时间你可以设置成比如说呃三天或者是五天对吧，三天或者五天保存到数据表里边，然后这个呢，我们在登录成功之后，会把这个又这一串，比如说2048位，2048位的一个加密的，就根据刚才信息加密的之后，给我们通过头信息也好，或者什么信息，或者是接的信息接口登录成功就给我们返回token登录失败，比如说给我返回什么二零几啊，就是比如四零几啊，或者是五零几啊这样的一个错误，咱就知道登录失败了，那成功的话给我返回200，并把这一串服务器端保存一份，然后客户端这一串也保存一份，那保存一份之后，客户端拿到这一串东西了干嘛呀。

你得保存到你客户端的硬盘上，客户端硬盘我会告诉你有一个地方可以保存它，对吧，保存上，那保存完之后下一步干嘛，你这是相当于登录成功了，对不对？登录成功，那么你每次在请求服务器任何一个页面的时候，你带着谁来呀？带着你客户端保存这一串码就叫套餐暗号过来。下次再请求任何需要授权页面的时候，带着他过来，然后每次服务器都检查你这个串加密这个串跟服务器保存这一几天的这个串有没有查询，如果有了就证明什么证明，诶你是登录过的，如果没有就没有登录过，因为只有登录过才会把这券返给他，对吧，他每次再把加密你拿过来就行了。就是这样的一个原理，OK。这是一个，呃，Token的一个这样的一个登录的信息，每次都得拿过来，所以这是一个原理，那我们现在要做的就是干嘛，就是先做注册和登录，先把这个事儿我们先干了，对吧，必须得先怎么着，先注册一下，先在服务器先有我们的用户名，密码信息，然后我们在干嘛，我们再。

呃，写登录这样的一个过程啊，所以我们现在就看一下。这个页面咱们用完了，咱们用这个，你看先做注册，也就是先把我们的用户名密码保存到服务器上，然后再去做登录，登录之后呢，我们再怎么把套空带过去，这是一个知识点啊，这是一系列的，这是一个知识点，那咱们一点点做同样界面的东西，现在用组件库咱们没难度，你比如说这里边儿咱们找一下这个，呃，表单咱们用这里边的。呃。表单表单表单表单表单，哪去了，哪去了？

直接用这里边表单就行啊，你比如说输入框，你看就这样对吧，文本输入框这样form表单。你看用户密码基本用法，咱就用这个直接你看用户密码为空什么的，对不对，用这种对吧，校验规则文本什么正确输入对吧，直接用这个组件就行了，粘过来你看form表单对吧，直接拿过来粘过来就可以用了，所以这个写表单没难度，然后呢，JS程序我这个给大家写一下，但是咱先把这个界面，界面咱先拿过来，我就不给大家写了。呃。呃，先注册一个。组件吧，先注册一个组件，咱们就叫做什么注册，有注册有登录，这两个咱们得先注册好，用户登录注册，咱们写在哪个里边组件。

视图下边的profile下边啊，都跟用户相关，都写在这里边吧，写在这个下边。这是个人中心对吧，这里边我们新建一个组件，我们叫做注册的组件。注册的组件正好来一个，那我们这里边再建一个。组件RO lock登录的组件，这两个一般都是登录注册一起的嘛，对吧。界面东西就先不给大家写了啊，然后呢，我们需要干嘛，需要在路由里边，因为注册的是页面级别的，对不对，虽然注册登录在我们菜单里边访问不到，你不能说就四个页面对吧，有可能有很多个页面通过程序里边去访问啊，不是通过菜单去访问，通过链接去访问，所以我们得找到这个路由，路由的这个部分，然后我们加上一个登录和注册。

就拿过来，然后拿过来，拿过来，然后需要在这个地方我们已经建好那个组件了，Cost，呃，Re，等于括号间括号port这个拿过来，然后。诶，错了，上一节目录下的VWS下边的这个下边呢，有个注册组件拿过来，然后再来一个登录组件，这个下边的呃，Log。这块我们改成log音log log音好，然后把这两个拿过来。加到最后这两位了，这块注册在UR上面的是小写的这个大写这个大写，然后这块登录roj登录。

这块log登录，然后这块写上用户注册，用户注册。这块写上用户登录。别忘了组件给拿过来啊，这样的话，我们在访问的时候就可以访问到这两个了，在这块假如说我们访问呃，Log in l GI就会访问登录的那个页面，就访问登录那个页面，但是它这页面啥数据没有对吧？然后呃，Re gist就会访re GIS t就会访问注册页面，你看用户注册，你只要看这标题就行了，因为咱现在新建这个两个组件，登录和注册是空的，对吧？那咱们只有先在没加链接的情况下，咱手动的访问注册个登录，因为下边你访问不到对吧，我的和购物车都需要登录之后才能看对吧？那你这里边没法加加链接，你不能在首页里边这什么地方我加一个什么登录对吧？登录按钮没那必要什么时候去登录或者注册，就是我一访问这个的时候，一看没权限自己给我们跳到登录页面，移动端都是这样的，因为移动端的资源这个页面的大小。

限制它是有限的，没有必要放一些登录或者什么的按钮，因用户点击都是大家操作的时候，遇到没有登录的时候，自动跳出登录对吧，然后在登录里边，你先跳到登录，登录里边一看，我如果没有用户，你再点击一下加个链接，再让他再注册，如果已有账号再让他去登录，就这样的一个一个流程就行啊这样一个流程，那这里边我们。把这个注册的页面你看这里边注册加一个图片，然后呢，点击提交按钮到这里边，你看用VNL的一个字段名输入用户名对吧，然后请填写用户名，填写密码。

啊，这个程序。呃，正好这个提交什么的，这个都是空的，那我我们先干嘛，嗯，我先给这个，这个现在提供的就是一个简单的一个页面啊，别的什么也没有，就是一个页面，OK，就是一个页面，那我们就直接粘过来。找到注册这块，咱不能说每个页面咱们都写了，这个就太耽误功夫了啊，因为现在你看这些代码现在是没有任何难度的啊，就是把系统里边组件拿过来对吧，调整一些高度宽度啊，对吧？然后里边加上U名密码啊，跟系统里边直接加过的组件是一模一样的，没有任何的一个一个难度啊，然后里边什么也没写，就写了一个什么react用户信息双向绑定，也就是说我这里边输入的用户密码对吧？你看VGA model双向绑定确认密码，还有这个密码，还有这个name是不是都是VGA model对吧？VGA model，那这个用户信息就是什么name密码，确认密码，Email这几个信息，所以呢，咱们在用户表单里面输入的信息，它就会改变这个用户应付信息，咱把这个一提交就行了，先验证后提交，咱们在这里写就OK了，用户信息页面上一加好保存一下。

嗯，咱们到这个现在只能手工的，手工的到这个注册页面啊，手工的到这个注册页面，因为现在咱们说没有跳转的，你看这样的话，咱们就可以加一个上面是一个一个图片，对吧，这个图片你可以本地去改什么都可以对吧，咱们叫ew shop的注册，那咱先改成e shop，在这里边找一下这个src下边。呃。这个下边image下边咱们有没有一个这个logo对吧，咱再换一下这个给项目对应上。

嗯，然后在这里边加一个。加一个。哪儿去了？Src这个呃，冒号。冒号什么，这加上吧，嗯，这个as esi MAS下边的这个点PNG。没找到这个I'Mo这。嗯。是cost logo等于re reqire包含一下，这个是a ets下边的，Immas下边的。

这种。让他打包一下。Ref ref下边，哎，我这个怎么忘了，怎么请求了呢？请求包含几个模块，然后咱们。诶直接这样就就行了。一块儿，呃，这样吧。呃，Ref这样的一个呃，空字符串，然后logo点。Video。

等于。这个。然后这块再来一个胳膊。因为咱大部分都是用网络图片啊，这个setup里边还有一个问题，然后logo。It下面有个错误。不能找到这个图片。不能找到这图片没写错吧，啊，这是斜线。嗯，这样信息啊，你看就把这个图片包含进来了，对吧，包含地图来，然后用户名密码对吧，你这里边输入正确的，如果输入正确，那我们一提交的时候，因为是双向绑定，一提交的时候，那我们这个user info.rog我们打印的时候就是我们输入的这些信息对吧？现在我们把这个地址这个我往上拽一拽啊，然后现在一点这个什么都没写，他这块这个组件自动为空，就全给我们验证了，对吧？我们验证都不用写。

听懂吧，那现在输入用户名随便哈喽对吧，密码，比如说哈喽111对吧，确认密码哈喽11111，对现在我随便写，因为现在没有那个，呃判断它只判断空不空对不对，电子邮件A圈BB对吧，你不是电子邮件格式你看。下边都行，你看这画。拿过来是不是这个数据name密码确认密码，Email是不是就都有了，对吧，都有了。这样的话，我们就相当于绑定，只要输入了就绑定这个里边，现在提交的时候就是我们找对应的接口，把这个数据直接一往服务器怎么的，往服务器一扔，诶就过去了，对吧，其实就这么简单，只要是我们写好这个页面，就很容易把这个提交做过去啊。

然后呢，我们同样。已经能拿到这个数据了，能拿到这个数据，那我们先请求接口，先看文档，这里边儿有登录注册的。嗯，认证你看这里边有认证，是不是有注册的，注册我们请求的是这个API，有个授权API，然后需要传递的参数什么呢？有名字email密码，确认密码，如果是微信公众号平台的话，你得把o open ID这个传过去对不对，然后呢，有头像的话，上传，你需要把这个头像注册的时候直接把头像上传，如果注册像这几个微信小程序平台使用的，如果你看非微信小程序的话，不用使用这个open ID对吧，会导致验证不通过，所以这两个不用提交，那咱就提交这些，那头像呢，咱们后期可以让他再单独的去改，所以注册的首先的信息，最基本的信息，最起码用户密码对吧，这得有，但是咱们得需要邮箱，因为想判断用户的唯一性，不然的话多人使用不行，所以呢，这个邮箱咱们得拿过来啊。

然后提交，如果状态码是201，那就成功，如果这个就失败，这个不需要授权注册不需要授权对吧，因为你这个时候你还没有登录呢，还没有用户呢，所以是不需要授权的，请这个接口，但是呢，要知道请求的方法，什么是post，所以我们现在就得做一个什么专门的跟用户授权有关的，那咱们就跟用户有关，咱们叫。叫us吧，Us JS。User JS在哪，也是在这个网络里边，对不对，那在网络里边咱们找一个这个关掉。呃，这个拿过来一个user JS，到时先找一个方法怎么的粘过来对不对，然后呢，改一下这个方法名，改一下方法名，方法名呢，咱们叫做res，把这个加上来，然后呢，需要传什么？就是把用户信息传进来，那些是数据对吧，也是机分格式，因为咱们刚才看到了这个。

注册的这个地方，你看我们传递的哪去了，刚才。这个位置找这块，你看我们是不是本身就是一个接森格式对吧，那把这接森格式当成这个数据，我们拿过来就行注册，所以这块里边我们就是一个数据，或者叫什么user，就是一个变量啊，User info啊，什么信息都行，对吧，User info或者注册，那我们就叫data吧，比如一个数据，然后请求的API咱们是有个TH，一定得是什么授权的，对吧，然后是呃，Re GI请求到这块，然后呢，我们请求的方法给改了，默认方法只是什么？只是呃盖的方法，所以能post你就得把这个方法加上它告诉我们请求这API的时候用post的方法，然后呢，传递的数据是date冒号，Date这个数据，但是两个我为什么叫这个名，这个对的是不是一样名啊，所以这块诶就来了，因为前面咱写的都是get的方法，这块写成什么这个方法就可以了，那加上这个之后，那我们把这个方法。

拿过来我们就可以在注册页面里边，我们需要干嘛，我们是不是需要导入这个iport从哪呢？让从这个，呃，网络部分net work里边，我们导入user这个，然后导入的这个方法，咱现在这里边就一个注册，因为咱现在就写一个这个嘛，对吧，所以就把这个呃注册的这个方法拿过来，注册方法拿过来，这样的话我们只要一点按钮提交，如果我们不验证的话，不验证的话一点提交，它会到这个地方来，这个数据都在这里边呢，对不对，那我们现在在这块就可以干嘛了。

想象一下是不是就可以，呃，当然了，你这里边你得做一些验证，如果什么都不验证，那我们就直接调用这个方法，Re GI s tr，这个方法我们需要把C传递去user info，把它一传就可以了，然后点re，呃，th.THN拿过来，然后这里边res，好，一敲开就可以了。在这里边我们判判断，其实呢。你都嗯都无所谓的，对吧，就可以去进行什么进行嗯注册了，如果成功的话，res.rog就会返回它的什么状态码，咱们先试一下看看，调用这就行，然后咱得补全，这是最核心的功能，当然了你还得有一些其他的一些判断的功能啊来我们先试一下看看这块用户名，我们输入hello ABC对吧，然后密码hello ABC，然后确认密码hello ABC，然后电子邮件hello艾福abc.com你看记住这个电子邮件名，登录的时候咱得用这个，然后一点提交。

你看下边是不是201，那我这个现在就写到了，通过这接口写到了服务器的数据库里边，对吧，但是这里面数据什么没清空。数据没你登录之后你的数据清空，那如果两次密码不一致怎么判断对吧，所以呢，想验证都可以判断了，那接口跟我们判断什么了，数据的唯一性这个东西给我们判断了，你比如用户名可以重复，但是邮箱假如还有这邮箱，我再点一下注册。你看这回就给我们来一个什么，来一个错误了，对吧。就给我们来一个错误了，这块422，那422就是我们接口里边看到的返回的，如果是422是不是参数错误对吧，有可能是昵称不能为空啊，对吧，密码不能为空啊，总之422是有问题的，那咱们在得到这个提示的时候，422应该是什么用户重复，因为你不能注册重复的名。

知道吧。对吧，但是你要改一下，比如说变成HELLO1对吧，Hello e ABC，那我们现在密码是可以重复的，再提交。你看下边又变成201了，对不对，但你再点一下又变成什么，又变成422了，就不能重复好吧，这就是我们注册过程。