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的拦截器,具体如图

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

vue的登录页面功能实现相关推荐

实现Vue的登录页面
实现Vue的登录页面步骤: 1.前期准备 1.1 安装Node.js:从官网下载地址(https://nodejs.org/zh-cn/)安装完成后,在终端输入 node -v 来查询版本号.1.2 ...
nodejs+vue实现登录界面功能（一）
项目描述:一开始进入登录界面,只有登录成功才可以跳转到主页面,已注册但是忘记密码的进入忘记密码页面,找回密码后进入登录界面. 技术选型:nodejs+vue+stylus 界面效果: 切换登录方式手 ...
Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...
uni-app/Vue实现购物车页面功能的业务逻辑
uni-app/Vue实现购物车页面功能的业务逻辑用户在商品列表页或者商品详情页进行添加到购物车操作.把此商品需要在购物车渲染的数据整理好一个对象,转存到Vuex中在购物车页面渲染列表数据购物 ...
jsp+servlet实现简单登录页面功能Demo
小白新路历程-1 实现功能: 模拟简单登录功能,登录成功跳转新页面,登录失败在原登录界面提示登录失败信息开发环境: eclipse Tomcat-8.0 预备知识: HTML标签,Servlet相关 ...
详细介绍从零开始打造vue的登录页面（2022.7）
文章目录前言一.创建vue项目二.开始打造页面总结前言现在技术更新换代快,不学习,那就是等死,好几天没有写博客了,今天登录上来看了一下,发现一篇html练手项目已经被面目全非了,太难受了因 ...
android开发我的新浪微博客户端-登录页面功能篇(4.2)
上一篇中完成了如上图的UI部分的实现,现在继续来讲功能的实现,用户登录操作主要就是账号列表显示和选择账号登录两个功能其他的都是些简单的辅助功能,首先是点击id为iconSelectBtn的ImageB ...
android开发我的新浪微博客户端-登录页面功能篇
首先是从数据库中获取所有的账户记录然后设置默认选中的用户账号代码如下: private void initUser(){//获取账号列表dbHelper=new DataHelper(this);us ...
使用vue编写登录页面详细过程
首先,创建项目login vue create login cnpm install elementui vue-router vuex axios 结构如下具体操作过程在main.js中写入: ...

vue的登录页面功能实现

vue的登录页面功能实现相关推荐

最新文章

热门文章