嘗鮮 vue3.x 新特性 - CompositionAPI

来源:https://www.cnblogs.com/liulongbinblogs/archive/2019/10/10/11649393.html
-Advertisement-
Play Games

原文地址 "http://www.liulongbin.top:8085" 0. 基礎要求 1. 瞭解常見的 ES6 新特性 + ES6 的導入導出語法 + 解構賦值 + 箭頭函數 + etc... 2. 瞭解 vue 2.x 的基本使用 + 組件 + 常用的指令 + 生命周期函數 + comput ...


博客原文章地址 http://www.liulongbin.top:8085
公開課視頻地址 https://www.bilibili.com/video/av69262619/
公開課源碼地址 https://gitee.com/vsdeveloper/vue3-compositionAPI-study

0. 基礎要求

  1. 瞭解常見的 ES6 新特性
    • ES6 的導入導出語法
    • 解構賦值
    • 箭頭函數
    • etc...
  2. 瞭解 vue 2.x 的基本使用
    • 組件
    • 常用的指令
    • 生命周期函數
    • computed、watch、ref 等

1. 相關資源

  • 【知乎 - Vue Function-based API RFC】https://zhuanlan.zhihu.com/p/68477600
  • 【github - vuejs/composition-api】https://github.com/vuejs/composition-api
  • 【github - composition-api/CHANGELOG.md】https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md
  • 【開源中國 - 尤雨溪公佈 Vue 3.0 開發路線：將從頭開始重寫 3.0】https://www.oschina.net/news/100515/plans-for-the-next-iteration-of-vue-js

2. 初始化項目

  1. 安裝 vue-cli3

    npm install -g @vue/cli
# OR
yarn global add @vue/cli

  2. 創建項目

    vue create my-project
# OR
vue ui

  3. 在項目中安裝 composition-api 體驗 vue3 新特性

    npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api

  4. 在使用任何 @vue/composition-api 提供的能力前，必須先通過 Vue.use() 進行安裝

    import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

    安裝插件後，您就可以使用新的 Composition API 來開發組件了。

3. setup

setup() 函數是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口。

3.1 執行時機

setup 函數會在 beforeCreate 之後、created 之前執行

3.2 接收 props 數據

  1. 在 props 中定義當前組件允許外界傳遞過來的參數名稱：

    props: {
    p1: String
}

  2. 通過 setup 函數的第一個形參，接收 props 數據：

    setup(props) {
    console.log(props.p1)
}

3.3 context

setup 函數的第二個形參是一個上下文對象，這個上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到，在 vue 3.x 中，它們的訪問方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

註意：在 setup() 函數中無法訪問到 this

4. reactive

reactive() 函數接收一個普通對象，返回一個響應式的數據對象。

4.1 基本語法

等價於 vue 2.x 中的 Vue.observable() 函數，vue 3.x 中提供了 reactive() 函數，用來創建響應式的數據對象，基本代碼示例如下：

import { reactive } from '@vue/composition-api'

// 創建響應式數據對象，得到的 state 類似於 vue 2.x 中 data() 返回的響應式對象
const state = reactive({ count: 0 })

4.2 定義響應式數據供 template 使用

  1. 按需導入 reactive 函數：

    import { reactive } from '@vue/composition-api'

  2. 在 setup() 函數中調用 reactive() 函數，創建響應式數據對象：

    setup() {
     // 創建響應式數據對象
 const state = reactive({count: 0})

     // setup 函數中將響應式數據對象 return 出去，供 template 使用
 return state
}

  3. 在 template 中訪問響應式數據：

    <p>當前的 count 值為：{{count}}</p>

5. ref

5.1 基本語法

ref() 函數用來根據給定的值創建一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 .value 屬性：

import { ref } from '@vue/composition-api'

// 創建響應式數據對象 count，初始值為 0
const count = ref(0)

// 如果要訪問 ref() 創建出來的響應式數據對象的值，必須通過 .value 屬性才可以
console.log(count.value) // 輸出 0
// 讓 count 的值 +1
count.value++
// 再次列印 count 的值
console.log(count.value) // 輸出 1

