前端开发----vue移动端登录 记住密码和获取验证码

本文主要介绍了在Vue移动端登录页面中如何实现记住密码和获取验证码的功能。在实现记住密码时,需要注意动态绑定图片时需使用require加载完整路径。在用户勾选记住密码后,通过组件methods中的函数完成设置。对于获取验证码,文章虽然未展开详细说明,但可以推断会涉及点击事件的处理。
摘要由CSDN通过智能技术生成

在这里插入代码片登录功能里见的比较多的就是记住密码和获取验证码这块 下面说说这块功能实现方法
1.记住密码:
在这里插入图片描述
这是按照设计做的 记住密码文字前面是两个图片 改变data 中的数据改变图片 但是这里有一个坑
写在这里 动态绑定图片时候data中数据应该这样写:
imgs:require("…/…/assets/images/mirror-service.png)" require加上地址 如果只写地址图片是无法显示的;
下面开始正题: 用户勾选记住密码登录
组件中methods 中的函数:

 tijiao() {
   
      let that = this;
      //登录时候判断data 中数据 下面一个是账号 一个是密码 为空就弹框提示 return 下面代码不执行
      if (that.zhanghao === '') {
   
       return that.$toast('请先输入账号')
      }
      if (that.mima === '') {
   
        return  that.$toast('请输入密码')
      }
      //axios 请求
      that.$http.get('  请求地址', {
   
        params: {
   传的值}
      }).then(res => {
   
        if (res.data.success) {
   
          //判断是否登录成功  登录成功提示 然后把返回的token 存在cookies中 后面请求使用
          Toast.success('登录成功');
          that
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值