雲間玉兔,自出機抒,從零開始製作Web插件網頁特效小兔子組件(小掛件widget),基於原生CSS/NPM

来源:https://www.cnblogs.com/v3ucn/archive/2023/01/12/17047161.html
-Advertisement-
Play Games

著意登樓瞻玉兔,何人張幕遮銀闕?又到了一年一度的網頁小掛件環節,以往我們都是集成別人開源的組件,但所謂熟讀唐詩三百首,不會做詩也會吟,熟讀了別人的東西,做幾首打油詩也是可以的,但若不能自出機抒,卻也成不了大事,所以本次我們從零開始製作屬於自己的網頁小掛件,博君一曬。 玉兔主題元素繪製 成本最低的繪製 ...


著意登樓瞻玉兔,何人張幕遮銀闕?又到了一年一度的網頁小掛件環節,以往我們都是集成別人開源的組件,但所謂熟讀唐詩三百首,不會做詩也會吟,熟讀了別人的東西,做幾首打油詩也是可以的,但若不能自出機抒,卻也成不了大事,所以本次我們從零開始製作屬於自己的網頁小掛件,博君一曬。

玉兔主題元素繪製

成本最低的繪製方式是使用純CSS,不依賴任何圖片和三方庫,首先創建繪製容器:

<div id="rabbit_box">  
    
  
  
</div>

由於是小掛件,我們首先將容器固定在右下角:

#rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

這裡加了一層filter濾鏡,可以讓玉兔更加立體。

考慮到復用性和可移植性,將主題元素動態添加到容器中:

function rabbit_init(){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
     
  
}  
  
rabbit_init()

這裡玉兔元素由八個小組件構成,分別是頭部,四肢,四爪,兩隻耳朵,眼睛,尾巴以及嘴。

隨後設置CSS樣式:

.rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }

兔子身體元素通過border-radius來獲得圓潤的曲線,同時使用transform旋轉元素得到一個適合的角度。最後通過box-shadow屬性來設置顏色,顏色可以自定義,如果沒有自定義則使用預設值#D2DAEE,註意旋轉角度需要指定單位:deg。

接著繪製頭部:

.rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }

這裡通過::before 和 ::after 偽元素在兔子頭部元素的前面或後面插入內容,頭部前面繪製兔嘴,後面則插入兔子眼睛,之所以這樣控制,是因為可以靈活的使用box-shadow填充顏色。

接著繪製耳朵:

.rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }

@-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  } 

這裡通過-webkit-animation屬性讓兔子左右耳在3秒內進行來回擺動,達到一種動態效果,註意左耳內側顏色固定為:#F3E3DE,同時動畫會影響元素的佈局,需要註意元素的寬高。

最後就是四肢和尾巴:

.rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }

這裡四肢和四爪的顏色應該有差異,四肢顏色可以自定義,四爪固定為白色,以達到“四蹄踏雪”的效果。

接著改造初始化函數,使其可以動態更改顏色:

function rabbit_init(color=null,pos=null){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
}  
  
rabbit_init("pink")

最終效果:

開源發佈

現在我們將這個開源特效打包上線,首先創建項目目錄:

mkdir rabbit

隨後將特效的樣式CSS代碼以及JS代碼分別抽離出來:rabbit.css:

.rabbit {  
    position: relative;  
  }  
  .rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }  
  .rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }  
  .rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }  
  .rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }  
    
  @-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  
  #rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

rabbit.js代碼:

(function (name, context, fn) {  
    if (typeof module != 'undefined' && module.exports) {  
        // Node 環境  
        module.exports = fn();  
    } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])) {  
        // Require.js 或 Sea.js 環境  
        define(fn);  
    } else {  
        // client 環境  
        context[name] = fn();  
    }  
})('rabbit_init', this, function () {  
    return function (color=null,pos=null) {  
          
  
        var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
  
    }  
});

保存在項目的lib目錄。

首先將項目提交到Github: https://github.com/zcxey2911/rabbit

隨後運行命令填寫NPM配置:

npm init

entry point 配置項填寫你的入口文件:

entry point: ./lib/rabbit.js

登錄NPM賬號,隨後發佈:

npm login  
npm publish

登錄之前,最好將切換回預設源,否則無法登錄:

npm config set registry=https://registry.npmjs.com

發佈成功後,查看發佈內容:https://www.npmjs.com/package/rabbit-widget

開源庫引入和使用

首先需要引入模塊,可以使用 CDN 直接引入或者通過 NPM 包的形式安裝。

直接引入:

<!-- https://cdn.jsdelivr.net/gh/zcxey2911/[email protected]/lib/rabbit.css -->  
<!-- https://cdn.jsdelivr.net/gh/zcxey2911/[email protected]/lib/rabbit.js -->  
  
<link  
  rel="stylesheet"  
  href="https://cdn.jsdelivr.net/gh/zcxey2911/[email protected]/lib/rabbit.css"  
/>  
  
<div id="rabbit_box">  
</div>  
  
<script>  
  
function init_rabbit(){  
  
 rabbit_init("pink","20%");  // 粉色 高度20%  
  
 //rabbit_init(); //預設顏色 預設位置  
  
}  
  