5.2 在 template 中訪問 ref 創建的響應式數據

  1. 在 setup() 中創建響應式數據：

    import { ref } from '@vue/composition-api'

setup() {
 const count = ref(0)

     return {
         count,
         name: ref('zs')
     }
}

  2. 在 template 中訪問響應式數據：

    <template>
 <p>{{count}} --- {{name}}</p>
</template>

5.3 在 reactive 對象中訪問 ref 創建的響應式數據

當把 ref() 創建出來的響應式數據對象，掛載到 reactive() 上時，會自動把響應式數據對象展開為原始的值，不需通過 .value 就可以直接被訪問，例如：

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 輸出 0
state.count++            // 此處不需要通過 .value 就能直接訪問原始值
console.log(count)       // 輸出 1

註意：新的 ref 會覆蓋舊的 ref，示例代碼如下：

// 創建 ref 並掛載到 reactive 中
const c1 = ref(0)
const state = reactive({
  c1
})

// 再次創建 ref，命名為 c2
const c2 = ref(9)
// 將 舊 ref c1 替換為 新 ref c2
state.c1 = c2
state.c1++

console.log(state.c1) // 輸出 10
console.log(c2.value) // 輸出 10
console.log(c1.value) // 輸出 0

6. isRef

isRef() 用來判斷某個值是否為 ref() 創建出來的對象；應用場景：當需要展開某個可能為 ref() 創建出來的值的時候，例如：

import { isRef } from '@vue/composition-api'

const unwrapped = isRef(foo) ? foo.value : foo

7. toRefs

toRefs() 函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節點，都是 ref() 類型的響應式數據，最常見的應用場景如下：

import { toRefs } from '@vue/composition-api'

setup() {
    // 定義響應式數據對象
    const state = reactive({
      count: 0
    })
    
    // 定義頁面上可用的事件處理函數
    const increment = () => {
      state.count++
    }
    
    // 在 setup 中返回一個對象供頁面使用
    // 這個對象中可以包含響應式的數據，也可以包含事件處理函數
    return {
      // 將 state 上的每個屬性，都轉化為 ref 形式的響應式數據
      ...toRefs(state),
      // 自增的事件處理函數
      increment
    }
}

頁面上可以直接訪問 setup() 中 return 出來的響應式數據：

<template>
  <div>
    <p>當前的count值為：{{count}}</p>
    <button @click="increment">+1</button>
  </div>
</template>

8. computed

computed() 用來創建計算屬性，computed() 函數的返回值是一個 ref 的實例。使用 computed 之前需要按需導入：

import { computed } from '@vue/composition-api'

8.1 創建只讀的計算屬性

在調用 computed() 函數期間，傳入一個 function 函數，可以得到一個只讀的計算屬性，示例代碼如下：

// 創建一個 ref 響應式數據
const count = ref(1)

// 根據 count 的值，創建一個響應式的計算屬性 plusOne
// 它會根據依賴的 ref 自動計算並返回一個新的 ref
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 輸出 2
plusOne.value++            // error

8.2 創建可讀可寫的計算屬性

在調用 computed() 函數期間，傳入一個包含 get 和 set 函數的對象，可以得到一個可讀可寫的計算屬性，示例代碼如下：

// 創建一個 ref 響應式數據
const count = ref(1)

// 創建一個 computed 計算屬性
const plusOne = computed({
  // 取值函數
  get: () => count.value + 1,
  // 賦值函數
  set: val => { count.value = val - 1 }
})

// 為計算屬性賦值的操作，會觸發 set 函數
plusOne.value = 9
// 觸發 set 函數後，count 的值會被更新
console.log(count.value) // 輸出 8

9. watch

watch() 函數用來監視某些數據項的變化，從而觸發某些特定的操作，使用之前需要按需導入：

import { watch } from '@vue/composition-api'

9.1 基本用法

const count = ref(0)

// 定義 watch，只要 count 值變化，就會觸發 watch 回調
// watch 會在創建時會自動調用一次
watch(() => console.log(count.value))
// 輸出 0

setTimeout(() => {
  count.value++
  // 輸出 1
}, 1000)

