Vue + Spring Boot 项目实战（三）笔记

引入Element-ui优化登录界面

这部分没啥好说的，npm安装，然后使用element-ui的组件即可。

<template>
  <el-form class="login-container" label-position="left"
           label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item>
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

可以在此基础上添加登录框密码框的校验，修改之后的代码：

<template>
  <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-container" label-position="left" label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login('loginForm')">登录</el-button>
    </el-form-item>
  </el-form>
</template>
​
<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: 'admin'
      },
      responseResult: [],
      rules:{
        username:[
            { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    login (formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid){
          this.$axios
              .post('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              })
              .then(successResponse => {
                if (successResponse.data.code === 200) {
                  this.$router.replace({path: '/index'})
                }
              })
              .catch(failResponse => {
                console.log(failResponse)
              })
        }else{
          alert("请输入账号或密码")
        }
      })
    }
  }
}
</script>
​
<style>
.login-container{
  width: 350px;
  border: 1px solid #eee;
  padding: 20px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #eee;
  background-color: #ffffff;
}
.login_title{
  font-size: 20px;
}
</style>