erp/resources/frontend/src/views/Login.vue

<template>
  <div class="backimg">
    <div class="sign">
      <span class="title">Hi 欢迎使用</span>
      <p class="manage">
        <img src="../css/img/养花人2_画板 1 副本 15.png" alt="" /><span
          >ERP管理系统</span
        >
      </p>
      <p class="title-1">登录</p>
      <input type="text" placeholder="请输入用户名" v-model="form.name" />
      <br />
      <input type="password" placeholder="请输入密码" v-model="form.password" />
      <br />
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <br />
      <el-button type="primary" @click="Login()">登录</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      checked: false, //记住密码变量
      form: {
        //用户名和密码
        name: "",
        password: "",
      },
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    Login() {
      // 判断记住密码复选框是否被勾选 勾选则调用配置cookie方法
      if (this.checked === true) {
        this.setCookie(this.form.name, this.form.password, true, 7);
      } else {
        this.clearCookie();
      }
      //判断用户名和密码是否为空
      if (this.form.name === "" || this.form.password === "") {
        this.$message({
          message: "账号或密码不能为空",
          type: "error",
        });
      } else {
        // let token = localStorage.getItem("token");
        axios.post("/api/auth/login", this.form).then((res) => {
          let data = res.data;
          console.log(data);
          if (data.error) {
            this.$message({
              message: "账号或密码错误，请重新输入",
              type: "error",
            });
            this.form.name = "";
            this.form.password = "";
            this.checked = false;
          }

          if (data.token) {
            this.form = {};
            localStorage.setItem("token", data.token);
            this.$message({
              message: "成功登录，欢迎来到后台管理系统",
              type: "success",
            });
            this.$router.push("/GOODS_LIST");
          }
        });
      }
    },
    // 设置cookie
    setCookie(c_name, c_pwd, c_state, exdays) {
      const exdate = new Date();
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
      window.document.cookie =
        "name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString();
    },
    // 读取cookie
    getCookie() {
      if (document.cookie.length > 0) {
        const arr = document.cookie.split("; ");
        for (let i = 0; i < arr.length; i++) {
          const arr2 = arr[i].split("=");
          // console.log(arr[2]);
          if (arr2[0] === "name") {
            this.form.name = arr2[1];
          } else if (arr2[0] === "password") {
            this.form.password = arr2[1];
          } else if (arr2[0] === "state") {
            this.checked = Boolean(arr2[1]);
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie("", "", false, -1);
    },
  },
};
</script>

<style lang="scss" scoped>
.backimg {
  width: 100%;
  height: 1080px;
  background-image: url("./../css/img/组 32.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.sign {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 270px;
  right: 300px;
  input {
    width: 400px;
    height: 51px;
    border: 2px solid #bcbcbc;
    opacity: 1;
    border-radius: 5px;
    margin-bottom: 25px;
  }
  .title {
    width: 125px;
    height: 23px;
    font-size: 22px;
    font-family: "BigruixianBlackGBV1.0";
    font-weight: 400;
    line-height: 23px;
    color: #2b53ec;
    opacity: 1;
  }
  .manage {
    margin-top: 19px;
    margin-bottom: 50px;
    img {
      margin-right: 20px;
    }
    span {
      width: 340px;
      height: 57px;
      font-size: 54px;
      font-family: "BigruixianBlackGBV1.0";
      font-weight: 400;
      line-height: 57px;
      color: #2b53ec;
      opacity: 1;
    }
  }
  .title-1 {
    width: 70px;
    height: 35px;
    font-size: 35px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 60px;
    color: #393939;
    opacity: 1;
    margin-bottom: 35px;
  }
  .el-button {
    width: 400px;
    height: 58px;
    background: rgba(43, 83, 236);
    border-radius: 5px;
    margin-top: 40px;
  }
  .el-checkbox {
    color: rgba(43, 83, 236);
  }
}
</style>