011-尚硅谷-后台管理系统-登录业务完成

哈喽，各位小伙伴们大家好，那接下来啊，咱们的要完成咱们的登录业务，那首先说咱们的后台管理系统项目当中啊，一般只有登录业务，很少有注册业务。而现在咱们的登录业务啊，它采用的都是work的数据。并没有利用到咱们真实的服务器的接口。那所以说啊，咱们呢，接下来呢，需要把这个登录业务给他完成。那么首先说啊，右侧的这里是咱们已经完成的后台管理系统项目，而左侧这里呢，是目前咱们正在开发的这个项目。那所以说啊，对照着已经写好的这个项目，咱们一点一点的把功能给它完善。那首先说如果让你去写登录业务，那你要做的第一件事是什么？那和咱们以前的套路是一样的。那第一件事儿啊，你是需要把静态的组件给它完成。

对不？你把静态组件完成之后，再去琢磨它的业务逻辑。那咱们呢，去找一下子相应的登录组件。它呢，是放在了RC下的views文件夹里面。那咱们的说过，Views文件夹里面经常放的是路由组件。而这些路由组件啊，目前都是它默认有的路由组件，那咱们呢，现在要处理的是登录业务，所以说它这里呢，有一个叫做log in文件夹，Login是登录嘛，在这里面呢，有一个叫做index点。那这个呢，就是咱们的登录的路由组件。那咱们呢，去看一下的，那首先说这是它的结构，这是它的行为，这是它的样式。对吧，那所以说咱们一点点来，咱们先把它的静态先给它完成。那首先说啊，后台项目对于一些初学者呢，可能稍微有一些难度。

为什么呢？因为它的静态采用的都是饿了么UI。那所以说呢，后台项目呢，它考验你对于饿了么UI它的熟练度。那首先说啊，咱们看一下这里，那咱们对照着这里啊，咱一点点的去把它给它修改一下，把静态的给它搞定。那首先说啊，外层呢，有一个跟标签。对不，它叫做login container是整个登录组件的一个跟标签。那这里面呢，它用到了一个叫做E啊E杠放。哎，放组件。他呢是饿了么UI啊组啊框架吧。或者叫UI啊，这个叫差价。里面的一个组件，那经常啊，哎，经常展示什么呀，展示咱们的表单元素。

而且呢，要注意一件事，什么事EL phone，你给一个认为它就是个phone。对不，那它这里面呢，还有很多的属性。对不，比如说咱们看一下子，比如说放经常收集数据，把数据收集到哪，他经常会有到一个叫model属性。当然，咱们随着后台管理系统的开发，你将来会对于饿了么UI会越来越熟悉了。那首先说咱们说一下子放他在收集表单数据，那为什么要收集表单数据呢，你想想。你是不是得收集用户名和密码，一点击登录，是不是要把用户名密码带给服务器？那把数据收集到哪呢？是收集到了显示数据，这咱们看一下date date这里呢？啊，Date这里它是不是有叫looking form，那不就是它吗。把咱们的用户名和密码收集到这个对象的身上，分别叫username和password，但是默认叫密码是六个一。

对不，以及他这里面呢，还用到了一些哎，表单验证的规则。而这个验证规则呢，也是饿了么UI，它就提供了。对不那以及后面还有一些其他的属性。那所以说这里面呢，老师呢，把这两个属性也稍微说一下，所以说model是干什么，是用于啊，用于收集表单的数据的。而这一块呢，还有叫rules，它是饿了么UI当中的啥呀，表单验证的规则。那这些呢，咱们呢，可以啊，先不用去呃深入的研究，因为咱们后期的时候也会去讲这些东西。咱们现在呢，把注意力放在它的静态组件当中。比如说有一个form form当中咱们先看一下老师把它该折的都给它折上。咱们都给它折上，你看啊。顶上是不是有一个div div放了一个H3 h3这里呢，放了一个叫login form，那不就是这吗？

那当然咱们需要给他换成啥，换成登陆。那这里面呢，只需要把它换成汉字登录不就行了吗？对吧，哎，叫登录。哎，登录那咱们呢，去看一下咱们静态组件有没有搞定，是不是OK了。那咱们再往底下看一下它的结构，那这里面要注意form经常跟form item结合使用，而form item代表的是某一项啊，这块你一定要注意一个item里，你看它有两个item form item，每个item里面呢，会有一个表单元素，就是文本框。对不，所以这块呢，先把这件事先学到，就是EL form经常结合EL form item70，而第一个item当中呢，咱们先看这。那这块呢，他放了一个死弹，放了一个矢量图叫user，其实就是谁呀，就是这个小图标。

