vue的登录页面功能实现

第一次的实战项目
1.登录页面(vue+elementUI)
1.1 引入elementui插件
在命令中输入:npm i element-ui -S
在main.js 引入: import elementUI from ‘elementui’
如果想按需引入则把element所含的所有标签名分别引入
例如 ：import Button from ‘elementuI‘然后在下一行写vue.use（Button）**大项目建议按需引入

1.2用element中的el-form标签以及el-form-item和el-input实现表单的渲染

代码如下

其中的ref是form表单中的一个重要属性，它可以用来引用form里其中的一些方法,例如
this.$refs.validate((valid) => {
if (valid) {
alert(‘submit!’);
} else {
console.log(‘error submit!!’);
return false;
}
});
这是点击提交时要触发的事件,validate则是ref赋予form表单的一个方法，通过里面的参数valid(boolean)来判断form里的input是否成功完成输入并且格式正确,如果正确则执行 alert(‘submit!’);反之 console.log(‘error submit!!’);
return false;
其次，是form表单的rule，是设置输入的格式，具体去element ui的官网看看

补充说明一些小东西吧，el-form中:model="ruleForm"里model一看就知道是双向绑定数据,而ruleform是一个对象，里面自己放入username和password属性，然后在input的model绑定ruleform.username和ruleform.password就行了

上面是一些简单的页面渲染和插件的功能,接下来才是重头戏！！！！

2.开启前后端交互数据之门！
在一系列验证用户名和密码输入之后,点击登录时要用axios或者ajax调用api接口(因为没有api接口所以我就口头描述一下这时候该干的事情)

一般的登录api的api会给两个接口，一个是codekey,一个是index

其中codekey的接口需要用username的作为参数来获取后台发送的一个叫密匙codekey的东西,在拿到这个密匙之后,输入password的值点击登录来调用index这个接口的值,会获得一个token，接下来需要引入两个插件，sha256和md5来密匙token进行解密(因为一般code都是加密过的)，解密后把解密过的token赋值给index以及password的值即可

用session.getitem（’token‘,token）缓存在session
接下来在f12的管理器中有一个application里面的session storage里可以看到token已经缓存在里面

最后一些我将快一点吧,等你登进首页前有一个路由导航守卫,判断如果没有token将不能进入到home页面,也是回到login,在进入首页后实现退出登录时要将token清空,如果要使用接下来的api接口要用到axios的拦截器,具体如图

总结一下,因为是第一次写博客，所以有些东西想说明一点所以说了很多废话,不过这些东西真的很重要，也希望能对你们有些帮助