需求实战一

样式展示

代码展示

  1. <template>
  2.     <ARow>
  3.         <ACol style="background-color:#F1F4F5 ">
  4.             <div class="info-card">
  5.                 <div class="info-title">
  6.                     数据总和
  7.                 </div>
  8.                 <div class="info-value">
  9.                     100
  10.                 </div>
  11.             </div>
  13.         </ACol>
  14.     </ARow>
  15. </template>
  16. <script setup lang="ts">
  18. </script>
  19. <style scoped>
  20. :deep(.info-card){
  21.     width: 318px;
  22.     height: 116px;
  23.     background-color: #FFFFFF;
  24.     box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
  25.     border-radius: 4px;
  26. }
  28. :deep(.info-title){
  29.     font-size: 18px;
  30.     font-family: Microsoft YaHei;
  31.     font-weight: 400;
  32.     color: #333333;
  33.     line-height: 21px;
  34.     padding:20px 0 20px 30px;
  35. }
  37. :deep(.info-value){
  38.     font-size: 36px;
  39.     font-family: Microsoft YaHei;
  40.     font-weight: bold;
  41.     color: #333333;
  42.     line-height: 21px;
  43.     padding:0 0 0 30px;
  44. }
  45. </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" 的信息。信息卡片具有特定的样式，包括背景颜色、阴影和边框圆角等。

需求实战二

样式展示

代码展示

  1. <template>
  2.     <div class="info-card">
  3.         <div class="info-title">
  4.             数据总和
  5.         </div>
  6.         <div class="info-value">
  7.             100
  8.         </div>
  9.         <div class="animation-container">
  10.             <div class="circle"></div>
  11.             <div class="circle"></div>
  12.             <div class="circle"></div>
  13.             <div class="circle"></div>
  14.             <div class="circle"></div>
  15.             <div class="circle"></div>
  16.         </div>
  17.     </div>
  18. </template>
  20. <script setup lang="ts"></script>
  22. <style scoped>
  23. .info-card {
  24.     width: 318px;
  25.     height: 200px;
  26.     background-color: #17b3a3;
  27.     border-radius: 8px;
  28.     display: flex;
  29.     flex-direction: column;
  30.     align-items: center;
  31.     justify-content: center;
  32.     position: relative;
  33. }
  35. .info-title {
  36.     font-size: 24px;
  37.     font-weight: bold;
  38.     color: #FFFFFF;
  39. }
  41. .info-value {
  42.     font-size: 48px;
  43.     font-weight: bold;
  44.     color: #FFFFFF;
  45. }
  47. .animation-container {
  48.     display: flex;
  49.     position: absolute;
  50.     bottom: 25px;
  51. }
  53. .circle {
  54.     width: 10px;
  55.     height: 10px;
  56.     background-color: #FFFFFF;
  57.     border-radius: 50%;
  58.     margin: 0 4px;
  59.     transform: scale(0);
  60.     animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
  61. }
  63. .circle:nth-child(1) {
  64.     animation-delay: 0.1s;
  65. }
  67. .circle:nth-child(2) {
  68.     animation-delay: 0.2s;
  69. }
  70. .circle:nth-child(3) {
  71.     animation-delay: 0.3s;
  72. }
  73. .circle:nth-child(4) {
  74.     animation-delay: 0.4s;
  75. }
  76. .circle:nth-child(5) {
  77.     animation-delay: 0.5s;
  78. }
  79. .circle:nth-child(6) {
  80.     animation-delay: 0.6s;
  81. }
  83. @keyframes pulse {
  84.     0% {
  85.         opacity: 0;
  86.         transform: scale(0);
  87.     }
  88.     50% {
  89.         opacity: 1;
  90.         transform: scale(1);
  91.     }
  92.     100% {
  93.         opacity: 0;
  94.         transform: scale(0);
  95.     }
  96. }
  97. </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" 的信息。信息卡片具有特定的样式，包括背景颜色、边框圆角和居中对齐等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果。

需求实战三

样式展示

