<template>
  <div class="login">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <!--    登录框-->
    <div class="login_box">
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!--        用户名-->
        <el-form-item label="账号" label-width="60px" prop="username">
          <el-input placeholder="请输入账号" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item label="密码" label-width="60px" prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" show-password
                    prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!--        按钮-->
        <el-form-item class="btns">
          <!-- 回车键盘监听 -->
          <!-- @keyup.enter="login('loginFormRef')" -->
          <el-button type="primary" @click="login('loginFormRef')">登录</el-button>
          <el-button type="success">注册</el-button>
          <el-button type="info" @click="reset('loginFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        // 这是登录表单的数据绑定对象
        loginForm: {
          username: '',
          password: '',
          pwdType: "password",
        },
        msg: '',
        loginFormRules: {
          username: [
            {required: true, message: '请输入登录账号', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入登陆密码', trigger: 'blur'},
            {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'},
          ]
        }
      };
    },
    methods: {
      //点击重置按钮,重置登录表单
      reset() {
        this.$refs.loginFormRef.resetFields();
      },

      login() {
        this.$refs.loginFormRef.validate(valid => {
          if (valid) {
            this.$axios.post('/admin/login', {
              username: this.loginForm.username,
              password: this.loginForm.password
            }).then((response) => {
              if (response.code === 200) {
                this.$router.push({path: '/success'})
              }
            }).catch(() => {
              console.log("用户名或密码错误！");
              });
          } else {
            console.log("参数验证不合法！");
            return false;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .login {
    background: url("../assets/image/background.jpg");
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
  }

  .login_box {
    height: 300px;
    width: 450px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .login_form {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 0px 30px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
</style>

这个页面只是用来测试使用
success.vue

<template>
  <div>
    <h1>登录成功！success</h1>
  </div>
</template>
<script>
  export default {
    data() {}
  }
</script>

<style>

</style>

<div class="login_box">
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!--        用户名-->
        <el-form-item label="账号" label-width="60px" prop="username">
          <el-input placeholder="请输入账号" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item label="密码" label-width