vue登录页面实现记住密码的操作

首先看一下思路
思路：
①点击登录按钮→调用接口→如果调用成功，判断是否选择记住密码→如果选择记住密码，则把用户名与密码存到cookie中，否则清除cookie
②点击返回登录页→在登录页created函数中获取用户名与密码赋值给input，checked设置为true
代码如下，后面的数据展示可根据自身要求进行更改
html代码

    <div class="loginer"><div class="login_m"><div class="middle_left"><h1>欢迎登录</h1><h3>河北畜牧兽医综合信息管理平台</h3></div><div class="middle_right"><div class="mr_box"><span>用户登录</span><p class="shuru"><i class="icon iconfont icon-Profile i_posi"></i><inputv-model="model.username"placeholder="请输入您的用户名/手机号"/></p><p class="shuru"><i class="icon iconfont icon-Unlock i_posi"></i><input type="password" v-model="model.password" placeholder="请输入密码"></p><div class="remember"><inputclass="jizhu"type="checkbox"v-model="isChecked"/>记住密码</div><div class="f_pass_n" v-show="isShow"><i class="icon iconfont icon-tanhao i_color"></i><p class="error">{{tips}}</p></div><div class="dengl" @click="toLogin()"><inputclass="login"type="button"name="btn1"id="btn1"value="登录"/></div></div></div></div></div>

data里的代码

  data () {return {// 登录信息model: {username: '',password: ''},// 记住密码isChecked: true, // 记住密码arr: [],arr2: [],// 隐藏错误提示start 这个例子中可以忽略这个值isShow: false,tips: ''// 隐藏错误提示end}},

methods代码:在登录的方法中我还没有调用接口，所以只用了简单的条件判断

    // 记住密码start// 设置cookiesetCookie (name, pwd, exdays) { // 用户名、密码、保存天数var exdate = new Date() // 获取时间exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 字符串拼接cookiewindow.document.cookie = 'userName=' + name + ';path=/;expires=' + exdate.toGMTString()window.document.cookie = 'userPwd=' + pwd + ';path=/;exires=' + exdate.toGMTString()},// 读取cookiegetCookie () {if (document.cookie.length > 0) {// console.log('cookie数据' + document.cookie) // 格式：userName=qq; userPwd=11this.arr = document.cookie.split(' ')// console.log('111' + this.arr)for (let i = 0; i < this.arr.length; i++) {this.arr2 = this.arr[i].split('=')// console.log('arr2' + this.arr2) // 格式：userName,qq; userPwd,11// 判断查找相对应的值if (String(this.arr2[0]) === String('userName')) {console.log('有valname：' + this.arr2[1]) // 格式 有值val：qq;this.model.username = this.arr2[1].replace(/;/g, '') // 删除尾部的';'} else if (String(this.arr2[0]) === String('userPwd')) {this.model.password = this.arr2[1].replace(/;/g, '')console.log('有valuepwd：' + this.arr2[1])}}}},// 清楚cookieclearCookie () {this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了}// 记住密码 end// 点击登录toLogin () {if (this.model.username === '') {// alert('请正确输入用户名')this.tips = '用户名不能为空,请重新输入!'this.isShow = true} else if (this.model.password === '') {// alert('请正确输入密码')this.tips = '密码不能为空,请重新输入!'this.isShow = true} else {if (this.isChecked) { // 记住密码this.setCookie(this.model.username, this.model.password, 30)} else {this.clearCookie() // 清空cookie}this.$router.push({ path: '/home/index' })}},

created代码

  created () {this.getCookie()},

vue登录页面实现记住密码的操作相关推荐

vue登录页实现记住密码的操作
实现记住密码的操作,如下图所示 html部分 <el-form-item style="margin-top:-10px;margin-bottom:-5px;" >& ...
登录页面中记住密码操作的实现
1. 思路访问:前端login.jsp---->后台:如果上次用户选择勾选记住密码,自动填充账号和密码;否则,不填. 如何判断上次是否记住密码?` 第一次登录成功,去判断是否 ...
【Android】_UI设计_登录页面（记住密码）
目标: Android记住密码和自动登录界面的实现(SharedPreferences),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 登录页面设计(记住密码版) (一) SharedPrefe ...
html5登录页面自动记住密码,使用HTML5中的localStorage实现记住密码功能
这篇文章主要介绍了html5超简单的localStorage实现记住密码的功能实现,非常具有实用价值,需要的朋友可以参考下 HTML5 提供了两种在客户端存储数据的新方法:localStorage - ...
java web登录页面上记住密码
利用cookie编程 login.jsp 页面上的java代码: <% String flag = (String)session.getAttribute("flag")= ...
html5登录页面自动记住密码,html5超简单的localStorage实现记住密码的功能实现
HTML5 提供了两种在客户端存储数据的新方法: localStorage – 没有时间限制的数据存储 sessionStorage – 针对一个 session 的数据存储之前,这些都是由 coo ...
vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
基于localStorge开发登录模块的记住密码与自动登录
前沿||我是乐于分享,善于交流的鸟窝先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个 ...
C#-WinForm登录窗体实现记住密码的功能（仿QQ实现）
背景 Winform实现登录窗体中记住密码的功能,模仿QQ登录记住密码的实现如下图所示,其中标题部分因为项目保密的原因,我加了马赛克,请大家见谅. 用户名输入框我们采用下拉列表框ComboBox 密 ...

vue登录页面实现记住密码的操作

vue登录页面实现记住密码的操作相关推荐

最新文章

热门文章