iview-admin 简单机制之login

行吧，早上上班迟到二十分钟，维护了一通上线的项目就开始倒腾iview-admin了，要用这个写一个简单的后台，本来还以为代码库是之前其他项目的基础轮子，没想到clone下来后发现是原始的不能再原始的框架，花了几个小时后，没有从头搞过的我终于知道这个东西怎么搞，记录一下login机制中包含的小tips：
先看一下主要的src目录

从输入localhost/login开始

1.这时的路由为‘/login’，router.js中可以找到path为‘/login’的路由，可以看到对应的component引入的页面

2.在对应的vue文件中看到这样的构成页面的代码

这里的login-form是一个组件，唯一需要触发的函数就是写在这个组件上，找到这个组件
回车和点击登录按钮触发的都是下面这个方法

• 这里的$ref用来快捷获取绑定相应ref的节点，减少节点消耗
• validate为vue验证器调用后会验证调用主题绑定的验证规则（简略表达:rules=‘’绑定此表单下总数组，表单元素用‘prop=‘’’绑定总数组下对应key的规则），valid为返回值T/F
• $emit简单讲就是子组件向父组件通信，没错，第一个参数就是上一个login文件使用当前组件的地方触发方法的地方，此句向父组件on-success-valid通信并触发父组件对应的方法，现在让我们回到父组件中

登录逻辑

回头看，主战场就是这里，可以将这里看成一个众多待用的组件通过用户触发来完成的一个连锁反应

• …mapAction可以理解为将mapAction中以多个方法分别拿出来，参数为需要拿出来的方法名称，引入并且拿出来了才可以使用
• handleSubmit中的参数就是自组件传过来的，看一下方法触发后第一个使用的组件方法，此方法在模块中
  
• 所有需要用的模块都需要在/store/index.js中引入，并且在main.js中引入才能使用
• 此方法的返回值是一个promise容器，在容器中调用了login方法，找到当前文件中引入login 的地方，是从/api/user.js中引入
  
• 参数是用户名密码，返回的是一个request，可以修改成你自己的login url
  再回到模块里，返回的res就是接口的返回值，再拿这个返回值进行自己的逻辑出来，框架中是对用户的token做了存储并调用容器的成功回调，并做了错误处理

拿不到接口返回值？？

这时候你可能会发现run之后的框架在输入账号密码之后并没有访问接口，但是依然有返回值，这就体现出当前框架另一个有用的功能了：接口拦截和数据模拟
可以找到在/mock/login.js中对login方法的模拟返回值

• 所有的拦截和都需要在/mock/index.js中注册
• 这里的login并不是我们访问的login方法或者接口，看下图
  去掉注册就可以成功接收到接口返回值了

login基础流程到这就完了，接下来就需要根据项目需要更改或增加部分逻辑，还有没搞过的webpack需要了解，貌似坑不少，脑阔发昏.jpg