</script>  
  
  
<script  
  async  
  onload="init_rabbit()"  
  src="https://cdn.jsdelivr.net/gh/zcxey2911/[email protected]/lib/rabbit.js"  
></script>

NPM 包的形式安裝:

// npm install --save rabbit-widget  
import 'rabbit-widget/lib/rabbit.css';  
  
var rabbit_init = require('rabbit-widget');  
  
rabbit_init();

如果使用NPM導入模塊的形式引入,請確保頁面載入完畢之後執行再執行rabbit_init();,否則會報錯:Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')。

這裡以Vue.js3.0組件為例子:

<template>  
  <a-layout class="layout">  
    <a-layout-header>  
      <div class="logo" />  
  
      <ad_header />  
        
  
  
    </a-layout-header>  
    <a-layout-content style="padding: 0 50px">  
      <a-breadcrumb style="margin: 16px 0">  
        <a-breadcrumb-item>廣告平臺</a-breadcrumb-item>  
        <a-breadcrumb-item>首頁</a-breadcrumb-item>  
  
      </a-breadcrumb>  
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">  
  
  
        這裡是首頁  
  
  
        <div id="rabbit_box"></div>  
  
  
    </div>  
    </a-layout-content>  
    <a-layout-footer style="text-align: center">  
      線上廣告平臺  
    </a-layout-footer>  
  </a-layout>  
</template>  
  
<script>  
  
import ad_header from './ad_header';  
  
import 'rabbit-widget/lib/rabbit.css';  
  
var rabbit_init = require('rabbit-widget');  
  
  
export default {  
 data() {  
    return {  
  
       
  
    }  
  },  
  //聲明子組件  
  components:{  
  
    'ad_header':ad_header  
  
  
  },  
  methods:{  
  
     
  
  
  },  
  created(){  
  
  
    this.$nextTick(() => {  
    console.log("頁面載入完啦~")  
  
    rabbit_init();  
})  
  
  
  }  
  
}  
</script>  
<style>  
.site-layout-content {  
  min-height: 280px;  
  padding: 24px;  
  background: #fff;  
}  
#components-layout-demo-top .logo {  
  float: left;  
  width: 120px;  
  height: 31px;  
  margin: 16px 24px 16px 0;  
  background: rgba(255, 255, 255, 0.3);  
}  
.ant-row-rtl #components-layout-demo-top .logo {  
  float: right;  
  margin: 16px 0 16px 24px;  
}  
  
[data-theme='dark'] .site-layout-content {  
  background: #141414;  
}  
</style>

項目中引入效果:

結語

奉上項目代碼,與眾親同饗:https://github.com/zcxey2911/rabbit https://www.npmjs.com/package/rabbit-widget ,最後祝各位鄉親祥瑞玉兔,人機平安,願諸君2023年武運昌隆,前端一統。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:讓我們看一個示例,展示在記憶體消耗方面,採用流的編程思路帶來的巨大優越性。 本文分享自華為雲社區《使用 Node.js Stream API 減少伺服器端記憶體消耗的一個具體例子》,作者:Jerry Wang 。 HTTP 響應對象(上面代碼中的 res)也是一個可寫流。這意味著如果我們有一個表示 ...
  • upload上傳組件的使用方法 上傳圖片後自動上傳(也可以手動上傳),圖片上傳成功後由後端返回特定圖片地址,在表單提交後將表單數據同圖片地址一併返回即可完成圖片上傳功能。 組件HTML <!-- 上傳圖片 --> <div style="margin: 4px 0">圖片上傳(僅支持jpg、png格 ...
  • 參考sapui5 TreeTable控制項的示例,我們發現所有的可展開列(即所謂的hierarchical data column)預設都在第一列,而且API中並沒有給出對應的屬性或方法來重新指定可展開列在table中的位置。 我們可以編寫一個自定義控制項,使其繼承sapui5的TreeTable控制項, ...
  • AngularJS——初識AngularJS AngularJS是什麼 AngularJS是Google開源的一款前端JS結構化框架,它通過對前端開發進行分層,極好地規範了前端開發的風格——它將前端開發分為Controller層、Service層、DAO層和Model層。其中,Model對象與HTM ...
  • JavaScript 面向切麵編程 (AOP) 是一種編程思想和實現方式,它將一些關註點(例如日誌記錄、安全性檢查、性能監控等)從主題對象中分離出來,通過“橫切關註點”的方式在程式中動態地織入這些關註點。這樣可以避免在主題對象中嵌入大量的關註點代碼,使得代碼更加簡潔和可維護。 ...
  • CSS Grid 佈局是一種二維佈局方式,可以將頁面分成行和列,併在其中放置元素。使用 Grid 佈局時,需要定義網格容器和網格項目。 ...
  • Axios 1.基本說明 Axios是一個基於promise的網路請求庫,作用於node.js和瀏覽器中。它是 isomorphic 的 (即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生node.js http 模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest ...
  • JavaScript 是一種基於原型繼承的語言。在 JavaScript 中,對象是通過原型鏈來繼承屬性和方法的。 一、原型 每一個對象都有一個 proto 屬性,該屬性指向該對象的原型。原型本質上也是一個對象,所有的對象都擁有一個原型,除了 Object.prototype。 JavaScript ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...