自学内容网 自学内容网
自学内容网 > 正文

个人博客静态样式部署

🕗 发布于 2024-11-10 23:07 javascript  前端  开发语言  

首页部分

views/layout/layoutwave.vue

<script setup>
import router from '@/router';
import { ref, onMounted, onUnmounted } from 'vue'
import '@/assets/img/icons/font_p81061dps7l/iconfont.css'

const canvas = ref(null)
const canvasFa = ref(null)
const fish = ref(null)
const { innerWidth, innerHeight } = window
// 小鱼是否被点击
const blue = '#41346A'

// let isShow = 'true' 没有正确创建响应式变量
const isShow = ref(true)
// 六个盒子的
const boxShow = ref(false) 
let singleRemove = false

// 绘制波浪图
onMounted(() => {
  // 绘制曲线
  if (canvas.value) {
    // 在初次进入页面的时候要有一个初始的曲线
    canvasSize()
    addListen()
  }
})

onUnmounted(() => {
  removeListen()
})

// 设置画布大小
function canvasSize() {
  const canvasWidth = canvasFa.value.clientWidth
  const canvasHeight = canvasFa.value.clientHeight

  canvas.value.width = canvasWidth
  canvas.value.height = canvasHeight

  let xOffset = 0
  let speed = 0.1
  requestAnimationFrame(() => draw(canvasWidth, canvasHeight, xOffset, speed))
}

// 每帧
function draw(canvasWidth, canvasHeight, xOffset, speed) {
  const ctx = canvas.value.getContext('2d')
  ctx.strokeStyle = blue
  // 清除上一帧的图形
  ctx.clearRect(0, 0, canvasWidth, canvasHeight)

  // 图形重绘
  drawSin(ctx, xOffset, canvasWidth, canvasHeight)
  // 递归调用 -> 等到下一帧进行重绘
  xOffset += speed
  requestAnimationFrame(() => draw(canvasWidth, canvasHeight, xOffset, speed))
}

// 正弦
function drawSin(ctx, xOffset, canvasWidth, canvasHeight) {
  const points = []
  const startX = 0
  const waveHeight = 80
  const cycles = 4 // 四个周期
  const waveWidth = (2 * Math.PI) / (canvasWidth / cycles) // 计算每个周期的宽度

  ctx.beginPath()
  for (let x = startX; x < startX + canvasWidth; x += 20 / canvasWidth) {
    let y = waveHeight * Math.sin(waveWidth * x + xOffset)
    y += canvasHeight / 6
    points.push([x, y])
    ctx.lineTo(x, y)
  }
  // 封闭路径
  ctx.lineTo(canvasWidth, canvasHeight)
  ctx.lineTo(startX, canvasHeight)
  ctx.closePath()
  ctx.fillStyle = blue
  ctx.fill()
  ctx.stroke()
}

// 获取卷去的高度
function handleScroll() {
  const scrollTop = document.documentElement.scrollTop
  // console.log(profile.value.offsetHeight , canvasFa.value.offsetHeight); 这里使用offsetHeight可以但height不可以
  // 以及当我改变页面大小，这回重新调用handleScroll函数，打印对应页面大小的元素的宽高
  if (scrollTop >= canvasFa.value.clientTop + canvasFa.value.offsetHeight) {
    isShow.value = false
    console.log(isShow);
    // 这里我如果想要false之后不再侦听scroll怎么办
    removeListen()
  }
}

// 添加事件监听函数
function addListen() {
  if (!singleRemove) {
    window.addEventListener('resize', canvasSize)
    // 卷的高度
    window.addEventListener('scroll', handleScroll)
    singleRemove = true
  }
}

// 移除事件函数
function removeListen() {
  if (singleRemove) {
    window.removeEventListener('resize', canvasSize)
    window.removeEventListener('scroll', handleScroll)
    singleRemove = false
  }
}

// 页面下滑按钮小鱼
function fishDown() {

  fish.value.style.transform = 'rotateX(180deg)'
  console.log(innerHeight, innerWidth);
  window.scrollTo(0, document.documentElement.scrollHeight)
  // window.scrollTo({top: document.documentElement.scrollHeight, behavior: 'smooth'})

  // 到达底部,盒子动画
  boxShow.value = true
}
</script>

