Day2 忘记密码

vue/src/views/Password.vue

+<template>
+  <div>
+    <div class="title">
+      <div class="login_logo"></div>
+      <p>校园信息通后台管理系统</p>
+    </div>
+    <div class="wrapper">
+      <div
+        style="
+          margin: 3% 770px;
+          background-color: #fff;
+          width: 350px;
+          height: 540px;
+          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;
+          "
+        >
+          <p style="margin-top:0;margin-bottom:40px">忘记密码 </p>
+        </div>
+        <div class="login_infor"></div>
+        <el-form class="write_info" :model="user" :rules="rules" ref="userForm">
+          <el-form-item prop="username">
+            <el-input
+              placeholder="请输入用户名"
+              size="medium"
+              style="margin: 6px 0 0 0"
+              prefix-icon="el-icon-user"
+              v-model="user.username"
+            ></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="user.password"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="repeat_password">
+            <el-input
+              placeholder="请再次输入密码"
+              size="medium"
+              style="margin: 1px 0"
+              prefix-icon="el-icon-lopassword"
+              show-password
+              v-model="user.password"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="email" style="width: 70%">
+            <el-input
+              placeholder="请输入预留邮箱号"
+              size="medium"
+              style="margin: 1px 0; width: 100%"
+              prefix-icon="el-icon-lopassword"
+              show-password
+              v-model="user.password"
+            ></el-input>
+          </el-form-item>
+          <el-button
+            style="
+              display: inline;
+              position:absolute;
+              left:76%;
+              bottom:37%;
+              background-color: #2b478b;
+              border: 0px;
+            "
+            type="warning"
+            size="small"
+            autocomplete="off"
+            @click="$router.push('/register')"
+            >确定发送</el-button
+          >
+          <el-form-item prop="password">
+            <el-input
+              placeholder="请输入验证码"
+              size="medium"
+              style="margin: 1px 0"
+              prefix-icon="el-icon-lopassword"
+              show-password
+              v-model="user.password"
+            ></el-input>
+          </el-form-item>
+          <el-form-item style="margin: 10px 0; text-align: right">
+            <el-button
+              style="display:inline;width:100px;height:40px;margin-right: 13%; background-color: #2b478b; border: 0px"
+              type="primary"
+              round
+              autocomplete="off"
+              @click="$router.push('/register')"
+              >确定</el-button
+            >
+            <el-button
+              style="display:inline;width:100px;height:40px;margin-right: 13%"
+              type="primary"
+              round
+              autocomplete="off"
+              @click="login"
+              >取消</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </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";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      user: {},
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          {
+            min: 1,
+            max: 20,
+            message: "长度在 1 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    login() {
+      this.$refs["userForm"].validate((valid) => {
+        if (valid) {
+          // 表单校验合法
+          this.request.post("/user/login", this.user).then((res) => {
+            if (res.code === "200") {
+              localStorage.setItem("user", JSON.stringify(res.data)); // 存储用户信息到浏览器
+              localStorage.setItem("menus", JSON.stringify(res.data.menus)); // 存储用户信息到浏览器
+              // 动态设置当前用户的路由
+              setRoutes();
+              this.$message.success("登录成功");
+              localStorage.setItem("user_id", id);
+              if (res.data.role === "ROLE_STUDENT") {
+                this.$router.push("/front/home");
+              } else {
+                this.$router.push("/");
+              }
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</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: 10px;
+}
+
+.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;
+  position: relative;
+}
+
+.login_title > el-tab-pane {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+::v-deep .el-tabs__item {
+  font-size: 20px;
+}
+</style>