Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)

news2025/3/11 23:52:20

目录

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Element-Plus常用组件使用。

（1）el-input。(input输入框)

<1>正常状态的el-input。

<2>el-input的disable状态。

<3>el-input的readonly状态。

<4>el-input的Icon(图标)用法。

测试使用"搜索"的图标。

测试使用"日历"的图标。

<5>el-input的文本域(type="textarea")。

<6>el-input的clearable(可清空)状态。

（2）el-select。(select选择下拉框)

<1>使用v-for+数组+值。

<2>使用v-for+数组+对象。

value不一样。

value一样。key不一样。label一样。

<3>el-select的clearable(可清除)、multiple(多选下拉框)状态。

<4>key不一样。value不一样。label一样。(设置value-key属性)

（3）el-radio-group。(Radio单选框)

<1>不设置默认选中。

<2>设置默认选中。

<3>使用label属性设置展示值。

<4>单选框——按钮组样式。

（4）el-checkbox-group。(Checkbox多选框)

使用v-for形式渲染多选项框。(代码示例)

（5）el-image。(Image图片)

<1>原生图片标签img。

<2>el-image使用"网络地址"渲染图片。

<3>el-image使用"本地图片路径地址"渲染图片。

<4>el-image设置多张图片预览(放大、缩小、旋转、上下一张等等)。

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

  • Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
  • Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
  • Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)-CSDN博客
  • Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客
  • 注意：本篇博客是《Element-Plus常用组件的使用》的上篇。
  • 只是讲解与演示了一部分的常用组件的使用，还有更多的组件使用学习在下篇！

二、Element-Plus常用组件使用。

  • Element-Plus的网址（国内镜像）：一个 Vue 3 UI 框架 | Element Plus
（1）el-input。(input输入框)
  • 标签<el-input>。
<1>正常状态的el-input。
  • 必须使用v-model绑定值。否则输入框无法进行内容的修改。
<template>
  <div>

    <div>
      <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" />{{data.input}}
    </div>

  </div>

</template>

<script setup>

import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:null,
})

</script>

<2>el-input的disable状态。
  • el-input处于disable状态时，不能输入任何值。输入框被禁用！
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" disabled/>{{data.input}}

<3>el-input的readonly状态。
  • el-input处于readonly状态时，也是不能进行输入框的输入或修改。只读状态！
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" readonly />{{data.input}}
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
})

<4>el-input的Icon(图标)用法。
  • 测试使用"搜索"的图标。
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" readonly :prefix-icon="Search"/>{{data.input}}
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";

  • 属性size可以设置el-input的大小。一般情况下自动为默认大小。

<el-input v-model="data.input" style="width: 240px;margin-bottom:10px" placeholder="请输入内容" readonly :prefix-icon="Search"/>{{data.input}}
<el-input v-model="data.input"  size="small" style="width: 240px;margin-bottom:10px" placeholder="请输入内容" readonly :prefix-icon="Search"/>
  • 测试使用"日历"的图标。
<el-input placeholder="日期选择" readonly :suffix-icon="Calendar"/>
import {Calendar, Search} from "@element-plus/icons-vue";

  • 为了不让其占整行，手动设置宽度（width）即可。
<!-- 默认占整行。可以通过设置width调整宽度 -->
<el-input style="width: 200px" placeholder="日期选择" readonly :suffix-icon="Calendar"/>

<5>el-input的文本域(type="textarea")。
  • 当需要展示的文字比较多时，输入框内的内容就会被压缩。

  • 首先可以设置宽度(width)。重点是：添加type="textarea"。
<div style="margin: 30px;">
      <el-input type="textarea" v-model="data.describe" style="width: 350px" placeholder="日期选择"/>
</div>
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',

})

<6>el-input的clearable(可清空)状态。
  • "clearable"的作用：可以使用清除图标来清除所有的输入。
<el-input v-model="data.input" clearable style="width: 240px;margin-bottom:10px;margin-left: 20px" placeholder="请输入内容"  :prefix-icon="Search"/>

