【技術實戰】Vue功能樣式實戰【七】

来源:https://www.cnblogs.com/yyyyfly1/archive/2023/08/13/17626535.html
-Advertisement-
Play Games

博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...


需求實戰一

樣式展示

代碼展示

<template>
    <ARow>
        <ACol style="background-color:#F1F4F5 ">
            <div class="info-card">
                <div class="info-title">
                    數據總和
                </div>
                <div class="info-value">
                    100
                </div>
            </div>

        </ACol>
    </ARow>
</template>
<script setup lang="ts">

</script>
<style scoped>
:deep(.info-card){
    width: 318px;
    height: 116px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
    border-radius: 4px;
}

:deep(.info-title){
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    padding:20px 0 20px 30px;
}

:deep(.info-value){
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    padding:0 0 0 30px;
}
</style>

代碼解讀

這段代碼是一個Vue組件的模板部分，用於展示一個信息卡片。具體解釋如下：

- <template> 標簽用於定義組件的模板部分。
- <ARow> 和 <ACol> 是自定義的組件，用於佈局。<ARow> 表示一行，<ACol> 表示一列。
- <ACol> 標簽內部有一個 style 屬性，用於設置背景顏色為 #F1F4F5。
- <div class="info-card"> 是一個具有 info-card 類名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一個具有 info-title 類名的 div 元素，表示信息卡片的標題。
- <div class="info-value"> 是一個具有 info-value 類名的 div 元素，表示信息卡片的數值。

接下來是 <script setup lang="ts"> 標簽，用於編寫組件的邏輯部分，這裡是空的，沒有任何代碼。

最後是 <style scoped> 標簽，用於定義組件的樣式。:deep() 是一個深度選擇器，用於選擇組件內部的元素。.info-card 表示選擇具有 info-card 類名的元素，設置了寬度、高度、背景顏色、陰影和邊框圓角等樣式。.info-title 和 .info-value 分別表示選擇具有對應類名的元素，設置了字體大小、字體樣式、顏色、行高和內邊距等樣式。

這段代碼的作用是創建一個信息卡片組件，顯示一個標題為 "數據總和"，數值為 "100" 的信息。信息卡片具有特定的樣式，包括背景顏色、陰影和邊框圓角等。

需求實戰二

樣式展示

代碼展示

<template>
    <div class="info-card">
        <div class="info-title">
            數據總和
        </div>
        <div class="info-value">
            100
        </div>
        <div class="animation-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</template>


<script setup lang="ts"></script>


<style scoped>
.info-card {
    width: 318px;
    height: 200px;
    background-color: #17b3a3;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}


.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}


.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #FFFFFF;
}


.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}


.circle {
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}


.circle:nth-child(1) {
    animation-delay: 0.1s;
}


.circle:nth-child(2) {
    animation-delay: 0.2s;
}
.circle:nth-child(3) {
    animation-delay: 0.3s;
}
.circle:nth-child(4) {
    animation-delay: 0.4s;
}
.circle:nth-child(5) {
    animation-delay: 0.5s;
}
.circle:nth-child(6) {
    animation-delay: 0.6s;
}


@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>

代碼解讀

這段代碼是一個Vue組件的模板部分，用於展示一個帶有動畫效果的信息卡片。具體解釋如下：

- <template> 標簽用於定義組件的模板部分。
- <div class="info-card"> 是一個具有 info-card 類名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一個具有 info-title 類名的 div 元素，表示信息卡片的標題。
- <div class="info-value"> 是一個具有 info-value 類名的 div 元素，表示信息卡片的數值。
- <div class="animation-container"> 是一個具有 animation-container 類名的 div 元素，用於容納動畫效果的圓圈。
- <div class="circle"> 是一個具有 circle 類名的 div 元素，表示一個圓圈。

接下來是 <script setup lang="ts"> 標簽，用於編寫組件的邏輯部分，這裡是空的，沒有任何代碼。

最後是 <style scoped> 標簽，用於定義組件的樣式。.info-card 表示選擇具有 info-card 類名的元素，設置了寬度、高度、背景顏色、邊框圓角等樣式，並使用了 Flex 佈局使內容垂直居中。.info-title 和 .info-value 分別表示選擇具有對應類名的元素，設置了字體大小、字體樣式、顏色等樣式。.animation-container 表示選擇具有 animation-container 類名的元素，設置了絕對定位和底部偏移量。.circle 表示選擇具有 circle 類名的元素，設置了圓圈的樣式，包括寬度、高度、背景顏色、邊框圓角、外邊距和動畫效果。