9.2 監視指定的數據源

監視 reactive 類型的數據源：

// 定義數據源
const state = reactive({ count: 0 })
// 監視 state.count 這個數據節點的變化
watch(() => state.count, (count, prevCount) => { /* ... */ })

監視 ref 類型的數據源：

// 定義數據源
const count = ref(0)
// 指定要監視的數據源
watch(count, (count, prevCount) => { /* ... */ })

9.3 監視多個數據源

監視 reactive 類型的數據源：

const state = reactive({ count: 0, name: 'zs' })

watch(
  [() => state.count, () => state.name],    // Object.values(toRefs(state)),
  ([count, name], [prevCount, prevName]) => {
    console.log(count)         // 新的 count 值
    console.log(name)          // 新的 name 值
    console.log('------------')
    console.log(prevCount)     // 舊的 count 值
    console.log(prevName)      // 新的 name 值
  },
  {
    lazy: true // 在 watch 被創建的時候，不執行回調函數中的代碼
  }
)

setTimeout(() => {
  state.count++
  state.name = 'ls'
}, 1000)

監視 ref 類型的數據源：

const count = ref(0)
const name = ref('zs')

watch(
  [count, name], // 需要被監視的多個 ref 數據源
  ([count, name], [prevCount, prevName]) => {
    console.log(count)
    console.log(name)
    console.log('-------------')
    console.log(prevCount)
    console.log(prevName)
  },
  {
    lazy: true
  }
)

setTimeout(() => {
  count.value++
  name.value = 'xiaomaolv'
}, 1000)

9.4 清除監視

在 setup() 函數內創建的 watch 監視，會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監視，可以調用 watch() 函數的返回值即可，語法如下：

// 創建監視，並得到 停止函數
const stop = watch(() => { /* ... */ })

// 調用停止函數，清除對應的監視
stop()

9.5 在 watch 中清除無效的非同步任務

有時候，當被 watch 監視的值發生變化時，或 watch 本身被 stop 之後，我們期望能夠清除那些無效的非同步任務，此時，watch 回調函數中提供了一個 cleanup registrator function 來執行清除的工作。這個清除函數會在如下情況下被調用：

  • watch 被重覆執行了
  • watch 被強制 stop 了

Template 中的代碼示例如下：

/* template 中的代碼 */
<input type="text" v-model="keywords" />

Script 中的代碼示例如下：

// 定義響應式數據 keywords   
const keywords = ref('')

// 非同步任務：列印用戶輸入的關鍵詞
const asyncPrint = val => {
  // 延時 1 秒後列印
  return setTimeout(() => {
    console.log(val)
  }, 1000)
}

// 定義 watch 監聽
watch(
  keywords,
  (keywords, prevKeywords, onCleanup) => {
    // 執行非同步任務，並得到關閉非同步任務的 timerId
    const timerId = asyncPrint(keywords)

    // 如果 watch 監聽被重覆執行了，則會先清除上次未完成的非同步任務
    onCleanup(() => clearTimeout(timerId))
  },
  // watch 剛被創建的時候不執行
  { lazy: true }
)

// 把 template 中需要的數據 return 出去
return {
  keywords
}

10. LifeCycle Hooks

新版的生命周期函數，可以按需導入到組件中，且只能在 setup() 函數中使用，代碼示例如下：

import { onMounted, onUpdated, onUnmounted } from '@vue/composition-api'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

下麵的列表，是 vue 2.x 的生命周期函數與新版 Composition API 之間的映射關係：

  • beforeCreate -> use setup()
  • created -> use setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

11. provide & inject

provide() 和 inject() 可以實現嵌套組件之間的數據傳遞。這兩個函數只能在 setup() 函數中使用。父級組件中使用 provide() 函數向下傳遞數據；子級組件中使用 inject() 獲取上層傳遞過來的數據。

11.1 共用普通數據

App.vue 根組件：

<template>
  <div id="app">
    <h1>App 根組件</h1>
    <hr />
    <LevelOne />
  </div>
</template>

