创新实训（六）登陆注册界面编写

简介

登录注册界面是我认为最难写的界面之一。原因在于：
1、它不是很规律，自由发挥的空间很大，同时想绘制出比较雅观的界面是比较困难的。需要用到大量的CSS。
2、登录注册不止有界面，还有输入框规则的制定
3、获取到数据，发送给后端的编写。

界面绘制

首先展示一下最后的成果：

我觉得还是比较美观的。

总体结构

可以看到就是左边插图右半边输入框的结构，比例协调。

左侧插图

这个还是比较容易的，其实是两幅图，一副左下角的蓝色纯色图，另一幅是从插画网站找到的主题色接近的图。拼接好位置。这里要用到CSS。

<img :src="bg" class="wave"/>
  <div class="login-container">
    <div class="img">
      <img :src="bgimage" alt=""/>
    </div>

右侧输入框

这个用了elementplus的输入框，但是远没有这么简单，重点还是CSS的编写。包括了两个输入框，登录等按钮，标题，以及上方图片。

<div class="login-form">
        <img :src="ava" alt="" class="avatar"/>
        <Motion>
          <h2>联邦学习可视化平台</h2>
        </Motion>

        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            size="large"
        >
          <Motion :delay="100">
            <el-form-item prop="username">
              <el-input
                  clearable
                  :input-style="{ 'user-select': 'none' }"
                  v-model="ruleForm.username"
                  :placeholder="useTologin"
                  prefix-icon="User"
              >
                <!-- <template #prefix>
                  <el-icon class="el-input__icon"><Key /></el-icon>
                </template> -->
              </el-input>
            </el-form-item>
          </Motion>

          <Motion :delay="150">
            <el-form-item prop="password">
              <el-input
                  clearable
                  :input-style="{ 'user-select': 'none' }"
                  show-password
                  v-model="ruleForm.password"
                  placeholder="密码"
                  prefix-icon="Lock"
              />
            </el-form-item>
          </Motion>
      <Motion :delay="250">
            <el-form-item>
              <div class="w-full h-20px flex justify-between items-center">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
                <el-button type="text"> 忘记密码?</el-button>
              </div>
              <el-button
                  class="w-full mt-4"
                  size="default"
                  type="primary"
                  round
                  @click="goLogin()"
              >
                登录
              </el-button>
            </el-form-item>
          </Motion>

          <Motion :delay="300">
            <el-form-item>
              <div class="w-full h-20px flex justify-between items-center">
                <el-button
                    class="w-full mt-4"
                    size="default"
                    :disabled="useID"
                    @click="usezhanghao()"
                >
                  账号登录
                </el-button>
                <el-button
                    class="w-full mt-4"
                    size="default"
                    :disabled="!useID"
                    @click="useshoujihao()"
                >
                  手机号登录
                </el-button>
                <el-button
                    class="w-full mt-4"
                    size="default"
                    @click="handleRegist()"
                >
                  注册
                </el-button>
              </div>
            </el-form-item>
          </Motion>

CSS的编写

这个我觉得还是很难的。主要就是靠CSS实现了界面的绘制以及美化工作。
摘一些：

.wave {
  position: fixed;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.login-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18rem;
  padding: 0 2rem;
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.img img {
  width: 500px;
}

.login-box {
  display: flex;
  align-items: center;
  text-align: center;
}

.login-form {
  width: 360px;
}

.avatar {
  width: 350px;
  height: 80px;
}

.login-form h2 {
  text-transform: uppercase;
  margin: 15px 0;
  color: rgb(126, 118, 118);
  font: bold 200% Consolas, Monaco, monospace;
}

@media screen and (max-width: 1180px) {
  .login-container {
    grid-gap: 9rem;
  }

  .login-form {
    width: 290px;
  }

  .login-form h2 {
    font-size: 2.4rem;
    margin: 8px 0;
  }

  .img img {
    width: 360px;
  }

  .avatar {
    width: 280px;
    height: 80px;
  }
}

@media screen and (max-width: 968px) {
  .wave {
    display: none;
  }

  .img {
    display: none;
  }

  .login-container {
    grid-template-columns: 1fr;
  }

  .login-box {
    justify-content: center;
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>

保存密码时的钩子函数

如果有了已经登陆保存账号密码的session，那么无需输入:

  mounted() {
    this.ruleForm.username = window.localStorage.getItem("userId");
    let pwdAccess = window.localStorage.getItem("pwdAccess");
    if (pwdAccess) {
      const data = JSON.parse(pwdAccess);
      this.checked = data.remember;
      this.ruleForm.password = data.password;
    }
  },

点击登录按钮后执行的函数

逻辑上就是先检查是否符合规则，然后用axios发给后端，判断是否登陆成功，根据结果执行相应的跳转操作。

goLogin() {
      let label;
      if (this.ruleForm.username === '' || this.ruleForm.password === '') {
        ElMessage({
          showClose: true,
          message: '账号或密码为空',
          type: 'warning',
        })
      } else {
        if (this.$data.useID) {
          label = 0
        } else {
          label = 1
        }
      }
      axios({
        url: '/api/core/login',
        method: 'POST',
        data: {
          label: label,
          account: this.ruleForm.username,
          password: this.ruleForm.password,
        }
      }).then(resp => {
        if (resp.data.label) { // 登录成功
          window.sessionStorage.setItem('token', 'true');
          window.sessionStorage.setItem('userId', resp.data.account);
          // 保存这次登录的用户账号
          window.localStorage.setItem("userId", resp.data.account);
          // 根据checked判断是否记住密码
          if (this.checked) {
            const pwdAccess = {
              remember: this.checked,
              password: this.ruleForm.password,
            };
            window.localStorage.setItem("pwdAccess", JSON.stringify(pwdAccess));
          }
          else {
            const pwdAccess = {
              remember: this.checked,
              password: '',
            };
            window.localStorage.setItem("pwdAccess", JSON.stringify(pwdAccess));
          }
          // 跳转到主页
          this.$router.push("/MainPage");
          ElMessage({
            showClose: true,
            message: resp.data.result,
            type: 'success',
          })
        } else { // 登录失败
          ElMessage({
            showClose: true,
            message: resp.data.result,
            type: 'error',
          })
        }
      })
    },

总结

这个花了我好长时间，总的来说难点主要是界面的绘制。我对于界面还是比较满意的。收获满满。