vue3 数据可视化大屏登录页模板-登录成功跳转提示页模板

入场动画

宽高自适应

如果您需要设计属于自己的数据可视化大屏或者进行数据大屏开发 请联系我们微信:17331886870

演示地址

vue3 数据可视化大屏登录页模板-登录成功跳转提示页模板

代码风格

vue3 + vite + js

vue3 数据可视化大屏登录页模板-登录成功跳转提示页模板

效果预览

部分代码

  <div class="loginMain" ref="loginMain">
    <div class="loginTitle">
      <p>用户登录</p>
    </div>
    <div class="line" ref="line">
      <div class="lineDot"></div>
      <div class="lineDot"></div>
      <div class="lineDot2" ref="lineDot2"></div>
    </div>
    <div class="loginMainInner">
      <div class="bg1" ref="bg1"></div>
      <div class="form">
        <div class="formItem" ref="formItem1">
          <p>用户名</p>
          <div class="formItemBody" ref="formItemBody">
            <div class="icon">
              <img src="../../assets/icon_user.png" alt="">
            </div>
            <input type="text" v-model="username">
          </div>
        </div>
        <div class="formItem" ref="formItem2">
          <p>密码</p>
          <div class="formItemBody" ref="formItemBody">
            <div class="icon">
              <img src="../../assets/icon_password.png" alt="">
            </div>
            <input type="password" v-model="password">
          </div>
        </div>
        <div class="formItem" ref="formItem3">
          <p>验证码</p>
          <div class="formItemBody" ref="formItemBody">
            <div class="icon">
              <img src="../../assets/icon_yzm.png" alt="">
            </div>
            <input type="text" v-model="code">
          </div>
        </div>
        <div @click="handleLogin" class="LoginButton" ref="formItem4">
          <span>登 录</span>
        </div>
      </div>
      <img ref="icon_sanjiao" class="icon_sanjiao" src="../../assets/icon_sanjiao.png" alt="">
    </div>
  </div>

mockjs登录接口模拟

使用mockjs模拟登录接口，实现登录交互。

import {MockMethod} from 'vite-plugin-mock';

const mock: MockMethod[] = [
    // 登录
    {
        url: '/api/login',
        method: 'post',
        response: (options) => {
            // options.body 包含了请求的数据
            // 由于请求的数据是 JSON 格式，需要先解析
            const data = options.body
            // 检查用户名和密码
            if (data.username === 'admin' && data.password === 'admin') {
                // 如果用户名和密码都是 'admin'，则返回成功的响应
                return {
                    message: '登录成功',
                    code: 1
                }
            } else {
                // 否则，返回错误的响应
                return {
                    message: '账号或密码错误',
                    code: 0
                }
            }
        },
    },
];

export default mock;

登录交互

使用mockjs来模拟登录交互，如果账号密码都是admin则表示账号密码正确，提示登录成功，如果账号密码不对应，则提示账号或密码错误。

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

项目应用

vue3 数据可视化大屏 视频监控智能分析系统

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

数据可视化大屏登录页

源码下载

项目基于vue3+vite+js nodejs 14开发，购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解

请注意当前页面纯前端登录页，没有内页