Vue腳手架 生命周期 組件化開發

在這里插入圖片描述

Vue腳手架 & 生命周期 & 組件化開發

一、今日目標

1.生命周期

  1. 生命周期介紹
  2. 生命周期的四個階段
  3. 生命周期鉤子
  4. 聲明周期案例

2.綜合案例-小黑記賬清單

  1. 列表渲染
  2. 添加/刪除
  3. 餅圖渲染

3.工程化開發入門

  1. 工程化開發和腳手架
  2. 項目運行流程
  3. 組件化
  4. 組件注冊

4.綜合案例-小兔仙首頁

  1. 拆分模塊-局部注冊
  2. 結構樣式完善
  3. 拆分組件 – 全局注冊

二、Vue生命周期

思考：什么時候可以發送初始化渲染請求？（越早越好）什么時候可以開始操作dom？（至少dom得渲染出來）

Vue生命周期：就是一個Vue實例從創建 到 銷毀 的整個過程。

生命周期四個階段：① 創建 ② 掛載 ③ 更新 ④ 銷毀

1.創建階段：創建響應式數據

2.掛載階段：渲染模板

3.更新階段：修改數據，更新視圖

4.銷毀階段：銷毀Vue實例

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

三、Vue生命周期鉤子

Vue生命周期過程中，會自動運行一些函數，被稱為【生命周期鉤子】→ 讓開發者可以在【特定階段】運行自己的代碼

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

<div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '計數器'},// 1. 創建階段（準備數據）// 2. 掛載階段（渲染模板）// 3. 更新階段(修改數據 → 更新視圖)// 4. 卸載階段})</script>

四、生命周期鉤子小案例

1.在created中發送數據

 <style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style><div id="app"><ul><li class="news"><div class="left"><div class="title">5G商用在即，三大運營商營收持續下降</div><div class="info"><span>新京報經濟新聞</span><span>2222-10-28 11:50:28</span></div></div><div class="right"><img src="http://ajax-api.itheima.net/public/images/0.webp" alt=""></div></li><li class="news"><div class="left"><div class="title">5G商用在即，三大運營商營收持續下降</div><div class="info"><span>新京報經濟新聞</span><span>2222-10-28 11:50:28</span></div></div><div class="right"><img src="http://ajax-api.itheima.net/public/images/0.webp" alt=""></div></li><li class="news"><div class="left"><div class="title">5G商用在即，三大運營商營收持續下降</div><div class="info"><span>新京報經濟新聞</span><span>2222-10-28 11:50:28</span></div></div><div class="right"><img src="http://ajax-api.itheima.net/public/images/0.webp" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 請求方式：getconst app = new Vue({el: '#app',data: {list: []}})</script>

2.在mounted中獲取焦點

 <style>html,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}</style><div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt=""><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {words: ''}})
</script>

五、案例-小黑記賬清單

1.需求圖示：

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

2.需求分析

1.基本渲染

2.添加功能

3.刪除功能

4.餅圖渲染

3.思路分析

1.基本渲染

  • 立刻發送請求獲取數據 created
  • 拿到數據，存到data的響應式數據中
  • 結合數據，進行渲染 v-for
  • 消費統計 —> 計算屬性

2.添加功能

  • 收集表單數據 v-model，使用指令修飾符處理數據
  • 給添加按鈕注冊點擊事件，對輸入的內容做非空判斷，發送請求
  • 請求成功后，對文本框內容進行清空
  • 重新渲染列表

3.刪除功能

  • 注冊點擊事件，獲取當前行的id
  • 根據id發送刪除請求
  • 需要重新渲染

4.餅圖渲染

  • 初始化一個餅圖 echarts.init(dom) mounted鉤子中渲染
  • 根據數據試試更新餅圖 echarts.setOptions({…})

