13-cookie和session/08-尚硅谷-Cookie-Cookie练习之免用户名登录

接着咱们看一下cookie的一个练习，就是免用户名登录，啥是免用户名登录呢？就我不知道大家有没有上网关注过啊，那么比如说淘宝或者是某些这个网站，在你第一次去登录的时候啊。它那个输入框用户名和密码都是空的，就留给你去输入，那么当你登录完之后，你在退出这个网站或者系统，你第二次登录的时候，你发现诶，他居然知道你登录了是吧，用户名里面。已经直接填写上了你的那个用户名的信息，等着你去输入密码就好了，这个就叫做免用户名登录，那么我们来说一下这个免用户名登录大家怎么做啊，我们把这个思路给大家分析一下，首先这边是什么？这边是客户端浏览器是吧，客户端。哎，浏览器好，那么这边是什么呢？这边是服务器。

这边是服务器啊。诶服务器，服务器呢，就是咱们这个了，好了，那么大家想想登录的时候，服务器里面需要什么东西啊，服务器需要两个。元素一个呢是log in，点接着P页面，哎，一个呢是log in，程序就需要两个元素嘛，嗯，那么第一个元素里面是啥？用户名密码就是表单。来，出这个表单好了。好，然后下面是一个什么东西，提交按钮，下面是一个提交按钮，好这咱们了解一下，然后呢，咱们可以给它扣起来。

啊，这是一个按钮，OK，那么。好了，那么大家想想啊，咱们第一次访问的时候，浏览器一上来，你是不是得先访问这个登录页面。先访问这个登录页面。咱们说第一次访问，哎，然后呢，他会把这个登录页面给你返回。返回登录页面。好，那么返回的话，浏览器有什么，浏览器就有这个表单。浏览器就有这个表单，那么有了表单以后，大家想想咱们是不是开始在这里面输入用户名和密码了。是吧，输入用户名和密码某某某某某某，诶输入完了以后呢，你是不是点击提交就提交给谁，提交给long in好，那这边要干什么，这边要干什么呢？我们想一想。

好，那么这边是获取用户名和密码，肯定是这样子嘛，第二呢，判断用户名和密码是否正确是吧？哎，那么会是两种结果，一种是正确。然后允许登录，一种是错误，不允许登录，就这样子不允许登录好了。就这么个情况。啊，这是logo页面上需要干的事情，那么咱们不是要做免用户名登录吗？那免用户名登录的话，除了允许登录之外还要干什么？大家注意看一下，他要干嘛呢？把用户名保存为cookie发送给客户端，他需要做一些额外的操作。

他需要做一些额外的操作，好这个咱们了解一下，那也就是说大家注意看，如果他保存成为用户名了。保存成为cookie了，那么这边就会干嘛呀，大家看啊，大概的情况就是set。Cookie是吧，然后就是usual name等于用户名嘛，大概这种情况吧，那这个时候大家想想，浏览器有了，有了用户名的cookie信息，它就有了，有了以后好，这是第一次访问啊，大家注意看。咱们说第一次法官是这个颜色。

哎，那第二次访问呢。来。第二次反馈，咱们换个色啊，咱们换个跟他接近的吧，但不一样啊。走咱们用这个颜色，那这个时候大家想想，你登录了一段时间啊，然后你就退出这个网站了，对吧，然后呢，隔第二天你又来登录，这个时候你再来登录的话怎么办？你是不是还得诶大家想想啊，是不是还要访问它。没错吧，这是第二次登录好，但这时候注意看一下，由于你浏览器已经有了cookie的信息怎么办？会把cookie信息也发送给。服务器他会把这个信息也发送给服务器，好了，那这里就写到了cookie，那么客户端已经有了cookie发送给服务器了，那你就可以干嘛把这说明什么呢？输出用户名能理解吗？这个时候输出了用户名以后，客户端得到的是什么？是带有用户名的这个表单。

诶，大家看这个时候。不就达到了我们免用户名登录的效果吗？能理解了吗？这就达到了我们免用户名登录的效果，这是第二次访问。好，这个咱们了解一下，这就是免用户名登录的一个实现细节和原理。这咱们知道一下，那么我们就可以按照这样的一个分析来实现一下免用户名登录啊，大家请看啊，我们现在呢，呃，在这边。在web里面创建一个JP，诶创建一个JP。

咱们叫login.jp，好，这就是登录的了，咱们写个表单。好，然后这里面是用户名和密码来啊。Your name。然后呢，咱们再复制一下。这上面这个呢是密码。好，用户名啊，密码好了，接着下面什么是提交按钮提交，或者说是登录啊，登录好了，然后除了大家看看啊，除了有这个log in的JP还有什么是不是有个select呀，Log in，来，咱们准备一个log in。

