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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈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