adminBigData/src/views/login/login.vue

<template>
  <div class="login_page" >
    <div class="login_header">
      <div class="header_left">
        <img src="../../assets/login/login_logo.webp" alt="">
        <span style="margin-left: 10px;">    大数据精准教学诊断平台</span>
      </div>
      <div class="header_right">
        <div class="right_button" @click="GoWebsite"  >
          官方网站
        </div>
      </div>
    </div>
    <div class="login_content" id="particles">
      
      <div class="login_info">
        <div class="login_info_title">
          <p>HI～欢迎使用</p>
          <p>大数据精准教学诊断平台
          </p>
        </div>
        <div class="login_info_message">
          后台管理系统登录
        </div>
        <div class="login_info_input">
          <el-input
              v-model="userName"
              placeholder="请输入账号"
            >
              <template #prefix>
                <span>
                  <img
                    src="../../assets/login/input_user.webp"
                    alt="User Icon"
                    style="width: 18px; height: 18px"
                  />
                </span>
              </template>
              <template #suffix v-if="userName != ''">
                <span @click="ClearInput" style="cursor: pointer">
                  <img
                    src="../../assets/login/input_clear.webp"
                    alt="Clear Icon"
                    style="width: 18px; height: 18px"
                  />
                </span>
              </template>
            </el-input>
        </div>
        <div class="login_info_input">
          <el-input
              v-model="passWord"
              show-password
              placeholder="请输入密码"
            
            >
              <template #prefix>
                <span>
                  <img
                    src="../../assets/login/input_pass.webp"
                    alt="User Icon"
                    style="width: 18px; height: 18px"
                  />
                </span>
              </template>
              <template #suffix>
                <i
                  class="iconfont icon-ttubiao_hide"
                  
                ></i>
              </template>
            </el-input>
        </div>
        <div class="login_info_item">
          <div class="item_left">
            <el-checkbox v-model="remeberPassWord">记住密码</el-checkbox>

          </div>
          <div class="item_right">忘记密码</div>
        </div>
        <div class="login_info_button">
          <el-button  style="width:100%;" @click="SubmitLogin()" :loading="loadingLogin">登 录</el-button>
        </div>
        <div class="login_other_type">
          <div class="other_login_line">
            <span class="line"></span>
            <span class="text">其他登录方式</span>
            <span class="line"></span>
          </div>
          <div class="other_login_icon">
            <div class="icon_item">
              <img src="../../assets/login/login_wechat.webp" alt=""></img>
              <p>微信</p>
            </div>
            <div class="icon_item">
              <img src="../../assets/login/login_feishu.webp" alt=""></img>
              <p>钉钉</p>
            </div>
            <div class="icon_item">
              <img src="../../assets/login/login_email.webp" alt=""></img>
              <p>邮箱</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// import particles from 'particles.js'
import { login, getUserInfo } from '@/api/login'
import { ElMessage } from 'element-plus' // 
import { useRouter } from 'vue-router'


const router = useRouter() // 获取路由实例
// 响应式数据
const userName = ref('')
const passWord = ref('')
const remeberPassWord = ref(false)
const loadingLogin = ref(false)

// 粒子动画初始化
const InitParticles = () => {
  const particlesConfig = {
    particles: {
      number: {
        value: 60,
        density: {
          enable: true,
          value_area: 800
        }
      },
      color: {
        value: '#ffffff'
      },
      shape: {
        type: ['circle'],
        stroke: {
          width: 0,
          color: '#000000'
        },
        polygon: {
          nb_sides: 5
        },
        image: {
          src: 'img/github.svg',
          width: 100,
          height: 100
        }
      },
      opacity: {
        value: 0.5,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: 3,
        random: false,
        anim: {
          enable: true,
          speed: 40,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: true,
        distance: 150,
        color: '#ffffff',
        opacity: 0.4,
        width: 1
      },
      move: {
        enable: true,
        speed: 6,
        direction: 'none',
        random: false,
        straight: false,
        out_mode: 'out',
        bounce: false,
        attract: {
          enable: false,
          rotateX: 600,
          rotateY: 1200
        }
      }
    },
    interactivity: {
      detect_on: 'canvas',
      events: {
        onhover: {
          enable: true,
          mode: 'grab'
        },
        onclick: {
          enable: true,
          mode: 'push'
        },
        resize: true
      },
      modes: {
        grab: {
          distance: 140,
          line_linked: {
            opacity: 1
          }
        },
        bubble: {
          distance: 400,
          size: 40,
          duration: 2,
          opacity: 8,
          speed: 3
        },
        repulse: {
          distance: 200,
          duration: 0.4
        },
        push: {
          particles_nb: 4
        },
        remove: {
          particles_nb: 2
        }
      }
    },
    retina_detect: true
  }

  particlesJS('particles', particlesConfig, () => {
    console.log('粒子动画特效加载成功')
  })
}

onMounted(() => {
//   InitParticles()
})

// 清空输入框
const ClearInput = () => {
  userName.value = ''
}

// 登录提交
const SubmitLogin = () => {
  const params = {
    username: userName.value.trim(),
    password: passWord.value.trim()
  }
  loadingLogin.value = true
  login(params).then((res) => {
      loadingLogin.value = false
      if (res.code === 200) {
          console.log("登录成功返回",res)
          localStorage.setItem('token', res.data.tokenValue)
          // 登录成功后调用获取用户信息接口
          return getUserInfo(res.data.token)
      }
  }).then((userInfoRes)=>{
    console.log("获取用户信息返回",userInfoRes)
    if (userInfoRes && userInfoRes.code === 200) {
      // 存储用户信息到 localStorage 或 Pinia
      localStorage.setItem('userInfo', JSON.stringify(userInfoRes.data))
      ElMessage.success('登录成功');
      // 跳转到主页
      router.push('/main/school')
    }
  }).catch((err) => {
      loadingLogin.value = false
      ElMessage.error('登录失败!'+err);
      console.error(err)
  })
}

// 去往官网
const GoWebsite = () => {
  window.open('https://www.k12100.com/')
}
</script>
<style lang="scss">
@use "../../styles/login.scss" as *;
</style>