咱们就让他继承。P，好，咱们写上，呃，这个方法啊，Do get。好。这里呢？来，咱们来走一下啊，获取用户名和密码等于Iq.get parater这里是什么呢？Usme。是吧，还要还要获取这个密码，Pass what。OK，然后接下来干什么事情啊，咱们比较一下用户名和密码是否正确。

咱们说怎么比较呢，咱们这里就写死了啊，就不访问数据库了，要求他。必须是W1681NAME，并且密码123456。好。那么这时候注意看一下啊，无非就两种情况，一种情况是登录成功，一种情况是登录失败。这两种情况嘛，那么我们说登录成功怎么办？把用户名保存为cookie等于new cookie，好，那么这里面是user name。

那后面呢，是user name放进来，然后cookie.set max age，咱们给个时间呐，都记住啊，一定要给时间，如果你不给时间，你退出登录浏览器一关就没有了啊，咱们给个时长吧，呃，咱们给个七天，不要超过七天就差不多了哈，那咱们说60秒乘以60分钟，那就一个小时乘以24，这是一天再乘以七一周是吧，当前COOKIE1星期或者一周内有效啊，然后response。点an cook，咱们往控制台打印，句话说登录成功。哎，登录成功，那下面就登录失败。

好，这个时候啊，咱们把这个该写的也都写完了啊，该写的也都写完了，诶这个报错有啥报错，咱编译一下。呃，需要结尾，不合法。啊，这地方多了一个符号是吧，这样就好了，OK，重新编译一下。没啥问题了啊，这基本上就没有错误了，好，那么这个时候大家看这个就没啥问题了哈，我们需要在这个地方。写上一个叫做value。嗯，这里需要输出什么东西啊，输出cookie。说说这个cookie，大家想想怎么做的呀，咱们是在这里说说cookie呀，只要客户端一有cookie，大家一过来这里就能看见，咱们来看一下哈。怎么输出？首先这个地方是cookie，这是一节表达式里面的，然后点什么东西呢？User name.value就可以了啊，我先这么写吧，一会我再解释啊，来，咱们现在写好之后重新部署一下。

看着下面。这个打印的话是不是部署成功了，咱们清掉啊，来请看这个地方log in点接着批走，大家注意看一下，你第一次访问的时候，这边没有用户名登录那个cookie，这里是不是输出不了值，那么这时候你来输出啊，大家记住。EWG168啊，我就故意敲个错的，666666，大家注意一定要输入正确才行，我看看啊，这个登录的地址咱们写了吧，还没写，他没写我就给他写上。Local host，哎，然后8080到工程名，我把这个复制一下，这有点长，复制好写一点。

好，这后面是什么东西，Look in so，咱们这个有地址了吗？好像没有地址是吧。哎，还没有地址，来吧，咱们复制这一段。也改一改啊。这个呢，叫做log in that，把这名字放进来，放进来，放进来首字母改小写，然后把这个复制一下，放到。登录的页面里面就完事了啊，就完事了，那咱们再重新部署一下吧，因为咱们刚刚改了这个配置文件，一定要重新部署才能生效的。再看一下哈，重新部署好了，再来一次，咱们再来刷新刷新刷新啊，现在大家继续看一下。ZWG1681234567890，咱们故意输个错误的啊，我登录大家看一下。

他是不是告诉你登录失败呀，登录失败的话，大家注意看。那你现在把浏览器关了，你再来返回那个页面。诶走大家看是不是没有cookie啊，没有用户名，但是只要你一登录成功，咱们的密码是什么，123456，咱们点击提交，你看这边这是不是登录成功了，登录成功以后，你再在这个网站里面逛一逛，逛一逛啊，然后你退出了是吧？退出之后再来大家看一下哈。APPAPP冒号双斜线local host这个走大家看用户名是不是有了，为啥有，请看一下这里是不是已经有这个用户名，当你在访问这个请求的时候，大家看你刷新看这下面就跟我们说的一样，你在请求的时候，Cookie他是不是把这个用户名的cookie发送给服务器了，都发给服务器了以后你在这里大家看。

就可以输出，那有同学说老师这地方我都忘了，我给你看一下哈，怎么回事呢？这个cookie是啥？还记得吗？是ELL的，是一个隐含对象，它是个map，既然是字符串类型，值是cookie类型，我先输出，你看看啊，来你刷新一下是不是能看见这个cookie啊，对吧？它既然是个map，咱们要的是哪个，要的是这个username的，所以紧随其后咱们写的是这个map里面的这个key user nameme，那么这个时候注意看啊，点us name，这个时候就会干嘛得到you name对应的这个cookie，那这个cookie里面咱们只要什么。只要什么，咱们是不是只要这个value这个值啊，所以在后面就点value这个点value它就输出对应这个cookie的值，你看到吗？是这里吧，就把咱们的用户名给输出了，这就是免用户名登录。

啊，这就是免用户名登录，这时候你需要输密码123456，诶登录你看没问题的好了。