对不，那以及底下这里它放了一个叫EL-input，那这是什么呢？这是饿了么UI当中的input啊组件。对不，那当然你会发现他身上是不是有个叫VGA model这样的一个指令，他把数据收集到了。对不对，为什么呢？因为将来你想想，对于用户名和密码，你点击登录的时候一定会用的，所以说他在进行收集。这是它，那以及咱们再看一下底下这里，底下这里呢，你看它也是一个input，而且它前面也有是一个矢量图叫password，那不就是这吗。那以及也有一个叫EL呃，Input的表单元素，它也在进行收集数据，收集到咱们的呃，Log from的password属性上。那以及底下这里还有一个子弹，它也是放了一个矢量图，眼睛你看嘛，这不这吗。对吧，眼睛和这个带有睫毛的这个眼睛进行切换。

对吧，哎，只是他。那以及在底下这儿啊，它有一个button啊，这个EL but，那这个我相信很多同学都熟悉，因为在基础的时候，咱们饿了UI只是讲了一个EL but。但是你要注意啊，它这个EL button上身上加了一个叫loading，可以有那个加载转圈的效果。对吧，那当然，你看这儿它是不是叫lock in，那咱给它换成汉字叫登录。登录。哎，登录，那咱们呢，先看一下的一个静态的结构。是不是就换成了登陆。那当然还有一件事咱们需要做，就是它需要有一个背景图。那么老师啊，刚刚在咱们的size文件夹里面放了一张图，一张山水图。那咱们呢，也需要给咱们的登录的路由组件，最外层的这个副节点啊，副标签跟标签是不是加一个背景图，所以说找到咱们的钥匙，你看这是不是有log in container。

那不就是它吗？那咱们呢，给它加一个啥呀，就不要它的这个颜色。那咱们呢，给它加一个背景图，叫做background。对不background，为什么呀，为URL。那咱们呢，应该知道在CSS也是在样式当中，可不可以用艾符，可以的，但是你前面需要加一个小波浪。艾特杠a size文件夹下的1.png。那咱们先看一下咱们的项目当中有没有背景图。看一下啊，它这里面呢，出现了一个小错误，那咱们呢，去看一下它的一个错误。好吧，呃，对，应该是路径问题，看见了吧，所以说出现错误的你也得知道怎么去解决，对吧，那咱们呢，是不是单词写错了，对吧，叫size ass对吧？单词别错，错了，送你俩字凉凉。

对吧，那当然咱们的背景图它的个头不是很大，那所以说咱们设置一下它尺寸大小叫做background size为100%和100%。那咱们看一下那基本的静态组件是不是就搞定了。那如果静态组件搞定之后，你说你接下来干什么。你想想，你收集到用户名和密码了，当你一点击登录的时候，你是不是要发请求？对不对，对吧，而现在他也能登录啊，但你要注意他登录用的是墨的假的数据，咱们得换成真实的数据。那所以说咱们看一下他所写的业务逻辑。那首先说当你一点击登录按钮的时候，它身上是不是写了一个事件。叫做handler。对不handle login是登录的业务，那咱们找到这个方法。

找到这个方法，对了，这里老师呢，也稍微说一下子，那这里啊，要注意这一块的写法，你先不用在意，先不用在意啊，因为这个咱还没有讲过呢，那这里面在干什么呢？在进行表单的验证，验证什么呀？哎，验证你的用户名。哎，用户名。与密码。哎，与密码的操作。这个呢，是饿了么UI提供的一种表单验证规则的一种啊规则，那这个呢，到时候咱们会去学，咱们到时候学完之后回首再看这里啊，回首再看这里。其实啊，看一下也可以，它主要就是在验证用户名和验证密码对吧，密码长度是不是，呃大于六，如果小于六是不符合，大于六是正常。对吧，稍微看一下就行。好，那咱们看一下咱们的这个方法叫handler login，那这里是不是就是登录业务。