<template>
  <!-- 波浪 -->
   <div class="head-wavefish">
    <div ref="canvasFa" class="header" v-if="isShow">
      <canvas ref="canvas"></canvas>
    </div>
    <div class="tip" v-if="isShow"><B>点 击 翻 转 小 鱼&nbsp;</B>
      <i class="iconfont icon-yewu_yu" style="font-size: 2.8333rem;" @click="fishDown" ref="fish"></i>
    </div>
  </div>
  <div class="intro">
    <Transition name="introBox3">
      <div class="introEvery3" ref="introEvery33" v-if="boxShow" style="background-color: #BFACDA;color: #41346A;" @click="router.push('/project')"><span>项 目</span></div>
    </Transition>

    <Transition name="introBox2">
      <div class="introEvery2" ref="introEvery22" v-if="boxShow"  style="background-color: #9179B7;"  @click="router.push('/article')"><span>文 章</span></div>
    </Transition>

    <Transition name="introBox1">
      <div class="introEvery1" ref="introEvery11" v-if="boxShow">3</div>
    </Transition>

    <Transition name="introBox1">
    <div class="introEvery1" ref="introEvery1" v-if="boxShow">4</div>
    </Transition>

    <Transition name="introBox2">
      <div class="introEvery2" ref="introEvery2" v-if="boxShow" style="background-color: #9179B7;" @click="router.push('/pigeonhole')"><span>归 档</span></div>
    </Transition>

    <Transition name="introBox3">
      <div class="introEvery3" ref="introEvery3" v-if="boxShow" style="background-color: #BFACDA;color: #41346A;" @click="router.push('/friends')"><span>友 链</span></div>
    </Transition>
  </div>
</template> 

<style scoped>

.header {
  position: relative;
  width: 100%;
  height: 30.6667rem;
  /* background-color: aqua; */
  transform: rotateZ(180deg);
}

.tip{
  display: flex;
  position: absolute;
  width: 20.6667rem;
  top: 18.3333rem;
  left: 50%;
  font-size: 1.9333rem;
  color: rgba(254, 254, 254, 0.573);
  transform: translateX(-50%);
  transition:all 0.4s;
  border-radius: 20px;
  align-items: center;
  justify-content: center;

  .icon-yewu_yu{
    display: inline-block;
    transition:all 0.4s;
  }

  &:hover{
    color: rgba(255, 255, 255, 0.826);
    box-shadow: .3333rem .2333rem .7667rem .1033rem white;

  }
}

/* 上滑主体部分 */
.intro {
  display: flex;
  height: 52.6667rem;
  justify-content: space-between;
  align-items: flex-end;

  [class^="introEvery"] {
    width: 12.6667rem;
    height: 8.6667rem;
    background-color: #41346A;
    margin-right: .08rem;
    border-radius: 1.1333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* opacity: 0; */
    font-size: 1.2667rem;
    color: rgb(215,206,249);

    &:hover{
      cursor: pointer;
      &:nth-child(-n+3){
        box-shadow: -.6333rem .8333rem .7667rem .1033rem rgba(255, 255, 255, 0.571);
      }
      &:nth-last-child(-n+3){
        box-shadow: .6333rem .8333rem .7667rem .1033rem rgba(255, 255, 255, 0.571);
      }
      /* border: .1333rem solid #8b41e6e0; */
    }
  }

  .introEvery1{
    margin: 0 .8667rem;
    transform: translateY(-26.6667rem) scale(1);
  }

  .introEvery2{
    transform: translateY(-14.6667rem) scale(1);
  }
  
  .introEvery3{
    transform: translateY(-2.6667rem) scale(1);
    margin: 0 1.333rem;
  }
}

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  100%{
    transform: translateY(-26.6667rem) scale(1);
    opacity: 1;
  }
}

@keyframes up2 {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  100%{
    transform: translateY(-14.6667rem) scale(1);
    opacity: 1;
  }
}

@keyframes up3 {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  100%{
    transform: translateY(-2.6667rem) scale(1);
    opacity: 1;
  }
}

.introBox1-enter-active{
  animation: up 1.7s;
}

.introBox2-enter-active{
  animation: up2 1.7s;
}

.introBox3-enter-active{
  animation: up3 1.6s;
}
</style>

文章页面

<script setup>
import { ref} from 'vue'
// import axios from 'axios'
import baseNavigation from '@/components/baseNavigation.vue';
import '@/assets/img/icons/font_a32wm011gk/iconfont.css'
// document.querySelector('html').setAttribute('style', 'height: 100%;')
document.querySelector('html').style.height = '100%'
document.querySelector('body').style.height = '100%'
document.querySelector('.profile').setAttribute('style','background-color: #171717;')
document.getElementById('app').setAttribute('style', 'height:100%;display: flex;flex-direction: column;')

const contentTypeShow = ref(false)
</script>

