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

实现功能：

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

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

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

超文本标记语言部分

El-form : model=' rule form ' : rules=' rules ' ref=' rule form ' class=' demo-rule form loginFrom ' h1 style=' font-size : 1.5 rem；color : # fff-weight :粗体；padd : 1 rem0 '登陆/h1 El-表单-项目埃尔-输入占位符='账号v-model=' Ruleform。username '/El-input/El-form-item El-form-item El-input type=' password ' v-model=' rule form。密码“占位符=”密码/El-input/El-form-item div style=' padd : 1 rem 0 2 rem 0；'class=' clear ' span class=' lf ' style=' color : # 0489 cc；'帮助/span div class=' rt ' El-checkbox v-model=' checked ' style=' color : # a0a 0；'一周内自动登录/El-checkbox span @ click=' ClearCookie ' style=' cursor :指针；color : # f 19149 font-size : 0.75 rem；边距-左侧： 5px'忘记密码？/span/div/div El-button type=' primary ' @ click=' Submit FORm(' RuleFORm ')' style=' width : 100%；'登陆/el-button/el-formjs部分

data(){ return { rule form : { username : ' '，//用户名password: '' //密码}，}}methods: { //点击登录调用方法submitForm(formName) { //保存的账号var name=this。规则形式。用户名；//保存的密码var pass=this。规则形式。密码；if(name==''||name==null){ alert('请输入正确的用户名');return } else if(pass==' ' | | pass==null){ alert('请输入正确的密码');返回} //判断复选框是否被勾选勾选则调用配置甜饼干方法if(this.checked=true){ //传入账号名，密码，和保存天数3个参数this.setCookie(名称，传递，7);} //接口var URL=“我的服务器/用户/登录”；这个$http.post(url，this.ruleForm，{ 0仿真器：街).然后(RES={ if(RES . body==' fail '){ alert('用户名或密码错误，请重新输入');这个。规则形式。用户名=' '；这个。规则形式。密码=' '；return } else{ alert('登陆成功!')这个$路由器。push('/index ')})；},//设置cookie setCookie(c_name，c_pwd，ex days){ var ex Date=new Date()；//获取时间前任约会。设定时间(日期除外。gettime)(24 * 60 * 60 * 1000 * ex天)；//保存的天数//字符串拼接饼干窗口。文件。cookie=' userName ' '=' c _ name路径=/;expires=' ex date。togtstring()；窗户。文件。cookie=' userPwd ' '=' c _ pwd路径=/;expires=' ex date。togtstring()；}, //读取cookie GetCookie : FuncTion(){ if(document。饼干。长度0){ var arr=document。饼干。拆分('；');//这里显示的格式需要切割一下自己可输出看下for(var I=0；长度；i ){ var arr2=arr[i].split('=')；//再次切割//判断查找相对应的值if(arr 2[0]==' userName '){ this。规则形式。userName=arr 2[1]；//保存到保存数据的地方} else if(arr 2[0]==' userPwd '){ this。规则形式。password=arr 2[1]；} } } }, //清除cookie ClearCookie : FuncTion(){ this。SetCookie(“”、“”、-1)；//修改2值都为空，天数为负一天就好了}},//页面加载调用获取甜饼干值mounted(){ this。getcookie()}

总结

以上所述是小编给大家介绍的某视频剪辑软件实现表单登录页保存账号和密码到甜饼干功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！