登录的业务。你想登陆要干什么？你就想想登录要干什么，你是不是要发请求。发起要干什么？是不是带着用户名与密码给服务器，那服务器它会告诉你是成功啊，成功与啥与失败。对，不与失败，成功干什么，失败干什么。对不，那当你一点击登录按钮的时候，那咱们这里先说一下这里在干什么。填一下子，那这里呀，是在验证什么呀，在验证你的表单元素啊，他俩一个是用户名。与密码的规则啊，是否啊是否符合规则。符合规则。那这里要注意，如果符合规则，它会返回一个布尔之针。如果。

符合它会返回布尔之真，不符合返回布尔之false。对不，那这块在干什么，在如果是哎符合规则符合啊，符合咱们的验证规则。那你就接下来做其他的事儿，对不？那这块在干什么，是不是咱们的那个but按钮啊，有人说按钮。啊，会有一个loading的效果。啊，开始loading，那以及在看这这在干什么，你想想你要发请求登录是不是要发请求，那你是不是他这是不是在派发。派发一个action。对不，这个action在哪呢？是在user下的log in。对，不但是你看啊，他在派发action的时候，是不是带有一个载荷，把你的用户名和密码是不是载荷过去了，对吧？哎，带着。带着用户名啊与密码载荷。

用户名与密码的载荷。对吧，就说白了，当你一定要用这个log in函数的时候，仓库当中log in这个函数的时候，是不是把用户名密码带过去。接下来那你猜，你猜猜三连环要干什么？他是不是要发请求，如果成功，是不是进行路由跳转？对吧，比如说这块在干什么，比如说登录成功。那进行什么呀，路由的跳转进行路由的。跳转那以及看这这在干什么。那底下这里是不是这个loading效果结束。对不，那当然咱们需要看一下这个action。他们是在哪呢？那action一定是关于star。在此道当中，咱们先保存一下，在此道当中是不是有个叫user user，你看这是不是就仓库是不是三连环。这是咱当年熟悉那三连环，State mutation action。对不，那咱们看action action这里面应该有个叫log。

那这里在干什么？这里？哎，这里在处理登录的业务。对，不，但是如果你眼睛贼的同学会发现他没有用a think与wa。对不对，对吧，你看咱当年的仓库当中的action是不是经常三连环，是不是经常写a think away的，那为什么呢？因为当时潘家成写这个模板的时候还没有a think away。对不？那你看这可要干啥？是不是要提交mutation？那user info啊，是不是带过来用户名和密码。对吧，那咱们看下这里，那这里在干什么。是不是在解构出，哎，解构出用户名。与密码，用户名与密码，那你想他为什么要获取到用户名和密码，那当然是不是要发请求。但是你看他发请求的时候用的是promise这种写法，点点catch这种写法。刚老师也说了，他为什么没有用a think away，因为当时没有。

但是这里要这么写吧，有点怪怪的，所以说啊，咱们得给他稍微改改。对吧，那咱们就可以用咱们曾经的套路，A think away老师给你们改一个后面的底下自己去改去吧，好吧，因为这个套路是一样的。那你想想，你拿到用户名和密码是不是要发请求？这不就这呢吗？老给嘛这吗？你是不是带着你的用户名和密码，是不是要发请求了。对不对啊，那你可以等待它的什么，是不是等待它成功返回的结果，那咱就赖的一个造，那这不就是发请求成功之后返回的结果。那当然啊，现在它采用的都是work的假数据，但是咱们可以看一下它的一个呃结果伪造，看一下它的结果。对吧。哎，但是一定要注意，他现在用的都是work的数据啊，你看一下后的是不是等于2万，是不是代表成功，成功完接下来是不是，你看是不是代表偷回来。是不是带着token回来，因为咱们应该知道token是不是可以拿到token找服务器要用户的信息啊。

对吧，那所以说咱们可以接下来接接着写啊。比如说如果你的result，哎，Result点它是不是叫扣，看一下应该叫扣，刚刚看见是不是叫扣的，如果等于等等于2万。那你是不是成功，那你成功要干什么？你看啊，他做了一件事。提交提审。他在干什么？那当然这里是不是在写result的点token，你是不是在提交token，以及你想想咱当年是不是也说过，你是不是要本地存储，存一下token，持久化存储。那当然它这里面用到的是cookie，咱这人也看到了，这块是应该是result.data点偷看。对吧，那就是说如果成功，那咱给他特回一个OK。对吧，那如果失败呢，Else。Els else，那咱就return一个new，一个promise。

