Vue Template

243 阅读1分钟
<template>
  <div>
      <el-card class="box-card" body-style="padding:50px;">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">立即创建</el-button>
                <el-button @click="resetForm('loginForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
  </div>
</template>

<script>
import md5 from 'js-md5';
import axios from "axios";

export default {
    data(){
        return {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    created(){
        let timestamp = Date.parse(new Date());
        console.log(timestamp)
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              axios.post("http://127.0.0.1:8199/login", {
                  username: this.loginForm.username,
                  password: this.loginForm.password
              }).then(res=>{
                  switch(res.data.code){
                        case 200:
                            this.$notify({
                                title: res.data.msg,
                                type: 'success'
                            });
                            localStorage.setItem("token", res.data.data.token);
                            this.$router.push({path:'/test'}) 
                            break;
                        default:{
                            this.$notify.error({
                                message: res.data.msg
                            });
                        }
                    }
              }).catch(err=>{
                  this.$notify.error({
                    title: '错误',
                    message: '请查看控制台日志'
                    });
                  console.log(err)
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style>

</style>