<template>
  <baseNavigation>
    <template #type-list>
      <h2 class="type-title">栏目</h2>
      <ul class="type-all">
        <!-- 这里是否可以包装成数据动态渲染呢 -->
        <li @click="contentTypeShow = !contentTypeShow">前端</li>
        <li @click="contentTypeShow = !contentTypeShow">请期待</li>
        <li @click="contentTypeShow = !contentTypeShow">请期待</li>
        <li @click="contentTypeShow = !contentTypeShow">请期待</li>
        <li @click="contentTypeShow = !contentTypeShow">请期待</li>
        <li @click="contentTypeShow = !contentTypeShow">请期待</li>
        <li @click="contentTypeShow = !contentTypeShow">请期待</li>
      </ul>
    </template>
    <template #type-every>
      <div class="type-every" v-show="contentTypeShow">
      <ul class="type-every-content">
        <!-- 这里是佛瑞根据数据的不同渲染出不同的效果 -->
         <!-- 超过多少个出现下滑 -->
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
        <li>vue</li>
      </ul>
      <div class="moveDown">
        <i class="iconfont icon-xialia-jiantou"></i>
      </div>
    </div>
    </template>
    <template #router-content>
      <div class="article-content">
        <div class="content1 contentBoxShow">
          <div class="box-wape">
            <span class="postTime" style="font-size: .6667rem;color: rgba(215, 206, 249, 0.589);">2024</span>
            <h3 style="margin: .1rem 0;">标题</h3>
            <span class="briefContent">哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
          </div>
        </div>
                
        <div class="content1 contentBoxShow">
          <div class="box-wape">
            <span class="postTime" style="font-size: .6667rem;color: rgba(215, 206, 249, 0.589);">2024</span>
            <h3 style="margin: .1rem 0;">标题</h3>
            <span class="briefContent">哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
          </div>
        </div>
                
        <div class="content1 contentBoxShow">
          <div class="box-wape">
            <span class="postTime" style="font-size: .6667rem;color: rgba(215, 206, 249, 0.589);">2024</span>
            <h3 style="margin: .1rem 0;">标题</h3>
            <span class="briefContent">哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
          </div>
        </div>
      </div>
    </template>
    
  </baseNavigation>
</template>

<style scoped lang="less">
.type-title{
  flex: 1;
  color: rgb(220, 214, 240);
  /* margin-top: 20px; */
}
.type-all{
  flex: 7;
  display: flex;
  flex-direction: column;    

  li{
    cursor: pointer;
    flex: 1;
  }
}