動畫效果使用了 @keyframes 關鍵字定義了一個名為 pulse 的關鍵幀動畫，通過改變透明度和縮放來實現圓圈的閃爍效果。.circle:nth-child(n) 選擇了第 n 個具有 circle 類名的元素，並設置了不同的動畫延遲時間，以實現圓圈的依次閃爍效果。

這段代碼的作用是創建一個帶有動畫效果的信息卡片組件，顯示一個標題為 "數據總和"，數值為 "100" 的信息。信息卡片具有特定的樣式，包括背景顏色、邊框圓角和居中對齊等。同時，信息卡片底部有一組圓圈，通過動畫效果實現閃爍的效果。

需求實戰三

樣式展示

代碼展示

<template>
    <div class="info-card">
        <div class="info-title">
            數據總和
        </div>
        <div class="info-value">
            100
        </div>
        <div class="animation-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</template>


<script setup lang="ts"></script>


<style scoped>
.info-card {
    width: 318px;
    height: 200px;
    background-color: rgba(23, 179, 163, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 20px 20px;

}


.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}


.circle {
    width: 10px;
    height: 10px;
    background-color: #FFD700;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}


.circle:nth-child(1) {
    animation-delay: 0.1s;
}


.circle:nth-child(2) {
    animation-delay: 0.2s;
}
.circle:nth-child(3) {
    animation-delay: 0.3s;
}
.circle:nth-child(4) {
    animation-delay: 0.4s;
}
.circle:nth-child(5) {
    animation-delay: 0.5s;
}
.circle:nth-child(6) {
    animation-delay: 0.6s;
}


@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>

代碼解讀

這段代碼是一個Vue組件的模板部分，用於展示一個帶有動畫效果和背景模糊的信息卡片。具體解釋如下：

- <template> 標簽用於定義組件的模板部分。
- <div class="info-card"> 是一個具有 info-card 類名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一個具有 info-title 類名的 div 元素，表示信息卡片的標題。
- <div class="info-value"> 是一個具有 info-value 類名的 div 元素，表示信息卡片的數值。
- <div class="animation-container"> 是一個具有 animation-container 類名的 div 元素，用於容納動畫效果的圓圈。
- <div class="circle"> 是一個具有 circle 類名的 div 元素，表示一個圓圈。

接下來是 <script setup lang="ts"> 標簽，用於編寫組件的邏輯部分，這裡是空的，沒有任何代碼。

最後是 <style scoped> 標簽，用於定義組件的樣式。.info-card 表示選擇具有 info-card 類名的元素，設置了寬度、高度、背景顏色、背景模糊、邊框圓角、陰影和背景圖案等樣式，並使用了 Flex 佈局使內容垂直居中。.info-title 和 .info-value 分別表示選擇具有對應類名的元素，設置了字體大小、字體樣式、顏色和文字陰影等樣式。.animation-container 表示選擇具有 animation-container 類名的元素，設置了絕對定位和底部偏移量。.circle 表示選擇具有 circle 類名的元素，設置了圓圈的樣式，包括寬度、高度、背景顏色、邊框圓角、外邊距和動畫效果。

動畫效果使用了 @keyframes 關鍵字定義了一個名為 pulse 的關鍵幀動畫，通過改變透明度和縮放來實現圓圈的閃爍效果。.circle:nth-child(n) 選擇了第 n 個具有 circle 類名的元素，並設置了不同的動畫延遲時間，以實現圓圈的依次閃爍效果。

這段代碼的作用是創建一個帶有動畫效果和背景模糊的信息卡片組件，顯示一個標題為 "數據總和"，數值為 "100" 的信息。信息卡片具有特定的樣式，包括背景顏色、背景模糊、邊框圓角、陰影和背景圖案等。同時，信息卡片底部有一組圓圈，通過動畫效果實現閃爍的效果。

需求實戰四

樣式展示

代碼展示

<template>
    <div class="home-component">
        <ARow style="padding:0 0 30px 0">
            <div class="info-card">
                <div class="info-title">
                    數據總和
                </div>
                <transition name="number-transition">
                    <div class="info-value" :class="{ init:init,changed: isNumberIncreased, decreased: isNumberDecreased }">
                        {{ animatedValue }}
                    </div>
                </transition>
                <div class="animation-container">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
            </div>
        </ARow>
        <ARow>
            <ACol span="10">
                <div class="button-container">
                    <a-button class="increase-button" type="primary" @click="addNumber">增加數值</a-button>
                </div>
            </ACol>
            <ACol span="4">
            </ACol>
            <ACol span="10">
                <div class="button-container">
                    <a-button class="decrease-button" type="primary" @click="minNumber">減少數值</a-button>
                </div>
            </ACol>
        </ARow>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const value = ref(100);
const isNumberIncreased = ref(false);
const isNumberDecreased = ref(false);

const animatedValue = ref(value.value);
const init=ref(true)


const addNumber = () => {
        const startValue = value.value;
        const endValue = startValue + 10;
        animateNumber(startValue, endValue);
        value.value = endValue;
        init.value=false;
    isNumberDecreased.value = false;

    isNumberIncreased.value = true;

};

const minNumber = () => {
        const startValue = value.value;
        const endValue = startValue - 10;
        animateNumber(startValue, endValue);
        value.value = endValue;
        init.value=false;
    isNumberIncreased.value = false;

    isNumberDecreased.value = true;
};
const animateNumber = (startValue:any, endValue:any) => {
    const duration = 1000; // 動畫持續時間，單位為毫秒
    const frameRate = 10; // 每秒幀數
    const totalFrames = duration / (1000 / frameRate);
    const frameIncrement = (endValue - startValue) / totalFrames;

    let currentFrame = 0;
    const timer = setInterval(() => {
        currentFrame++;
        animatedValue.value = Math.round(startValue + frameIncrement * currentFrame);

        if (currentFrame === totalFrames) {
            clearInterval(timer);
        }
    }, 1000 / frameRate);
};

watch(value, () => {
    animatedValue.value = value.value;
});
</script>

<style scoped>
.home-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-card {
    width: 318px;
    height: 200px;
    background-color: rgba(23, 179, 163, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
}

.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.info-value.init {
    color: #ffffff;
    transform: scale(1.2);
}
.info-value.changed {
    color: #13c40d;
    transform: scale(1.2);
}
.info-value.decreased {
    color: #eb5766;
    transform: scale(1.2);
}
.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #ffd700;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}

.circle:nth-child(1) {
    animation-delay: 0.1s;
}

.circle:nth-child(2) {
    animation-delay: 0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0.3s;
}

.circle:nth-child(4) {
    animation-delay: 0.4s;
}

.circle:nth-child(5) {
    animation-delay: 0.5s;
}

.circle:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.button-container {
    display: flex;
    justify-content: center;
    padding: 30px 0;
    animation: bounce 2s infinite;
    animation-delay: 1s;
}

.increase-button,
.decrease-button {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: none;
    transform: scale(1.05) rotate(360deg);
    transition: transform 1s;
    border-radius: 5px;
}

.increase-button {
    background-color: #38b2ac;
    margin-right: 10px;
}

.decrease-button {
    background-color: #eb5766;
    margin-left: 10px;
}

.increase-button:hover,
.decrease-button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
</style>

代碼解讀

這段代碼是一個Vue組件的模板部分，用於展示一個帶有動畫效果和交互功能的信息卡片。具體解釋如下：

- <template> 標簽用於定義組件的模板部分。
- <div class="home-component"> 是一個具有 home-component 類名的 div 元素，表示整個組件的容器。
- <ARow> 和 <ACol> 是自定義的組件，用於佈局。<ARow> 表示一行，<ACol> 表示一列。
- <div class="info-card"> 是一個具有 info-card 類名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一個具有 info-title 類名的 div 元素，表示信息卡片的標題。
- <transition> 標簽用於添加過渡效果，name 屬性指定過渡效果的名稱。
- <div class="info-value"> 是一個具有 info-value 類名的 div 元素，表示信息卡片的數值。使用了動態綁定 :class 來根據條件添加不同的類名，實現數值變化時的樣式變化。
- {{ animatedValue }} 是一個插值表達式，用於顯示動態綁定的 animatedValue 變數的值。
- <div class="animation-container"> 是一個具有 animation-container 類名的 div 元素，用於容納動畫效果的圓圈。
- <div class="circle"> 是一個具有 circle 類名的 div 元素，表示一個圓圈。

接下來是 <script setup lang="ts"> 標簽，用於編寫組件的邏輯部分。通過 import 導入了 ref 和 watch 方法，用於創建響應式數據和監聽數據變化。定義了一些變數和方法，包括 value、isNumberIncreased、isNumberDecreased、animatedValue、init、addNumber、minNumber 和 animateNumber。addNumber 方法用於增加數值，minNumber 方法用於減少數值，animateNumber 方法用於實現數值變化的動畫效果。使用 watch 監聽 value 的變化，並更新 animatedValue 的值。

最後是 <style scoped> 標簽，用於定義組件的樣式。.home-component 表示選擇具有 home-component 類名的元素，設置了居中對齊等樣式。.info-card 表示選擇具有 info-card 類名的元素，設置了寬度、高度、背景顏色、背景模糊、邊框圓角、陰影和背景圖案等樣式。.info-title 和 .info-value 分別表示選擇具有對應類名的元素，設置了字體大小、字體樣式、顏色和文字陰影等樣式。.info-value.init、.info-value.changed 和 .info-value.decreased 分別表示根據條件添加的類名，用於實現數值變化時的樣式變化。.animation-container 表示選擇具有 animation-container 類名的元素，設置了絕對定位和底部偏移量。.circle 表示選擇具有 circle 類名的元素，設置了圓圈的樣式，包括寬度、高度、背景顏色、邊框圓角、外邊距和動畫效果。

動畫效果使用了 @keyframes 關鍵字定義了一個名為 pulse 的關鍵幀動畫，通過改變透明度和縮放來實現圓圈的閃爍效果。.circle:nth-child(n) 選擇了第 n 個具有 circle 類名的元素，並設置了不同的動畫延遲時間，以實現圓圈的依次閃爍效果。

這段代碼的作用是創建一個帶有動畫效果和交互功能的信息卡片組件。信息卡片顯示一個標題為 "數據總和"，數值初始值為 "100"，並根據用戶點擊增加或減少數值，同時顯示數值的變化動畫效果。信息卡片具有特定的樣式，包括背景顏色、背景模糊、邊框圓角、陰影和背景圖案等。同時，信息卡片底部有一組圓圈，通過動畫效果實現閃爍的效果。

在黑夜裡夢想著光，心中覆蓋悲傷，在悲傷里忍受孤獨，空守一絲溫暖。 我的淚水是無底深海，對你的愛已無言，相信無盡的力量，那是真愛永在。 我的信仰是無底深海，澎湃著心中火焰，燃燒無盡的力量，那是忠誠永在。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SpringBoot3資料庫集成
    項目工程中，集成資料庫實現對數據的增曬改查管理，是最基礎的能力，通常涉及三個基礎組件：連接池，持久層框架，數據源。 ...
  • 3.0 Python 迭代器與生成器
    當我們需要處理一個大量的數據集合時，一次性將其全部讀入記憶體並處理可能會導致記憶體溢出。此時，我們可以採用迭代器`Iterator`和生成器`Generator`的方法，逐個地處理數據，從而避免記憶體溢出的問題。迭代器是一個可以逐個訪問元素的對象，它實現了`python`的迭代協議，即實現了`__iter... ...
  • quarkus依賴註入之十三：其他重要知識點大串講(終篇)
    通過編碼實戰瞭解quarkus攔截器的另一個高級特性：禁用類級別攔截器，這樣可以避免類級別和方法級別攔截器的疊加衝突 ...
  • 野火stm32指南者開發板點亮LED
    [toc] ### 1.晶元手冊中的LED電路圖 ![圖1](https://img-blog.csdnimg.cn/34c2a95aa89c4cbe8a7904429d889564.png) ### 2.官網手冊 ![圖2](https://img-blog.csdnimg.cn/e9b1131d ...
  • linux進階：設備號
    設計字元設備 文件系統調用系統IO的內核處理過程 在Linux文件系統管理中，當應用程式調用open函數時，內核會根據文件路徑找到文件的索引結點（inode），為文件分配文件描述符和文件對象，並根據打開模式和許可權等參數進行相應的操作和設置。 硬體層原理 思路：把底層寄存器配置操作放在文件操作介面里， ...
  • 機器人編程教程3探索Raspberry Pi
    前面講了Centos如何安裝telnet遠程，這次分享Ubuntu系統如何安裝遠程telnet，作為咱們運維備用遠程途徑 一、下載和安裝 查看系統版本：Ubuntu 22.04.1 LTS 線上安裝： apt install telnet telnetd openbsd-inetd 離線安裝： 離線 ...
  • MySQL中的鎖機制
    > 拋磚引玉：多個查詢需要在同一時刻進行數據的修改，就會產生併發控制的問題。我們需要如何避免寫個問題從而保證我們的資料庫數據不會被破壞。 ## 鎖的概念 讀鎖是共用的互相不阻塞的。多個事務在聽一時刻可以同時讀取同一資源，而相互不幹擾。 寫鎖的排他的。一個寫鎖會阻塞其他寫鎖或讀鎖。出於安全考慮只有這樣 ...
  • 【原】無腦操作：基於CentOS 7.9搭建國產資料庫 南大通用GBase 8a 單機環境
    CentOS 7.9 環境的安裝不再贅述，不清楚可以參看之前的文章：https://www.cnblogs.com/iflytek/p/14403664.html 1、準備GBase 8a的安裝包：GBase8a-NoLicense-Free-8.6.2_build43-R7-redhat7.3-x ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類