【若依前后端分离】登录页面背景加入轮播图

最新推荐文章于 2024-04-29 10:40:41 发布

敲厉害的燕宝

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量620

点赞数 5

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_63456808/article/details/136684751

版权

1. Vue 组件的模板部分

包含了登录页面的结构和布局，其中包括登录表单、背景图轮播、底部版权信息等内容。

以下部分为轮播图代码：

 <!-- 背景图容器 -->
    <div class="background-container">
      <!-- 背景图轮播 -->
      <div v-for="(image, index) in images" 
            :key="index" 
            :class="{ active: index === currentIndex }" 
            class="background-image" 
            :style="{ backgroundImage: 'url(' + image + ')' }"></div>
    </div>

v-for="(image, index) in images" :key="index" ：这是Vue的for循环，循环images数组，key为数组的索引值。

:class="{ active: index === currentIndex }" ：这是 Vue 中的动态绑定 class 的语法，它的作用是根据条件来动态添加类名。在这里，当 index 等于 currentIndex 时，就会添加 active 类，否则不添加。这通常用于根据状态或条件来改变元素的样式。

class="background-image" ：这是普通的静态类名，用于为元素指定一个固定的类，以便在样式表中进行样式定义。

:style="{ backgroundImage: 'url(' + image + ')' }"：这是 Vue 中的动态绑定样式的语法，它的作用是根据数据动态设置元素的样式。在这里，backgroundImage 是 CSS 属性，用于设置元素的背景图片。通过绑定 :style，将动态地根据 image 的值来设置背景图片的路径。

2. JavaScript 部分

包含了组件的逻辑和数据处理，包含获取验证码，处理登录逻辑和轮播图展示

以下部分为轮播图代码：

<script>
export default {
  data() {
    return {
      images: [
       require('../assets/images/image_login/1.png'),
        require('../assets/images/image_login/2.png'),
        require('../assets/images/image_login/3.png'),
        require('../assets/images/image_login/4.png'),
        // 添加更多图片路径
      ],
      currentIndex: 0
    };
  },
  mounted() {
    this.playNextImage();
  },
  methods: {
    playNextImage() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 5000); // 每 5 秒切换一次图片
    }
  }
};
</script>

在 mounted 钩子中，当组件挂载完成后，会调用 playNextImage 方法，这个方法的作用是实现背景图轮播的功能。

playNextImage 方法使用了 setInterval 函数，它会每隔一定时间执行一次指定的函数。在这里，每隔 5000 毫秒（即 5 秒），就会执行一次箭头函数。箭头函数内部，通过计算 currentIndex 的值来切换背景图片的索引，实现背景图的轮播效果。 % 运算符用于确保 currentIndex 在合适的范围内，即不超过 images 数组的长度，从而实现循环播放的效果。

3. Vue 组件的样式部分

包含了登录页面的样式定义，包括整体布局、标题样式、登录表单样式、验证码样式、底部版权信息样式等。

以下为轮播图部分代码：


<style scoped>
.background-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.background-image.active {
  opacity: 1;
}
</style>

背景图容器的宽度是屏幕宽度的 100% (100vw)，高度是屏幕高度的 100% (100vh)。这意味着该容器将铺满整个浏览器窗口，使得背景图能够充满整个可视区域

全部代码

（注意轮播图片存放路径）：

<template>
  <div class="login">
    <!-- 背景图容器 -->
    <div class="background-container">
      <!-- 背景图轮播 -->
      <div v-for="(image, index) in images" :key="index" :class="{ active: index === currentIndex }" class="background-image" :style="{ backgroundImage: 'url(' + image + ')' }"></div>
    </div>

    <!-- 登录表单 -->
    <div>
      <!-- Element UI 表单组件 -->
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <!-- 标题 -->
        <h3 class="title">XXXXX系统</h3>
        <!-- 账号输入框 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <!-- 账号图标 -->
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
          </el-input>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
            <!-- 密码图标 -->
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
          </el-input>
        </el-form-item>
        <!-- 验证码输入框 -->
        <el-form-item prop="code" v-if="captchaEnabled">
          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
            <!-- 验证码图标 -->
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
          </el-input>
          <!-- 验证码图片 -->
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>
        <!-- 记住密码复选框 -->
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        <!-- 登录按钮 -->
        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>
          <!-- 注册链接 -->
          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 底部版权信息 -->
    <div class="el-login-footer">
     <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div>
