案例-商品列表（組件封裝）

??

標簽組件封裝


1.雙擊顯示，自動聚焦

2.失去焦點，隱藏輸入框
標簽一列，不同行的標簽內容不同，但是除此之外其他基本一致，所以選擇用 標簽組件 將這一部分封裝為一個組件，需要時組件標簽展示。

首先標簽處一進去就是顯示的 “茶具” 雙擊之后才顯示輸入框。所以輸入框和 “茶具”的顯示兩者是互斥的，用 v-if 和 v-else 來控制。

v-if 傳值為“isEdit” 如果為 false 就顯示 “茶具”，（最初定義的就是false，也就是一開始進去就是 “茶具”，什么時候會變為true繼而顯示輸入框呢），給v-else 也就是“茶具”所在的元素注冊一個雙擊事件，雙擊之后 isEdit由false變為true，就會顯示輸入框了。

接下來是聚焦，想要實現的是雙擊“茶具”出現輸入框之后就自動進行聚焦。開始做法是給輸入框dom元素添加ref屬性，在顯示輸入框之后this.isEdit=true，通過$refs立刻獲取焦點。但是vue是異步更新，輸入框顯示但是dom并沒有進行更新，所以出錯。這時，通過$nextTick檢測dom元素更新完成之后就立刻獲取焦點。

每次想要實現聚焦效果都要寫這一段代碼，很是麻煩，可以將這個效果進行指令封裝，并全局注冊，需要時直接添加指令即可。




輸入框和茶具不能一同顯示，兩個是互斥關系，用v-if和v-else



指令封裝，dom元素插入頁面自動聚焦

或者



輸入框失去焦點(顯示茶具）



App.vue

<template><div class="table-case"><table class="my-table"><thead><tr><th>編號</th><th>名稱</th><th>圖片</th><th width="100px">標簽</th></tr></thead><tbody><tr><td>1</td><td>梨皮朱泥三絕清代小品壺經典款紫砂壺</td><td><img src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" /></td><td><!-- 標簽組件 --><MyTag></MyTag></td></tr><tr><td>1</td><td>梨皮朱泥三絕清代小品壺經典款紫砂壺</td><td><img src="https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg" /></td><td><!-- 標簽組件 --><MyTag></MyTag></td></tr></tbody></table></div>
</template><script>
// my-tag 標簽組建的封裝
//  1.創建組件 - 初始化
//  2.實現功能
//    (1)雙擊顯示，并且自動聚焦 
//       v-if v-else @dbclick 
//       &nextTick =>$refs獲取到dom ,進行focus獲取焦點
//       封裝v-focus指令
//     (2)失去焦點，隱藏輸入框
//     (3)回顯標簽信息
//     (4)內容修改了，回車 =》 修改標簽信息import MyTag from './components/MyTag.vue'
export default {name: 'TableCase',components: {MyTag,},data() {return {goods: [{id: 101,picture:'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',name: '梨皮朱泥三絕清代小品壺經典款紫砂壺',tag: '茶具',},{id: 102,picture:'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',name: '全防水HABU旋鈕牛皮戶外徒步鞋山寧泰抗菌',tag: '男鞋',},{id: 103,picture:'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',name: '毛茸茸小熊出沒，兒童羊羔絨背心73-90cm',tag: '兒童服飾',},{id: 104,picture:'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',name: '基礎百搭，兒童套頭針織毛衣1-9歲',tag: '兒童服飾',},],}},
}
</script><style lang="less" scoped>
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all 0.5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}}}
</style>

MyTag.vue