4.代碼準備

 <!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box  a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style><div id="app"><div class="contain"><!-- 左側列表 --><div class="list-box"><!-- 添加資產 --><form class="my-form"><input type="text" class="form-control" placeholder="消費名稱" /><input type="text" class="form-control" placeholder="消費價格" /><button type="button" class="btn btn-primary">添加賬單</button></form><table class="table table-hover"><thead><tr><th>編號</th><th>消費名稱</th><th>消費價格</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>帽子</td><td>99.00</td><td><a href="javascript:;">刪除</a></td></tr><tr><td>2</td><td>大衣</td><td class="red">199.00</td><td><a href="javascript:;">刪除</a></td></tr></tbody><tfoot><tr><td colspan="4">消費總計： 298.00</td></tr></tfoot></table></div><!-- 右側圖表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 接口文檔地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 刪除功能* 4. 餅圖渲染*/const app = new Vue({el: '#app',data: {},})</script>

六、工程化開發和腳手架

1.開發Vue的兩種方式

  • 核心包傳統開發模式：基于html / css / js 文件，直接引入核心包，開發 Vue。
  • 工程化開發模式：基于構建工具（例如：webpack）的環境中開發Vue。

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

工程化開發模式優點：

提高編碼效率，比如使用JS新語法、Less/Sass、Typescript等通過webpack都可以編譯成瀏覽器識別的ES3/ES5/CSS等

工程化開發模式問題：

  • webpack配置不簡單
  • 雷同的基礎配置
  • 缺乏統一的標準

為了解決以上問題，所以我們需要一個工具，生成標準化的配置

2.腳手架Vue CLI

基本介紹：

Vue CLI 是Vue官方提供的一個全局命令工具

可以幫助我們快速創建一個開發Vue項目的標準化基礎架子。【集成了webpack配置】

好處：
  1. 開箱即用，零配置
  2. 內置babel等工具
  3. 標準化的webpack配置
使用步驟：
  1. 全局安裝（只需安裝一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
  2. 查看vue/cli版本： vue --version
  3. 創建項目架子：vue create project-name(項目名不能使用中文)
  4. 啟動項目：yarn serve 或者 npm run serve(命令不固定，找package.json)

七、項目目錄介紹和運行流程

1.項目目錄介紹

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

雖然腳手架中的文件有很多，目前咱們只需人事三個文件即可

  1. main.js 入口文件
  2. App.vue App根組件
  3. index.html 模板文件

2.運行流程

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

八、組件化開發

? 組件化：一個頁面可以拆分成一個個組件，每個組件有著自己獨立的結構、樣式、行為。

? 好處：便于維護，利于復用 → 提升開發效率。

? 組件分類：普通組件、根組件。

? 比如：下面這個頁面，可以把所有的代碼都寫在一個頁面中，但是這樣顯得代碼比較混亂，難易維護。咱們可以按模塊進行組件劃分

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

總結：

組件化的好處是什么？

組件的分類？

九、根組件 App.vue

1.根組件介紹

整個應用最上層的組件，包裹所有普通小組件

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

2.組件是由三部分構成

  • 語法高亮插件

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 三部分構成

    • template：結構 （有且只能一個根元素）
    • script: js邏輯
    • style： 樣式 (可支持less，需要裝包)

  • 讓組件支持less

    （1） style標簽，lang=“less” 開啟less功能

    （2） 裝包: yarn add less less-loader -D 或者npm i less less-loader -D

3.總結

App組件包含哪三部分？

十、普通組件的注冊使用-局部注冊

1.特點：

只能在注冊的組件內使用

2.步驟：

  1. 創建.vue文件（三個組成部分）
  2. 在使用的組件內先導入再注冊，最后使用

3.使用方式：

當成html標簽使用即可 <組件名></組件名>

4.注意：

組件名規范 —> 大駝峰命名法， 如 HmHeader

5.語法：

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

// 導入需要注冊的組件
import 組件對象 from '.vue文件路徑'
import HmHeader from './components/HmHeader'export default {  // 局部注冊components: {'組件名': 組件對象,HmHeader:HmHeaer,HmHeader}
}

6.練習

在App組件中，完成以下練習。在App.vue中使用組件的方式完成下面布局

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>
.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
</style>

