17 - 尚硅谷-RBAC权限实战-总结 - 3.avi原创

项目的问题已经分析完了，并且我们也提出了对应的解决方案，接下来我们就准备把这些问题给他解决了。首先我们先解决页面不够友好的问题，我们说了这里我们要采用插件来解决这个插件，我们在这里我们事先准备了一个压缩包，它叫做layer，它是一个弹成组件，它可以弹出我们的消息，它类似于我们alert那种效果啊，这个呢我们说还是可以的，所以把它解压缩，解压缩以后它里面会有一个layer的文件夹，把这个layer的文件夹原封不动拷贝到我们项目当中。拷贝完成以后，这个拷贝的文件夹里面会有一个脚本文件，那么我们需要在我页面当中把它准备好，那么准备好以后，我们接下来就可以把它使用一下了，可是我们如何使用呢？我们这里有一份文档，文档当中就告诉你了layer弹成组件的基本使用方法，我们打开，打开之后，那么这里面就包含了它的提示功能，询问功能以及加载功能，那么我们这里要采用它的提示功能，所以拷贝拷贝之后，那么在我程序当中我们就不再alert了，我们直接拷贝。

我们的这个方法，这里我们有一个layer的对象，它是我们插件所提供的对象，然后有一个message的方法，它表示的是消息，那么这里需要三个参数，第一个是提示信息，这个提示信息我们之前就有，所以拷贝。然后接下来是一个接对象，这个接对象什么意思不知道，只是知道它里面会有一些属性，这个咱们先不管，然后后面有一个回调方法，那么它是个方法，那我就先声明一个方法，好，方法里面我们说什么都没有，它什么时候调用我们也不知道，所以呢，我alert我写上咱们叫回调。

方法好了，那我写完以后啊，接下来我们把服务器给它启动一下，观察一下效果。把服务器启动。启动完成以后呢，只要效果没有问题，那我们以后都会按照这种方式来弹出我们的消息，好，现在呢，我们打开。打开以后，那么我们local host 8080，然后斜杠at finding web。然后斜杠log回车，回车以后我们登录页面出来了，现在我的账号就没有输入，那么这个时候我点击登录点，诶，你会发现它这个时候就会弹出一个我们的对话框。

然后当对话框消失的时候，这个回调方法的文字就会显示出来，所以我们通过这个效果就能够看到我们这里，其实他就是把这个消息给它弹出来，然后当它关闭的时候会执行回调方法，所以啊，这个回调方法的目的就是为了说在他关闭的时候做一些事情，那我们这里啊，暂时是不需要的，所以我就不要了，把它去掉，好接下来我们这个文字没问题，那我们就要看这儿了，这几个参数它代表了什么意思，我们要稍微的来看一看，首先我们来确认一下来我们刷新，刷新以后我点登录点你会发现我们这个弹出的对话框，它过一段时间就会关闭，这个靠的就是我们的time属性，它表述的是它的时间。多长时间它会自动关闭，那么它是以毫秒为单位，就是1000毫秒，就是一秒钟，可能时间它有点短，我们可以把它设的长一些，我们两秒钟。

好，我们刷新。然后点击登录，你会发现它稍微的长了一点，还有我们下面叫icon，这是个图标的意思，那么这是个五，我们不知道他在干什么，我改一改，我试一试，比方说我改成六。然后我们刷新，刷新之后点击登录点，你会发现它的图标发生了变化，好，那我再改成二。然后刷新，我们再来点，你会发现又发生了变化，所以我们有理由相信这个属性，它代表的含义就是图标。但是这个图标到底每个数字代表了什么含义，它怎么去理解，在什么场合用什么，我们可能不太清楚，怎么办？没关系，大家看，在我们插件的文件夹里面，它里面会有一个皮肤，打开有个default，里面会有一些图片，其中就有我们的icon，我们双击打开，打开以后大家会发现我刚才的那些图标在这里面都会出现，比方说我们最开始出现的这个红色窟上的脸的它是五，而这个写了个六，它是一个笑脸。那么按照我们数据的索引，咱们来看一看零。

12345，它就是五，那么它就是六，所以如果你想显示不同的图标的话，你就可以把数字跟它对应上，把它的索引给它写上就够了啊，那我们这儿啊，肯定应该是五啊嗯。好，接下来我们再看下面这个属性，那下面这个属性是什么意思呢？我们再来看，我们来刷新，刷新以后点击登录，你会发现我们的对话框会抖动一下，那么这种效果呀，就跟那个QQ啊，诶它的效果感觉差不多，为什么它会提醒你。

