Vue3 組件化開發

文章目錄

  • 前言
  • 組件化開發
    • 底部菜單 TabMenu
  • 父子組件相互傳數據
    • 父傳子：自定義屬性
    • 子傳父：自定義事件
    • 父子組件互傳案例
  • 插槽 slot
    • 多個插槽
  • 總結
    • 組件化開發總結
    • Vue組件的基本組成
    • 子組件使用的三個步驟
    • 父子組件相互傳遞數據

前言

提示：這里可以添加本文要記錄的大概內容：

Vue.js 是一種現代化的前端框架，可以用于構建可復用的組件化應用程序。Vue.js 提供了一種基于組件的架構，使得開發人員可以將應用程序分解為多個可重用的組件。

Vue.js 組件是一個可復用的代碼模塊，可以在 Vue.js 應用程序中使用。組件包括 HTML 模板、JavaScript 代碼和 CSS 樣式，并且可以包含其他組件。

Vue.js 組件化開發的主要優勢包括：

  1. 模塊化：Vue.js 組件使得應用程序變得更易于管理和維護，可以將應用程序分解為多個小模塊，每個模塊都有自己的功能和樣式。

  2. 可重用性：組件化開發使得開發人員可以編寫可重用的代碼片段，可以在不同的項目中使用，并且可以在同一應用程序中多次使用。

  3. 維護性：組件化開發使得代碼更加模塊化，更易于維護和測試。

  4. 性能：在 Vue.js 中使用組件可以提高應用程序的性能，因為它可以在需要時延遲加載組件。

總之，Vue.js 組件化開發是一種高效的方式，可以幫助開發人員構建可維護和可重用的應用程序。

提示：以下是本篇文章正文內容，下面案例可供參考

組件化開發

首先Ctrl+c 停止上面項目訪問，新建一個項目
cd ..：返回上一級
在這里插入圖片描述

接下來就是把【創建Vue-Cli工程】的過程再來一遍：
完整過程：

  1. 新建文件夾【vue create 小寫名字】：vue create component 。component（組件化開發）
  2. 選擇最后一個：Manually select features
  3. 空格去掉倒數第三個：( * ) Linter / Formatter
  4. 默認選擇3.x
  5. 選擇倒數第二個：In package.json
  6. 不保存： n

出現Successfully代表創建成功
在這里插入圖片描述
打開項目，進行一些默認操作：

①、用腳手架創建項目時，把腳手架生成的代碼刪除掉
在這里插入圖片描述
②、刪除App.vue內所有代碼，隨后輸入vue選擇第一個
在這里插入圖片描述

在template標簽中加代碼：

    <h1>{{ title }}</h1>

在script標簽中的data函數的返回對象加代碼：

title:'我是根組件'

打開終端輸入：npm run serve，就可以運行了
在這里插入圖片描述
在components文件夾下新建個子組件TabMenu.vue，名字是駝峰式命名

生成基本結構，輸入vue回車，加點代碼與樣式，這里可以隨便寫，主要是展示子組件的使用
在這里插入圖片描述
在這里插入圖片描述
現在一個根組件（App.vue），一個子組件（TabMenu.vue），運行：
在這里插入圖片描述

那么如何在根組件中使用子組件呢？

底部菜單 TabMenu

以App.vue根組件，TabMenu.vue子組件為例：

  1. 導入需要的子組件（在script標簽內）
import TabMenu from '@/components/TabMenu.vue';  //@相當于src

或者寫成：

import TabMenu from '../components/TabMenu.vue';

當然需要在components 文件夾下新建 TabMenu 視圖：
在這里插入圖片描述
詳細代碼：