<template><div class="hm-main">我是hm-main</div>
</template><script>
export default {}
</script><style>
.hm-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0;
}
</style>

<template><div class="hm-footer">我是hm-footer</div>
</template><script>
export default {}
</script><style>
.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;
}
</style>

7.總結

  • A組件內部注冊的局部組件能在B組件使用嗎
  • 局部注冊組件的步驟是什么
  • 使用組件時 應該按照什么命名法

十一、普通組件的注冊使用-全局注冊

1.特點：

全局注冊的組件，在項目的任何組件中都能使用

2.步驟

  1. 創建.vue組件（三個組成部分）
  2. main.js中進行全局注冊

3.使用方式

當成HTML標簽直接使用

<組件名></組件名>

4.注意

組件名規范 —> 大駝峰命名法， 如 HmHeader

5.語法

Vue.component(‘組件名’, 組件對象)

例：

// 導入需要全局注冊的組件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

6.練習

在以下3個局部組件中是展示一個通用按鈕

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

<template><button class="hm-button">通用按鈕</button>
</template><script>
export default {}
</script><style>
.hm-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;color: white;border: none;vertical-align: middle;cursor: pointer;
}
</style>

7.總結

1.全局注冊組件應該在哪個文件中注冊以及語法是什么？

2.全局組件在項目中的任何一個組件中可不可以使用？

十二、綜合案例

1.小兔仙首頁啟動項目演示

2.小兔仙組件拆分示意圖

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

3.開發思路

  1. 分析頁面，按模塊拆分組件，搭架子 (局部或全局注冊)

  2. 根據設計圖，編寫組件 html 結構 css 樣式 (已準備好)

  3. 拆分封裝通用小組件 (局部或全局注冊)

    將來 → 通過 js 動態渲染，實現功能

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

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

相關文章

yolov8 pose coco2yolo

yolov8 pose coco2yolo

import os import json from tqdm import tqdm import argparseparser argparse.ArgumentParser() # 這里根據自己的json文件位置&#xff0c;換成自己的就行 parser.add_argument(--json_path,defaultrC:\Users\k167\Desktop\dataset\person_dataset/instances_val2017_perso…
閱讀更多...
Echarts運用之柱狀圖常見問題及案例代碼

Echarts運用之柱狀圖常見問題及案例代碼

前言 ECharts 是一個開源的 JavaScript 可視化庫，用于生成各種類型的圖形和圖表。其中，柱狀圖（Bar chart）是一種常見的圖表類型，用于表示不同類別之間的數值比較。 初學者，可參考下我的另外一篇文章，從基礎到深入，解讀柱狀圖的運用。 Echarts之柱狀圖 常見問題及案例…
閱讀更多...
MQTT協議對比TCP網絡性能測試模擬弱網測試

MQTT協議對比TCP網絡性能測試模擬弱網測試

MQTT正常外網壓測數據---時延diff/ms如下圖&#xff1a; MQTT弱網外網壓測數據 TCP正常外網壓測數據 TCP弱網外網壓測數據 結論&#xff1a; 在弱網場景下&#xff0c;MQTT和TCP的網絡性能表現會有所不同。下面是它們在弱網環境中的對比&#xff1a; 連接建立&#xff1a;M…
閱讀更多...
python文件讀寫

python文件讀寫

文章目錄 讀文件python2&python3差異示例代碼 文件路徑問題處理&#xff1a;字符編碼報錯 讀文件 python2&python3差異 普通模式&#xff08;python2、python3通用&#xff09; f open(fileName, moder)open函數在python2和python3差異點&#xff1a; python3支持…
閱讀更多...
【代碼隨想錄刷題】Day20 二叉樹06

【代碼隨想錄刷題】Day20 二叉樹06

