16 - 尚硅谷-RBAC权限实战-总结 - 2.avi原创

分析了我们项目的问题，我们接下来看一看，那我们有什么办法来解决这样的问题，首先我们第一个和第二个页面不够友好。页面样式不够统一，这其实都是跟设计相关，可是呢，设计不是我们的强项，我们没有学过专门的知识，那所以这样的内容我们不要自己去想办法了，我们从网上可以找一些相应的插件，通过这些插件来提升我们页面的友好度，让用户用起来更加的舒服，并且能够把样式也能统一。啊，所以我们这里呢，可以采用一个插件，我们这里有一个叫layer，这个layer呢是一个弹成组件，我们刚才不是恰恰是那个弹出的效果不是很好吗？而且样式不统一吗？所以我们这里我们就希望它可以用这个插件来满足我们的要求，所以啊，这个我们后面来写上它啊，我们写上咱们叫做使用插件。

啊，咱们解决这个问题啊，下面我们也写上，就是使用插件。好了，那这两个问题既然有现成的插件，那好解决，咱们往下来看，页面会发生闪烁现象，那这个又是怎么回事呢？我们要给大家简单的描述一下，那么好，我在下面呢，给大家画一张图，咱们来理解一下，首先我点击插入，在这个位置我们把浏览器咱们给它画上，那么这是浏览器，接下来我们这是服务器。好，那么浏览器啊，首先它有一个页面，这个页面我们假设是个绿色的，那么这个绿色的页面呢，我现在要向服务器发送数据。

你向服务器发送数据以后，那么我们的服务器就接收到请求，那么然后它会有某一个程序，比方说sol来完成我们逻辑的处理，所以它就是那个sol。好了，那么接下来我们箭头要走到sol区。这就可以了，那我就问问同学们了，我们的浏览器它发送请求的目的是什么？比方说我们跳转页面，那你点击那个链接，你要跳转页面，你的目的是什么？你是不是要把跳转之后的那个页面显示在我的浏览器当中，那是不是就意味着我们的当前页面可能会变成其他的页面对吗？所以说当你提交数据之后，浏览器就知道你现在要。把你的页面内容变成其他的页面，所以这个时候啊，它会事先将你浏览器的内容干什么呢？清空，也就是变白，然后当服务器它处理完结果之后，它会把处理完的结果通过response返回到浏览器，返回到浏览器以后，我们的浏览器再把返回的内容给它得到，然后渲染到当前的页面当中，假设也变成了绿色。

那大家会发现我们浏览器之前是一个绿色的页面，然后我们突然一下变白了，为什么它需要等待服务器的处理，那么之后它又变成了绿色，在两个绿色的中间会有一个变白的过程，这就是所谓的闪烁现象。网速快，在局域网中访问，那么这个闪烁的时间就会比较短，可能不是很明显，但是如果网络慢的话，这个闪烁现象就会比较严重啊，会有一个很长的时间需要等待，也就意味着会有个白页面的效果啊，所以所谓的闪烁现象其实就是白页面。

那就是这样，这就是我们所谓的闪烁现象，可是我们说呀，你这两个就是个登录页面，而且你就是验证用户账号和密码，为什么还要闪烁现象，还要闪烁一下呢？那我们客户呢，可能是不能接受的，他觉得这是个很简单的一个验证，怎么还需要闪烁一下，尤其网速慢的话，可能时间还比较长，可能不是很好啊行，那这是我们的这个问题，好，我们再往下看第四个问题，第四个问题他说呀，当我们登录的时候，如果登录出现了问题，比方说账号或密码不正确，那这个时候我们回到了登录页面，页面的数据没有回显，那么用户就不知道到底是哪个账号出现了问题，他可能不记得了。所以在这种情况下，那我们的这个问题也要去解决，那它是怎么出来的呢？我们说其实这个问题也是我们上面的闪烁导致的。