<!-- 定義組件的模板 -->
<template><div><!-- 底部選項卡 --><ul class="tab-menu"><!-- 首頁選項 --><li @click="gotoIndex"><i class="fa fa-home"></i><p>首頁</p></li><!-- 發現選項 --><li @click="gotoBusiness"><i class="fa fa-compass"></i><p>發現</p></li><!-- 訂單選項 --><li @click="gotoMyOrders"><i class="fa fa-file-text-o"></i><p>訂單</p></li><!-- 我的選項 --><li @click="gotoMy"><i class="fa fa-user-o"></i><p>我的</p></li></ul></div>
</template><script>
// 引入路由
import router from '@/router';export default {data() {return {}},methods: {// 跳轉到首頁gotoIndex() {router.push('/')},// 跳轉到個人中心gotoMy() {// 判斷是否登錄let login = sessionStorage.getItem('login')if (login == null) {// 未登錄則跳轉到登錄頁router.push('/login')} else{// 已登錄則跳轉到個人中心頁router.push('/my')}},// 跳轉到發現頁gotoBusiness() {router.push('/business')},// 跳轉到我的訂單頁gotoMyOrders() {router.push('/myOrders')}},components: {},computed: {},watch: {},mounted() {},
}
</script><style scoped>/* 底部選項卡樣式 */.tab-menu{width: 100vw; /* 設置選項卡寬度為屏幕寬度 */height: 14vw; /* 設置選項卡高度為14vw */background-color: #fff; /* 設置選項卡背景色為白色 */border-top: 0.2vw solid #ddd; /* 設置選項卡上邊框為0.2vw寬的灰色實線 */display: flex; /* 設置選項卡為彈性布局 */justify-content: space-around; /* 設置選項卡內子元素沿主軸間距相等 */align-items: center; /* 設置選項卡內子元素沿側軸居中對齊 */position: fixed; /* 設置選項卡為固定定位 */left: 0; /* 設置選項卡距離左側為0 */bottom: 0; /* 設置選項卡距離底部為0 */}/* 選項樣式 */.tab-menu li{display: flex; /* 設置選項為彈性布局 */flex-direction: column; /* 設置選項內子元素排列方向為垂直方向 */justify-content: center; /* 設置選項內子元素沿主軸居中對齊 */align-items: center; /* 設置選項內子元素沿側軸居中對齊 */color: #999; /* 設置選項內子元素顏色為灰色 */}
</style>
  1. 在 components 的配置項中注冊子組件
components: {TabMenu},
  1. 在template中以標記的語法使用子組件
<TabMenu></TabMenu>

在這里插入圖片描述
當然在命令行中運行上這句：npm i font-awesome

效果：
在這里插入圖片描述

父子組件相互傳數據

在父子組件中如何讓他倆可以相互發數據？

以App.vue根組件，Data.vue子組件為例：

父傳子：自定義屬性

先寫先接受數據的一方

  1. 父給子傳數據，先給子組件里面增加一個新個配置項props，自定義屬性的意思

在components文件中新建子組件Data.vue（script標簽內）
vue生成基本結構后，增加props配置項

  // 數組形式，里面自定義名字props: ['test']
  1. 在template標簽內加上插值語法把上面的自定義名字加上去
<template><div><h1>數據子組件</h1><h1>這是父組件傳遞給我的數據：{{ test }}</h1></div>
</template>
  1. 在父組件中再導入該子組件（在script標簽內）
import Data from '@/components/Data.vue'
  1. 在components的配置項中注冊子組件
  components: {TabMenu,Data}, //TabMenu是另一個子組件，多個子組件用逗號隔開
  1. 在template中以標記的語法使用子組件
<Data></Data>

父組件App.vue中完整代碼：

<template><div><h1>{{ title }}</h1><!-- 3.在template中以標記的語法使用子組件 --><TabMenu></TabMenu><Data></Data></div>
</template><script>
// 1.導入需要的子組件
import TabMenu from '@/components/TabMenu.vue';  
import Data from '@/components/Data.vue'
export default {data () {return {title:'我是根組件'}},methods: {},//2.在components的配置項中注冊子組件components: {TabMenu,Data},  //TabMenu是另一個子組件，多個子組件用逗號隔開computed: {},watch: {},mounted () {}
}
</script>
<style scoped>
</style>

輸出效果：
在這里插入圖片描述
但是現在里面還沒有數據，因為在Data.vue中test是自定義屬性

  1. 接下來在父組件中加入自定義屬性：
<Data test="你好啊"></Data>

在這里插入圖片描述

如果說要在子組件里再定義一個屬性，父組件再傳一個，只需要在相應位置加上屬性后用逗號隔開即可

子組件中：
在這里插入圖片描述
在這里插入圖片描述
父組件中：
在這里插入圖片描述

子傳父：自定義事件

recive()：接收子給父傳上來的數據，有參，代表傳來的數據

在父組件中：

  1. 自定義一個事件，這里取名abc
    <Data test="你好啊" test1="世界" @abc = "recive"></Data>
  1. 在methods配置項中定義recive()函數方法
  methods: {recive(d){// d：代表子給父發的數據this.title = d   //更改title值}},

子組件中：

  1. 在子組件中編寫一個函數，加入一個事件：
    在這里插入圖片描述

  2. 給v-model的屬性tes在data函數的return里面配置一下

  3. methods內加上send方法

    send(){this.$emit('abc',this.text)//this.$emit('在父組件中配置的事件名字',this.發送給父組件的數據)}

在這里插入圖片描述
最后輸出：
在這里插入圖片描述

父子組件互傳案例

一個App父組件
兩個子組件：一個添加待辦事項組件、一個待辦列表組件

如果之前有項目在終端開著先Ctrl+c關掉
然后新建一個待辦項目：vue create todo，然后依次回車選擇配置選項
然后進入到 todo 項目中，刪掉HelloWorld.vue文件 和 App.vue中所有代碼（輸入vue重新生成）

在components文件夾中創建新子組件AddItem.vue 和 List.vue

在父組件中使用子組件：

  1. 導入需要的子組件
  2. 在 components 的配置項中注冊子組件
  3. 在 template 中以標記的語法使用子組件

目前為止父組件中代碼：

<template><div><h1>待辦事項</h1><!-- 3.使用 --><AddItem></AddItem><List></List></div>
</template><script>
// 1. 導入
import AddItem from '@/components/AddItem.vue';
import List from '@/components/List.vue';
export default {data () {return {}},methods: {},// 2.注冊components: {AddItem,List},computed: {},watch: {},mounted () {}
}
</script>
<style scoped>
</style>

接下來先把List待辦列表弄出來再寫待辦事項，也就是寫個父給子的數據傳遞
增加自定義的屬性，使用 v-for 指令對 todolist 進行循環渲染，將 todolist 中的每個元素都顯示為一個有序列表中的一條，{{ item }} 則是將前面 item 變量名插入到模板中進行渲染。

由于本組件需要從父組件中接收一個名為 todolist 的屬性，所以使用 props 選項來聲明了一個具名的 todolist 屬性

最后加了點CSS樣式

下面是完整的 List.vue 代碼：

<template><div><ul><!-- 使用 v-for 指令遍歷傳入的 todolist 數據，生成 li 列表項 --><li v-for="(item, index) in todolist" :key="index">{{ item }}</li><!-- 2.使用插值語法把上面的自定義名字加上去 --></ul></div>
</template><script>
export default {// 1.定義一個 props 屬性，接收父組件傳遞的 todolist 數據 (自定義的屬性)props: ['todolist']
}
</script><style scoped>
/* 為 ul 列表設置樣式 */
ul {list-style: none; /* 取消列表項的默認樣式 */margin: 0; /* 去除外邊距 */padding: 0; /* 去除內邊距 */display: flex; /* 將列表項設為彈性項目 */flex-wrap: wrap; /* 當空間不足時，自動換行 */
}/* 為 li 列表項設置樣式 */
li {font-size: 1.2rem; /* 設置字體大小 */color: #333; /* 設置字體顏色 */background-color: #f5f5f5; /* 設置背景顏色 */border-radius: 5px; /* 設置圓角 */margin: 0.5rem; /* 設置外邊距 */padding: 1rem; /* 設置內邊距 */box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 12px rgba(0, 0, 0, 0.1); /* 設置陰影 */text-align: center; /* 設置文本居中 */transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); /* 設置過渡效果 */
}/* 當鼠標懸停在 li 列表項上時的樣式 */
li:hover {transform: translateY(-5px);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 0, 0, 0.2);
}
</style>

第一步：在父組件data中把待辦事項的數據定義出來

  data () {return {items: ['學習','做事','賺錢']// a.把items數據傳給list組件去用，用屬性todolist去傳}},

第二步：用list組件動態綁定items數據

<List :todolist="items"></List>

最后父組件中完整代碼：

<template><div><h1>待辦事項</h1><!-- 3.使用 --><AddItem></AddItem><!-- b.list組件 加上冒號是動態綁定items數據--><List :todolist="items"></List></div>
</template><script>
// 1. 導入
import AddItem from '@/components/AddItem.vue';
import List from '@/components/List.vue';
export default {data () {return {items: ['學習','做事','賺錢']// a.把items數據傳給list組件去用，用屬性todolist去傳}},methods: {},// 2.注冊components: {AddItem,List},computed: {},watch: {},mounted () {}
}
</script>
<style scoped>
</style>

現在打開終端進入該項目路徑下啟動該項目：npm run serve
啟動后運行
在這里插入圖片描述
接下來是子給父傳數據
第一步：加上自定義事件
第二步：放在methods，接受要帶參數

<!-- 第一步：自定義事件 -->
<AddItem @item="recive"></AddItem> 
...
//中間代碼勝率
...methods: {// 第二步：放在methods，接受的話要帶參數recive(d){this.items.unshift(d)  }},

父組件中完整代碼是：

<template><div><h1>待辦事項</h1><!-- 3.使用 --><!-- 第一步：自定義事件 --><AddItem @item="recive"></AddItem> <!-- b.list組件 加上冒號是動態綁定items數據--><List :todolist="items"></List></div>
</template><script>
// 1. 導入
import AddItem from '@/components/AddItem.vue';
import List from '@/components/List.vue';
export default {data () {return {items: ['學習','做事','賺錢']// a.把items數據傳給list組件去用，用屬性todolist去傳}},methods: {// 第二步：放在methods，接受的話要帶參數recive(d){this.items.unshift(d)  }},// 2.注冊components: {AddItem,List},computed: {},watch: {},mounted () {}
}
</script>
<style scoped>
</style>

下一步到子組件AddItem.vue里面

1：在里面加一個輸入框和按鈕

    <input type="text" v-model="item"><button @click="send">添加</button>

2：data里面配數據

  data () {return {item: ''}},

3：在methods里把數據發送給父組件

  methods: {send(){this.$emit('item,this.item')}},

然后在給css內加點樣式

最后AddItem.vue完整代碼

<template><div class="input-container"> <!-- 輸入框容器 --><input type="text" v-model="item" placeholder="輸入待辦事項" class="input-field"> <!-- 輸入框 --><button @click="send" class="add-btn">添加</button> <!-- 添加按鈕 --></div>
</template><script>
export default {data () {return {item: '' // 輸入框綁定的數據}},methods: {send(){this.$emit('item',this.item) // 發出事件，傳遞輸入框數據}},
}
</script><style scoped>
.input-container { /* 輸入框容器樣式 */display: flex; /* flex 布局 */align-items: center; /* 垂直居中 */margin-bottom: 20px; /* 底部外邊距 */
}.input-field { /* 輸入框樣式 */border: none; /* 取消邊框 */border-bottom: 2px solid #aaa; /* 底部邊框 */padding: 0.5rem; /* 內邊距 */margin-right: 1rem; /* 右外邊距 */font-size: 1rem; /* 字體大小 */font-family: Arial, sans-serif; /* 字體樣式 */width: 300px; /* 寬度 */
}.add-btn { /* 添加按鈕樣式 */background-color: #20A3FF; /* 背景顏色 */border: none; /* 取消邊框 */color: white; /* 字體顏色 */padding: 0.5rem; /* 內邊距 */border-radius: 5px; /* 圓角 */cursor: pointer; /* 鼠標樣式 */transition: all 0.3s ease; /* 過渡效果 */box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* 陰影 */
}.add-btn:hover { /* 鼠標懸停樣式 */background-color: #2186e2;transform: translateY(-2px); /* 上移 */box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 增加陰影 */
}.input-field:focus { /* 輸入框獲得焦點時的樣式 */outline: none; /* 取消選中時的邊框 */border-bottom: 2px solid #2186e2; /* 底部邊框顏色更改 */
}
</style>

輸出效果：
請添加圖片描述

插槽 slot

新建子組件Slot.vue，用vue生成格式后在HTML位置輸入

<template><div><h1>我是插槽子組件</h1><!-- 插槽位置 --><slot></slot></div>
</template>

在父組件App.vue中在相應位置進行導入、注冊、使用（可以新建一個項目，看起來更直觀）

import Slot from '@/components/Slot.vue';components: {Slot},<Slot><h1>你好</h1><!-- 將會顯示在子組件的Slot插槽位置上 --></Slot>

運行項目：
在這里插入圖片描述

多個插槽

通過名字區分

比如在子組件中再加一個slot標簽加個名字

<slot name="a"></slot>

在父組件中加上template v-slot:a

    <Slot><!-- 將會顯示在子組件的Slot插槽位置上 --><h1>你好</h1><!-- 通過名字單獨指令子組件的Slot插槽位置 --><template v-slot:a><h2>hello</h2></template></Slot>

另外在 css 位置加了點樣式（可以忽略）
在這里插入圖片描述

總結

組件化開發總結

Vue組件的基本組成

  1. template——模版 html代碼
  2. script——腳本 vue配置對象中的各種配置項
  3. style——樣式 css代碼

子組件使用的三個步驟

  1. 在父組件中導入所需子組件
  2. 在父組件的配置對象中的components配置項中注冊子組件
  3. 在父組件的template中以標記的語法使用子組件

父子組件相互傳遞數據

  1. 父傳子
    a.在子組件配置對象中增加props配置項(自定義屬性)
    b.在父組件使用子組件時通過自定義的屬性名傳數據

  2. 子傳父
    a.在父組件中增加自定義事件，并編寫接受數據的方法 【@item=“recive”】
    b.在子組件中增加一個發送數據的方法，調用this.$emit(‘自定義的事件名’,發送的數據)

那么如何在根組件中使用子組件呢？

以App.vue根組件，TabMenu.vue子組件為例：

  1. 導入需要的子組件（在script標簽內）
import TabMenu from '@/components/TabMenu.vue';  //@相當于src
  1. 在components的配置項中注冊子組件
components: {TabMenu},
  1. 在template中以標記的語法使用子組件
<TabMenu></TabMenu>

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

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

相關文章

服務器硬件電路設計之I2C問答（二）：I2C總線的傳輸速率與上拉電阻有什么關系？

服務器硬件電路設計之I2C問答（二）：I2C總線的傳輸速率與上拉電阻有什么關系？

I2C 總線傳輸速率與上拉電阻關系密切。上拉電阻阻值決定總線電平切換速度&#xff1a;電阻越小&#xff0c;充放電電流越大&#xff0c;信號邊沿更陡&#xff0c;支持更高速率&#xff08;如 400kHz 快速模式&#xff09;&#xff1b;電阻過大則切換慢&#xff0c;限制速率&…
閱讀更多...
大語言模型提示工程與應用：LLMs文本生成與數據標注實踐

大語言模型提示工程與應用：LLMs文本生成與數據標注實踐

提示詞應用實踐 學習目標 本課程通過LLMs生成情感分析樣本和標注葡萄9品鑒數據&#xff0c;展示了其文本生成和數據標注能力。同時&#xff0c;利用PAL模型解決日期計算問題&#xff0c;學習了LLMs與編程運行時結合實現復雜推理的方法&#xff0c;為自然語言處理應用提供了實…
閱讀更多...
node.js 零基礎入門

node.js 零基礎入門

Node.js 零 基礎入門與核心語法 適用對象&#xff1a;完全沒接觸過 Node.js 的同學 目標&#xff1a;從 0 到能寫 CLI、小型 HTTP 服務、文件腳本、調用系統/網絡資源 目錄 什么是 Node.js安裝與運行運行腳本與 REPL模塊體系&#xff1a;CommonJS 與 ES Modules基礎語法在 Node…
閱讀更多...
《Day3-PyTorch 自動微分入門：從計算圖到梯度下降的實踐指南》

《Day3-PyTorch 自動微分入門：從計算圖到梯度下降的實踐指南》

八、自動微分自動微分模塊torch.autograd負責自動計算張量操作的梯度&#xff0c;具有自動求導功能。自動微分模塊是構成神經網絡訓練的必要模塊&#xff0c;可以實現網絡權重參數的更新&#xff0c;使得反向傳播算法的實現變得簡單而高效。1. 基礎概念張量Torch中一切皆為張量…
閱讀更多...
apache cgi測試

apache cgi測試

test.cgi #!/bin/sh echo "Content-type: text/html" echo "" echo "<h1>Hello from a Mac CGI script!</h1>" echo "<p>Current time is: $(date)</p>"?% 放置目錄 /opt/homebrew/Cellar/mapserver/8.4.0_1…
閱讀更多...
力扣 30 天 JavaScript 挑戰 第二題筆記

力扣 30 天 JavaScript 挑戰 第二題筆記

這道題是涉及知識–閉包 1. 閉包定義以及相關知識點 官方定義為&#xff1a;在 JavaScript 中&#xff0c;函數具有對在相同作用域以及任何外部作用域中聲明的所有變量的引用。這些作用域被稱為函數的 詞法環境。函數與其環境的組合被稱為 閉包。 簡單理解&#xff1a;內層函數…
閱讀更多...
OpenAI GPT-5 深度解析：API Key定價與ChatGPT（Free, Plus, Pro）用戶的區別

OpenAI GPT-5 深度解析：API Key定價與ChatGPT（Free, Plus, Pro）用戶的區別

前言&#xff1a;兩年等待&#xff0c;只為這一躍 在科技圈長達兩年的屏息期待與無盡猜想之后&#xff0c;2025年8月8日北京時間凌晨&#xff0c;OpenAI終于揭開了其新一代旗艦模型——GPT-5的神秘面紗。這不僅僅是一次常規的產品迭代&#xff0c;更被整個行業視為一塊試金石&a…
閱讀更多...
ClickHouse集群部署實踐---3分片2副本集群

ClickHouse集群部署實踐---3分片2副本集群

ClickHouse集群部署實踐—3分片2副本集群 未完待續。。。 喜歡的先點贊收藏&#xff01;&#xff01; 由于我們準備部署的是3分片2副本的集群&#xff0c;現在來解釋一下配置參數的意思&#xff1a; shard標簽代表分片的意思&#xff0c;如上圖我們有3個分片&#xff0c;clickh…
閱讀更多...
Unity_VR_Pico開發手冊

Unity_VR_Pico開發手冊

文章目錄一、配置開發環境1.下載PICO Unity Integration SDK2.安裝 Unity 編輯器&#xff08;添加安卓開發平臺模塊&#xff09;3.導入下載的SDK4.項目配置和切換開發平臺5.導入 XR Interaction Toolkit6.安裝 Universal RP(通用渲染管線)并設置 (選做)二、調試環境搭建&#x…
閱讀更多...
Linux系統之Docker命令與鏡像、容器管理

Linux系統之Docker命令與鏡像、容器管理

目錄 一、 Docker命令 docker命令幫助 docker常用子命令&#xff08;必須背會&#xff09; docker管理子命令(暫時不需要) swarm集群管理子命令&#xff08;不需要&#xff09; docker容器管理子命令&#xff08;必須背會&#xff09; docker全局選項 二、 docker鏡像管…
閱讀更多...
比亞迪第五代DM技術：AI能耗管理的深度解析與實測驗證

比亞迪第五代DM技術：AI能耗管理的深度解析與實測驗證

比亞迪第五代DM技術&#xff1a;AI能耗管理的深度解析與實測驗證 &#xff08;面向新能源汽車研發/測試工程師&#xff09;目錄 技術背景與核心突破AI能耗管理系統架構解析關鍵技術創新點 2.1 動力域三腦合一控制2.2 全溫域熱管理協同2.3 導航數據深度耦合 實測數據與場景驗證 …
閱讀更多...
sqli-labs通關筆記-第37關POST寬字符注入(單引號閉合 手工注入+腳本注入 3種方法)

sqli-labs通關筆記-第37關POST寬字符注入(單引號閉合 手工注入+腳本注入 3種方法)

目錄 一、寬字符注入 二、sqlmap之unmagicquotes 三、addslashes與mysqli_real_escape_string 四、源碼分析 1、代碼審計 2、SQL注入安全性分析 五、滲透實戰 1、進入靶場 2、正確用戶名密碼探測 3、手工注入&#xff08;方法1&#xff09; &#xff08;1&#xff…
閱讀更多...
Kubernetes 集群密鑰與機密管理方案對比分析：Vault、Sealed Secrets 與 AWS KMS

Kubernetes 集群密鑰與機密管理方案對比分析：Vault、Sealed Secrets 與 AWS KMS

Kubernetes 集群密鑰與機密管理方案對比分析&#xff1a;Vault、Sealed Secrets 與 AWS KMS 在容器化與編排環境中&#xff0c;機密&#xff08;Secrets&#xff09;管理是確保應用安全性的重要環節。對于 Kubernetes 集群而言&#xff0c;內置的 Secret 對象存在明文存儲的風…
閱讀更多...
Java基礎-TCP通信單服務器接受多客戶端

Java基礎-TCP通信單服務器接受多客戶端

目錄 案例要求&#xff1a; 實現思路&#xff1a; 代碼&#xff1a; User類&#xff1a;用戶端 Client類&#xff1a;服務端 ServerReader類&#xff1a;多線程通信類 總結&#xff1a; 案例要求&#xff1a; TCP通信下,正常的寫法只能單個服務器和單個客戶端進行通信&a…
閱讀更多...
electron：vue3+vite打包案例

electron：vue3+vite打包案例

1、安裝electron 首先設置鏡像源&#xff0c;否則安裝會非常非常慢。 打開npm的配置文件。 npm config edit 修改配置項。 registryhttps://registry.npmmirror.com electron_mirrorhttps://cdn.npmmirror.com/binaries/electron/ electron_builder_binaries_mirrorhttp…
閱讀更多...
traceroute命令調試網絡

traceroute命令調試網絡

文章目錄 @[toc] 一、核心原理與參數解析 1. 工作原理 2. 關鍵參數 二、六大運維場景實戰 場景1：內網服務器無法訪問公網 場景2：跨國訪問延遲高（電商業務卡頓） 場景3：VPN分流異常（流量泄露） 場景4：檢測DNS劫持 場景5：防火墻規則驗證 場景6：云服務跨區延遲優化 三、高…
閱讀更多...
自己本地搭建的服務器怎么接公網？公網IP直連服務器方法，和只有內網IP直接映射到互聯網

自己本地搭建的服務器怎么接公網？公網IP直連服務器方法，和只有內網IP直接映射到互聯網

? 你是不是也遇到過這樣的問題&#xff1a;在家里或者公司搭建了一個服務器&#xff0c;但是不知道怎么通過公網IP直接訪問它&#xff1f;別急&#xff0c;其實很簡單&#xff01;今天就給大家分享幾種方法&#xff0c;手把手教你如何實現公網IP直連服務器&#xff0c;和無公網…
閱讀更多...
MATLAB中文亂碼的解決方法

MATLAB中文亂碼的解決方法

文章目錄問題描述解決方法問題描述 對于matlab腳本輸出亂碼&#xff1a; ‘?&#xfffd;&#xfffd;&#xfffd;&#xfffd;Ф&#xfffd;&#xfffd;&#xfffd;&#xfffd;?&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;й&#xfffd;&#xff…
閱讀更多...
工業場景反光衣識別準確率↑32%：陌訊多模態融合算法實戰解析

工業場景反光衣識別準確率↑32%：陌訊多模態融合算法實戰解析

原創聲明本文為原創技術解析&#xff0c;核心數據與算法邏輯引用自《陌訊技術白皮書》&#xff0c;禁止任何形式的未經授權轉載。一、行業痛點&#xff1a;反光衣識別的場景難題在建筑施工、道路養護、倉儲物流等工業場景中&#xff0c;作業人員反光衣穿戴規范檢測是安全生產的…
閱讀更多...
北京JAVA基礎面試30天打卡05

北京JAVA基礎面試30天打卡05

一、Redis 的持久化機制有哪些&#xff1f;** Redis 提供兩種主要的持久化機制&#xff1a; ? RDB&#xff08;Redis DataBase&#xff09;快照持久化 定期將 Redis 中的數據以“快照”的形式寫入磁盤&#xff08;生成 .rdb 文件&#xff09;。啟動 Redis 時會加載 .rdb 文件恢…
閱讀更多...
最新文章

Copyright @ 2022~2023