vue3 数据可视化大屏登录页模板-监测系统登录

入场动画

宽高自适应

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

演示地址

vue3 数据可视化大屏登录页模板-监测系统登录

代码风格

vue3 + vite + js

vue3 数据可视化大屏登录页模板-监测系统登录

效果预览

部分代码

<template>
  <div class="loginPage" id="home">
    <bg></bg>
    <div class="login">
      <div class="loginTitle">
        <h3 data-aos="fade-up" data-aos-duration="1000">监测系统登录</h3>
        <span data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">welcome to the system</span>
      </div>
      <login data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500"></login>
    </div>
  </div>
</template>

<script>
import bg from './components/bg/index.vue'
import AOS from 'aos'
import login from "./components/loginMain/index.vue";

export default {
  data() {
    return {}
  },
  components: {login, bg},
  mounted: function () {
    AOS.init()
  },
  computed: {},
  methods: {}
}
</script>

更新日志

2023年09月2日 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});
    // 检查返回的响应码
    if (response.code === 1) {
      // 记住密码
      this.$refs.rememberPassword.rememberPassword();
      // 登录成功，重定向到主页
      ElMessage({
        message: '登录成功',
        type: 'success',
      })
    } else {
      // 登录失败，显示错误消息
      ElMessage.error(response.message);
    }
  } catch (error) {
    // 发生错误，显示错误消息
    ElMessage.error('登录失败，请检查网络连接');
  }
}

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

数据可视化大屏登录页

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