（2）el-select。(select选择下拉框)
  • 外标签：<el-select>。
  • 内标签：<el-option>。
<1>使用v-for+数组+值。
  • el-option配置"v-for"快速遍历所有的下拉框选项。(常用方法)
  • 一般情况下data.value是设置为''(空)，由用户选择后将值绑定给指定变量。
  • 而数组options是从数据库拿取过来的，然后依次渲染下拉框的所有选项。
<div style="margin: 30px">
      <el-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"
        />
</el-select> <span style="margin-left: 10px">{{data.value}}</span>
</div>
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:['苹果','香蕉','橘子'],

})

  • 这里的下拉框选定的值绑定data.value。使用"{{}}"直观展示选项是否绑定值。

<2>使用v-for+数组+对象。
  • value不一样。
<div style="margin: 30px">
      <el-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
        />
      </el-select> <span style="margin-left: 10px">{{data.value}}</span>

</div>
import {reactive} from "vue";
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {name:'苹果'},
      {name:'香蕉'},
      {name:'橘子'},
  ],

})
  • value一样。key不一样。label一样。
<div style="margin: 30px">
      <el-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        />
      </el-select> <span style="margin-left: 10px">{{data.value}}</span>

</div>
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,name:'苹果'},
      {id:2,name:'香蕉'},
      {id:3,name:'橘子'},
      {id:4,name:'苹果'},

  ],

})
  • 实际当选中某两个相同value时，虽然id不同，但是它们还是同时被选中了。
  • 证明id不一致。只要lable相同、value相同。它还是是同一个对象。

<3>el-select的clearable(可清除)、multiple(多选下拉框)状态。
  • "clearable"的作用：可以使用清除图标来清除选择。
  • "multiple"的作用：使下拉单选择变成下拉多选框。
<div style="margin: 30px">
      <el-select
          v-model="data.value"
          clearable
          multiple
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        />
      </el-select> <span style="margin-left: 10px">{{data.value}}</span>

</div>
import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,name:'苹果'},
      {id:2,name:'香蕉'},
      {id:3,name:'橘子'},
      {id:4,name:'苹果'},

  ],

})
  • 通过程序的运行。可以发现虽然id不一样、value不一样

<4>key不一样。value不一样。label一样。(设置value-key属性)
  • 通过使用"value-key=id"可以保证对象的唯一性。

<div style="margin: 30px">
      <el-select
          v-model="data.value"
          clearable
          multiple
          value-key="id"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.id"
            :label="item.label"
            :value="item.name"
        />
      </el-select> <span style="margin-left: 10px">{{data.value}}</span>

</div>
import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},

  ],

})
  • 可以很清楚的看到：虽然多项选择的标签其中有两个选择的是"苹果"（因为label相同），但实际后台绑定的值是"苹果"和"苹果1"。
  • 证明id不一致、value不一致、label一致。达成的效果是可以的。

（3）el-radio-group。(Radio单选框)
  • 官网详细。分析属性“label”与“value”。

  • 外标签：<el-radio-group>。

  • 内标签：<el-radio>。

<1>不设置默认选中。
<div style="margin: 30px">
      <el-radio-group v-model="data.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
</div>
import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:''

})
<2>设置默认选中。
  • 给绑定的data.sex赋值默认为"男"即可完成。
import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男'

})

<3>使用label属性设置展示值。
<div style="margin: 30px">
      <el-radio-group v-model="data.sex">
        <el-radio value="男" label="男"></el-radio>
        <el-radio value="女" label="女"></el-radio>
      </el-radio-group> <span style="margin-left: 20px">{{data.sex}}</span>
</div>
import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男'

})

<4>单选框——按钮组样式。

  • 官方文档。

  • 代码示例。
<div style="margin: 30px">
      <el-radio-group v-model="data.tar" size="large">
      <el-radio-button label="我喜欢的" value="1" />
      <el-radio-button label="我收藏的" value="2" />
      <el-radio-button label="我下载的" value="3" />
      </el-radio-group>