.type-every{
  flex: 0.8;
  height: 100%;
  background: #171717;
  display: flex;
  flex-direction: column;
  /* align-items: space; */
  justify-content: space-between;
  .type-every-content{
    flex-grow: 1;
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    justify-content: space-around;
    align-items: center; 
  }

.moveDown{
  display: flex;
  justify-content: center;
  padding-bottom: .1067rem;
  .iconfont{
    font-size: 1.2rem;
    &:hover{
    color: white;
  }
  }
  
}
}
.article-content{
  height: 100%;
  flex: 6;
  background: linear-gradient(to right, #3d3264 5%, #bf9bd954);
  border-top-left-radius: 150px;
  display: flex; 
  flex-wrap: wrap; 
  overflow: auto;

  [class^="content"]{
    width: 50%;
    height: 11rem;
    display: flex;
    align-items: center;

    .box-wape{
      position: relative;
      z-index: 9;
      width: 100%;
      height: 8.3333rem;
      margin-right:1.5333rem;
      background: linear-gradient(to top left, #ffffff4d,#bf9bd909, #bf9bd900);
      border-bottom-right-radius: 3.6667rem;
      font-size: .75rem;
      /* padding-left: 1.2333rem; */
      padding: .4333rem 2.2333rem 0;

      .briefContent{
        color: rgba(215, 206, 249, 0.589);
        overflow: hidden;
        text-overflow: ellipsis;
        /* 以下代码有兼容性问题 */
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*限制在一个块元素显示的文本的行数*/
        -webkit-line-clamp: 4;
        /*设置或检索伸缩盒对象的子元索的排列方式*/
        -webkit-box-orient: vertical;
      }
   }
 }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar
  {
    width: 16px;
    height: 10px;
    /* background: linear-gradient(to top, #3d3264 5%, #bf9bd954); */
    background-color: transparent;
  }
  
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb
  {
    width: 10px;
    background-color: #171717;
  }
}

</style>

友链页面

<script setup>
import baseNavigation from '@/components/baseNavigation.vue';
import friendsNavigation from './components/friendsNavigation.vue';
</script>

<template>
  <baseNavigation>
    <template #type-list></template>
    <template #router-content>
      <div class="friends-content">
        <friendsNavigation>
          <template #title-name>
            X U P T
          </template>
        </friendsNavigation>
        <friendsNavigation>
          <template #title-name>
            Internet
          </template>
        </friendsNavigation>
      </div>
    </template>
  </baseNavigation>
</template>

<style scoped lang="less">
.friends-content{
  height: 100%;
  background: linear-gradient(to right, #3d3264 5%, #bf9bd954);
  border-top-left-radius: 150px;
  overflow: auto;
  &::-webkit-scrollbar{
    width: 16px;
    height: 10px;
    background-color: transparent;
  }
}
</style>

归档页面

<script setup>
import baseNavigation from '@/components/baseNavigation.vue';
import yearPigeonhole from './components/yearPigeonhole.vue';
</script>

<template>
  <baseNavigation>
    <template #router-content>
      <div class="pigeonhole-content">
        <yearPigeonhole>
          <template #pigeYear>2024</template>
        </yearPigeonhole>
        <yearPigeonhole>
          <template #pigeYear>2023</template>
        </yearPigeonhole>
        <yearPigeonhole>
          <template #pigeYear>2022</template>
        </yearPigeonhole>
      </div>
    </template>
  </baseNavigation>
</template>

<style scoped>
.pigeonhole-content{
  height: 100%;
  background: linear-gradient(to right, #3d3264 5%, #bf9bd954);
  border-top-left-radius: 150px;
  overflow: auto;
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar
  {
    width: 16px;
    height: 10px;
    /* background: linear-gradient(to top, #3d3264 5%, #bf9bd954); */
    background-color: transparent;
  }
  
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb
  {
    width: 10px;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
    background-color: #171717;
  }
}
</style>

博客上线链接

目前路由配置有问题刚进去不是首页，点击一下其他功能才正常但到不了首页

 三元Blog


原文地址：https://blog.csdn.net/2301_79980806/article/details/143664863

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • Python_爬虫2_爬虫引发的问题

    约束性：Robots协议是建议但非约束性，网络爬虫可以不遵守，但存在法律风险。Robots Exclusion Standard 网络爬虫排除标准。网络爬虫：自动或人工识别robots.txt，再进行

    阅读更多2024-11-17
  • STM32 | 小区环境检测系统

    现在一些智慧小区安装小区环境检测系统，能够将小区当前位置的温度、湿度、光照强度，小区空气质量及自己所在城市所在天气信息实时显示在点阵的LED屏幕上。随着科技的发展，人们的生活水平越来越高，对居住的要求

    阅读更多2024-11-17
  • 力扣-2175、世界排名的变化

    TeamPointsteam_id 包含唯一值。这张表的每一行均包含了一支国家队的 ID，它所代表的国家，以及它在全球排名中的得分。没有两支队伍代表同一个国家。team_id 包含唯一值。这张表的每一

    阅读更多2024-11-17
  • 【Python模拟websocket登陆-拆包封包】

    python模拟访问websocket，完成登陆的功能，细节也是基本的类型转换，构造与js一致的数据包，并发送到sever、

    阅读更多2024-11-17
  • M｜完美的日子

    这个电影有两大争议点，主要的一点是一个东亚的厕所清洁工是否真会有这样的生活，还是说这是作为西方人的导演的意淫呢？这种生活底层劳动人民有是有，少肯定是很少。更深入地批判是，东亚普通民众的生活剪影远没有电

    阅读更多2024-11-17
  • Ubuntu24.04配置安装可视化terminal终端

    其实我想要连接家里的PVE虚拟机，并且去局域网访问各种虚拟机，只要一个占用带宽很小的terminal就可以，于是我就找到了各种可视化terminal终端，也把每个终端都搞了一下，对比一下看哪个好用，结

    阅读更多2024-11-17
  • CI/CD认识

    持续集成是一种开发实践，指团队中的开发人员将代码频繁地（通常每天多次）集成到共享的代码库中，并通过自动化的测试和构建来快速验证代码的正确性。持续交付和持续部署是 CI 的延续，专注于将代码从开发环境推

    阅读更多2024-11-17
  • vue如何实现组件切换

    【代码】vue如何实现组件切换。

    阅读更多2024-11-17
  • 【大数据学习 | flume】flume之常见的channel组件

    Channel是连接Source和Sink的组件，大家可以将它看做一个（数据队列），它可以将事件暂存到内存中也可以持久化到本地磁盘上， 直到Sink处理完该事件，Flume对于Channel，则提供了

    阅读更多2024-11-17
  • 类与对象；

    构造函数是一个特殊的成员函数，名字与类名相同（date类构造函数 date（x，y））创建类类型对象时由编译器自动调用，以保证每个数据成员都有 一个合适的初始值，并且在对象整个生命周期内只调用一次。构

    阅读更多2024-11-17
自学内容网
Copyright © 2015-2024