<script>
import LevelOne from './components/LevelOne'
// 1. 按需導入 provide
import { provide } from '@vue/composition-api'

export default {
  name: 'app',
  setup() {
    // 2. App 根組件作為父級組件，通過 provide 函數向子級組件共用數據（不限層級）
    //    provide('要共用的數據名稱', 被共用的數據)
    provide('globalColor', 'red')
  },
  components: {
    LevelOne
  }
}
</script>

LevelOne.vue 組件：

<template>
  <div>
    <!-- 4. 通過屬性綁定，為標簽設置字體顏色 -->
    <h3 :style="{color: themeColor}">Level One</h3>
    <hr />
    <LevelTwo />
  </div>
</template>

<script>
import LevelTwo from './LevelTwo'
// 1. 按需導入 inject
import { inject } from '@vue/composition-api'

export default {
  setup() {
    // 2. 調用 inject 函數時，通過指定的數據名稱，獲取到父級共用的數據
    const themeColor = inject('globalColor')
    
    // 3. 把接收到的共用數據 return 給 Template 使用
    return {
      themeColor
    }
  },
  components: {
    LevelTwo
  }
}
</script>

LevelTwo.vue 組件：

<template>
  <div>
    <!-- 4. 通過屬性綁定，為標簽設置字體顏色 -->
    <h5 :style="{color: themeColor}">Level Two</h5>
  </div>
</template>

<script>
// 1. 按需導入 inject
import { inject } from '@vue/composition-api'

export default {
  setup() {
    // 2. 調用 inject 函數時，通過指定的數據名稱，獲取到父級共用的數據
    const themeColor = inject('globalColor')

    // 3. 把接收到的共用數據 return 給 Template 使用
    return {
      themeColor
    }
  }
}
</script>

11.2 共用 ref 響應式數據

如下代碼實現了點按鈕切換主題顏色的功能，主要修改了 App.vue 組件中的代碼，LevelOne.vue 和 LevelTwo.vue 中的代碼不受任何改變：

<template>
  <div id="app">
    <h1>App 根組件</h1>
    
    <!-- 點擊 App.vue 中的按鈕，切換子組件中文字的顏色 -->
    <button @click="themeColor='red'">紅色</button>
    <button @click="themeColor='blue'">藍色</button>
    <button @click="themeColor='orange'">橘黃色</button>

    <hr />
    <LevelOne />
  </div>
</template>

<script>
import LevelOne from './components/LevelOne'
import { provide, ref } from '@vue/composition-api'

export default {
  name: 'app',
  setup() {
    // 定義 ref 響應式數據
    const themeColor = ref('red')
    
    // 把 ref 數據通過 provide 提供的子組件使用
    provide('globalColor', themeColor)
    
    // setup 中 return 數據供當前組件的 Template 使用
    return {
      themeColor
    }
  },
  components: {
    LevelOne
  }
}
</script>

12. template refs

通過 ref() 還可以引用頁面上的元素或組件。

12.1 元素的引用

示例代碼如下：

<template>
  <div>
    <h3 ref="h3Ref">TemplateRefOne</h3>
  </div>
</template>

<script>
import { ref, onMounted } from '@vue/composition-api'

export default {
  setup() {
    // 創建一個 DOM 引用
    const h3Ref = ref(null)

    // 在 DOM 首次載入完畢之後，才能獲取到元素的引用
    onMounted(() => {
      // 為 dom 元素設置字體顏色
      // h3Ref.value 是原生DOM對象
      h3Ref.value.style.color = 'red'
    })

    // 把創建的引用 return 出去
    return {
      h3Ref
    }
  }
}
</script>

12.2 組件的引用

TemplateRefOne.vue 中的示例代碼如下：

<template>
  <div>
    <h3>TemplateRefOne</h3>
    
    <!-- 4. 點擊按鈕展示子組件的 count 值 -->
    <button @click="showNumber">獲取TemplateRefTwo中的count值</button>

    <hr />
    <!-- 3. 為組件添加 ref 引用 -->
    <TemplateRefTwo ref="comRef" />
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'
import TemplateRefTwo from './TemplateRefTwo'

