登录页面的逻辑

登录页面的逻辑

开发工具与关键技术：Visual Studio 2015 登录逻辑
作者：李国旭
撰写时间：2019年4月23日

我们平常玩的微信、QQ、微博、游戏等，这些聊天的工具和游戏都会有一个登录的界面，让我们输入用户的信息来进行登录或注册。那他这个功能是怎么样实现的呢？我们一起来看一下这个登录页面的一些功能逻辑。注明：（图来自老师）

首先，是在HTML写它的代码页面布局可以用一个form表单和一些label标签来写他的样式。在Bootstrap4.0里面使用display: block 和 width: 100% 在全部的 input 控件上后，表单默认都是基于垂直堆叠排列的，当然我们可以使用其它Class类来改变表单的布局。而在form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，但是由于它是一个class选择器，我们就可以在、

或任何其它元素中使用它。
如果我们想要禁用input标签，那么在自定义单选框和多选框里面也可以禁用，只要将disabled布尔值属性加入到input标签里，禁用的指示和样式都会自动载入。以上的就是Bootstrap4.0里面的一些表单控件和input标签的使用的用途！

那么页面布局写好了之后呢就是js那边的代码，先写登录按钮的点击事件然后再获取它的用户名、密码、验证码、身份、记住我的这些值；然后判断他们是否填写数据，为空的就是还没有填写信息，打开加载层layer.load()在用post请求主页面的路径，获取控制器和页面传输过来的值名字要一样；然后关闭加载层确认填写用户的信息没错了之后就登陆成功跳转到主页面，否则提示你说：“请填写正确的用户类型”或者“请输入正确的账号和密码”否则用户不存在登录失败。

注意：在请求路径的时候，路径名要和控制器那边一样，要不然就会报错404请求的路径不存在，或者是少些前面的斜杠“/”，两者少一个都不行，因为这是格式的问题改不了的。如果加这个符号“~”的意思就是根目录的我们在上传图片或文件的时候就会在post请求路径上面加上这个符号。

下图的是控制器那边的代码先让用户名和密码为空，然后记住我的状态为false，获取它的cookie；那么这里的cookie是什么呢？它通常用于识别用户。Cookie是一种服务器留在我们用户的电脑上的小文件，每当我们通过浏览器发送请求页面的时候，我们的电脑就会发送cookie。而session就不一样了，当我们在浏览一些网页的时候然后关闭这个网页，隔了一段时间我们再打开浏览器的时候就会发现它自动帮你打开你上一次浏览的网页，这就是它的神奇之处。当Cookie被传送至用户的计算机上，它含有可识别用户的信息。那么这种接口就被成作Session对象，它就是用于储存用户会话的信息或者用于更改用户会话session的设置。

接着就是判断cookie不等于空，用户名、密码、身份等都不为空，这里要注意的是当我们在使用session时我们不知道它什么时候结束，我们也不知道最近的请求是否是最后的请求。因此，我们不清楚session能“存活”多久；因为session等待太久的话会消耗服务器的资源。但是如果过早的删除，我们就得一遍又一遍地重新开始，这是因为服务器已经删除了所有的信息而且它只能存储少量的数据
下面请看效果图：