</div>
import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",

})
  • 之所以和官网的颜色有差别，是因为博主自定义了主题颜色。

  • 具体自定义主题的详细教学的博客链接：Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客

（4）el-checkbox-group。(Checkbox多选框)
  • 外标签：<el-checkbox-group>。
  • 内标签：<el-checkbox>。
  • 在表格的案例中经常需要使用这种功能。（表格的批量多选导出操作）
  • 使用v-for形式渲染多选项框。(代码示例)
<div style="margin: 30px">
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox v-for="item in data.options"
        :key="item.id"
        :label="item.label"
        :value="item.name"
        />
      </el-checkbox-group> <span style="margin-left: 20px">{{data.checkList}}</span>
</div>
import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",
  checkList:[],


})
  • 数组data.checkLists里存储的值是数组data.options的对应选择的item.name的值。

  • disabled状态。
<el-checkbox v-for="item in data.options"
                     disabled
                     :key="item.id"
                     :label="item.label"
                     :value="item.name"
/>

（5）el-image。(Image图片)
  • 官方文档。这是element-plus提供的一个强大的图片渲染标签。
  • 可以使图片预览更加多元化：放大、缩小、旋转、上下一张等等。

  • 原生图片标签：<img>。
  • element-plus：<el-image>。
<1>原生图片标签img。
  • 代码示例。
<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
</div>

<2>el-image使用"网络地址"渲染图片。
<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
      <el-image style="width: 150px;margin-left: 15px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
</div>

  • 当然也可以使用:src绑定图片网络地址。
 <div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
      <el-image style="width: 150px;margin-left: 15px" :src="data.url" />
      <el-image style="width: 150px;margin-left: 15px" :src="img" />
</div>
import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",
  checkList:[],
  url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

})

<3>el-image使用"本地图片路径地址"渲染图片。
  • 使用import导入对应图片路径地址即可。
<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
      <el-image style="width: 150px;margin-left: 15px" :src="img" />
</div>
import img from '@/assets/logo.svg'

<4>el-image设置多张图片预览(放大、缩小、旋转、上下一张等等)。
  • 应用场景：给商品设置多张预览图片！
<div style="margin: 30px">
      <el-image style="width: 150px;margin-left: 15px" :src="data.url" :preview-src-list="data.urlList "/>
</div>
import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",
  checkList:[],
  url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  urlList:[
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  ]

})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2313450.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++ 链表List使用与实现：拷贝交换与高效迭代器细致讲解

C++ 链表List使用与实现：拷贝交换与高效迭代器细致讲解

目录 list的使用&#xff1a; 构造与赋值 元素访问 修改操作 容量查询 链表特有操作 拼接&#xff08;Splice&#xff09; C11 新增方法 注意&#xff1a; stl_list的模拟实现&#xff1a; 一、链表节点设计的艺术 1.1 结构体 vs 类的选择 二、迭代器实现的精髓 2…
阅读更多...
知乎后台管理系统：数据库系统原理实验1——数据库基础概念

知乎后台管理系统：数据库系统原理实验1——数据库基础概念

实验背景 通过练习绘制语义网络&#xff0c;加深对于基本概念之间关系的理解和掌握。掌握在VISIO中绘制能准确表达基本概念之间关系的语义网络的技能。了解并比较数据模型的Chen’s表示法和UML表示法。理解关系模型设计中的完整性约束的重要性。掌握在Linux操作系统下远程访问…
阅读更多...
docker compose 以redis为例

docker compose 以redis为例

常见docker compose 命令 》》注意这个是旧版本的&#xff0c;新版本 docker 与compose 之间没有 - 新版本的 docker compose 把 version 取消了 &#xff0c;redis 默认是没有配置文件的 &#xff0c;nginx&#xff0c;mysql 默认是有的 services:redis:image: redis:lat…
阅读更多...
ES C++客户端安装及使用

ES C++客户端安装及使用