啊，不是，是promise。点reject new，一个fire啊，一个error。咱传一个file就成功干什么，失败干什么。啊，当然这里块要注意啊，现在咱们发的这个请求的扣，看的是啥要注意。注意。当前这个登录的请求啊，现在。使用的是work的数据，而的数据它的扣是多少？是2万。因为咱们也不知道咱们到时候换成真实的接口，他的扣的是2万还是200，因为咱们前台项目当中扣的是不是经常是200，所以这块到时候咱们回首要注意一下。那这块老师呢，给他干掉，那咱们看一下子，其实现在咱们也没有换成咱们真实的接口，那只不过测试一下子，换一种写法是不是也是可以。

是没毛病。那到这之后，底下这里老师这俩就不给你换了啊，这几个到时候自己有时间可以换一下，所以说老师想告诉你一件事，什么事，当你的套路在这里还是同样的。对不对，那当然，那这里要注意它现在login这里用的啥是假的接口，那咱们得给它换成真实的接口。那所以说来看这。那第第二步要干什么？是不是要书写咱们的API换成什么？是不是换成咱们真实的接口？真实的接口。那真实的接口在哪呢？咱们先看一下子吧。你先看这。你看这他这块是不是有有用到这个登录的业务。你知道吗？登录的业务一回是不是能拿到token，你拿到token是不是也可以获取用户信息？对吧，以及有退出登录的这个功能，你想想看，登录成功是不是有退出登录的这个这个业务。所以咱们这几件事都给他做了。

那咱们看API在哪，API它应该是在这在这写一篇。对不对，在user这。那咱们看一下子，咱当年也做了一个笔记，你看他这块分别是不是登录的业务。获取用户信息和退出登录。那所以说他现在用的都是墨的假数据，那咱们得换成咱们真实的接口。而咱们的后台管理系统项目啊，咱们采用的都是swa在线文档。那这个文档呢，老师呢，在这儿呢，也给你们留一个啊，这两个文档要要要注意啊，就是咱后台项目的swa文档。后台。管理系统的啊，API接口。在线文档。那老师呢，把它两者呢，都给你放在这，这两个文档咱们都会用，一个是它啊，还有一个是它。这两个呢，老师呢，都给你们保存一下，因为咱们后台的这两个Spark都会用的。

说这个老师呢，把他们也给你放在这儿给他，那咱们看一下子，咱们呢，是有相应的登录。登录的接口在这，你看分别是登录。退出登录获取用户信息，那咱们都需要一个个去换一下。那首先说把登录给它进行替换。那这是不是得换成咱们的这个接口，是不是换成lock。好，那咱们呢，去换一下接口，就别再用这些假数据，这是不是登录，那咱们换一下咱们的接口。那咱们的也是post，也需要带着用户名和密码。对吧，以及获取用户信息，那就是谁就是这个。In否，但是获取用户信息，它是get请求。当然你得携带啥，你得携带token。对吧，你看这是是不是带带点头肯。对吧，所以说这块的老师呢，也把它给他进行替换，这是咱们的一个，呃，这是咱们的获取用户信息，还有一个是退出登录，那咱们也给他换成真实的接口在这。

他给他拷贝一下，也是个POS的请求。但是你要注意啊，哎，看这啊，这个老师给他换一下子，哎，但是你这块要注意，你是给他换成真实的接口了，但是这个as的二次封装不是咱自己写的，所以咱们要看一下子。所以第三件事要看什么？看一下它的A的二次封装。二次封装，因为毕竟它封装这ass不是咱自己封装的，所以咱们看一下它是在哪呢？是在us下的这个request这里。对吧，那咱们看下他这个请求拦截器。那首先说它引入了Asia。引入了咱们的这个消息盒子。以及仓库，其实这个套路应该熟悉，咱们在前台项目当中，是不是在呃as设二次封当中，二次封装当中是不是也要引入仓库，为什么是不是要拿到ton？