文章目錄 1.【654】最大二叉樹1.1 題目描述1.2 解題思路1.3 java代碼實現1.4 總結 2.【617】合并二叉樹2.1 題目描述2.2 解題思路2.3 java代碼實現 3.【700】二叉搜索樹中的搜索3.1 題目描述3.2 解題思路3.3 java代碼實現 4.【98】驗證二叉搜索樹4.1 題目描述4.2 解題思路4.3 j…
閱讀更多...
盤點11月Sui生態發展，了解Sui的近期成長歷程！

盤點11月Sui生態發展，了解Sui的近期成長歷程！

11月是Web3的“回暖期”&#xff0c;行業持續展現增長趨勢。Sui緊隨行業腳步&#xff0c;開展了一系列生態活動。其中歷時一個多月的Quest 3游戲活動順利結束并公布獎勵&#xff0c;在多地區成功舉辦Move和Sui生態黑客松&交流會&#xff0c;還有針對中文社區開發者教育的星…
閱讀更多...
MQTT協議對比QUIC網絡性能測試模擬弱網測試

MQTT協議對比QUIC網絡性能測試模擬弱網測試

MQTT正常外網壓測數據---時延diff/ms如下圖&#xff1a; MQTT弱網外網壓測數據 QUIC正常外網壓測數據 QUIC弱網外網壓測數據 結論&#xff1a; 在弱網情況下&#xff0c;MQTT和QUIC&#xff08;Quick UDP Internet Connections&#xff09;這兩種協議的網絡性能表現也會有…
閱讀更多...
Axure原型圖表組件庫，數據可視化元件（Axure9大屏組件）

Axure原型圖表組件庫，數據可視化元件（Axure9大屏組件）

針對Axure制作的大屏圖表元件庫&#xff0c;幫助產品經理更高效地制作高保真圖表原型&#xff0c;是產品經理必備元件工具。現分享完整的組件庫&#xff0c;大家一起學習。 本組件庫的圖表模塊&#xff0c;已包含所有常用的圖表&#xff0c;以下為部分組件截圖示意。文末可下載…
閱讀更多...
頁面初始化后，需要滾動到某個元素的位置，但是該元素尚未渲染完成。

頁面初始化后，需要滾動到某個元素的位置，但是該元素尚未渲染完成。

vue方式 <template><div class"doc"><!-- 判斷是否還在渲染期間 --><div class"fixed" v-show"loading">頁面仍在渲染中&#xff0c;請稍后</div><div class"green" v-show"!loading">…
閱讀更多...
TA-Lib學習研究筆記（九）——Pattern Recognition （2）

TA-Lib學習研究筆記（九）——Pattern Recognition （2）

TA-Lib學習研究筆記&#xff08;九&#xff09;——Pattern Recognition &#xff08;2&#xff09; 形態識別的函數的應用&#xff0c;通過使用A股實際的數據&#xff0c;驗證形態識別函數&#xff0c;用K線顯示出現標志的形態走勢&#xff0c;由于入口參數基本上是open, hig…
閱讀更多...
反向傳播算法

反向傳播算法

反向傳播算法的數學解釋 反向傳播算法是深度學習中用于訓練神經網絡的核心算法。它通過計算損失函數相對于網絡權重的梯度來更新權重&#xff0c;從而最小化損失。 反向傳播的基本原理 反向傳播算法基于鏈式法則&#xff0c;它按層反向傳遞誤差&#xff0c;從輸出層開始&…
閱讀更多...
寒冬不再寒冷：氣膜體育館如何打造溫馨運動天地

寒冬不再寒冷：氣膜體育館如何打造溫馨運動天地

取暖季即將來臨&#xff0c;隨著氣溫逐漸下降&#xff0c;人們在寒冷的冬季里如何保持運動熱情和身體的健康成為了一項挑戰。而在這個時候&#xff0c;氣膜體育館成為了運動愛好者們的理想場所&#xff0c;提供如春般溫暖舒適的運動環境。那么&#xff0c;讓我們一起揭秘氣膜體…
閱讀更多...
2024年SEO策略：如何優化您的知識庫？

2024年SEO策略：如何優化您的知識庫？

