vue3 数据驾驶舱登录页

使用wowjs添加入场动画

宽高自适应

监听回车登录

演示地址

vue3 数据驾驶舱登录页

代码风格

vue3+vite+js

vue3 数据驾驶舱登录页 截图

动态效果

部分代码

  <div class="loginPage">
    <div class="loginPageMain">
      <div class="loginMainTitle">
        <p>数据可视化大屏登录</p>
      </div>
      <div class="loginPageMainInner wow fadeInDown">
        <div class="loginPageMainInner2">
          <div class="loginTitle wow flipInX" data-wow-delay="0.8s">用户登录</div>
          <div class="info wow fadeInLeft" data-wow-delay="1.5s">
            <div class="icon">
              <img src="./assets/icon_user.png" alt="">
            </div>
            <input v-model="uname" type="text" placeholder="请输入用户名">
          </div>
          <div class="info mt30 wow fadeInRight" data-wow-delay="1.8s">
            <div class="icon">
              <img src="./assets/icon_password.png" alt="">
            </div>
            <input v-model="passwd" type="password" placeholder="请输入密码">
          </div>
          <div class="remember wow fadeInUp" data-wow-delay="2.1s">
            <div class="rememberl">
              <rememberPwd ref="rememberPwd" v-model:password="passwd" v-model:username="uname"></rememberPwd>
            </div>
            <div class="forget" @click="getForget">忘记密码？</div>
          </div>
          <div class="loginBut cur wow fadeInUp" data-wow-delay="2.1s" @click="login">
            登 录
          </div>
        </div>
      </div>
    </div>
    <securityQuestion ref="securityQuestion"></securityQuestion>
  </div>

更新日志

2023年09月27日 v1.2

回车触发登录组件封装

2023年08月08日 v1.1

记住密码功能缓存加密处理

添加mockjs模拟接口交互实现登录 账号 wanjunshijie 密码 123456

async handleLogin() {
  // 检查用户名和密码是否已被输入
  if (!this.username || !this.password) {
    // 如果没有输入用户名或密码，显示错误消息并退出函数
    ElMessage.error('请输入用户名和密码');
    return;
  }
  try {
    // 使用用户输入的用户名和密码调用登录 API
    const response = await login({username: this.username, password: this.password});
    // 检查返回的响应码
    console.log(response.code)
    if (response.code === 1) {
      // 记住密码
      this.$refs.rememberPwd.rememberPassword();
      // 登录成功，重定向到主页
      ElMessage({
        message: '登录成功',
        type: 'success',
      })
    } else {
      // 登录失败，显示错误消息
      ElMessage.error(response.message);
    }
  } catch (error) {
    console.log(error)
    // 发生错误，显示错误消息
    ElMessage.error('登录失败，请检查网络连接');
  }
}

更新日志

2024年06月05日

增加vue2框架写法

更多可视化数据大屏登录页

可视化数据大屏登录

vue3 数据驾驶舱登录页源码下载

vue3框架源码
vue2框架源码
请注意当前页面纯前端登录页