你像咱前台项目是不是也要拿到token获取用户信息？对不对，对吧，你看嘛，这不get to以及star，好，那咱们看一下子啊，那这块呢，是创建了一个as的一个实例。对吧，这是没问题的，那这块啥是不是请求拦截器。那请求拦截器在发请求的时候一定要注意，他在获取用户信息的时候要带着token，这个跟咱当年套路是一样的，但是你要注意咱带的这个字段不叫叉杠，偷看就叫偷看。那这个字段呢，是咱们跟后台老师已经商量好了，叫token。OK吧，那这个呢是请求拦截器，那这块老师写下这是请求拦截器。请求拦截器，那你要注意携带的token字段啊，Token字段。对吧，那这块是什么，是咱们的响应拦截器。响应拦截器，哎，响应。

拦截剂。那写完来尼，其实这里面咱们要看一下的，你看它这块呢，咱们大概得瞄一下。你看他这块呢，可以拿到它返回的结果，Response就是服务器返回的结果，对吧，你看是不是拿到服务器返回的数据，但是你要注意咱们的这个扣的，你看这是降失败的。那这个是啥else是想要成功的，但是你这里要注意啊，这块老师做一下笔记。比如说外层这个if是什么？这是响应失败在干什么响应啊，比如说服务器响应。啊，失败。在。干什么？对吧，哎，干什么。那底下这里呢，这是什么？这是服务器。福气响应。成功干什么？但是这块呢，你要注意一件事啊，什么事，咱们服务器返回的扣的一般是200。要注意啊，很少有2万的，一般起国下是2万，因为咱们这个后台接口，它有的时候是2万，有的时候是200，所以你判断的时候不仅仅说2万，要判断你还得加个且就是res点厚的不等于多少，不等于200。

因为200代表成功嘛，不等于200，那不就代表失败吗。所以这块的判断呢，咱们也需要改一下的，因为什么呢，因为。因为咱们真实服务器返回的扣的它可能是2万，也有可能也有可能哎可能是多少200，所以这块咱们要做一个判断。好吧，那这回咱们回到这儿，咱们尝试一下，你看一下能成功吗。他还是没有成功，而且你会发现它底下报错了。而且这个错误你不应该陌生，404对吧，为什么？请你想想，因为咱们没有经代理跨域。所以说咱们还要做一件事，就是换成。真实的接口之后，那需要打的需要解决哎代理跨域问题。

那咱们的解决代理跨域问题，咱们应该知道应该是在哪进行配置，应该在咱们的view view.con.gs当中。那在它的这里呢，有个叫做d server，那咱们配置代理跨域是不是经常在d server这里要注意这块呢，就不再用了。他现在用的呢，都是默的数据。而work的数据咱们就不用了啊，删多了对吧，Work的数据咱们就不再用了，给他删掉，那这块要干什么，那这块你要配置啥，配置代理化育。那配置代理跨域呢，这块呢，你可以不用自己去死记硬背。那咱们呢，可以搜一下one派，咱们找一下子啊，这块没必要去死记硬背。找到咱们的配置，在配置当中有个div server在这里面是不是有个代理跨域这。而这块儿的代码呢，你应该很熟悉了。对不对，那不就这吗？DV server里面是不是要进代理跨域。

那咱们呢，给他直接粘过来了啊，但是你要对准了啊，这块你真得对准了CTRLC直接给他带走。那这里面呢，咱们需要去修改一下，那这块呢要注意。咱们在开发环境下，它前缀是带DV-API的。发请求，这是D-API，所以这块你不能写API了，应该叫dev-API，当然这个你可以改。对不，或者你把这块改成谁就是叫API也行，但是咱们就不再动态了，好吧，就第一位API，以及你发向服务器要发请求那个接口地址，谁就是这。就是刚刚老师给你们留下来的这个地址，就是这儿，但是端口号咱可以。给他拿过来，给这给他进行替换。换成咱们真实的服务器的接口以及你的路径，需要重写的，重写不叫API，叫DV-API。

而且呢，还要注意一件事，什么事呢？当配置文件发生变化的时候，你的服务器是要重启的。那所以说把咱们的服务器重启一下，那咱们看一下O不OK。那咱们呢，稍微等一下呢，那这回呢，咱登录的业务就换成了咱们真实的服务器的接口了。那咱们呢，看一下子。那这回呢，已经换成咱们真实的服务器接口了，那咱们试一下可不可以，是不是就OK了。所以说呢，最后呢，这块呢，老师要说一下，千万别忘记要进行配置代理跨域。哎，这块一定要注意啊，要解决。哎，解决。代理跨域问题。好了，那这个呢，是咱们完成了咱们的登录的业务。