前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)

news2024/11/19 2:43:57

一、文章引导

前端Vue中实现超炫酷动态背景
动态演示
关键代码
安装依赖

二、博主简介

🌏博客首页： 水香木鱼
📌专栏收录：后台管理
📑文章摘要：炫酷动态背景   vue2  自定义banner
💌木鱼寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

三、文章内容

本期 木鱼为大家带来的是，在前端vue中实现超炫酷的动态背景【可应用与登录/注册页面、自定义banner图、全屏背景等】

👉点击进入 Vanta.js-Animated website backgrounds in a few lines of code官网，体验超炫酷背景

①、安装依赖

注意：需下载以下版本号的插件 👇

npm install vanta@0.5.24

npm install three@0.121.0

②、关键代码

height: 100vh 根据屏幕的高度去自适应 展示

<div ref="vantaRef" style="width: 100%; height: 100vh"></div>

<script>
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'//导入动态样式逻辑
export default {
  data() {
    return {};
   },
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
     // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 14381274,
      color2: 16443110,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
</script>

以下为 动态案例： 与官网同步…

本次演示主要以自定义banner图 为案例，给大家去演示。

③、百鸟朝凤(动态)【BIRDS】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 14381274,
      color2: 16443110,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

④、云容月貌(动态)【Fog】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import FOG from "vanta/src/vanta.fog";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = FOG({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.FOG({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      highlightColor: 0xa577be,
      midtoneColor: 0xcd4841,
      lowlightColor: 0x473b6b,
      baseColor: 0xdfe3e1,
      blurFactor: 0.52,
      speed: 1.2,
      zoom: 0.3,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑤、桑田碧海(动态)【WAVES】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import WAVES from "vanta/src/vanta.waves";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = WAVES({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.WAVES({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0x5f88,
      shininess: 76.0,
      waveHeight: 12.0,
      waveSpeed: 0.95,
      zoom: 0.89,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑥、耸入云霄(动态)【CLOUDS】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import CLOUDS from "vanta/src/vanta.clouds";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = CLOUDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.CLOUDS({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      skyColor: 0x26b9f2,
      cloudColor: 0xb7c9e8,
      cloudShadowColor: 0x2f3a48,
      sunColor: 0x5c452f,
      sunGlareColor: 0xd4a798,
      sunlightColor: 0xdc9c59,
      speed: 1.2,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑦、未知…(动态)【CLOUDS2】

本地演示效果暂未生效，未知原因。请移步官网 查看

⑧、蜚誉全球(动态)【GLOBE】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import GLOBE from "vanta/src/vanta.globe";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = GLOBE({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.GLOBE({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0xc5c5c5,
      size: 1.1,
      backgroundColor: 0x4300bb,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑨、蛛丝尘网(动态)【NET】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import NET from "vanta/src/vanta.net";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = NET({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.NET({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0xc7d1e8,
      backgroundColor: 0x400bb1,
      points: 13.0,
      maxDistance: 21.0,
      spacing: 16.0,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑩、上串下跳(动态)【CELLS】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import CELLS from "vanta/src/vanta.cells";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = CELLS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.CELLS({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 0x19cfcf,
      color2: 0xcfca7e,
      size: 2.7,
      speed: 2.5,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑩①、云罗天网(动态)【TRUNK】

本地尝试 未出现动态效果，请移步官网

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import TRUNK from "vanta/src/vanta.trunk";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = TRUNK({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.TRUNK({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0xede7e7,
      backgroundColor: 0x198c41,
      spacing: 6.5,
      chaos: 3.5,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑩②、未知…(动态)【TOPOLOGY】

本地演示效果暂未生效，未知原因。请移步官网 查看

⑩③、未知…(动态)【DOTS】

本地演示效果暂未生效，未知原因。请移步官网 查看

⑩④、镜圆璧合(动态)【RINGS】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import RINGS from "vanta/src/vanta.rings";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = RINGS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.RINGS({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,//比例
      scaleMobile: 1.0,
      backgroundColor: 0x0,
      color: 0xb0d29d,
      backgroundAlpha: 0.84,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑩⑤、雾里看花(动态)【HALO】

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>水香木鱼</h1>
      <h6>
        &ensp;&ensp;SHUI&ensp;&ensp;&ensp;XIANG&ensp;&ensp;&ensp;&ensp;MU&ensp;&ensp;&ensp;&ensp;&ensp;YU
      </h6>
      <p>活动时间：待定</p>
      <p>组织单位：待定</p>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import HALO from "vanta/src/vanta.halo";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = HALO({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.HALO({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      baseColor: 0xd9,//基准颜色
      backgroundColor: 0x0,//背景颜色 需十进制
      amplitudeFactor: 1.1,//振幅因子
      xOffset: -0.31,//移动到X轴
      yOffset: -0.17,//移动到Y轴
      size: 2.0,//大小
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>

⑩⑥、登录/注册页【动态】

为了节约时间，简单演示一下， 剩下的样式需要自行去修改。

在这里插入图片描述

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 100vh"></div>
    <div class="banner">
      <p>账号<el-input type="text" /></p>
      <p>密码<el-input type="text" /></p>
      <el-button>登录</el-button>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import HALO from "vanta/src/vanta.halo";

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = HALO({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.HALO({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      baseColor: 0xd9, //基准颜色
      backgroundColor: 0x0, //背景颜色 需十进制
      amplitudeFactor: 1.1, //振幅因子
      xOffset: -0.31, //移动到X轴
      yOffset: -0.17, //移动到Y轴
      size: 2.0, //大小
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    width: 400px;
    height: 300px;
    z-index: 999;
    position: absolute;
    top: 26%;
    right: 10%;
    // color: #fff;
    background-color: #fff;
    border-radius: 2%;
  }
}
p {
  margin-top: 20px;
}
.el-button {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
</style>

四、程序语录

程序中蕴含着很多的道理,唯有大彻大悟者方能体会其中的奥妙!

五、精彩推荐

💡前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)
💡一文图解前端WebSocket 实时通信
💡vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】
💡vue封装返回顶部组件【cv可用】
💡vue实现搜索、提交等功能【回车事件】

本篇博客文章模板唯一版权归属©水香木鱼

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/191806.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

29相似矩阵和若尔当型

29相似矩阵和若尔当型

一、知识概要 本节从正定矩阵的回顾谈起&#xff0c;介绍了相似矩阵和若尔当型。但是没有进行深入介绍&#xff0c;主要目的是让我们对这些变换方式有所了解。 二、正定矩阵补充 在上一节学习的正定矩阵的基础上&#xff0c;我们给出以下问题&#xff1a; &#xff08;1&…
阅读更多...
2023年2月北京/广州/西安/深圳DAMA-CDGA/CDGP数据治理认证招生简章

2023年2月北京/广州/西安/深圳DAMA-CDGA/CDGP数据治理认证招生简章

DAMA认证为数据管理专业人士提供职业目标晋升规划&#xff0c;彰显了职业发展里程碑及发展阶梯定义&#xff0c;帮助数据管理从业人士获得企业数字化转型战略下的必备职业能力&#xff0c;促进开展工作实践应用及实际问题解决&#xff0c;形成企业所需的新数字经济下的核心职业…
阅读更多...
uniapp：常用跨端业务组件

uniapp：常用跨端业务组件

插件内组件包含以下功能&#xff1a; 自定义状态栏组件(ZoNavBar)上拉加载状态组件(ZoLoading)弹窗组件(ZoPopup)搜索组件(ZoSearchBar)空数据组件(ZoEmpty)tab标签组件(ZoTabs)tab下拉筛选组件(ZoSelectTabs)底部导航组件(ZoTabBar)cell导航组件(ZoCell) 10.标题内容组件(ZoT…
阅读更多...
复试--数据结构篇[1-4章]

复试--数据结构篇[1-4章]

目录第一章 绪论第二章 线性表1-线性表的顺序表示&#xff08;顺序表&#xff09;2-线性表的链式表示&#xff08;链表&#xff09;&#xff08;1&#xff09;单链表&#xff08;2&#xff09;循环链表&#xff08;3&#xff09;双向链表3-顺序表和链表的比较4-线性表的应用第三…
阅读更多...
Hyper-V中的虚拟机双网卡配置

Hyper-V中的虚拟机双网卡配置

Hyper-V中的虚拟机双网卡配置 在虚拟机交换管中 存在三种虚拟交换机分别是外部、内部和专用 内部网络&#xff1a;虚拟机与虚拟机访问宿主机&#xff0c;虚拟机可以访问物理网络 外部网络&#xff1a;虚拟机与虚拟机之间&#xff0c;虚拟机与宿主机之间&#xff0c;虚拟机或宿…
阅读更多...
大数据学习路线

大数据学习路线

学习建议 #1、Java 这个没毛病&#xff0c;看 Java 程序员进阶之路就好了&#xff0c;Spring Boot 也要能掌握 #2、MySQL 要能写复杂的 SQL 语句&#xff0c;为后面学习 Hive 数仓的 HQL 打好基础。 #3、Linux 大数据的相关软件都是在 Linux 上运行的&#xff0c;所以 Linux …
阅读更多...
Django默认的Auth权限管理系统的使用

Django默认的Auth权限管理系统的使用

1.Django默认已经提供了认证系统Auth模块。认证系统包含&#xff1a; 用户管理权限用户组密码哈希系统用户登录或内容显示的表单和视图一个可插拔的后台系统 admin Django默认用户的认证机制依赖Session机制&#xff0c;我们在项目中将引入JWT认证机制&#xff0c;将用户的身…
阅读更多...
无法启动此程序，因为dll丢失的解决方法分享

无法启动此程序，因为dll丢失的解决方法分享

大家在使用电脑的时候&#xff0c;应该经常会遇到这种情况吧&#xff1f;在你打开某些程序的时候&#xff0c;突然弹出一个框框说无法启动此程序&#xff0c;因为dll丢失&#xff0c;那么遇到这种情况&#xff0c;我们需要怎么去解决呢&#xff1f;今天小编就详细的给大家讲解一…
阅读更多...
对象的序列化和反序列化

对象的序列化和反序列化

读写JSON格式的数据 通过上面的讲解&#xff0c;我们已经知道如何将文本数据和二进制数据保存到文件中&#xff0c;那么这里还有一个问题&#xff0c;如果希望把一个列表或者一个字典中的数据保存到文件中又该怎么做呢&#xff1f;在Python中&#xff0c;我们可以将程序中的数…
阅读更多...
方向梯度直方图（HOG）

方向梯度直方图（HOG）

摘要&#xff1a; 方向梯度直方图(HOG)特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述。HOG特征通过计算和统计图像局部区域的梯度方向直方图来构成特征。主要用于解决人体目标检测&#xff0c;主要通过梯度方向直方图特征来表达人体&#xff0c;提取人体的外…
阅读更多...
OpenMMLab AI实战营Day1 计算机视觉算法基础与 OpenMMLab

OpenMMLab AI实战营Day1 计算机视觉算法基础与 OpenMMLab

目录 一、计算机视觉任务 二、计算机视觉的应用 三、计算机视觉的发展 四、OpenMMLab介绍 一、计算机视觉任务 计算机视觉三大基础任务&#xff1a;分类、检测、分割。 分割分为两种&#xff1a;语义分割&#xff08;Semantic Segmentation&#xff09;、实例分割&#xff08…
阅读更多...
【Node.js实战】一文带你开发博客项目之Express重构（博客的增删查改、morgan写日志）

【Node.js实战】一文带你开发博客项目之Express重构（博客的增删查改、morgan写日志）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…
阅读更多...
Java之并发编程（二）

Java之并发编程（二）

二、Java内存模型&#xff08;重要&#xff09; 1. CPU缓存模型 1.1 CPU缓存 CPU缓存是为了解决 CPU处理速度和内存处理速度不对等的问题。&#xff08;类比&#xff1a;缓存如Redis是为了解决程序处理速度和访问常规关系型数据库速度不对等的问题&#xff09; 内存缓存是为…
阅读更多...
UDS诊断系列介绍16-DTC状态位介绍

UDS诊断系列介绍16-DTC状态位介绍

本文框架1. 系列介绍2.各状态位逻辑介绍2.0 Bit0(TestFailed)置位逻辑2.1 Bit1(TestFailedThisOperationCycle)置位逻辑2.2 Bit2(PendingDTC)置位逻辑2.3 Bit3(ConfirmedDTC)置位逻辑2.4 Bit4(TestNotCompletedSinceLastClear)置位逻辑2.5 Bit5(TestFailedSinceLastClear)置位逻…
阅读更多...
网站排名下降怎么恢复（网站降权的原因如何知道）

网站排名下降怎么恢复（网站降权的原因如何知道）

网站降权后恢复网站排名的方法 对于我们很多SEO新手来说&#xff0c;降权可能是不可避免的&#xff0c;但很多时候是因为我们的无知或粗心大意导致网站降权&#xff0c;从延长排名周期到导致网站进入沙盒效应&#xff0c;所以我们的网站降权后并非无法恢复。很多时候&#xff…
阅读更多...
【逆向分析】静态分析_Navtive_小计

【逆向分析】静态分析_Navtive_小计

静态分析so小计 源APK https://github.com/eternalsakura/ctf_pwn/blob/master/android%E9%80%86%E5%90%91/mobicrackNDK.apk jadx 通过源码发现关键函数在 public native boolean testFlag(String str);static {System.loadLibrary("mobicrackNDK");}所以要看na…
阅读更多...
【C++】入门（上）

【C++】入门（上）

本期博客给大家带来的全是干货&#xff0c;慢慢享用吧~C入门主要是一些对C语言不足的语法补充&#xff0c;废话不多说直接上干货&#xff1a;一、C的输出和输入1.1 输出在C上我们要想在屏幕&#xff08;控制台&#xff09;上进行一些内容的输出可以使用关键字&#xff1a;cout具…
阅读更多...
MoCo解读

MoCo解读

MoCo方法由何凯明团队提出&#xff0c;是无监督对比学习的代表作。经过MoCo预训练的视觉表征迁移到各种下游任务时&#xff0c;其效果超过了有监督预训练模型。 两点创新 对比学习的思想是将相似的样本距离拉近&#xff0c;不相似的样本距离拉远。对比学习主要在两方面进行设计…
阅读更多...
JavaEE13-MyBatis查询数据库

JavaEE13-MyBatis查询数据库

前言&#xff1a;前面已经学习了Spring,Spring Boot,Spring MVC这3个框架&#xff0c;接下来学习第4个框架MyBatis(国内)&#xff1a;将前端传递的数据存储起来(前身IBatis)或者查询数据库里面的数据。PS&#xff1a;不同版本号区别3.5.1 -> 3.5的第一个版本3.5.10 -> 3.…
阅读更多...
命令执行利用

命令执行利用

数据来源 01 命令执行漏洞 命令执行漏洞- 例子1&#xff08;无防御&#xff09; 示例&#xff1a;&#xff08;我这里使用dvwa靶场做演示&#xff09; 解决靶场响应结果的中文乱码 charsetutf-8&#xff0c;修改为charsetgb2312 把安全等级调到&#xff1a;low&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023