2020-11-11，简单登录页面

简单登录页面 element-ui布局

这里是布局:利用v-model双向绑定给input框记录
并在button按钮上面注册点击事件

<template>
  <div class="login_style">
    <el-form label-width="80px" :model="formbd">
      <h3>maxin-ui</h3>
      <div class="form_style">
        <el-input style="margin:20px 0" v-model="formbd.name"></el-input>

        <el-input v-model="formbd.pass"></el-input>
        <el-button style="width:100%;margin:20px 0;height:40px" @click="login">默认按钮</el-button>
      </div>
    </el-form>
  </div>
</template>

这里是script代码：

data() {
    return {
      //定义所绑定元素的类型
      formbd: {
        name: "",
        region: ""
      }
    };
  },
  methods: {
    login() {  //login事件
    //首先使用axios获取要请求的接口
      this.$axios
        .post("http://ceshi5.dishait.cn/admin/login", {
          username: this.formbd.name,
          password: this.formbd.pass
        })
        .then(res => {
          console.log(res);
          //在请求成功里面判断 传入token 并实现跳转
          if (res.status) {
            localStorage.setItem("token", res.data.data.token);

            this.$router.push("/home/back/backstage");
            this.$message({
              message: "登陆成功",
              type: "success"
            });
          }
        })
        .catch(err => {
            this.$message({
              message: "登陆失败",
              type: "warning"
            });
          console.log(err);
          console.log("登录失败");
        });
    }
  },
  mounted() {
    // console.log('1111');
  }