=============
前端_登录页面
=============

/src/views/Login.vue：

<template>
  <div>
    <el-container>
      <el-header>
        <img class="logo" src="@/assets/logo.png" />
      </el-header>
      <el-main>
        <el-form :model="form" :rules="rules" ref="form"
                 label-width="100px" class="form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('form')">
              登录
            </el-button>
            <el-button @click="reset('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: 'bear',
        password: '111111'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const _this = this
          this.$axios.post('/login',
            this.form).then(response => {
              console.log(response.headers) // 响应头(含令牌)
              const token = response.headers['authorization']
              console.log(response.data) // 响应体(Result)
              const user = response.data.data

              // 把数据共享出去
              _this.$store.commit("SET_TOKEN", token)
              _this.$store.commit("SET_USER", user)
              // 获取
              console.log(_this.$store.getters.getUser)

              _this.$router.push("/list")
            })
        }
        else {
          console.log('error submit!');
          return false;
        }
      });
    },
    reset(form) {
      this.$refs[form].resetFields();
    }
  }
}
</script>

<style scoped>
body > .el-container {
  margin-bottom: 40px;
}

.el-header {
  background-color: #F6F6F6;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}

.logo {
  height: 90%;
  margin-top: 3px;
}

.form {
  max-width: 500px;
  margin: 0 auto;
}
</style>

运行测试。