vue项目实现表单登录页保存账号和密码到cookie功能


Posted in Javascript onAugust 31, 2018

vue项目实现表单登录页保存账号和密码到cookie功能

实现功能:

1.一周内自动登录勾选时,将账号和密码保存到cookie,下次登陆自动显示到表单内

2.点击忘记密码则清空之前保存到cookie的值,下次登陆需要手动输入

 次要的就不说了直接上主要的代码

html部分

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom">
 <h1 style="font-size: 1.5rem;color: #fff;font-weight: bold;padding: 1rem 0;">登陆</h1>
 <el-form-item >
  <el-input placeholder="账号" v-model="ruleForm.userName"></el-input>
 </el-form-item>
 <el-form-item>
  <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
 </el-form-item>
 <div style="padding: 1rem 0 2rem 0;" class="clear">
  <span class="lf" style="color:#0489cc;">帮助</span>
  <div class="rt">
   <el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox>
   <span @click="clearCookie" style="cursor: pointer;color: #f19149;font-size: 0.75rem;margin-left: 5px;">忘记密码?</span>
  </div>
 </div>
 <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">登陆</el-button>
</el-form>

js部分

data () {
 return {
   ruleForm: {
    userName: '', //用户名
    password: '' //密码
   },
 }
}
methods: {
  //点击登录调用方法
  submitForm(formName) {
    //保存的账号
    var name=this.ruleForm.userName;
    //保存的密码
    var pass=this.ruleForm.password;
    if(name==''||name==null){
     alert("请输入正确的用户名");
     return
    }else if(pass==''||pass==null) {
     alert("请输入正确的密码");
     return
    }
    //判断复选框是否被勾选 勾选则调用配置cookie方法
    if(this.checked=true){
      //传入账号名,密码,和保存天数3个参数
     this.setCookie(name,pass,7);
    }
    //接口
    var url='myserver/user/login';
    this.$http.post(url,this.ruleForm,{emulateJSON:true})
     .then(res=>{
      if(res.body=="fail"){
       alert("用户名或密码错误,请重新输入");
       this.ruleForm.userName='';
       this.ruleForm.password='';
       return
      } else{
      alert("登陆成功!")
       this.$router.push("/index")
      }
   });
  },
//设置cookie
 setCookie(c_name,c_pwd,exdays) {
  var exdate=new Date();//获取时间
  exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
  //字符串拼接cookie
  window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
  window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
 },
 //读取cookie
 getCookie:function () {
  if (document.cookie.length>0) {
   var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
   for(var i=0;i<arr.length;i++){
    var arr2=arr[i].split('=');//再次切割
    //判断查找相对应的值
    if(arr2[0]=='userName'){
     this.ruleForm.userName=arr2[1];//保存到保存数据的地方
    }else if(arr2[0]=='userPwd'){
     this.ruleForm.password=arr2[1];
    }
   }
  }
 },
 //清除cookie
 clearCookie:function () {
  this.setCookie("","",-1);//修改2值都为空,天数为负1天就好了
 }
},
//页面加载调用获取cookie值
mounted(){
    this.getCookie()
    }

vue项目实现表单登录页保存账号和密码到cookie功能 
vue项目实现表单登录页保存账号和密码到cookie功能

总结

以上所述是小编给大家介绍的vue实现表单登录页保存账号和密码到cookie功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
javascript object array方法使用详解
Dec 03 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
ES6关于Promise的用法详解
May 07 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
js实现电灯开关效果
Jan 19 Javascript
vue router 跳转后回到顶部的实例
Aug 31 #Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 #Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 #Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 #Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 #Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 #Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 #Javascript
You might like
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
详细介绍Python中的偏函数
2015/04/27 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python线程、进程和协程详解
2016/07/19 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
老龄工作先进事迹
2014/08/15 职场文书
社区党员公开承诺书
2014/08/30 职场文书
客服专员岗位职责
2015/02/10 职场文书
初中语文教学研修日志
2015/11/13 职场文书