演示项目

2023-12-12 17:31:48 +08:00
parent 9e3f0c440a
commit 9ae4a83573
121 changed files with 20562 additions and 288 deletions
--- a/web_home/src/views/Register.vue
+++ b/web_home/src/views/Register.vue
@@ -0,0 +1,198 @@
+<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>
+