代码展示

  1. <template>
  2.     <div class="info-card">
  3.         <div class="info-title">
  4.             数据总和
  5.         </div>
  6.         <div class="info-value">
  7.             100
  8.         </div>
  9.         <div class="animation-container">
  10.             <div class="circle"></div>
  11.             <div class="circle"></div>
  12.             <div class="circle"></div>
  13.             <div class="circle"></div>
  14.             <div class="circle"></div>
  15.             <div class="circle"></div>
  16.         </div>
  17.     </div>
  18. </template>
  20. <script setup lang="ts"></script>
  22. <style scoped>
  23. .info-card {
  24.     width: 318px;
  25.     height: 200px;
  26.     background-color: rgba(23, 179, 163, 0.5);
  27.     backdrop-filter: blur(10px);
  28.     border-radius: 8px;
  29.     display: flex;
  30.     flex-direction: column;
  31.     align-items: center;
  32.     justify-content: center;
  33.     position: relative;
  34.     border: 1px solid rgba(255, 255, 255, 0.2);
  35.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  36.     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);
  37.     background-size: 20px 20px;
  39. }
  41. .info-title {
  42.     font-size: 24px;
  43.     font-weight: bold;
  44.     color: #FFFFFF;
  45.     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  46. }
  48. .info-value {
  49.     font-size: 48px;
  50.     font-weight: bold;
  51.     color: #FFFFFF;
  52.     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  53. }
  55. .animation-container {
  56.     display: flex;
  57.     position: absolute;
  58.     bottom: 25px;
  59. }
  61. .circle {
  62.     width: 10px;
  63.     height: 10px;
  64.     background-color: #FFD700;
  65.     border-radius: 50%;
  66.     margin: 0 4px;
  67.     transform: scale(0);
  68.     animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
  69. }
  71. .circle:nth-child(1) {
  72.     animation-delay: 0.1s;
  73. }
  75. .circle:nth-child(2) {
  76.     animation-delay: 0.2s;
  77. }
  78. .circle:nth-child(3) {
  79.     animation-delay: 0.3s;
  80. }
  81. .circle:nth-child(4) {
  82.     animation-delay: 0.4s;
  83. }
  84. .circle:nth-child(5) {
  85.     animation-delay: 0.5s;
  86. }
  87. .circle:nth-child(6) {
  88.     animation-delay: 0.6s;
  89. }
  91. @keyframes pulse {
  92.     0% {
  93.         opacity: 0;
  94.         transform: scale(0);
  95.     }
  96.     50% {
  97.         opacity: 1;
  98.         transform: scale(1);
  99.     }
  100.     100% {
  101.         opacity: 0;
  102.         transform: scale(0);
  103.     }
  104. }
  105. </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" 的信息。信息卡片具有特定的样式，包括背景颜色、背景模糊、边框圆角、阴影和背景图案等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果。

需求实战四

样式展示