这就是一种效果，那这个效果呢，我们是可以改的，比方说我不是六了，我写个三。是多少我也不知道，我们刷新刷新以后你再点。你会发现它并不在抖动了，而是从旁边给它移动过来了。那好，我再把它改成我们的五。我们再来刷新，刷新以后点击登录，诶，你会发现它又变成这个样子了，所以这种效果呀，你可以根据自己的需要啊，觉得哪种好呢，你自己添加哪一种就可以了，我个人觉得那个抖动还是不错的，它有提醒的作用在里面啊，我们还是改成六就可以了，所以啊，我们这个插件并不复杂，你只要把参数的含义搞明白，那么用起来是非常简单的，既然这个没问题，那我们下面的密码我们也可以这么来做。好了，把我们这一块给他拷贝过来。

放到我们这个位置行，那这个完成以后，那接下来我们就该解决我们另外的问题了，我们另外的一个问题是什么呢？我们说了是页面闪烁和它回旋的问题，我们当时说了如何解决呢？采用阿贾克斯来解决这个问题，阿贾克斯呀，其实我们说就是浏览器的一个新的线程，那么也就意味着我们的表单就不要再提交了，如果你还是用它提交的话，那么就会存在很大的问题，所以把它做掉，我们不再使用它了，所以接下来我们写上叫使用。阿贾克斯来我们叫做什么呢？提交数据，好，那你要使用阿贾克斯提交数据，那我如何来调用相应的程序呢？我们说我们这里用的是j query j query里面就提供了阿贾克斯相应的操作，那我们这里采用的是它最基本的一个方法叫Dollar，点阿贾克斯。

我们要用这个方法来向服务器发送请求，发送数据。那么这个阿贾克斯我们怎么用呢？我们一般在使用的过程当中，我们会给他一个接对象。所谓的接对象，其实就是个大括号。然后在里面我们要添加对应的属性，第一个咱们叫type属性，它表述的是你提交数据的方式，你是用post还是用get来提交数据，还有一个是URL，它表述的是你发送数据的地址是什么，所以我们写上咱们就叫做do login，但是我们要跟之前的区分开，所以我写上叫do阿贾克斯login啊，给他区分开他的名字。接下来那你的数据都传哪一些呢？所以写上一个逗号，我们写个date，我们的数据不是说只有一个，我们有账号，我们有密码，所以在这里我们写上叫log in account。

那么这个账号。账号我们前面其实就已经有了啊，只要它没有任何的问题，我就能够拿到，还有一个是我们的密码user password。那么我们密码同样在前面，我们也能取到。所以啊，我的账号密码没有任何的问题，那然后那我要发送数据了，可是在某些情况下，网络可能会阻塞，它会变慢，那这样的话，你发送数据的时候，用户没有任何的效果出来。不知道发生了什么事，可能对于用户来讲体验效果就变差了，所以一般我们使用阿贾克斯来异步发送数据的时候，我们都会增加一个loading的效果，所谓的loading啊，就是有个小图标在那转来转去的，那就是loading，所以我们这就写上叫before。

Send叫发送数据之前我怎么怎么做，那我发送数据之前我该怎么做呢？咱们刚才不是有一个插件吗？这个插件就有一个加载的操作，所以在这个时候，我们现在把这个功能我们拷贝过来。拷贝过来以后，那么这个时候我们表述的是数据处理中或者叫做数据登录中都可以啊，然后接下来我们往下看，那么现在你正在处理当中的话，那如果我们的服务器返回的结果我们该怎么办？这个时候我们会得到一个逗号success，有这么一个方法，这个方法呢就会返回一个结果，这个结果我就叫就可以了，那只要你有了结果，我不管是成功还是失败，只要你有这个结果，那你的那个loading效果就不应该存在了，所以我们这里应该把它关掉。

所以拷贝给它关掉。好了，那你把它关掉的话，那这个时候就会出现一个问题，为什么？因为我们的变量在这个地方声明你在这儿使用应该会出问题的，所以我们把它我们挪到我们的上面。你挪到上面以后，我写个那就可以了，把这个我们去掉，我们不要了，行，那接下来我们这个位置呢，我们alert把那个T我们给它打印一下，弹出来，我看看到底我得到的是个什么。行了，那我这个页面写完了，那我的后台就应该完成这个逻辑的操作，所以我们找到我们程序。

这个程序我们应该执行我们的登录，但是不再是do login，而是我们的do阿贾克斯log in。所以public。然后我们阿贾克斯线程它是不跳转页面的，因为跳转页面是UI线程的任务，所以我们这里不会返回string类型，我们要返回一个object，因为你要把结果往页面返回，所以在这个时候我们叫do阿贾克斯log。好，写完以后在这里request，我们给它加上，我们写上斜杠，叫do阿贾克斯。啊，Log好了，写完了以后，那还有一个就是说你这里的对象在网络中是无法传递的，那我要把你转换成Jason的字符串往页面中传递，所以圈我要增加一个注解叫。