export default {
  setup() {
    // 1. 創建一個組件的 ref 引用
    const comRef = ref(null)

    // 5. 展示子組件中 count 的值
    const showNumber = () => {
      console.log(comRef.value.count)
    }

    // 2. 把創建的引用 return 出去
    return {
      comRef,
      showNumber
    }
  },
  components: {
    TemplateRefTwo
  }
}
</script>

TemplateRefTwo.vue 中的示例代碼：

<template>
  <div>
    <h5>TemplateRefTwo --- {{count}}</h5>
    <!-- 3. 點擊按鈕，讓 count 值自增 +1 -->
    <button @click="count+=1">+1</button>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'

export default {
  setup() {
    // 1. 定義響應式的數據
    const count = ref(0)
    
    // 2. 把響應式數據 return 給 Template 使用
    return {
      count
    }
  }
}
</script>

13. createComponent

這個函數不是必須的，除非你想要完美結合 TypeScript 提供的類型推斷來進行項目的開發。

這個函數僅僅提供了類型推斷，方便在結合 TypeScript 書寫代碼時，能為 setup() 中的 props 提供完整的類型推斷。

import { createComponent } from 'vue'

export default createComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})

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

-Advertisement-
Play Games
更多相關文章
  • Jetpack系列：Paging組件幫你解決分頁載入實現的痛苦
    相信很多小伙伴們在項目實戰中，經常會用到界面的 、`載入更多`等功能。需要針對具體功能做針對性開發和調試，耗時耗力。 Paging組件的使用將這部分的工作簡化，從而讓開發者更專註於業務的具體實現。下麵我們一起來學習下Paging組件的使用方法。 首先來看下使用Paging組件實現的分頁載入和刷新效果 ...
  • Android JSON解析插件
    JSON是一種輕量級的數據格式，用於數據的交互。 Android交互數據主要兩種方式：JSON和 XML。XML格式比JSON格式數量略大，所以大多都使用Json數據格式。 在Android開發的過程中，數據訪問 JSON解析就顯得尤為重要。 示例JSON 添加插件GsonFormat 添加依賴 g ...
  • 前端函數式編程中的各種概念
    函數式編程？利用函數把運算過程封裝起來，通過組合各種函數來計算結果。 ...
  • 淺談個人對客戶端JavaScript同步、非同步、執行順序等概念的理解
    一.同步和非同步的概念。 同步：即按代碼的順序執行任務。 在下列代碼中，按照同步概念，則是先列印1後列印2。 非同步：即執行一個任務的同時執行另一個任務。如果按照此概念執行上面代碼，則是同時列印出1和2。 二.客戶端JavaScript中代碼的執行順序 首先，不管是核心JavaScript還是客戶端Ja ...
  • console的各種輸出格式
    ```html console.log('%c',CSS樣式)輸出css樣式 console.log('%s',字元串) 字元串格式化 %d%i 整數格式化； console.log('%o',節點) 可擴展的dom節點格式化,可擴展的javascript對象格式化 ``` ...
  • Turn.js 實現翻書效果(自適應單雙頁)
    來源：https://www.cnblogs.com/hellman/p/10683492.html在上面的來源基礎上增加頁碼顯示，自適應單雙頁PC端效果： 移動端展示： 源碼下載地址：http://www.luanxin.top/index.php/archives/30/ ...
  • 淺嘗https
    HTTPS http超文本傳輸協議，所以的東西都是明文傳輸，容易被攔截，被攻擊，我們希望能對通話內容進行加密，那麼因此而生，出現了https https：在http的基礎上新增加了SSL層 先放圖 // http 超文本傳輸協議// https 加密的超文本傳輸協議 // 對稱加密瀏覽器生成一個秘鑰 ...
  • HTML（上）
    [TOC] HTML（上） 瀏覽器 瀏覽器也是一個客戶端 瀏覽器不通過服務端也可以渲染文本 HTML 什麼是HTML HTML全稱HyperText Markup Language，超文本標記語言，是一種描述性的標記語言。 超文本：音頻、視頻、圖片 標記：稱為標記，一個HTML頁面都是由各種標記組成 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類