Login.vue

<template>
  <div>
    <div class="title">
      <div class="login_logo"></div>
      <p>校园信息通后台管理系统</p>
    </div>
    <div class="wrapper">
      <div
        style="
          margin: 8% 800px;
          background-color: #fff;
          width: 350px;
          height: 440px;
          padding: 20px;
          border-radius: 15px;
          box-shadow: 19px -16px #cde0fb;
        "
      >
        <div
          class="innerBox"
          style="
            margin: 10px 0;
            text-align: center;
            font-size: 24px;
            font-weight: 900;
          "
        >
          <el-tabs
            class="login_title"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="教师登录" name="first"
              >教师登录
              <div class="login_infor"></div>
              <el-form
                class="write_info"
                :model="userForm"
                :rules="teacherrules"
                ref="userForm"
              >
                <el-form-item prop="teacherNo">
                  <el-input
                    placeholder="请输入用户名"
                    size="medium"
                    style="margin: 6px 0 0 0"
                    prefix-icon="el-icon-user"
                    v-model="userForm.teacherNo"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    placeholder="请输入密码"
                    size="medium"
                    style="margin: 1px 0"
                    prefix-icon="el-icon-lopassword"
                    show-password
                    v-model="userForm.password"
                  ></el-input>
                </el-form-item>
                <el-form-item style="margin: 0 0; text-align: right">
                  <el-button
                    style="display:block;width:200px;height:40px;border:0;background-color: #2b478b;margin-left:22%; margin-top:10px;font-weight：600;font-size:16px"
                    type="primary"
                    round
                    autocomplete="off"
                    @click="teacherLogin(userForm)"
                    >登录</el-button
                  >
                  <p
                    style="
                      display: inline-block;
                      color: #031485;
                      font-weight: 600;
                      cursor: pointer;
                    "
                    @click="forget"
                  >
                    忘记密码？
                  </p>
                </el-form-item>
              </el-form></el-tab-pane
            >
            <el-tab-pane label="企业登录" name="second"
              >企业登录
              <div class="login_infor"></div>
              <el-form
                class="write_info"
                :model="employForm"
                :rules="employrules"
                ref="employForm"
              >
                <el-form-item prop="teacherNo">
                  <el-input
                    placeholder="请输入用户名"
                    size="medium"
                    style="margin: 6px 0 0 0"
                    prefix-icon="el-icon-user"
                    v-model="employForm.employNo"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    placeholder="请输入密码"
                    size="medium"
                    style="margin: 1px 0"
                    prefix-icon="el-icon-lopassword"
                    show-password
                    v-model="employForm.password"
                  ></el-input>
                </el-form-item>
                <el-form-item style="margin: 0 0; text-align: right">
                  <el-button
                    style="display:block;width:200px;height:40px;border:0;background-color: #2b478b;margin-left:22%; margin-top:10px;font-weight：600;font-size:16px"
                    type="primary"
                    round
                    autocomplete="off"
                    @click="EmployLogin(employForm)"
                    >登录</el-button
                  >
                  <p
                    style="
                      display: inline-block;
                      color: #031485;
                      font-weight: 600;
                      cursor: pointer;
                    "
                    @click="forget"
                  >
                    忘记密码？
                  </p>
                </el-form-item>
              </el-form></el-tab-pane
            >
            <el-tab-pane label="管理员登录" name="third"
              >管理员登录
              <div class="login_infor"></div>
              <el-form
                class="write_info"
                :model="manageForm"
                :rules="managerules"
                ref="manageForm"
              >
                <el-form-item prop="teacherNo">
                  <el-input
                    placeholder="请输入用户名"
                    size="medium"
                    style="margin: 6px 0 0 0"
                    prefix-icon="el-icon-user"
                    v-model="manageForm.manageNo"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    placeholder="请输入密码"
                    size="medium"
                    style="margin: 1px 0"
                    prefix-icon="el-icon-lopassword"
                    show-password
                    v-model="manageForm.password"
                  ></el-input>
                </el-form-item>
                <el-form-item style="margin: 0 0; text-align: right">
                  <el-button
                    style="display:block;width:200px;height:40px;border:0;background-color: #2b478b;margin-left:22%; margin-top:10px;font-weight：600;font-size:16px"
                    type="primary"
                    round
                    autocomplete="off"
                    @click="ManageLogin(manageForm)"
                    >登录</el-button
                  >
                  <p
                    style="
                      display: inline-block;
                      color: #031485;
                      font-weight: 600;
                      cursor: pointer;
                    "
                    @click="forget"
                  >
                    忘记密码？
                  </p>
                </el-form-item>
              </el-form></el-tab-pane
            >
          </el-tabs>
        </div>
      </div>
      <div class="bottom">
        <p style="padding-top: 20px">今天不会摆烂对不队 版权所有</p>
        <p>Copyright 2022 All Rights Reserved</p>
      </div>
    </div>
  </div>
</template>