</template>
<script>
// 引入相关依赖
import {getCodeImg} from "@/api/login";
import Cookies from "js-cookie";
import {decrypt, encrypt} from '@/utils/jsencrypt'
import {listMinAlarmNumeric} from "@/api/inventory/inventory";

// 导出组件
export default {
  name: "Login",
  data() {
    // 组件数据
    return {
      // 背景图相关数据
      images: [
        require('../assets/images/image_login/hm3A.png'),
        require('../assets/images/image_login/hm-home.png'),
        require('../assets/images/image_login/hmkj.png'),
        require('../assets/images/image_login/hmjt.png'),
        // 添加更多图片路径
      ],
      currentIndex: 0, // 图片索引
      // 登录表单相关数据
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      // 登录表单验证规则
      loginRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"}
        ],
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"}
        ],
        code: [{required: true, trigger: "change", message: "请输入验证码"}]
      },
      loading: false, // 加载状态
      captchaEnabled: true, // 验证码开关
      register: false, // 注册开关
      redirect: undefined // 重定向
    };
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    // 组件创建时执行的逻辑
    this.getCode(); // 获取验证码
    this.getCookie(); // 获取 Cookie
  },
  mounted() {
    // 组件挂载后执行的逻辑
    this.playNextImage(); // 开始轮播背景图
  },
  methods: {
    // 获取最小库存警报数量
    //getMinAlarmNumeric() {
    //  listMinAlarmNumeric().then(res => {
        // 设置最小库存警报数量到 Vuex
    //    this.$store.commit("noticeNum/SET_INVENTORY_ALARM_NUMERIC_SUM", res.total);
    //  })
    //},
    // 轮播背景图
    playNextImage() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 5000); // 每 5 秒切换一次图片
    },
    // 获取验证码
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 获取 Cookie
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    // 处理登录逻辑
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, {expires: 30});
            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }

          // 调用登录接口
          this.$store.dispatch("Login", this.loginForm).then(() => {
            // 登录成功后跳转到首页或指定页面
            this.$router.push({path: this.redirect || "/"}).catch(() => {
            });

          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
/* 样式部分 */
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}

/* 标题样式 */
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #131313;
  font-weight: bold; /* 加粗 */
  font-size: 24px; /* 增大字号 */
  z-index: 9999; /* 设置一个较大的 z-index 值 */
}

/* 登录表单样式 */
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

/* 提示文字样式 */
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

/* 验证码样式 */
.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

/* 底部版权信息样式 */
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

/* 背景图容器样式 */
.background-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0; /* 设置一个较大的 z-index 值 */
}

/* 背景图样式 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0; /* 设置一个较大的 z-index 值 */
}

/* 激活状态下的背景图样式 */
.background-image.active {
  opacity: 1;
  z-index: 0; /* 设置一个较大的 z-index 值 */
}
</style>

敲厉害的燕宝

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【若依前后端分离】登录页面背景加入轮播图

包含了登录页面的结构和布局，其中包括登录表单、背景图轮播、底部版权信息等内容。v-for="(image, index) in images" :key="index" ：这是Vue的for循环，循环images数组，key为数组的索引值。:class="{ active: index === currentIndex }" ：这是 Vue 中的动态绑定 class 的语法，它的作用是根据条件来动态添加类名。在这里，当index等于时，就会添加active类，否则不添加。
复制链接

扫一扫