Vue 核心技術與實戰day07

1. vuex概述

2. 構建 vuex [多組件數據共享] 環境

<template><div id="app"><h1>根組件- {{ title }}- {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'
// console.log(mapState(['count', 'title']))export default {name: 'app',created () {// console.log(this.$router) // 沒配console.log(this.$store.state.count)},computed: {...mapState(['count', 'title'])},data: function () {return {}},methods: {handleInput (e) {// 1. 實時獲取輸入框的值const num = +e.target.value// 2. 提交mutation，調用mutation函數this.$store.commit('changeCount', num)}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

<template><div class="box"><h2>Son1 子組件</h2>從vuex中獲取的值: <label>{{ $store.state.count }}</label><br><button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleAdd(10)">值 + 10</button><button @click="handleChange">一秒后修改成666</button><button @click="changeFn">改標題</button><hr><!-- 計算屬性getters --><div>{{ $store.state.list }}</div><div>{{ $store.getters.filterList }}</div><hr><!-- 測試訪問模塊中的state - 原生 --><div>{{ $store.state.user.userInfo.name }}</div><button @click="updateUser">更新個人信息</button><button @click="updateUser2">一秒后更新信息</button><div>{{ $store.state.setting.theme }}</div><button @click="updateTheme">更新主題色</button><hr><!-- 測試訪問模塊中的getters - 原生 --><div>{{ $store.getters['user/UpperCaseName'] }}</div></div>
</template><script>
export default {name: 'Son1Com',created () {console.log(this.$store.getters)},methods: {updateUser () {// $store.commit('模塊名/mutation名', 額外傳參)this.$store.commit('user/setUser', {name: 'xiaowang',age: 25})},updateUser2 () {// 調用action dispatchthis.$store.dispatch('user/setUserSecond', {name: 'xiaohong',age: 28})},updateTheme () {this.$store.commit('setting/setTheme', 'pink')},handleAdd (n) {// 錯誤代碼(vue默認不會監測，監測需要成本)// this.$store.state.count++// console.log(this.$store.state.count)// 應該通過 mutation 核心概念，進行修改數據// 需要提交調用mutation// this.$store.commit('addCount')// console.log(n)// 調用帶參數的mutation函數this.$store.commit('addCount', {count: n,msg: '哈哈'})},changeFn () {this.$store.commit('changeTitle', '傳智教育')},handleChange () {// 調用action// this.$store.dispatch('action名字', 額外參數)this.$store.dispatch('changeCountAction', 666)}}
}
</script><style lang="css" scoped>
.box{border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

<template><div class="box"><h2>Son2 子組件</h2>從vuex中獲取的值:<label>{{ count }}</label><br /><button @click="subCount(1)">值 - 1</button><button @click="subCount(5)">值 - 5</button><button @click="subCount(10)">值 - 10</button><button @click="changeCountAction(888)">1秒后改成888</button><button @click="changeTitle('前端程序員')">改標題</button><hr><div>{{ filterList }}</div><hr><!-- 訪問模塊中的state --><div>{{ user.userInfo.name }}</div><div>{{ setting.theme }}</div><hr><!-- 訪問模塊中的state --><div>user模塊的數據：{{ userInfo }}</div><button @click="setUser({ name: 'xiaoli', age: 80 })">更新個人信息</button><button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button><div>setting模塊的數據：{{ theme }} - {{ desc }}</div><button @click="setTheme('skyblue')">更新主題</button><hr><!-- 訪問模塊中的getters --><div>{{ UpperCaseName }}</div></div>
</template><script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {name: 'Son2Com',computed: {// mapState 和 mapGetters 都是映射屬性...mapState(['count', 'user', 'setting']),...mapState('user', ['userInfo']),...mapState('setting', ['theme', 'desc']),...mapGetters(['filterList']),...mapGetters('user', ['UpperCaseName'])},methods: {// mapMutations 和 mapActions 都是映射方法// 全局級別的映射...mapMutations(['subCount', 'changeTitle']),...mapActions(['changeCountAction']),// 分模塊的映射...mapMutations('setting', ['setTheme']),...mapMutations('user', ['setUser']),...mapActions('user', ['setUserSecond'])// handleSub (n) {//   this.subCount(n)// }}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

3. 創建一個空倉庫

     //這里面存放的就是vuex相關的核心代碼import Vue from 'vue'import Vuex from 'vuex//插件安裝Vue.use(Vuex)//創建倉庫（空倉庫）const store = new Vuex.Store()//到處給main.js使用export dafault store

導入掛載：

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

驗證是否導入成功

<template><div id="app"><h1>根組件- {{ title }}- {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'
// console.log(mapState(['count', 'title']))export default {name: 'app',created () {// console.log(this.$router) // 沒配console.log(this.$store.state.count)},computed: {...mapState(['count', 'title'])},data: function () {return {}},methods: {handleInput (e) {// 1. 實時獲取輸入框的值const num = +e.target.value// 2. 提交mutation，調用mutation函數this.$store.commit('changeCount', num)}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

4. 核心概念 - state 狀態

// 這里面存放的就是 vuex 相關的核心代碼
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'// 插件安裝
Vue.use(Vuex)// 創建倉庫
const store = new Vuex.Store({// 嚴格模式 (有利于初學者，檢測不規范的代碼 => 上線時需要關閉)strict: true,// 1. 通過 state 可以提供數據 (所有組件共享的數據)state: {title: '倉庫大標題',count: 100,list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},// 2. 通過 mutations 可以提供修改數據的方法mutations: {// 所有mutation函數，第一個參數，都是 state// 注意點：mutation參數有且只能有一個，如果需要多個參數，包裝成一個對象addCount (state, obj) {console.log(obj)// 修改數據state.count += obj.count},subCount (state, n) {state.count -= n},changeCount (state, newCount) {state.count = newCount},changeTitle (state, newTitle) {state.title = newTitle}},// 3. actions 處理異步// 注意：不能直接操作 state，操作 state，還是需要 commit mutationactions: {// context 上下文 (此處未分模塊，可以當成store倉庫)// context.commit('mutation名字', 額外參數)changeCountAction (context, num) {// 這里是setTimeout模擬異步，以后大部分場景是發請求setTimeout(() => {context.commit('changeCount', num)}, 1000)}},// 4. getters 類似于計算屬性getters: {// 注意點：// 1. 形參第一個參數，就是state// 2. 必須有返回值，返回值就是getters的值filterList (state) {return state.list.filter(item => item > 5)}},// 5. modules 模塊modules: {user,setting}
})// 導出給main.js使用
export default store

<template><div id="app"><h1>根組件- {{ $store.state.title }}- {{  $store.state.count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'
// console.log(mapState(['count', 'title']))export default {name: 'app',created () {// console.log(this.$router) // 沒配console.log(this.$store.state.count)},computed: {...mapState(['count', 'title'])},data: function () {return {}},methods: {handleInput (e) {// 1. 實時獲取輸入框的值const num = +e.target.value// 2. 提交mutation，調用mutation函數this.$store.commit('changeCount', num)}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

5. 核心概念 - mutations

第一：

第二：·

第三

如果說要同時傳遞好幾個參數，可以包裝成一個對象

6. 核心概念 - mutations - 練習

練習1：

練習2：

<template><div id="app"><h1>根組件- {{ title }}- {{ count }}</h1>//1<input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'
// console.log(mapState(['count', 'title']))export default {name: 'app',created () {// console.log(this.$router) // 沒配console.log(this.$store.state.count)},computed: {...mapState(['count', 'title'])},data: function () {return {}},//2methods: {handleInput (e) {// 1. 實時獲取輸入框的值const num = +e.target.value//4// 2. 提交mutation，調用mutation函數this.$store.commit('changeCount', num)}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

7. 輔助函數 - mapMutations

8. 核心概念 - actions

9. 輔助函數 - mapActions

調用這個

10. 核心概念 - getters

<template><div class="box"><h2>Son2 子組件</h2>從vuex中獲取的值:<label>{{ count }}</label><br /><button @click="subCount(1)">值 - 1</button><button @click="subCount(5)">值 - 5</button><button @click="subCount(10)">值 - 10</button><button @click="changeCountAction(888)">1秒后改成888</button><button @click="changeTitle('前端程序員')">改標題</button><hr><div>{{ filterList }}</div><hr><!-- 訪問模塊中的state --><div>{{ user.userInfo.name }}</div><div>{{ setting.theme }}</div><hr><!-- 訪問模塊中的state --><div>user模塊的數據：{{ userInfo }}</div><button @click="setUser({ name: 'xiaoli', age: 80 })">更新個人信息</button><button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button><div>setting模塊的數據：{{ theme }} - {{ desc }}</div><button @click="setTheme('skyblue')">更新主題</button><hr><!-- 訪問模塊中的getters --><div>{{ UpperCaseName }}</div></div>
</template><script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {name: 'Son2Com',computed: {// mapState 和 mapGetters 都是映射屬性...mapState(['count', 'user', 'setting']),...mapState('user', ['userInfo']),...mapState('setting', ['theme', 'desc']),...mapGetters(['filterList']),...mapGetters('user', ['UpperCaseName'])},methods: {// mapMutations 和 mapActions 都是映射方法// 全局級別的映射...mapMutations(['subCount', 'changeTitle']),...mapActions(['changeCountAction']),// 分模塊的映射...mapMutations('setting', ['setTheme']),...mapMutations('user', ['setUser']),...mapActions('user', ['setUserSecond'])// handleSub (n) {//   this.subCount(n)// }}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

11. 核心概念 - 模塊 module (進階語法)

第一：

// user模塊
const state = {userInfo: {name: 'zs',age: 18},score: 80
}
const mutations = {setUser (state, newUserInfo) {state.userInfo = newUserInfo}
}
const actions = {setUserSecond (context, newUserInfo) {// 將異步在action中進行封裝setTimeout(() => {// 調用mutation   context上下文，默認提交的就是自己模塊的action和mutationcontext.commit('setUser', newUserInfo)}, 1000)}
}
const getters = {// 分模塊后，state指代子模塊的stateUpperCaseName (state) {return state.userInfo.name.toUpperCase()}
}export default {namespaced: true,state,mutations,actions,getters
}

// setting模塊
const state = {theme: 'light', // 主題色desc: '測試demo'
}
const mutations = {setTheme (state, newTheme) {state.theme = newTheme}
}
const actions = {}
const getters = {}export default {namespaced: true,state,mutations,actions,getters
}

第二：

法一：

法二：

第三

法一：

法2：

第四

法一：

法2：

第五

法一：

法二

12. 綜合案例 - 購物車

1.

2

3

4

存儲數據

渲染

<template><div class="app-container"><!-- Header 區域 --><cart-header></cart-header><!-- 商品 Item 項組件 --><cart-item v-for="item in list" :key="item.id" :item="item"></cart-item><!-- Foote 區域 --><cart-footer></cart-footer></div>
</template><script>
import CartHeader from '@/components/cart-header.vue'
import CartFooter from '@/components/cart-footer.vue'
import CartItem from '@/components/cart-item.vue'import { mapState } from 'vuex'export default {name: 'App',created () {this.$store.dispatch('cart/getList')},computed: {...mapState('cart', ['list'])},components: {CartHeader,CartFooter,CartItem}
}
</script><style lang="less" scoped>
.app-container {padding: 50px 0;font-size: 14px;
}
</style>
<template><div class="goods-container"><!-- 左側圖片區域 --><div class="left"><img :src="item.thumb" class="avatar" alt=""></div><!-- 右側商品區域 --><div class="right"><!-- 標題 --><div class="title">{{ item.name }}</div><div class="info"><!-- 單價 --><span class="price">￥{{ item.price }}</span><div class="btns"><!-- 按鈕區域 --><button class="btn btn-light" @click="btnClick(-1)">-</button><span class="count">{{ item.count }}</span><button class="btn btn-light" @click="btnClick(1)">+</button></div></div></div></div>
</template><script>
export default {name: 'CartItem',methods: {btnClick (step) {const newCount = this.item.count + stepconst id = this.item.idif (newCount < 1) returnthis.$store.dispatch('cart/updateCountAsync', {id,newCount})}},//直接接收props: {item: {type: Object,required: true}}
}
</script><style lang="less" scoped>
.goods-container {display: flex;padding: 10px;+ .goods-container {border-top: 1px solid #f8f8f8;}.left {.avatar {width: 100px;height: 100px;}margin-right: 10px;}.right {display: flex;flex-direction: column;justify-content: space-between;flex: 1;.title {font-weight: bold;}.info {display: flex;justify-content: space-between;align-items: center;.price {color: red;font-weight: bold;}.btns {.count {display: inline-block;width: 30px;text-align: center;}}}}
}.custom-control-label::before,
.custom-control-label::after {top: 3.6rem;
}
</style>

5

<template><div class="goods-container"><!-- 左側圖片區域 --><div class="left"><img :src="item.thumb" class="avatar" alt=""></div><!-- 右側商品區域 --><div class="right"><!-- 標題 --><div class="title">{{ item.name }}</div><div class="info"><!-- 單價 --><span class="price">￥{{ item.price }}</span><div class="btns"><!-- 按鈕區域 --><button class="btn btn-light" @click="btnClick(-1)">-</button><span class="count">{{ item.count }}</span><button class="btn btn-light" @click="btnClick(1)">+</button></div></div></div></div>
</template><script>
export default {name: 'CartItem',methods: {btnClick (step) {const newCount = this.item.count + stepconst id = this.item.idif (newCount < 1) return
//調用this.$store.dispatch('cart/updateCountAsync', {id,newCount})}},props: {item: {type: Object,required: true}}
}
</script><style lang="less" scoped>
.goods-container {display: flex;padding: 10px;+ .goods-container {border-top: 1px solid #f8f8f8;}.left {.avatar {width: 100px;height: 100px;}margin-right: 10px;}.right {display: flex;flex-direction: column;justify-content: space-between;flex: 1;.title {font-weight: bold;}.info {display: flex;justify-content: space-between;align-items: center;.price {color: red;font-weight: bold;}.btns {.count {display: inline-block;width: 30px;text-align: center;}}}}
}.custom-control-label::before,
.custom-control-label::after {top: 3.6rem;
}
</style>

import axios from 'axios'
export default {namespaced: true,state () {return {// 購物車數據 [{}, {}]list: []}},mutations: {updateList (state, newList) {state.list = newList},// obj: { id: xxx, newCount: xxx }updateCount (state, obj) {// 根據 id 找到對應的對象，更新count屬性即可const goods = state.list.find(item => item.id === obj.id)goods.count = obj.newCount}},actions: {// 請求方式：get// 請求地址：http://localhost:3000/cartasync getList (context) {const res = await axios.get('http://localhost:3000/cart')context.commit('updateList', res.data)},// 請求方式：patch// 請求地址：http://localhost:3000/cart/:id值  表示修改的是哪個對象// 請求參數：// {//   name: '新值',  【可選】//   price: '新值', 【可選】//   count: '新值', 【可選】//   thumb: '新值'  【可選】// }async updateCountAsync (context, obj) {// 將修改更新同步到后臺服務器await axios.patch(`http://localhost:3000/cart/${obj.id}`, {//count不能改count: obj.newCount})// 將修改更新同步到 vuexcontext.commit('updateCount', {id: obj.id,newCount: obj.newCount})}},getters: {// 商品總數量 累加counttotal (state) {return state.list.reduce((sum, item) => sum + item.count, 0)},// 商品總價格 累加count * pricetotalPrice (state) {return state.list.reduce((sum, item) => sum + item.count * item.price, 0)}}
}

6

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/83144.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/83144.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/83144.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【原神 × 插入排序】刷圣遺物也講算法：圣遺物評分系統背后的排序邏輯你真的懂嗎？

【原神 × 插入排序】刷圣遺物也講算法：圣遺物評分系統背后的排序邏輯你真的懂嗎？

?? 改編自：王爭《數據結構與算法之美》 ?? 游戲演繹：米哈游《原神》 ?? 核心關鍵詞：插入排序、排序算法、評分系統、屬性評價、強化圣遺物、冒泡排序對比 ?? 引言：原神刷本=刷排序？ 玩《原神》的玩家每天日常是啥？體力用來刷圣遺物、精通頭、暴擊頭、攻充沙………
閱讀更多...
quasar electron mode如何打包無邊框桌面應用程序

quasar electron mode如何打包無邊框桌面應用程序

預覽 開源項目Tokei Kun 一款簡潔的周年紀念app&#xff0c;現已發布APK&#xff08;安卓&#xff09;和 EXE&#xff08;Windows&#xff09; 項目倉庫地址&#xff1a;Github Repo 應用下載鏈接&#xff1a;Github Releases Preparation for Electron quasar dev -m elect…
閱讀更多...
微信小程序真機調試時如何實現與本地開發環境服務器交互

微信小程序真機調試時如何實現與本地開發環境服務器交互

最近在開發微信小程序項目,真機調試時需要在手機上運行小程序,為了實現本地開發服務器與手機小程序的交互,需要以下步驟 1.將手機連到和本地一樣的局域網 2.Visual Studio中將IIS Express服務器的localhost端口地址修改為本機的IP自定義的端口: 1&#xff09;找到web api項目…
閱讀更多...
Scratch節日 | 拯救屈原 | 端午節

Scratch節日 | 拯救屈原 | 端午節

端午節快樂&#xff01; 這款特別為端午節打造的Scratch游戲 《拯救屈原》&#xff0c;將帶你走進古代中國&#xff0c;感受歷史與文化的魅力&#xff01; &#x1f3ee; 游戲介紹 扮演勇敢的探險者&#xff0c;穿越時空回到古代&#xff0c;解鎖謎題&#xff0c;完成任務&…
閱讀更多...
PHP下實現RSA的加密，解密，加簽和驗簽

PHP下實現RSA的加密，解密，加簽和驗簽

前言&#xff1a; RSA下加密&#xff0c;解密&#xff0c;加簽和驗簽是四種不同的操作&#xff0c;有時候會搞錯&#xff0c;記錄一下。 1.公鑰加密&#xff0c;私鑰解密 發送方通過公鑰將原數據加密成一個sign參數&#xff0c;相當于就是信息的載體&#xff0c;接收方能通過si…
閱讀更多...
Win10秘笈：兩種方式修改網卡物理地址（MAC）

Win10秘笈：兩種方式修改網卡物理地址（MAC）

Win10秘笈&#xff1a;兩種方式修改網卡物理地址&#xff08;MAC&#xff09; 在修改之前&#xff0c;可以先確定一下要修改的網卡MAC地址&#xff0c;查詢方法有很多種&#xff0c;比如&#xff1a; 1、在設置→網絡和Internet→WLAN/以太網&#xff0c;如下圖所示。 2、在控…
閱讀更多...
C++中IO文件輸入輸出知識詳解和注意事項

C++中IO文件輸入輸出知識詳解和注意事項

以下內容將從文件流類體系、打開模式、文本與二進制 I/O、隨機訪問、錯誤處理、性能優化等方面&#xff0c;詳解 C 中文件輸入輸出的使用要點&#xff0c;并配以示例。 一、文件流類體系 C 標準庫提供三種文件流類型&#xff0c;均定義在 <fstream> 中&#xff1a; std…
閱讀更多...
Unity3D仿星露谷物語開發56之保存角色位置到文件

Unity3D仿星露谷物語開發56之保存角色位置到文件

1、目標 游戲中通過Save Game保存角色位置&#xff0c;當重啟游戲后&#xff0c;通過Load Game可以恢復角色的位置。 2、Player對象操作 &#xff08;1&#xff09;組件添加 給Hierarchy下的Player組件添加Generate GUID組件。 &#xff08;2&#xff09;修改SceneSave.cs腳…
閱讀更多...
TKernel模塊--雜項

TKernel模塊--雜項

TKernel模塊–雜項 1.DEFINE_HARRAY1 #define DEFINE_HARRAY1(HClassName, _Array1Type_) \ class HClassName : public _Array1Type_, public Standard_Transient { \public: …
閱讀更多...
c++ typeid運算符

c++ typeid運算符

typeid運算符能獲取類型信息。獲取到的是type_info對象。type_info類型如下&#xff1a; 可以看到&#xff0c;這個類刪除了拷貝構造函數以及等號操作符。有一些成員函數&#xff1a;hash_code、before、name、raw_name, 還重載了和!運算符。 測試&#xff1a; void testTyp…
閱讀更多...
第304個Vulnhub靶場演練攻略:digital world.local：FALL

第304個Vulnhub靶場演練攻略:digital world.local：FALL

digital world.local&#xff1a;FALL Vulnhub 演練 FALL (digitalworld.local: FALL) 是 Donavan 為 Vulnhub 打造的一款中型機器。這款實驗室非常適合經驗豐富的 CTF 玩家&#xff0c;他們希望在這類環境中檢驗自己的技能。那么&#xff0c;讓我們開始吧&#xff0c;看看如何…
閱讀更多...
【數據庫】數據庫恢復技術

【數據庫】數據庫恢復技術

數據庫恢復技術 實現恢復的核心是使用冗余&#xff0c;也就是根據冗余數據重建不正確數據。 事務 事務是一個數據庫操作序列&#xff0c;是一個不可分割的工作單位&#xff0c;是恢復和并發的基本單位。 在關系數據庫中&#xff0c;一個事務是一條或多條SQL語句&#xff0c…
閱讀更多...
switch-case判斷

switch-case判斷

switch-case判斷 #include <stdio.h> int main() {int type;printf("請輸入你的選擇&#xff1a;\n");scanf("%d",&type);getchar();switch (type){case 1:printf("你好&#xff01;");break;case 2:printf("早上好&#xff01;…
閱讀更多...
從監控到告警：Prometheus+Grafana+Alertmanager+告警通知服務全鏈路落地實踐

從監控到告警：Prometheus+Grafana+Alertmanager+告警通知服務全鏈路落地實踐

文章目錄 一、引言1.1 監控告警的必要性1.2 監控告警的基本原理1.2.1 指標采集與存儲1.2.2 告警規則與觸發機制1.2.3 多渠道通知與閉環 二、技術選型與架構設計2.1 為什么選擇 Prometheus 及其生態2.1.1 Prometheus 優勢分析2.1.2 Grafana 可視化能力2.1.3 Alertmanager 靈活告…
閱讀更多...
STM32 UART通信實戰指南：從原理到項目落地

STM32 UART通信實戰指南：從原理到項目落地

STM32串口通信實戰指南&#xff1a;從零開始手把手教你 前言&#xff1a;為什么串口這么重要&#xff1f; 在嵌入式開發中&#xff0c;串口就像設備的"嘴巴"和"耳朵"。無論是給單片機下達指令、讀取傳感器數據&#xff0c;還是讓兩個模塊"對話"…
閱讀更多...
Jmeter requests

Jmeter requests

1.Jemter元件和組件 1.1 元件和組件的概念 元件&#xff1a;多個功能相似的的組件的容器&#xff0c;類似于一個工具箱。 組件&#xff1a;實現某個特定功能的實例&#xff0c;類似于工具箱中的螺絲刀&#xff0c;十字扳手... 1.2 作用域和執行順序 1.2.1 作用域 例子&#…
閱讀更多...
計算機視覺---GT(ground truth)

計算機視覺---GT(ground truth)

在計算機視覺&#xff08;Computer Vision, CV&#xff09;領域&#xff0c;Ground Truth&#xff08;GT&#xff0c;中文常譯為“真值”或“ ground truth”&#xff09; 是指關于數據的真實標簽或客觀事實&#xff0c;是模型訓練、評估和驗證的基準。它是連接算法與現實世界的…
閱讀更多...
1-Wire 一線式總線：從原理到實戰，玩轉 DS18B20 溫度采集

1-Wire 一線式總線：從原理到實戰，玩轉 DS18B20 溫度采集

引言 在嵌入式系統中&#xff0c;通信總線是連接 CPU 與外設的橋梁。從 I2C、SPI 到 UART&#xff0c;每種總線都有其獨特的應用場景。而本文要介紹的1-Wire 一線式總線&#xff0c;以其極簡的硬件設計和獨特的通信協議&#xff0c;在溫度采集、身份識別等領域大放異彩。本文將…
閱讀更多...
基于開源AI大模型AI智能名片S2B2C商城小程序源碼的銷售環節數字化實現路徑研究

基于開源AI大模型AI智能名片S2B2C商城小程序源碼的銷售環節數字化實現路徑研究

摘要&#xff1a;在數字化浪潮下&#xff0c;企業銷售環節的轉型升級已成為提升競爭力的核心命題。本文基于清華大學全球產業研究院《中國企業數字化轉型研究報告&#xff08;2020&#xff09;》提出的“提升銷售率與利潤率、打通客戶數據、強化營銷協同、構建全景用戶畫像、助…
閱讀更多...
Linux淺談

Linux淺談

Linux淺談 一、什么是 Linux&#xff1f;先拋開 “內核”&#xff0c;看整體 可以把 Linux 系統 想象成一臺 “組裝電腦”&#xff1a; 最核心的零件是 “主板”—— 這就是 Linux 內核&#xff08;Kernel&#xff09;&#xff0c;負責管理電腦里的所有硬件&#xff08;比如 …
閱讀更多...
最新文章

Copyright @ 2022~2023