<script>
// import { setRoutes } from "@/router";
// import axios  from "axios";

export default {
  name: "Login",
  data() {
    return {
      activeName: "first",
      userForm: { teacherNo: "", password: "" },
      employForm: { employNo: "", password: "" },
      manageForm: { manageNo: "", password: "" },
      teacherrules: {
        teacherNo: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      employrules: {
        employNo: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      managerules: {
        manageNo: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //教师登录
    teacherLogin(userForm) {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          console.log("userform");
          console.log(this.userForm.teacherNo + this.userForm.password);
          // 表单校验合法
          // 这是参数一和参数二
          // this.$axios.post("/api/backend/login", this.userForm)
          // 这种你需要指定method
          // this.$axios({
          //   method: 'post',
          //   url: '/api/backend/login',
          //   data: this.userForm
          // })
          // 这种是错的
          // axios.post(url[, data[, config]])
          this.$axios
            .post(
              "http://106.55.186.95:8085/backend/login",
              // data: JSON.stringify(this.userForm),
              {
                teacherNo: this.userForm.teacherNo,
                password: this.userForm.password,
                identifyCode: "2",
              }
            )
            .then((res) => {
              // console.log(username + password);
              console.log("5");
              console.log(res);
              if (res.data.code == "200") {
                // window.sessionStorage.setItem('id', res.data.id)
                const { accessToken } = res;
                localStorage.setItem("accesstoken", accessToken);

                console.log("666");
                console.log(JSON.stringify(res.data.data.token));

                console.log("666");
                localStorage.setItem(
                  "token",
                  JSON.stringify(res.data.data.token)
                );
                localStorage.setItem(
                  "userId",
                  // JSON.stringify(this.userForm.teacherNo)
                  this.userForm.teacherNo
                ); // 存储用户信息到浏览器
                localStorage.setItem("menus", res.data.menus); // 存储用户信息到浏览器
                // 动态设置当前用户的路由
                // setRoutes();
                this.$notify({
                  title: "登录成功",
                  message: "欢迎进入福州大学信息通后台",
                  type: "success",
                });
                console.log("登录成功");
                this.$router.push("/PageTable");
              } else if (res.data.code == "204") {
                console.log("用户名不存在");
              } else if (res.data.code == "210") {
                console.log("用户名或者密码错误");
              } else if (res.data.code == "233") {
                console.log("您没有权限");
                this.$notify.error({
                  title: "错误",
                  message: "您没有权限进入此界面!",
                });
                this.userForm.teacherNo = "";
                this.userForm.password = "";
              }
            })
            .catch((err) => {
              if (err.response.data.code == "210") {
                console.log("用户名或者密码错误");
                this.$notify.error({
                  title: "错误",
                  message: "用户名或者密码错误!",
                });
                this.userForm.teacherNo = "";
                this.userForm.password = "";
              } else if (err.response.data.code == "204") {
                this.$notify.error({
                  title: "错误",
                  message: "用户名不存在!",
                });
                this.userForm.teacherNo = "";
                this.userForm.password = "";
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "用户名或者密码错误!",
                });
                this.userForm.teacherNo = "";
                this.userForm.password = "";
              }
            });
          console.log("7");
        }
      });
    },

    //招聘人员登录
    EmployLogin(employForm) {
      this.$refs["employForm"].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "http://106.55.186.95:8085/backend/login",
              // data: JSON.stringify(this.userForm),
              {
                teacherNo: this.employForm.employNo,
                password: this.employForm.password,
                identifyCode: "1",
              }
            )
            .then((res) => {
              // console.log(username + password);
              console.log("5");
              console.log(res);
              if (res.data.code == "200") {
                // window.sessionStorage.setItem('id', res.data.id)
                const { accessToken } = res;
                localStorage.setItem("accesstoken", accessToken);

                console.log("666");
                console.log(JSON.stringify(res.data.data.token));

                console.log("666");
                localStorage.setItem(
                  "token",
                  JSON.stringify(res.data.data.token)
                );
                localStorage.setItem(
                  "employId",
                  // JSON.stringify(this.userForm.teacherNo)
                  this.employForm.employNo
                ); // 存储用户信息到浏览器
                localStorage.setItem("menus", res.data.menus); // 存储用户信息到浏览器
                // 动态设置当前用户的路由
                // setRoutes();
                this.$notify({
                  title: "登录成功",
                  message: "欢迎进入福州大学信息通后台",
                  type: "success",
                });
                console.log("登录成功");
                this.$router.push("/RecruitmentHomepage");
              } else if (res.data.code == "204") {
                console.log("用户名不存在");
              } else if (res.data.code == "210") {
                console.log("用户名或者密码错误");
              }else if (res.data.code == "233") {
                console.log("您没有权限");
                this.$notify.error({
                  title: "错误",
                  message: "您没有权限进入此界面!",
                });
                this.employForm.employNo = "";
                this.employForm.password = "";
              }
            })
            .catch((err) => {
              if (err.response.data.code == "210") {
                console.log("用户名或者密码错误");
                this.$notify.error({
                  title: "错误",
                  message: "用户名或者密码错误!",
                });
                this.employForm.employNo = "";
                this.employForm.password = "";
              } else if (err.response.data.code == "204") {
                this.$notify.error({
                  title: "错误",
                  message: "用户名不存在!",
                });
                this.employForm.employNo = "";
                this.employForm.password = "";
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "用户名或者密码错误!",
                });
                this.employForm.employNo = "";
                this.employForm.password = "";
              }
            });
        }
      });
    },
    //管理员登录
    ManageLogin(manageForm) {
      // this.$refs["manageForm"].validate((valid) => {
      //   if (valid) {
          this.$axios
            .post(
              "http://106.55.186.95:8085/backend/login",
              // data: JSON.stringify(this.userForm),
              {
                teacherNo: this.manageForm.manageNo,
                password: this.manageForm.password,
                identifyCode: "0",
              }
            )
            .then((res) => {
              // console.log(username + password);
              console.log("5");
              console.log(res);
              if (res.data.code == "200") {
                // window.sessionStorage.setItem('id', res.data.id)
                const { accessToken } = res;
                localStorage.setItem("accesstoken", accessToken);

                localStorage.setItem(
                  "token",
                  JSON.stringify(res.data.data.token)
                );
                localStorage.setItem(
                  "ManageId",
                  // JSON.stringify(this.userForm.teacherNo)
                  this.manageForm.manageNo
                ); // 存储用户信息到浏览器
                localStorage.setItem("menus", res.data.menus); // 存储用户信息到浏览器
                // 动态设置当前用户的路由
                // setRoutes();
                this.$notify({
                  title: "登录成功",
                  message: "欢迎进入福州大学信息通后台",
                  type: "success",
                });
                console.log("登录成功");
                this.$router.push("/ManageNavi");
              } else if (res.data.code == "204") {
                console.log("用户名不存在");
              } else if (res.data.code == "210") {
                console.log("用户名或者密码错误");
              }else if (res.data.code == "233") {
                console.log("您没有权限");
                this.$notify.error({
                  title: "错误",
                  message: "您没有权限进入此界面!",
                });
                this.manageForm.manageNo = "";
                this.manageForm.password = "";
              }
            })
            .catch((err) => {
              if (err.response.data.code == "210") {
                console.log("用户名或者密码错误");
                this.$notify.error({
                  title: "错误",
                  message: "用户名或者密码错误!",
                });
                this.manageForm.manageNo = "";
                this.manageForm.password = "";
              } else if (err.response.data.code == "204") {
                this.$notify.error({
                  title: "错误",
                  message: "用户名不存在!",
                });
                this.manageForm.manageNo = "";
                this.manageForm.password = "";
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "用户名或者密码错误!",
                });
                this.manageForm.manageNo = "";
                this.manageForm.password = "";
              }
            });
          console.log("7");
        // }
      // });
    },
    //点击切换
    handleClick() {},
    forget() {
      this.$router.push("/Password");
      // this.$router.replace("/Password");
    },
  },
};
</script>