大家想一想。我们刚才的这个地方是不是说把绿色的页面变白了，然后又重新变成了绿色，那么大家想想你的那个账号和密码是在哪个页面传递数据的，你是不是在我们的这个绿色的页面，你把那个账号和密码传给我们的服务器，然后你是在这个位置又把页面显示出来的，我就问问同学们，你的账号和密码在这个页面有吗？没有对吗？那没有的话，我就无法把之前的数据给它取到，你根本就显示不出来，所以他没有办法回线。诶，老师啊，那既然问题的原因我们找到了，那我们如何来解决呀，也就意味着我们的第一个第二个问题我们采用插件能够解决，那么我们第三和第四个问题其实都是一个问题，就是因为我们浏览器在提交数据的时候会把页面清空，然后再重新加载页面，这个过程就会出现闪烁现象，也恰恰是因为闪烁现象，它导致我的数据不能回。

那我该如何来解决呢？那好，我们来看一看，我们把这个图啊，咱们稍微的咱们画一画啊，重新给大家画一画，我们看看我们如何来解决。首先我们要给大家说明一件事情，就是说我们的浏览器是如何来渲染我们的页面的，这个咱们要简单的描述一下。好，这是我们的浏览器啊，咱们假设叫IE，然后呢，这个是我们的服务器，咱们的server行了。那么这个时候我们给大家描述一下，也就意味着我们的浏览器它要渲染页面，它会有一个专门的线程，这个线程我们称之为叫UI线程。

叫UI线程。好了，那么这个线程只要他提交数据，只要他提交数据，他就一定会把我们页面的内容给它清空掉，所以啊，这是我们的sol，那么当你发送数据的时候，只要你提交了，那这个时候。UI线程会把当前的页面内容给它清空，他为什么要清空呢？它的目的就很简单了，他希望能够重新加载新的页面，所以页面确实就是空的。那么等到我们返回了结果之后，那么我们再把我们返回的结果再把它渲染出来，又变成了绿色的，这个也是由UI线程来实现的，所以啊，UI线程它只要提交数据就会清空，然后得到结果之后再给它渲染出来，这是整个的过程，跟我们刚才的图形是没有区别的，那我们说了我们是要解决它，那我们如何来解决呢？我告诉你解决不了。

为什么？因为你的UI线程只要提交数据，只要只要点击提交按钮，它一定会清空，这个你是控制不了的，这是我们浏览器自身所决定的。那你说你怎么解决，他只要提交数据，他一定他会清空。那好，我们能不能想个办法，我不让他提交不就完事了吗？可是那不行啊，因为你就是要把我们的数据给服务器，我才能查询验证啊，那你不提交我们服务器哪来的数据，不可能啊。

所以在这个时候我们就要想一办法了，想什么办法呢？我们就要想一个办法，我们又要什么用UI线程来渲染页面，但是我又不希望它提交数据，那我该怎么办？所以我们告诉大家，默认情况下你是解决不了的，但是我们可以想一种特殊的方法，什么意思就意味着我的UI线程我不提交数据了。我不提交数据，那么在整个页面的变化当中，它是保持不变的，所以它就不会变白，那你不提交数据，那你的登录的数据你传给谁，你怎么传，谁来传？这个时候告诉大家，我们就需要在浏览器当中创建一个新的线程。你不是UI线程吗？好，我们这里要创建一个新的线程，那么这个线程它会由UI线程把数据传给他，他在跟服务器交互。

而这个线程它也需要等待，为什么？因为服务器的响应它是需要花费时间的，所以这个地方会有个等待的过程。然后当我们服务器将结果往回返的时候，那么我们这里就会得到相应的结果啊，我们的结果就有了，那么结果有了以后，那么这个时候你要将返回的结果再通知UI线程，来实现我们数据的局部刷新。也就意味着UI线程根本就没有提交数据，它只是把数据传给了这个线，而这个线程它跟务交互，他在等待，然后再得到结果，把结果再通知UI线程就可以了。

啊，这就是我们的解决方案，你直接拿UI线程你解决不了，但是我加一个线程就可以了，那这个线程是什么呢？它我们称之为叫阿贾克斯线程。所以我们用阿贾克斯的方式就可以解决咱们前面的第三个问题和第四个问题，因为我们页面是不需要闪烁，也不需要发生变化的，既然不发生变化也不闪烁，那么数据根本就不需要回旋，因为它就在那里。