day13【微信扫描登录】/04-尚硅谷-谷粒学院-登录前端整合（2）

就是刚才呢，数据我们都有了，它数据就是这个对象叫log info，那咱最后也就是在这位置给它做个显示啊，那咱看怎么做啊，这段代码呢，就是一段前端页面代码，不需要各位敲一遍啊，但是希望各位知道它这过程，比如说我直接复制咱们改就可以了，大家看一下过程怎么样的。啊，大家注意啊，首先第一个。如果说啊，咱现在不是登陆。那这个位置显示是不是就是登录注册。如果说你现在是登录，它要显示的应该就不是登录注册，要显示的是不是就是你的昵称和头像，应该是这个逻辑，就是它是登录就显示昵称头像，不是登录就显示登录和注册，那咱们要怎么来做呢？咱看这里边啊各位看我这里边呢，有一个叫log info。那其实咱可以做个判断，如果说log in info中有值的话，那表示是不是就登录，那咱做个显示，如果说里边没有值的话，是不是就不是登录，那就要显示登录注册啊，就根据它做判断，但是大家可以判断这个对象，也可以判断里边的值，比如说判断里边的ID或者昵称啊都可以，那咱们最后给他就改一下啊。

这段代码是页面中的部分，不需要各位写，我就把它复制啊，然后咱看一遍给它改一下啊，把这个代码直接复制过来，就页面中判断。咱们先拿到页面中啊，然后咱再看页面中放到哪里呢？大家找个地方，这个位置有一个标签叫ul，咱把这个UR标签里边你看啊，有登录，有注册，把这段标签给它替换掉，就这个部分替换掉，替换成我课件中那个代码啊，这个代码那咱看一下啊，这个部分什么意思？看我的写法。你注意啊，在里边有U，下面有LY，在Li里边呢，首先我这位置做了一个叫V-if的判断，大家看我怎么写的啊，这里判断login info是咱们下面那个对象，就是这个log in info，然后我这里边的判断方式就是如果说log in info中。

加个感叹号C，就是没有I地址表示是不是登录，不是登录咱就显示登录和注册啊，这是第一个，然后下面还有一个判断，就是如果说你log in info里边有ID址。那咱就显示你这个用户的昵称，包括用户的头像，我们就做个显示，主要做这个判断啊，当然里边还有一个消息啊，这消息其实目前用不到啊，等先放到这啊，主要就是这个我再说一遍啊，咱们判断就是log in info里边如果说没有ID，那就显示登录注册，如果说里边有ID表示你现在登录，那那就显示我这个用户的头像，还有用户的昵称，把这个做显示。

所以现在啊，我们就是这么一个过程啊，咱们把这个就最终弄出来了啊，就关于我们的主要这个流程。我把这个代码啊给大家截过来。等于核心的是这部分啊，直接从库中取这个值，包括这个需要你理解啊，它反是个字符串，咱需要把字符串转成我们这个。这va有个对象，然后才能解析去流言值，如果你不变成对象，那在GS里边它只作为字符串，是不能根据K到它的值的。咱要这么来做的啊。这个我先截过来啊。咱们刚才写到最终的这个显示代码。也就是啊，第五分。所以这样的话，咱们现在把这个登录的前端，应该咱们就最终整出来了，主要这个过程啊，然后过程我刚才在里边给各位都画出来，就按照这个五步操作，把这做到包括第一步第二步到第五步啊，这个代码都写出来了啊。

这个咱完成了啊，然后完成之后呢，最后咱们把这个最终的效果，我们来试一下，看一下最终结果啊，但是我强调啊，就是各位啊，包括之前同学在做这段过程中呢，经常遇到问题啊，其实比较常见，一般来讲这个经常忘记引入。这个不要忘记啊，另外就是你在写这段的时候注意啊，这一段代码要写到，就是你po的代码写到最后，这写到前面，你别把这个写到后面去，就是你不要这么写。那这就不对了啊，他要最后给它就是is put要给他写到前面去，这个特别注意啊。包括你看啊，在我课件中有这个结构在我课件中啊，大家看这个代码中，我们刚才用到的是这部分，在我下面还有一部分，这也是一个拦截器，但是这个咱今天暂时用不到啊，后面才会用到，我给他写先拿过来啊，你看啊，我刚才写这是针对request的这么一个拦截器，然后下面还一个针对这个叫response拦截器，但是这个咱后面会用到，就后面咱做的那个支付会有，目前用不到啊，先放到这里。