<style>
.wrapper {
  width: 100%;
  height: 50%;
  background-image: url("../assets/background.png");
  background-repeat: no-repeat;
  /* background-color: #ebf3fa; */
  background-size: 90%;
  /* background-position: 10% 50%; */
  overflow: hidden;
}

.title {
  height: 40px;
  width: 100%;
  background-color: white;
}

.login_logo {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("../assets/book.png");
  background-size: 100%;
  position: absolute;
  left: 4%;
  top: 1%;
}

.title p {
  display: inline-block;
  position: absolute;
  left: 10%;
  top: 1%;
  margin: 0% 0%;
  font-size: 35px;
  font-weight: 700;
  color: #031485;
}

.bottom {
  margin: 0%;
  display: inline-block;
  color: #031485;
}

.bottom p {
  margin: 0%;
  height: 30px;
  width: 100%;
  color: #031485;
  position: relative;
  bottom: 40px;
}

.innerBox {
  font-style: Microsoft YaHei;
}

.login_infor {
  height: 150px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 70%;
  background-image: url("../assets/login_infor.png");
  background-position: 50% 0%;
  position: relative;
  bottom: 5%;
}

/* .input_user {
    display: inline-block;
    height: 20px;
    width: 20px;
  margin: 2px 0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("../assets/mine.png");
  background-position: 0%;
}

.input_pass {
  margin: 2px 0;
  background-repeat: no-repeat;
  background-size: 70%;
  background-image: url("../assets/password.png");
} */

.write_info {
  position: relative;
  bottom: 4%;
}

.login_button {
  margin-right: 30px;
}

.login_title > el-tab-pane {
  font-size: 20px;
  font-weight: 700;
}

::v-deep .el-tabs__item {
  font-size: 20px;
}
</style>