代码展示

  1. <template>
  2.     <div class="home-component">
  3.         <ARow style="padding:0 0 30px 0">
  4.             <div class="info-card">
  5.                 <div class="info-title">
  6.                     数据总和
  7.                 </div>
  8.                 <transition name="number-transition">
  9.                     <div class="info-value" :class="{ init:init,changed: isNumberIncreased, decreased: isNumberDecreased }">
  10.                         {{ animatedValue }}
  11.                     </div>
  12.                 </transition>
  13.                 <div class="animation-container">
  14.                     <div class="circle"></div>
  15.                     <div class="circle"></div>
  16.                     <div class="circle"></div>
  17.                     <div class="circle"></div>
  18.                     <div class="circle"></div>
  19.                     <div class="circle"></div>
  20.                 </div>
  21.             </div>
  22.         </ARow>
  23.         <ARow>
  24.             <ACol span="10">
  25.                 <div class="button-container">
  26.                     <a-button class="increase-button" type="primary" @click="addNumber">增加数值</a-button>
  27.                 </div>
  28.             </ACol>
  29.             <ACol span="4">
  30.             </ACol>
  31.             <ACol span="10">
  32.                 <div class="button-container">
  33.                     <a-button class="decrease-button" type="primary" @click="minNumber">减少数值</a-button>
  34.                 </div>
  35.             </ACol>
  36.         </ARow>
  37.     </div>
  38. </template>
  40. <script setup lang="ts">
  41. import { ref, watch } from 'vue';
  43. const value = ref(100);
  44. const isNumberIncreased = ref(false);
  45. const isNumberDecreased = ref(false);
  47. const animatedValue = ref(value.value);
  48. const init=ref(true)
  50. const addNumber = () => {
  51.         const startValue = value.value;
  52.         const endValue = startValue + 10;
  53.         animateNumber(startValue, endValue);
  54.         value.value = endValue;
  55.         init.value=false;
  56.     isNumberDecreased.value = false;
  58.     isNumberIncreased.value = true;
  60. };
  62. const minNumber = () => {
  63.         const startValue = value.value;
  64.         const endValue = startValue - 10;
  65.         animateNumber(startValue, endValue);
  66.         value.value = endValue;
  67.         init.value=false;
  68.     isNumberIncreased.value = false;
  70.     isNumberDecreased.value = true;
  71. };
  72. const animateNumber = (startValue:any, endValue:any) => {
  73.     const duration = 1000; // 动画持续时间，单位为毫秒
  74.     const frameRate = 10; // 每秒帧数
  75.     const totalFrames = duration / (1000 / frameRate);
  76.     const frameIncrement = (endValue - startValue) / totalFrames;
  78.     let currentFrame = 0;
  79.     const timer = setInterval(() => {
  80.         currentFrame++;
  81.         animatedValue.value = Math.round(startValue + frameIncrement * currentFrame);
  83.         if (currentFrame === totalFrames) {
  84.             clearInterval(timer);
  85.         }
  86.     }, 1000 / frameRate);
  87. };
  89. watch(value, () => {
  90.     animatedValue.value = value.value;
  91. });
  92. </script>
  94. <style scoped>
  95. .home-component {
  96.     display: flex;
  97.     flex-direction: column;
  98.     align-items: center;
  99.     justify-content: center;
  100. }
  102. .info-card {
  103.     width: 318px;
  104.     height: 200px;
  105.     background-color: rgba(23, 179, 163, 0.5);
  106.     backdrop-filter: blur(10px);
  107.     border-radius: 8px;
  108.     display: flex;
  109.     flex-direction: column;
  110.     align-items: center;
  111.     justify-content: center;
  112.     position: relative;
  113.     border: 1px solid rgba(255, 255, 255, 0.2);
  114.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  115.     background-image: linear-gradient(
  116.         45deg,
  117.         rgba(255, 255, 255, 0.1) 25%,
  118.         transparent 25%,
  119.         transparent 50%,
  120.         rgba(255, 255, 255, 0.1) 50%,
  121.         rgba(255, 255, 255, 0.1) 75%,
  122.         transparent 75%,
  123.         transparent
  124.     );
  125.     background-size: 20px 20px;
  126. }
  128. .info-title {
  129.     font-size: 24px;
  130.     font-weight: bold;
  131.     color: #ffffff;
  132.     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  133. }
  135. .info-value {
  136.     font-size: 48px;
  137.     font-weight: bold;
  138.     color: #ffffff;
  139.     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  140. }
  141. .info-value.init {
  142.     color: #ffffff;
  143.     transform: scale(1.2);
  144. }
  145. .info-value.changed {
  146.     color: #13c40d;
  147.     transform: scale(1.2);
  148. }
  149. .info-value.decreased {
  150.     color: #eb5766;
  151.     transform: scale(1.2);
  152. }
  153. .animation-container {
  154.     display: flex;
  155.     position: absolute;
  156.     bottom: 25px;
  157. }
  159. .circle {
  160.     width: 10px;
  161.     height: 10px;
  162.     background-color: #ffd700;
  163.     border-radius: 50%;
  164.     margin: 0 4px;
  165.     transform: scale(0);
  166.     animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
  167. }
  169. .circle:nth-child(1) {
  170.     animation-delay: 0.1s;
  171. }
  173. .circle:nth-child(2) {
  174.     animation-delay: 0.2s;
  175. }
  177. .circle:nth-child(3) {
  178.     animation-delay: 0.3s;
  179. }
  181. .circle:nth-child(4) {
  182.     animation-delay: 0.4s;
  183. }
  185. .circle:nth-child(5) {
  186.     animation-delay: 0.5s;
  187. }
  189. .circle:nth-child(6) {
  190.     animation-delay: 0.6s;
  191. }
  193. @keyframes pulse {
  194.     0% {
  195.         opacity: 0;
  196.         transform: scale(0);
  197.     }
  198.     50% {
  199.         opacity: 1;
  200.         transform: scale(1);
  201.     }
  202.     100% {
  203.         opacity: 0;
  204.         transform: scale(0);
  205.     }
  206. }
  208. .button-container {
  209.     display: flex;
  210.     justify-content: center;
  211.     padding: 30px 0;
  212.     animation: bounce 2s infinite;
  213.     animation-delay: 1s;
  214. }
  216. .increase-button,
  217. .decrease-button {
  218.     font-size: 16px;
  219.     font-weight: bold;
  220.     text-transform: uppercase;
  221.     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  222.     border: none;
  223.     transform: scale(1.05) rotate(360deg);
  224.     transition: transform 1s;
  225.     border-radius: 5px;
  226. }
  228. .increase-button {
  229.     background-color: #38b2ac;
  230.     margin-right: 10px;
  231. }
  233. .decrease-button {
  234.     background-color: #eb5766;
  235.     margin-left: 10px;
  236. }
  238. .increase-button:hover,
  239. .decrease-button:hover {
  240.     transform: scale(1.05);
  241.     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
  242. }
  243. </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"，并根据用户点击增加或减少数值，同时显示数值的变化动画效果。信息卡片具有特定的样式，包括背景颜色、背景模糊、边框圆角、阴影和背景图案等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果。

