VIP20/14_Vue项目/day-5/vue2-shop/src/views/Login.vue

<template>
  <div class="login">
    <transition name="fade-down" appear>
      <div class="login-body">
        <div class="body-top">后台管理系统</div>
        <div class="body-main">
          <!-- 在你想获取的组件上 通过绑定ref来获取该组件实例 -->
          <!-- ref="userForm" -->
          <el-form
            ref="userForm"
            label-width="80px"
            :model="userForm"
            :rules="rules"
          >
            <el-form-item label="账号" prop="username">
              <el-input
                prefix-icon="el-icon-user"
                placeholder="请输入账号..."
                size="mini"
                autofocus
                v-model="userForm.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                prefix-icon="el-icon-key"
                type="password"
                show-password
                placeholder="请输入密码..."
                size="mini"
                v-model="userForm.password"
              ></el-input>
            </el-form-item>

            <el-form-item :style="{ textAlign: 'right' }">
              <el-button type="primary" round size="mini" @click="onLogin"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { login } from '../api/system';
export default {
  name: 'Login',
  data() {
    return {
      // 添加表单数据对象
      userForm: {
        // 下面的属性名称 尽量和后台接口对应上
        username: 'admin',
        password: '123456',
      },
      rules: {
        username: [
          { required: true, message: '必须输入账号！', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '必须输入密码！', trigger: 'blur' },
          {
            min: 3,
            max: 16,
            message: '录入的密码长度在3-16之间！',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    async onLogin() {
      // $refs属性 存储所有 当前组件通过ref绑定dom对象或者组件实例
      // console.log(this.$refs);
      // 1 首先验证表单 通过才可以将用户名和密码提交给服务器
      let valid = await this.$refs.userForm.validate().catch((err) => false);
      console.log(valid);
      if (valid) {
        // 如果valid == true 表示表单验证通过，然后 发起http请求将账号和密码提交给服务器
        // let result = await login(this.userForm);
        // 如果服务器返回的数据中code属性值为 200 表示登录成功
        // let { code, msg, data } = result.data;

        let { code, msg, data } = await login(this.userForm);
        // debugger;
        this.$message({
          showClose: true,
          message: msg,
          type: 'success',
        });
        if (code === 200) {
          // localStorage只能存储字符串类型
          sessionStorage.setItem('token', data.token);
          localStorage.setItem('userInfo', JSON.stringify(data.userInfo));
          // 将 登录用户信息 存储到Vuex中
          this.$store.commit('setUserInfo', data.userInfo);

          // 将页面导航到主页
          this.$router.push('/dashboard');

          this.$store.commit('system/addTab', {
            label: '工作台',
            name: '01',
            url: '/dashboard',
          });
        }

        // console.log(result);
      }
    },
  },
};
</script>
<style lang="css" scoped>
.login {
  background-image: url('../assets/bg.jpg');
  background-repeat: no-repeat;

  box-sizing: border-box;
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.login .login-body {
  width: 400px;
  height: 255px;
  box-sizing: border-box;

  background-color: #ccc;
  border-radius: 10px;
  padding-top: 20px;
}

.login .login-body .body-top {
  color: #333;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.login .login-body .body-main {
  padding-right: 36px;
}

.fade-down-enter-active {
  animation: fade-down 0.5s ease-in-out;
}

@keyframes fade-down {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
</style>