first commit

wl

2022-11-16 c590aaeca3e0a066016d2ff2c7c4cf96a7ca446f

 src/components/Login.vue

@@ -1,74 +1,35 @@
<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        class="login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
  <div class="login">
    <el-form class="login-form" :model="loginForm">
      <h3 class="title">双流机场公安页面后台管理</h3>
      <el-form-item>
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" type="text" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="loginForm.password" show-password prefix-icon="el-icon-lock" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
      <el-form-item>
        <el-button @click="Login" size="medium" type="primary">
          <span>登录</span>
        </el-button>
      </el-form-item>
    </el-form>
    <div class="el-login-fotter">
      <span>Copyright © mingms.</span>
    </div>
  </div>
</template>

<script>
import { login } from '../api/api'
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'admin',
        username: 'rendong',
        password: '123456'
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
@@ -77,20 +38,24 @@
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await this.$http.post('/login', this.loginForm)
        // console.log(res)
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功')
        // console.log(res)
        // 1. 将登录成功之后的 token，保存到客户端的 session Storage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
    Login() {
      const data = {
        username: this.loginForm.username,
        password: this.loginForm.password
      }
      login(data).then(res => {
        console.log(res)
        if (res.code !== 200) {
          this.$message.error('登录失败！')
        } else if (res.data.role == '超级管理员') {
          this.$message.success('超管登录成功！')
          window.sessionStorage.setItem('token', res.cookie)
          this.$router.push('/administrator/admain')
        } else {
          this.$message.success('登录成功！')
          window.sessionStorage.setItem('token', res.cookie)
          this.$router.push('/administrator/main')
        }
      })
    }
  }
@@ -98,51 +63,54 @@
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
.login {
  background-image: url('../assets/bg2.png');
  background-size: 100% 100%;
  // background-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
  position: relative;
  .login-form {
    background-image: url('../assets/inputBg.png');
    border-radius: 6px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
    width: 490px;
    height: 444px;
    right: 250px;
    padding: 45px 50px 0 50px;
    .title {
      height: 40px;
      line-height: 40px;
      font-size: 28px;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
      font-family: PingFang SC;
      color: #3360c2;
      text-align: center;
      margin-bottom: 35px;
    }
    .el-input {
      margin-bottom: 20px;
    }
    .el-button {
      width: 100%;
      margin: 35px 0;
      background-color: #3360c2;
    }
    .el-button:hover {
      background-color: #3360c2d5;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
  .el-login-fotter {
    position: fixed;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 12px;
    font-family: Arial;
    letter-spacing: 1px;
  }
}
</style>