【技术实战】Vue功能样式实战【六】的更多相关文章

  1. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  2. 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  3. vue+uni-app商城实战 | 第一篇：【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  4. ThinkPHP5+Apicloud+vue商城APP实战

    ThinkPHP5+Apicoud+vue商城APP实战 目录 章节1:项目概述 课时1apicloud平台介绍.04:38 课时2知识体系架构介绍.16:10 章节2:apicloud50分钟快速入 ...

  5. Vue公司项目实战步骤

    一.无权限,无验证的Vue项目 1.打好HTML+CSS+JS基础,及<Vue 2.0 实战> 2.编写用mock设计的案例: 3.将以上案例的后台用C#改写: 二.带安全验证的Vue项目 ...

  6. vue+vue-router+vuex实战

    shopping vue + vue-router + vuex实现电商网站 效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...

  7. 阿里云云主机swap功能设置实战案例

    阿里云云主机swap功能设置实战案例 阿里云提供的云服务器(Elastic Compute Service,简称 ECS),是云主机的一种,当前采用的虚拟化驱动是Xen(这一点可以通过bios ven ...

  8. Spring Cloud实战之初级入门（六）— 服务网关zuul

    目录 1.环境介绍 2.api网关服务 2.1 创建工程 2.3 api网关中使用token机制 2.4 测试 2.5 小结 3.一点点重要的事情 1.环境介绍 好了,不知不觉中我们已经来到了最后一篇 ...

  9. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  10. 微信小程序实战 购物车功能

    代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...

随机推荐

  1. 2023-01-07：hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中，yaml如何写？

    2023-01-07:hyper/docker-registry-web是registry的web界面工具之一.请问部署在k3s中,yaml如何写? 答案2023-01-07: yaml如下: api ...

  2. 2021-06-18：已知数组arr，生成一个数组out，out的每个元素必须大于等于1，当arr[cur]＞arr[cur-1]时，out[cur]＞out[cur-1]；当arr[cur]＞arr

    2021-06-18:已知数组arr,生成一个数组out,out的每个元素必须大于等于1,当arr[cur]>arr[cur-1]时,out[cur]>out[cur-1]:当arr[cu ...

  3. 2021-08-11：按要求补齐数组。给定一个已排序的正整数数组 nums，和一个正整数 n 。从 [1, n] 区间内选取任意个数字补充到 nums 中，使得 [1, n] 区间内的任何数字都可以用

    2021-08-11:按要求补齐数组.给定一个已排序的正整数数组 nums,和一个正整数 n .从 [1, n] 区间内选取任意个数字补充到 nums 中,使得 [1, n] 区间内的任何数字都可以用 ...

  4. 【Python&GIS】GDAL栅格转面&计算矢量面积

            GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数据转换库.它利用抽象数据模型来表达所支持的各种文件格式.它 ...

  5. WinUI（WASDK）使用HelixToolkit加载3D模型并进行项目实践

    前言 本人之前开发了一个叫电子脑壳的上位机应用,给稚晖君ElectronBot开源机器人提供一些功能,但是由于是结合硬件才能使用的软件,如果拥有硬件的人员太少,就会导致我的软件没什么人用,于是我就想着 ...

  6. vscode使用chatGPT

    vscode使用chatGPT 一.下载chatPGT 在拓展中找到chatGPT,我这里下载的是中文版 二.使用 1.使用快捷键 ctrl+shift+p进行查找 chatGPT 2.点击请输入问题 ...

  7. 【Leetcode】 two sum #1 for rust solution

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标.你可以假设每种输入只会对应一个答案.但是,数组中同一个元素不能使用两遍. 示 ...

  8. 声音克隆,精致细腻,人工智能AI打造国师“一镜到底”鬼畜视频,基于PaddleSpeech(Python3.10)

    电影<满江红>上映之后,国师的一段采访视频火了,被无数段子手恶搞做成鬼畜视频,诚然,国师的这段采访文本相当经典,他生动地描述了一个牛逼吹完,大家都信了,结果发现自己没办法完成最后放弃,随后 ...

  9. Kubernetes使用Harbor作为私有镜像仓库

    概述 Harbor使用了基于角色的访问控制策略,当从Harbor中拉去镜像的时候,首先要进行身份认证,认证通过后才可以拉取镜像.在命令行模式下,需要先执行docker login,登陆成功后,才可以d ...

  10. #PowerBi Superchange PowerBi 序言部分笔记（2）

    Xmind本文思维导图 序言部分,主要讲述了BI的分类及发展,以及作者推荐的学习方法.重点是介绍了powerbi的主要四大步骤. 即: 一:数据采集 Data acquisition: Power B ...