这是第一个，各位注意位置别写错了，也要写到这个前面。另外还有一个问题就是。在我们这个登录啊，包括这些里边啊，各位写的话也是这些，不要忘记引入啊，然后你写的过程中。就是这些代码肯定都不能少啊，这些我们都做到了啊，然后做到之后，最后咱们把这个最终的效果我们来试一下，就看一下最终的结果是什么样的。我把这项目啊，咱们完整启动一下啊。这是前端，然后包括咱们的后端，后端的话呢，我就请这个u center了，咱就看这个登录注册啊，当然别的服务都可以启动，就是CR效果，咱们目前只看登录，我把U3咱启动一下啊。

包括这跨域应该都加了。那咱们测试最终的结果啊，然后我这里边N这个应该我也启动了啊，也都可以了。我们等它停起来啊，然后测试。所以这个啊，关于我们的登录，按照一种比较通的方式，结合我们的cookie啊，结合这些过程，然后把这个我们给他最终完成了啊。这个啊，应该启动了啊，就是那个那可没有没有那个服务没有启动，但是这东西能用啊，然后咱们看前端也启动了，最后啊，咱们回到这里面来，我给他做一个刷新。这个啊，然后咱们下面看登录啊，就是目前没有登录，那你在里边肯定显示是登录注册，然后现在我点登录到咱这个界面，在里边输入我们的手机号和密码啊，当然你可以先注册再登录，我就直接演示登录注册，昨天演示过了，那我到里边我找这么一个数据。

找一个啊，还是这个，这是手机号。然后下面是密码，密码应该是六个一。啊六个一，然后下面我点登录就会执行我们刚才这个代码流程，登录之后首页面就会显示我们这个昵称，打开昵称啊，看我昵称叫什么，这个我叫T1010，然后头像是这个头像啊，这个咱一会儿显示，那下面我们看结果啊，为了明显我把F12打开有错误咱能看到啊。这警告可以忽略，然后现在登录我们看结果啊，我一点登录大家看啊，在我的首页面中啊，它里边报了一个错啊，咱看他报什么错啊。就是现在啊有个错误，然后这个错误你看啊，就这里边都提出我们了。你看啊，叫什么user s tr is not DeFined，说这个东西没有定义啊，那咱看一下啊，这好像是我刚才定那个变量，可能咱的范围写的不对，那咱看啊，这错误是什么？我觉得这个问题咱应该能快速找到啊，那我们来找一下啊，刚才应该是有一个什么值没有定义出来啊。

然后里边看一下啊，找到页面，这页面应该就是底的里边看我刚才写的里边。大家看啊，它的问题说这个u s tr没有进行定义。也就是这个值。U s tr。包括他。啊，那我们再查一下啊，这个叫user.cookie.get然后下面有一个叫user s tr，这个如果有值的话，那我们来一个pass解析，把这值取到。这个指应该是有啊，它其实没有定义，呃，那比如说呃，我给他换个名字试一下啊。应该没有写错。就这个名字啊。UST。我看啊。

STRSTRSTR啊，这里错啊，大家看啊，我在找这个问题啊。这问题没有什么技术含量啊。但是问题就是。你看啊，我这是大写，这是不是又小写了啊，所以我给它复制一遍啊。就这个问题啊，这个我最开始小写，现在大写有这么一个比较低级的错误啊，这个可以了啊，然后咱们给它改完之后，我们再试一下啊，看一下结果啊，刚才就是这个单词写错了啊，它提示我们说这个没有定义，那我就找这个，其实就是这个问题，或者说我刚才要想改个名字啊，但是没必要改，就用它复制一遍就可以啊，那咱们最终再试啊。就是现在比如说为了明显我重新登一次啊，这些我先给他先清掉啊。包括cookie全都清掉，咱重新刷新页面。现在啊，没有登录里边肯定是什么都没有，然后现在我点登录。到我们的登录页面重新咱们登一次啊。

这个手机号。然后下面是我的密码。诶，好像啊，好像我敲错了啊，重新挑一遍六个一啊。这个可以啊，然后最后我点这个登录，咱看结果啊，一点登录来到我们的首页面中，咱看效果大家看啊，就这位置啊，这是警告，咱可以忽略啊，然后大家看这里边。这里显示的是不是就是我的昵称和那个头像，因为当然这是昵称，这是头像，这个就完成显示啊，我的头像就是这个。所以这是关于登录的一个整合啊，咱把它就最终做到了啊，所以大家把这个流程能给它实出来啊，就是咱们说到了啊，刚才遇到一小问题，还是单词写错了啊。所以现在啊，咱就把这个登录和注册前端包括后端介绍这个完整流程都现出来了，这个过程中呢，登录它要稍微复杂点，注册比较简单，而登录咱是按照这个五步的操作把这个表现出来啊，所以大家这个能做的啊，这是我们。

说的一个内容。