1. ES 介绍 Elasticsearch &#xff0c; 简称 ES &#xff0c;它是个开源分布式搜索引擎&#xff0c;它的特点有&#xff1a;分布式&#xff0c;零配 置&#xff0c;自动发现&#xff0c;索引自动分片&#xff0c;索引副本机制&#xff0c; restful 风格接口&#xff0c;多…
阅读更多...
【软件工程】一篇入门UML建模图（状态图、活动图、构件图、部署图）

【软件工程】一篇入门UML建模图（状态图、活动图、构件图、部署图）

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必练内功_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…
阅读更多...
应急响应--流量分析

应急响应--流量分析

&#xff08;一&#xff09;Cobalt Strike流量特征分析 1.HTTP特征 源码特征&#xff1a; 在流量中&#xff0c;通过http协议的url路径&#xff0c;在checksum8解密算法计算后&#xff0c;32位的后门得到的结果是92&#xff0c;64位的后门得到的结果是93&#xff0c;该特征符…
阅读更多...
自然语言处理：高斯混合模型

自然语言处理：高斯混合模型

介绍 大家好&#xff0c;博主又来给大家分享知识了&#xff0c;今天给大家分享的内容是自然语言处理中的高斯混合模型。 在自然语言处理这个充满挑战与机遇的领域&#xff0c;我们常常面临海量且复杂的文本数据。如何从这些数据中挖掘出有价值的信息&#xff0c;对文本进行有…
阅读更多...
【C++指南】一文总结C++类和对象【中】

【C++指南】一文总结C++类和对象【中】

&#x1f31f; 各位看官好&#xff0c;我是egoist2023&#xff01; &#x1f30d; 种一棵树最好是十年前&#xff0c;其次是现在&#xff01; &#x1f680; 今天来学习C类和对象的语法知识。注意&#xff1a;在本章节中&#xff0c;小编会以Date类举例 &#x1f44d; 如果觉得…
阅读更多...
再聊 Flutter Riverpod ，注解模式下的 Riverpod 有什么特别之处，还有发展方向

再聊 Flutter Riverpod ，注解模式下的 Riverpod 有什么特别之处，还有发展方向

三年前我们通过 《Flutter Riverpod 全面深入解析》 深入理解了 riverpod 的内部实现&#xff0c;而时隔三年之后&#xff0c;如今Riverpod 的主流模式已经是注解&#xff0c;那今天就让我们来聊聊 riverpod 的注解有什么特殊之处。 前言 在此之前&#xff0c;我们需要先回忆…
阅读更多...
Go语言集成DeepSeek API和GoFly框架文本编辑器实现流式输出和对话（GoFly快速开发框架）

Go语言集成DeepSeek API和GoFly框架文本编辑器实现流式输出和对话（GoFly快速开发框架）

说明 本文是GoFly快速开发框架集成Go语言调用 DeepSeek API 插件&#xff0c;实现流式输出和对话功能。为了方便实现更多业务功能我们在Go服务端调用AI即DeepSeek接口&#xff0c;处理好业务后再用Gin框架实现流失流式输出到前端&#xff0c;前端使用fetch请求接收到流式的mar…
阅读更多...
docker不停机部署

docker不停机部署

背景 最近做大疆项目时&#xff0c;后台更新部署时&#xff0c;机场和无人机就会掉线。设备自动重连注册时间比较长&#xff0c;应用长时间不可用。所以需要灰色发布服务。docker-compose的swarm模式可解决此问题。 服务构建脚本Dockerfile # 使用官方Java基础镜像&#xff…
阅读更多...
ZLG嵌入式笔记 | ZLG核心板散热设计指引

ZLG嵌入式笔记 | ZLG核心板散热设计指引

在嵌入式系统设计中&#xff0c;散热是影响处理器性能与稳定性的关键问题。本文聚焦于高端嵌入式处理器的散热设计&#xff0c;探讨核心板的热设计与系统级热设计方法&#xff0c;以及导热材料和布局的建议&#xff0c;为解决高温问题提供参考。 用高端嵌入式处理器设计系统&am…
阅读更多...
[Java]使用java进行JDBC编程