增加完成以后，那这个时候我们要在这个位置要返回结果了，这个结果其实就是要判断你当前的用户是否是存在的，所以其实逻辑跟前面基本上差不多，所以啊，我现在把前面的操作咱们拷贝过来，拷贝过来以后，那这个时候在我的参数当中，我们应该给他准备好，所以拷贝。拷贝之后放到这个位置，然后我们要有一个参数叫URUR好了，那么有了以后，接下来我要判断这个U是否存在啊，所以if，好，我们叫DB，它不等于空，说明你的登录成功了，然后else else呢，就说明你失败了，所以你成功和失败到底是什么？我要返回给我们浏览器，那这个返回我要返回个对象，那我怎么知道我的对象是成功还是失败呢？所以啊，我把咱们的这个结果封装成一个对象，然后传给页面，所以在我们的common里面，我创建一个class，因为在别的地方都会使用。

所以阿贾克斯叫阿贾克斯的结果，你现在不就是要得到结果吗？所以把结果给他来创建出来，那这个结果就有成功还是失败，所以我们叫布尔类型，叫success啊好了，写完之后我给它增加set钙的方法。增加完成以后，那我这个地方就首先我要把阿贾克斯道给它准备好，准备好以后，那么这个时候我们就准备要返回这个return好了，写完之后那就好办了，因为成功和失败其实我们是知道的，那我就点site success，因为如果你不等于说明你成功了，好，然后点site success，给他一个我们这样的话，成功和失败我就明白了。

那么你这个结果返回之后，那我这边就可以得到这个对象，这个对象到底里面有什么属性，我们再说，我们现在来看一看效果，把服务器给它重新启动，然后呢，我们再来去点击登录。好了，那我们现在呢，开始来进行操作。刷新刷新以后，那么现在我要写上我们的用户名和密码了，那我这里来看一看，我们打开用户名和密码呢，是我们的张三，那我现在呢，试一试啊，点一下点我们张三，所以我写上咱们叫张三，然后密码呢叫张三，我点击登录点点完以后大家可以看到我们弹出来什么。

是不是弹出来一个object，说明我们得到的是不是一个对象？所以啊，你会发现我们的对象取到了，可是这个对象它到底都有哪些属性呢？我们来看这儿。点击检查我们的network，因为你只要发送了一个阿贾克斯的异步请求，那么服务器一定会返回结果，而这个结果它就是一个身的字符串，而这个字符串我们会把它当成对象来使用，那么对象我们拿到了，里面包含哪些属性呢？我们一块儿来看一看，点击登录，点完以后我们的do阿贾克斯log已经有了，有了之后往这个里面来看，我点点完以后叫response，点。大家看怎么了？这是不是一个杰森的对象里面是不是有个属性叫success，然后它的结果是true啊，所以我对象拿到了属性，我也就能够拿到，所以啊，我在这里写上叫if。

那么这个if写上之后，在我这里我写上叫点success，因为对象拿到了它的属性，我也就能够拿到，我就判断它是true还是false，那么我这里呢，True我们怎么做，我们force怎么做，我们都应该给他准备好，那么如果是true的话，那么说明你登录成功，那我就要跳转到主页面，如果你登录失败了，我要提示错误信息，而这个错误信息我们恰恰是有的，所以拷贝。拷贝以后，那我就写上叫用户登录失败。啊，或者叫用户的登录啊，账号或密码不正确，或密码不正确，请重新输入。

诶，就是这样，你的用户名和密码不对呀，我就找不到啊，那所以呢，你重新再输入一遍看一看，诶这是我们的错误，那如果是我们的正确的场合，那这个时候我们就可以跳转到主页面了，所以window。点location.hf然后写上我们要跳转的就是主页面，就是那个men，那这个men呢，在我们这里需要给它准备好，所以我们在这个位置来public street，我们叫做men，这个men就是跳转到主页面的意思，所以request mapping。好了，斜杠我们叫做man，然后我们下面咱们也叫men就可以了，正好呢，我们在之前把这个页main页面我们稍微的准备了一下，那接下来我们再来看一看它的结果。把它停掉，停掉以后我们开始重新启动，观察一下我们现在是不是能够正确的跳转。

好了，那我现在呢，我们刷新试一试，刷新刷新以后，那这个时候我写上张三，我写个对的。你写个对的以后，我点击登录点，点完以后大家可以看到是不是去到了那个main页面，说明没有问题，那好，我现在错误的情况，那如果是错误的情况下，密密码密，我点击登录点大家会发现它就提示用户登录账号和密码不正确，请重新输入。他弹出alert了吗？没有。他用的是我们的插件，我们页面刷新吗？没有，因为页面的UI线程根本就没变，我们数据回显没回显。

回显了，其实根本也不叫回显，为什么连页面都没有刷新，都没有闪烁，它怎么会丢失呢？它没丢失就不需要回显数据，它就一直在这儿，所以啊，这种方式还是非常好的，我们采用插件以及阿贾克斯解决了我们之前的问题。