recom-gorse/web_home/src/views/Register.vue

<template>
  <div id="login">
    <div class="login-content">
      <div class="logo-img">
        <img src="../assets/image/ambari-logo.png">
        <label class="left-title">推荐系统-演示</label>
      </div>
      <div class="login-center">
        <div class="left-content">
          <img src="../assets/image/login-img.png" class="login-img">
        </div>
        <div class="right-content">
          <div class="login-title">注册</div>
          <div class="second-title">账号密码登录</div>
          <el-form ref="form" :model="form" label-width="0px">
            <el-form-item label="" style="margin-bottom: 30px">
              <el-input placeholder="账号" prefix-icon="el-icon-user" class="login-input" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label=""  style="margin-bottom: 30px">
              <el-input type="password" placeholder="密码" prefix-icon="el-icon-lock"  class="login-input" v-model="form.password"></el-input>
            </el-form-item>
            <div style="color: #333;letter-spacing:1px;font-size: 15px;margin-bottom: 30px">如果忘记密码，请联系管理员！</div>
            <el-form-item>
              <el-button type="primary" plain class="login-button" style="width: 45%;float:left;" @click="gotoLogin()">前往登陆</el-button>
              <el-button type="primary" class="login-button" style="width: 45%;float: right" @click="confirmRegister()">注册</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "login",
  data() {
    return {
      form: {
        username: '',
        password: '',
        type: 'admin'
      },
    }
  },
  mounted() {
  },
  methods: {
    gotoLogin() {
      this.$router.push('/login');
    },
    confirmRegister() {
      if(this.form.username.length === 0) {
        this.$message.warning("用户名不能为空");
        return;
      }

      if(this.form.password.length === 0) {
        this.$message.warning("密码不能为空");
        return;
      }
      request({
        url: '/login/register',
        method: 'post',
        data: this.form
      }).then(res => {
        this.$message.success("注册成功，请前往登陆")
      });
      request({
        url: 'http://43.139.83.67:8088/api/user',
        method: 'post',
        data: {
          UserId: this.form.username
        }
      }).then(res => {
      });
    }
  }
}
</script>

<style scoped lang="scss">
#login{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: url('../assets/image/manage-bg.jpg') no-repeat;
  background-size: 100% 100%;

  .login-content{
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    //background: rgba(75, 100, 216, 0.74);
    background: linear-gradient(192deg, rgba(85, 111, 231, 0.3) 0%, rgba(68, 93, 208, 0.3) 100%);
    //background: linear-gradient(to right, rgba(75, 100, 216, 0.4), rgba(75, 100, 216, 0.74));
    position: absolute;
    z-index: 1;

    .logo-img{
      position: absolute;
      top: 40px;
      left: 50px;

      img{
        width: 50px;
      }

      .left-title{
        color: #ffffff;
        line-height: 50px;
        font-weight: bolder;
        letter-spacing:3px;
        height: 50px;
        font-size: 26px;
        vertical-align: bottom;
        padding-left: 30px;
      }
    }

    .login-center{
      width: 1400px;
      margin: 180px auto 0 auto;
      height:600px;
      border-radius: 20px;
      display: flex;


      .left-content{
        flex: 1;
        //background: rgba(63,81,181,0.5);
        //border-top-left-radius: 10px;
        //border-bottom-left-radius: 10px;
        position: relative;

        .left-title{
          position: absolute;
          left: 0px;
          top: -30px;
          font-size: 35px;
          color: #ffffff;
          line-height: 60px;
          font-weight: bolder;
          letter-spacing:3px;
        }

        .login-title{
          position: absolute;
          left: 0px;
          top: 0px;
        }

        .login-img{
          position: absolute;
          bottom: -40px;
          left: 45%;
          width: 120%;
          margin-left: -60%;
        }
      }

      .right-content{
        width: 500px;
        padding: 70px 60px 0 60px;
        //background: rgba(100,121,222,0.25);
        background: #fff;
        border-radius: 10px;
        box-sizing: border-box;

        .login-title{
          font-size: 30px;
          font-weight: 600;
          color: #333;
          letter-spacing:5px;
          height: 50px;
          line-height: 50px;
        }

        .second-title{
          letter-spacing:2px;
          height: 30px;
          line-height: 30px;
          font-size: 20px;
          color: #666;
          margin-top: 30px;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>