[Java]使用java进行JDBC编程

首先要从中央仓库下载api(类似驱动程序)&#xff0c;为了链接java和mysql 下载jar包&#xff0c;需要注意的是jar包的版本要和mysql保持一致 下面是新建文件夹lib&#xff0c;把jar包放进去&#xff0c;并添加为库 sql固定的情况下运行 import com.mysql.cj.jdbc.MysqlDataSo…
阅读更多...
MySQL进阶-关联查询优化

MySQL进阶-关联查询优化

采用左外连接 下面开始 EXPLAIN 分析 EXPLAIN SELECT SQL_NO_CACHE * FROM type LEFT JOIN book ON type.card book.card; 结论&#xff1a;type 有All ,代表着全表扫描&#xff0c;效率较差 添加索引优化 ALTER TABLE book ADD INDEX Y ( card); #【被驱动表】&#xff0…
阅读更多...
fiddler+雷电模拟器(安卓9)+https配置

fiddler+雷电模拟器(安卓9)+https配置

一、fiddler配置 1、开启https代理 2、根证书安装&#xff1a;导出证书系统安装 二、模拟器设置 1、设置网络桥接模式 【点击安装】提示安装成功后保存即可 2、开启root&#xff08;开启adb远程调试&#xff09; 3、开启磁盘写入 4、设置WLAN代理 5、证书安装&#xff1a;物…
阅读更多...
STM32-SPI通信协议

STM32-SPI通信协议

目录 一&#xff1a;什么是通信协议&#xff1f; 二&#xff1a;电路结构 1.硬件电路 2&#xff1a;移位 3&#xff1a;时序图 4.交换字节 三&#xff1a;W25Q64简介 硬件电路&#xff1a;​编辑 存储器地址划分 Dlash操作注意事项 状态寄存器 SPI指令集 四&am…
阅读更多...
【CentOS】搭建Radius服务器

【CentOS】搭建Radius服务器

目录 背景简介&#xff1a;Radius是什么&#xff1f;Radius服务器验证原理搭建Radius服务器环境信息yum在线安装配置FreeRADIUS相关文件clients.conf文件users文件重启服务 验证 参考链接 背景 在项目中需要用到Radius服务器作为数据库代理用户的外部验证服务器&#xff0c;做…
阅读更多...
Vue中自定义指令：ClickOutside（点击当前模块外的位置）

Vue中自定义指令：ClickOutside（点击当前模块外的位置）

应用场景 假设我们有一个下拉框组件&#xff0c;当下拉框展开的时候&#xff0c;点击下拉框之外的元素可以自动关闭下拉框。 一 ClickOutside代码示例 在vue3中使用ClickOutside // 导入自定义指令 import { ClickOutside as vClickOutside } from element-plus;// 绑定指令…
阅读更多...
2019年蓝桥杯第十届CC++大学B组真题及代码

2019年蓝桥杯第十届CC++大学B组真题及代码

目录 1A&#xff1a;组队&#xff08;填空5分_手算&#xff09; 2B&#xff1a;年号字符&#xff08;填空5分_进制&#xff09; 3C&#xff1a;数列求值&#xff08;填空10分_枚举&#xff09; 4D&#xff1a;数的分解&#xff08;填空10分&#xff09; 5E&#xff1a;迷宫…
阅读更多...
jdk-21_linux-x64_bin.tar.gz Linux jdk21压缩包安装保姆级（详细安装教程）

jdk-21_linux-x64_bin.tar.gz Linux jdk21压缩包安装保姆级（详细安装教程）

jdk-21_linux-x64_bin.tar.gz 解压版详细安装教程 一、简洁版&#xff08;需要对 Linux 操作有一定基础&#xff09;二、图文详细教程1、前置准备2、解压安装3、配置环境变量4、验证成功 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/#java2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023