All files / src/components Login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
6x
66x
 
1x
 
2x
4x
 
 
 
6x
4x
1x
 
3x
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
75x
 
2x
 
2x
 
1x
1x
1x
 
 
 
1x
1x
 
 
 
 
2x
 
 
 
 
1x
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="login">
    <el-form ref="form" status-icon :model="form" :rules="loginRules" label-width="70px">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密 码" prop="pwd">
        <el-input type="password" v-model="form.pwd"></el-input>
      </el-form-item>
      <div class="btns">
        <el-button @click="$router.push('/register')">注 册</el-button>
        <el-button @click="login" type="primary">登 录</el-button>
      </div>
    </el-form>
  </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
  data () {
    const validateUser = async (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户名不能为空'))
      } else {
        const res = await axios.post('/api/login/name', this.form)
I        if (!res.data.success) callback(new Error('用户名不存在'))
        else callback()
      }
    }
    const validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        pwd: ''
      },
      loginRules: {
        name: [{ validator: validateUser, trigger: 'blur' }],
        pwd: [{ validator: validatePwd, trigger: 'blur' }]
      }
    }
  },
  methods: {
    async login () {
      try {
        const result = await this.$refs.form.validate()
        if (result) {
          const res = await axios.post('/api/login', this.form)
          if (res.data.success) {
            this.$message({ message: '登录成功 😛', type: 'success', duration: 1500 })
            setTimeout(() => {
              this.$router.push('/todo')
            }, 1000)
            return true
          } else {
            this.$message.error({ message: res.data.msg, duration: 1500 })
            this.resetForm('form')
            return false
          }
        }
      } catch (err) {
        console.log(err)
        return false
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  created () {
I    if (sessionStorage.username) {
      this.$router.replace('/todo')
    }
  }
}
</script>
 
<style lang="scss" scoped>
.login {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form {
  width: 400px;
  padding: 90px 40px;
  padding-bottom: 120px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, .1);
  position: relative;
  .btns {
    width: 100%;
    position: absolute;
    bottom: 32px;
    left: 0;
    .el-button:nth-child(1) {
      margin-right: 100px;
    }
  }
}
</style>