如今很多人在遇到問題時都會求助于谷歌。谷歌已經成為提供解決方案不可或缺的工具。作為全球搜索引擎的巨頭&#xff0c;擁有大量用戶流量。這就是為什么確保您的產品和服務在谷歌搜索結果中排名靠前是至關重要的&#xff0c;如果您想獲得更多的客戶&#xff0c;SEO是一個非常關…
閱讀更多...
Filed II 繪制超聲 3D/2D 點擴散函數

Filed II 繪制超聲 3D/2D 點擴散函數

點擴散函數可以較好地描述超聲對成像目標分辨能力，利用 filed II 仿真工具實現點擴算函數 PSF 的 3D 和 2D 繪制。 定義換能器基本參數 f0=5e6; % Transducer center frequency [Hz] fs=100e6; % Sampling frequency [Hz] c=1540; % Speed of sound [m/s] width=0.15/1000
閱讀更多...
＜Linux＞ 文件系統

＜Linux＞ 文件系統

目錄 前言&#xff1a; 一、 磁盤 &#xff08;一&#xff09;磁盤的物理結構 &#xff08;二&#xff09;磁盤的物理存儲結構 1. 數據存儲 2. 存儲結構 二、磁盤的邏輯抽象 三、磁盤信息 &#xff08;一&#xff09;具體結構 &#xff08;二&#xff09;重新認識目錄…
閱讀更多...
SOLIDWORKS Flow Simulation電子機箱散熱

SOLIDWORKS Flow Simulation電子機箱散熱

這一次我們來聊聊電子冷卻問題&#xff0c;以這個機箱散熱問題為例&#xff0c;我們一般的散熱設計要求是CPU不能超過80℃&#xff0c;北橋芯片溫度不能超過85℃&#xff0c;南橋芯片不超過95℃。在實際情況下芯片內部的各處溫度是不一樣&#xff0c;面對與芯片級別的散熱分析我…
閱讀更多...
mysql中MDL（元數據鎖）的長事務讀寫阻塞如何解決

mysql中MDL（元數據鎖）的長事務讀寫阻塞如何解決

MDL&#xff0c;即元數據鎖是什么&#xff0c;我們已經介紹過了 那其存在的長事務讀寫阻塞問題&#xff0c;一般是怎么解決的呢&#xff0c;主要有兩種解決方法。 online ddl MySQL5.6開始&#xff0c;推出一項新功能Online DDL&#xff0c;在ALTER或者CREATE INDEX等語句后添…
閱讀更多...
【教學類-35-05】17號的學號字帖（A4豎版1份）

【教學類-35-05】17號的學號字帖（A4豎版1份）

作品展示&#xff1a; 背景需求&#xff1a; 大四班17號男孩目前無法自主數學數字。他表示自己能夠認識數字&#xff0c;但不會寫。 保育老師說&#xff1a;我曾經教過他&#xff0c;抓著手示范的。但是他記不住。家里估計也不練習的。年齡還沒到&#xff0c;下學期再看看能不…
閱讀更多...
有限空間作業中毒窒息事故頻發，漢威科技創新方案護航

有限空間作業中毒窒息事故頻發，漢威科技創新方案護航

工貿企業有限空間是我國重大事故多發頻發的重點領域之一&#xff0c;安全問題形勢嚴峻。 有限空間是指封閉或者部分封閉、未被設計為固定工作場所&#xff0c;人員可以進入&#xff0c;通風不良&#xff0c;易造成有毒有害物質、易燃易爆氣體積聚或者氧含量不足的空間&#xf…
閱讀更多...
消息中間件基本概念

消息中間件基本概念

基本概念 消息隊列三個場景&#xff1a;異步&#xff0c;削峰&#xff0c;解耦 異步&#xff1a;將整個流程進行異步發送&#xff0c;也就是說本來順序執行的程序化流程&#xff0c;異步后可以同時進行操作&#xff0c;互不影響&#xff0c;但保持最終結果一致性&#xff1b;…
閱讀更多...
最新文章

Copyright @ 2022~2023