<template>
<div class="my-tag"><input v-if="isEdit"v-focusref="inp"class="input"type="text"placeholder="輸入標簽"@blur="isEdit = false"/><div v-else @dblclick="handleClick" class="text">茶具</div>
</div>
</template><script>
export default {data(){return {isEdit:false,}},methods:{handleClick(){// 雙擊后切換到顯示狀態（輸入框）this.isEdit = true// // // 通過ref找到元素，立刻獲取焦點// // this.$refs.inp.focus()// // 異步更新，切換到顯示狀態后，dom并沒有進行更新，立即獲取焦點實際是獲取不到的// // 等dom更新王再獲取焦點// this.$nextTick(() => {//   this.$refs.inp.focus()// })// // 每次都要點focus進行獲取焦點很麻煩，可以將這套指令封裝為指令，在main.js中進行全局注冊}}}
</script><style lang="less" scoped>.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;&::placeholder {color: #666;}}}</style>

main.js





3.回顯標簽信息

4.內容修改了，回車 =>修改標簽信息

回顯的標簽信息是父組件傳遞過來的，在data中定義數據tempText，在子組件標簽中通過v-model幫綁定該數據，子組件中通過props接收該數據值value，顯示為還未雙擊之前的值，雙擊之后輸入框出現，顯示為輸入框回顯的值 ：value="value"。

修改輸入框中的內容回車之后希望顯示修改后的內容。也就是將修改后的數據傳送到父組件，父組件再傳送回子組件進行顯示。通過鍵盤回車綁定事件，將用戶輸入數據傳送回父組件，e.target能拿到事件源，也就是dom元素，e.target.value能拿到用戶輸入的值。


App.vue

<template><div class="table-case"><table class="my-table"><thead><tr><th>編號</th><th>名稱</th><th>圖片</th><th width="100px">標簽</th></tr></thead><tbody><tr><td>1</td><td>梨皮朱泥三絕清代小品壺經典款紫砂壺</td><td><img src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" /></td><td><!-- 標簽組件 --><MyTag v-model="tempText"></MyTag></td></tr><tr><td>1</td><td>梨皮朱泥三絕清代小品壺經典款紫砂壺</td><td><img src="https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg" /></td><td><!-- 標簽組件 --><MyTag></MyTag></td></tr></tbody></table></div>
</template><script>
// my-tag 標簽組建的封裝
//  1.創建組件 - 初始化
//  2.實現功能
//    (1)雙擊顯示，并且自動聚焦 
//       v-if v-else @dbclick 
//       &nextTick =>$refs獲取到dom ,進行focus獲取焦點
//       封裝v-focus指令
//     (2)失去焦點，隱藏輸入框//     (3)回顯標簽信息
//        回顯的標簽信息是父組件傳遞過來的
//        v-model實現功能（簡化代碼） v-model => :value 和 @input(事件監聽)
//        組件內部通過props接收,:value設置給輸入框
//     (4)內容修改了，回車 =》 修改標簽信息
//         @keyup.enter,觸發事件$emit('input',e.target.value)import MyTag from './components/MyTag.vue'
export default {name: 'TableCase',components: {MyTag,},data() {return {// 測試組件功能臨時數據tempText:'茶壺', //希望子組件內容能跟這個數據進行雙向綁定,這里傳入啥,子組件就顯示啥;子組件回車又能修改到這里的數據goods: [{id: 101,picture:'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',name: '梨皮朱泥三絕清代小品壺經典款紫砂壺',tag: '茶具',},{id: 102,picture:'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',name: '全防水HABU旋鈕牛皮戶外徒步鞋山寧泰抗菌',tag: '男鞋',},{id: 103,picture:'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',name: '毛茸茸小熊出沒，兒童羊羔絨背心73-90cm',tag: '兒童服飾',},{id: 104,picture:'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',name: '基礎百搭，兒童套頭針織毛衣1-9歲',tag: '兒童服飾',},],}},
}
</script><style lang="less" scoped>
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all 0.5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}}}
</style>

MyTag.vue

<template>
<div class="my-tag"><!-- v-model不能跟父組件傳遞過來的數據進行直接綁定,一旦綁定,就相當于直接在修改父組件傳遞過來的數據,子組件泵你直接修改父組件傳遞過來的數據 --><!--  :value="value"相當于父組件傳遞過來什么值,子組件就顯示什么值并進行綁定,該值就回顯了 --><input v-if="isEdit"v-focusref="inp"class="input"type="text"placeholder="輸入標簽"@blur="isEdit = false":value="value"@keyup.enter="handleEnter"/><div v-else @dblclick="handleClick" class="text"><!-- 茶具 -->{{ value }}</div>
</div>
</template><script>
export default {props:{value:String,},data(){return {isEdit:false,}},methods:{handleClick(){// 雙擊后切換到顯示狀態（輸入框）this.isEdit = true// // // 通過ref找到元素，立刻獲取焦點// // this.$refs.inp.focus()// // 異步更新，切換到顯示狀態后，dom并沒有進行更新，立即獲取焦點實際是獲取不到的// // 等dom更新王再獲取焦點// this.$nextTick(() => {//   this.$refs.inp.focus()// })// // 每次都要點focus進行獲取焦點很麻煩，可以將這套指令封裝為指令，在main.js中進行全局注冊},handleEnter(e){// 非空處理if (e.target.value.trim() === '') return alert('標簽不能為空')// 需要子傳父,回車時,輸入框的內容提交給父組件更新,// 父組件是v-model,觸發事件,需要觸發input事件this.$emit('input',e.target.value)// 或者this.$refs.inp.value// e.target拿到的是觸發事件的事件源,也就是dom元素,想拿到輸入框輸入的值,直接.value就是了// 提交完成,關閉輸入狀態}}}
</script><style lang="less" scoped>.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;&::placeholder {color: #666;}}}</style>

my-table表格組件封裝

表格中表頭和中間體不能寫死，類似的表格還有很多，可以復用。

中間體：表格組件中接收父組件傳過來的數據，進行遍歷顯示。因為該部分不能固定著，以便將來能復用，所以將該部分td表格中的內容用slot具名插槽進行占位，并將td表格中內容剪切到父組件的表格組件標簽中，用template標簽接收插槽名。還因為該部分遍歷的數據item和index在表格組件里，所以需要用slot以屬性的方式將這兩個數據打包成對象傳到父組件，父組件直接解構接收。


表頭:直接將標頭的內容剪切到父組件的子組件標簽中，并在子組件中使用具名插槽占位


并且在表格組件標簽的“標簽”一列顯示 MyTag標簽組件標簽，將其v-model綁定的數據改為item中的tag

App.vue

<template><div class="table-case"><MyTable :data="goods"><tempalte :slot="head"><th>>編號</th><th>>圖片</th><th>>名稱</th><th width="100px">標簽</th></tempalte><template #body="{item,index}"><td>{{ index+1 }}</td><td>{{ item.name }}</td><td><img :src="item.picture" /></td><td><!-- 標簽組件 --><MyTag v-model="item.tag"></MyTag></td></template></MyTable></div>
</template><script>
// my-tag 標簽組建的封裝
//  1.創建組件 - 初始化
//  2.實現功能
//    (1)雙擊顯示，并且自動聚焦 
//       v-if v-else @dbclick 
//       &nextTick =>$refs獲取到dom ,進行focus獲取焦點
//       封裝v-focus指令
//     (2)失去焦點，隱藏輸入框//     (3)回顯標簽信息// 回顯的標簽信息是父組件傳遞過來// v-moedl實現功能(簡化代碼) v-model => :value 和 @input// 組件內部通過props接收,:value設置給輸入框
//     (4)內容修改了，回車 =》 修改標簽信息// @keyup.enter,觸發事件$emit('input',r.target.value)// my-tag 表格組件的封裝
// 1.數據不能寫死,動態傳遞表格渲染的數據
// 2.結構不能寫死 - 多處結構自定義// (1)表頭支持自定義// (2)主體支持自定義
import MyTag from './components/MyTag.vue'
import MyTable from './components/MyTable.vue'export default {// 測試組件功能臨時文本tempText:'茶壺',name: 'TableCase',components: {MyTag,MyTable,},data() {return {goods: [{id: 101,picture:'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',name: '梨皮朱泥三絕清代小品壺經典款紫砂壺',tag: '茶具',},{id: 102,picture:'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',name: '全防水HABU旋鈕牛皮戶外徒步鞋山寧泰抗菌',tag: '男鞋',},{id: 103,picture:'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',name: '毛茸茸小熊出沒，兒童羊羔絨背心73-90cm',tag: '兒童服飾',},{id: 104,picture:'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',name: '基礎百搭，兒童套頭針織毛衣1-9歲',tag: '兒童服飾',},],}},
}
</script><style lang="less" scoped>
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}}
</style>

MyTable.vue

<template><table class="my-table"><thead><tr><slot name="head"></slot></tr></thead><tbody><tr v-for="(item,index) in data" :key="item.di"><slot :item="item" :index="index"></slot></tr>    </tbody></table>
</template><script>
export default {props:{data:{type:Array,required:true,}}
}
</script><style lang="less">.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all 0.5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}}</style>

MyTag.vue

<template><div class="my-tag"><input v-if="isEdit"v-focusref="inp"class="input"type="text"placeholder="輸入標簽":value="value"@blur="isEdit = false"@keyup.enter="handleEnter"/><div v-else @dblclick="handleClick" class="text"><!-- 茶具 -->{{ value }}</div></div></template><script>export default {props:{value:String},data(){return {isEdit:false,}},methods:{handleClick(){// 雙擊后切換到顯示狀態（輸入框）this.isEdit = true// // // 通過ref找到元素，立刻獲取焦點// // this.$refs.inp.focus()// // 異步更新，切換到顯示狀態后，dom并沒有進行更新，立即獲取焦點實際是獲取不到的// // 等dom更新王再獲取焦點// this.$nextTick(() => {//   this.$refs.inp.focus()// })// // 每次都要點focus進行獲取焦點很麻煩，可以將這套指令封裝為指令，在main.js中進行全局注冊},handleEnter(e){if (e.target.value.trim() === '') return alert('標簽不能為空')// 子傳父,將回車時,輸入框的內容提交給父組件更新// 由于父組件是v-model,所以觸發事件需要觸發input事件this.$emit('input',e.target.value)// 提交完成,關閉輸入狀態this.isEdit = false}}}</script><style lang="less" scoped>.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;&::placeholder {color: #666;}}}</style>




補充：在輸入框中的? :value = "value",是指將父組件通過v-model傳過來的value值綁定給輸入框自定義的屬性 :value。后面e.target.value也就是獲取元素對象屬性value的值。

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

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

相關文章

Python 基礎學習(一)

Python 基礎學習(一)

一.基礎語法 注釋 Python中單行注釋以 # 開頭&#xff0c;如下&#xff1a; #!/usr/bin/python3# 第一個注釋 print ("Hello, Python!") # 第二個注釋多行注釋可以用多個 # 號&#xff0c;還有 ‘’’ 和 “”"&#xff1a; #!/usr/bin/python3# 第一個注釋…
閱讀更多...
TIM輸入捕獲---STM

TIM輸入捕獲---STM

一、簡介 IC輸入捕獲 輸入捕獲模式下&#xff0c;當通道輸入引腳出現指定電平跳變時&#xff0c;當前CNT的值將被鎖存在CCR中&#xff0c;可用于測量PWM波形的頻率、占空比、脈沖間隔、電平持續時間等參數 每個高級定時器和通用定時器都擁有4個輸入捕獲通道 可配置為PWMI模…
閱讀更多...
【Android Studio】學習——網絡連接

【Android Studio】學習——網絡連接

實驗&#xff1a;Android網絡連接 文章目錄 實驗&#xff1a;Android網絡連接[toc]實驗目標和實驗內容&#xff1a;1、掌握Android聯網的基本概念&#xff1b;2、能夠使用URL connection實現網絡連接&#xff1b;3、掌握第三方庫的基本概念4、需實現的具體功能 實驗結果功能說明…
閱讀更多...
ROS學習筆記二：ROS環境搭建

ROS學習筆記二：ROS環境搭建

安裝ubuntu安裝ROS 參考趙虛左老師教程&#xff1a;ROS安裝ROS 快速上手體驗 -使用命令來實現 –創建工作空間&#xff1a; mkdir -p ros_learn_ws/src// ros_learn_ws為自定義空間 cd ros_learn_ws catkin_make –創建ROS功能包并添加依賴 cd src catkin_create_pkg demo_01 r…
閱讀更多...
5G中什么是ATG網絡？

5G中什么是ATG網絡？

有人問Air to Ground Networks for NR是怎么回事&#xff1f;這個是R18 NR才引入的。 ATG很多部分和NTN類似中的內容類似。比較明顯不同的是&#xff0c;NTN的RF內容有TS 38.101-5單獨去講&#xff0c;而ATG則會和地面網絡共用某些band&#xff0c;ATG可以工作在N1/N3/N34/N39…
閱讀更多...
基礎算法--雙指針

基礎算法--雙指針

兩數之和 點擊&#xff1a;題目鏈接 解法一&#xff1a;暴力解法 時間復雜度&#xff1a;O(N^2) 算法思路&#xff1a;兩層for循環即可列出所有兩個數字的組合&#xff0c;判斷是否等于目標值 算法流程&#xff1a; 兩層 for 循環&#xff1a; 外層 for 循環依次枚舉第?個…
閱讀更多...
什么是Linux系統架構？

什么是Linux系統架構？

? Linux系統架構是指Linux操作系統的整體結構和工作層次&#xff0c;它定義了系統組件如何交互、如何管理硬件資源&#xff0c;以及用戶如何通過不同的層次與系統進行交互。Linux架構通常有兩種劃分方法&#xff1a;系統層次架構和功能層次架構&#xff0c;兩者都可以很好地描…
閱讀更多...
spring6：4、原理-手寫IoC

spring6：4、原理-手寫IoC

目錄 4、原理-手寫IoC4.1、回顧Java反射4.2、實現Spring的IoC 4、原理-手寫IoC 我們都知道&#xff0c;Spring框架的IOC是基于Java反射機制實現的&#xff0c;下面我們先回顧一下java反射。 4.1、回顧Java反射 Java反射機制是在運行狀態中&#xff0c;對于任意一個類&#x…
閱讀更多...
不是“我應該做什么”，而是“我想做什么”

不是“我應該做什么”，而是“我想做什么”

1. 識別內心的渴望 首先&#xff0c;我們需要識別自己真正的愿望和激情所在。這可能需要一些時間和自我反思。問自己&#xff1a;在沒有任何外界壓力的情況下&#xff0c;我真正想做的是什么&#xff1f;是賺錢、生活、旅行、追星&#xff0c;還是其他什么&#xff1f;識別這些…
閱讀更多...
30天學會Go--第7天 GO語言 Redis 學習與實踐

30天學會Go--第7天 GO語言 Redis 學習與實踐

30天學會Go–第7天 GO語言 Redis 學習與實踐 文章目錄 30天學會Go--第7天 GO語言 Redis 學習與實踐前言一、Redis 基礎知識1.1 Redis 的核心特性1.2 Redis 常見使用場景 二、安裝 Redis2.1 在 Linux 上安裝2.2 在 Windows 上安裝2.3 使用 Docker 安裝 Redis 三、Redis 常用命令…
閱讀更多...
Vue項目開發 如何實現父組件與子組件數據間的雙向綁定？

Vue項目開發 如何實現父組件與子組件數據間的雙向綁定？

在 Vue.js 中&#xff0c;實現父組件與子組件數據之間的雙向綁定&#xff0c;可以通過以下幾種方式。下面我將介紹幾種常見的方法&#xff0c;并解釋它們的實現原理和適用場景。 1. 使用 v-model 實現雙向綁定 v-model 是 Vue.js 中最常見的雙向綁定方式&#xff0c;它可以使…
閱讀更多...
React第十七章(useRef)

React第十七章(useRef)

useRef 當你在React中需要處理DOM元素或需要在組件渲染之間保持持久性數據時&#xff0c;便可以使用useRef。 import { useRef } from react; const refValue useRef(initialValue) refValue.current // 訪問ref的值 類似于vue的ref,Vue的ref是.value&#xff0c;其次就是vu…
閱讀更多...
【C++】內存分布、new、delete、 operator new、operator delete

【C++】內存分布、new、delete、 operator new、operator delete

內存分布 在C語言和C中&#xff0c;程序內存被劃分成六個部分&#xff1a; 內核空間、棧、內存映射段、堆、數據段、代碼段 棧&#xff1a;又稱堆棧&#xff0c;主要為非靜態局部變量、函數參數、返回值等&#xff0c;棧的生長方向是向下生長的 內存映射段&#xff1a;高效的…
閱讀更多...
代碼隨想錄算法訓練營day37|動態規劃part5

代碼隨想錄算法訓練營day37|動態規劃part5

今天的幾道題目都比較簡單&#xff0c;思路也比較相似&#xff0c;都是利用完全背包。完全背包和01背包的不同點在于完全背包每個元素可以取多次&#xff0c;而01背包只能取1次&#xff0c;所以在dp一維數組遍歷時&#xff0c;完全背包仍然要從前往后遍歷&#xff0c;并且無論是…
閱讀更多...
混合云策略在安全領域受到青睞

混合云策略在安全領域受到青睞

Genetec 發布了《2025 年物理安全狀況報告》&#xff0c;該報告根據超過 5,600 名該領域領導者&#xff08;其中包括 100 多名來自澳大利亞和新西蘭的領導者&#xff09;的回應&#xff0c;揭示了物理安全運營的趨勢。 報告發現&#xff0c;澳大利亞和新西蘭的組織采用混合云策…
閱讀更多...
FastAPI解決跨域報錯net::ERR_FAILED 200 (OK)

FastAPI解決跨域報錯net::ERR_FAILED 200 (OK)

目錄 一、跨域問題的本質 二、FastAPI中的CORS處理 1. 安裝FastAPI和CORS中間件 2. 配置CORS中間件 3. 運行FastAPI應用 三、解決跨域報錯的步驟 四、案例：解決Vue.js與FastAPI的跨域問題 1. Vue.js前端應用 2. FastAPI后端API 3. 配置CORS中間件 4. 運行和測試 五…
閱讀更多...
為什么 JavaScript 中的 `new` 運算符報錯？

為什么 JavaScript 中的 `new` 運算符報錯？

在 JavaScript 中&#xff0c;new 運算符通常用于創建一個新對象并調用構造函數來初始化對象。然而&#xff0c;new 運算符可能會引發一些錯誤&#xff0c;通常是由于以下原因導致的&#xff1a; 構造函數沒有正確的定義&#xff1a; 如果使用 new 運算符調用的函數沒有正確地定…
閱讀更多...
霍爾效應電流傳感器

霍爾效應電流傳感器

適用于大電流&#xff0c;低功耗的電流檢測&#xff1a; TVS選型: RS232的隔離電路: 單片機采集200伏高壓 如何做隔離電路&#xff1a; 采用線性光電耦合器HCNR200實現高壓直流母線電壓的精確采樣。還是用電阻分壓&#xff0c;只是在ADC檢測階段加上隔離芯片&#xff1a;
閱讀更多...
如何設置Java爬蟲的異常處理？

如何設置Java爬蟲的異常處理？

在Java爬蟲中設置異常處理是非常重要的&#xff0c;因為網絡請求可能會遇到各種問題&#xff0c;如連接超時、服務器錯誤、網絡中斷等。通過合理的異常處理&#xff0c;可以確保爬蟲的穩定性和健壯性。以下是如何在Java爬蟲中設置異常處理的步驟和最佳實踐&#xff1a; 1. 使用…
閱讀更多...
ceph /etc/ceph-csi-config/config.json: no such file or directory

ceph /etc/ceph-csi-config/config.json: no such file or directory

環境 rook-ceph 部署的 ceph。 問題 kubectl describe pod dragonfly-redis-master-0Warning FailedMount 7m59s (x20 over 46m) kubelet MountVolume.MountDevice failed for volume "pvc-c63e159a-c940-4001-bf0d-e6141634cc55" : rpc error: cod…
閱讀更多...
最新文章

Copyright @ 2022~2023