【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 常见组件(一)

news2025/2/6 13:19:03

目录

1 -> List

1.1 -> 创建List组件

1.2 -> 添加滚动条

1.3 -> 添加侧边索引栏

1.4 -> 实现列表折叠和展开

1.5 -> 场景示例

2 -> dialog

2.1 -> 创建Dialog组件

2.2 -> 设置弹窗响应

2.3 -> 场景示例

3 -> form

3.1 -> 创建Form组件

3.2 -> 实现表单缩放

3.3 -> 设置Form样式

3.4 -> 添加响应事件

3.5 -> 场景示例

1 -> List

List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。

1.1 -> 创建List组件

在pages/index目录下的hml文件中创建一个List组件。

<!-- index.hml -->
<div class="container"> 
 <list>    
   <list-item class="listItem"></list-item>
   <list-item class="listItem"></list-item>
   <list-item class="listItem"></list-item>
   <list-item class="listItem"></list-item>
 </list>
</div>
/* test.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  background-color: #F1F3F5;
}
.listItem{
  height: 20%;
  background-color:#d2e0e0;
  margin-top: 20px;
}

说明

  • <list-item-group>是<list>的子组件，实现列表分组功能，不能再嵌套<list>，可以嵌套<list-item>。

  • <list-item>是<list>的子组件，展示列表的具体项。

1.2 -> 添加滚动条

设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。

<!-- index.hml -->
<div class="container">
  <list class="listCss" scrollbar="on" >
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
 </list>
</div> 
/* index.css */
.container {
  flex-direction: column;
  background-color: #F1F3F5;
}
.listItem{
  height: 20%;
  background-color:#d2e0e0;
  margin-top: 20px;
}
.listCss{
  height: 100%;
  scrollbar-color: #8e8b8b;
  scrollbar-width: 50px;
}

1.3 -> 添加侧边索引栏

设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。

<!-- index.hml -->
<div class="container">   
  <list class="listCss"  indexer="{
  
  {['#','1','2','3','4','5','6','7','8']}}" >  
    <list-item class="listItem"  section="#" ></list-item>   
  </list>
</div>
/* index.css */
.container{
  flex-direction: column;
  background-color: #F1F3F5;
 } 
.listCss{
  height: 100%;    
  flex-direction: column;
  columns: 1
}

说明

  • indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。

  • indexer可以自定义索引表，自定义时"#"必须要存在。

1.4 -> 实现列表折叠和展开

为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。

<!-- index.hml -->
<div class="doc-page">
  <list style="width: 100%;" id="mylist">
    <list-item-group for="listgroup in list" id="{
  
  {listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
      <list-item type="item" style="background-color:#FFF0F5;height:95px;">
        <div class="item-group-child">
          <text>One---{
  
  {listgroup.value}}</text>
        </div>
      </list-item>
      <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
        <div class="item-group-child">
          <text>Primary---{
  
  {listgroup.value}}</text>
        </div>
      </list-item>
    </list-item-group>
  </list>
</div>
/* index.css */
.doc-page {
  flex-direction: column;
  background-color: #F1F3F5;
}
list-item{
margin-top:30px;
}
.top-list-item {
  width:100%;
  background-color:#D4F2E7;
}
.item-group-child {
  justify-content: center;
  align-items: center;
  width:100%;
}
// test.js
import prompt from '@system.prompt';
export default {
  data: {
    direction: 'column',
    list: []
  },
  onInit() {
    this.list = []
    this.listAdd = []
    for (var i = 1; i <= 2; i++) {
      var dataItem = {
        value: 'GROUP' + i,
      };
        this.list.push(dataItem);
    }
  },
  collapse(e) {
    prompt.showToast({
      message: 'Close ' + e.groupid
    })
  },
  expand(e) {
    prompt.showToast({
    message: 'Open ' + e.groupid
    })
  }
}

说明

  • groupcollapse和groupexpand事件仅支持list-item-group组件使用。

1.5 -> 场景示例

在本场景中，可以根据字母索引表查找对应联系人。

<!-- index.hml -->
<div class="doc-page"> 
  <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> 
      <span>Contacts</span> 
  </text> 
  <list class="list" indexer="true"> 
    <list-item class="item" for="{
  
  {namelist}}" type="{
  
  {$item.section}}" section="{
  
  {$item.section}}"> 
      <div class="container"> 
        <div class="in-container"> 
          <text class="name">{
  
  {$item.name}}</text> 
          <text class="number">18888888888</text> 
        </div> 
      </div> 
    </list-item> 
    <list-item type="end" class="item"> 
      <div style="align-items:center;justify-content:center;width:750px;"> 
        <text style="text-align: center;">Total: 10</text> 
      </div> 
    </list-item> 
  </list> 
</div>
/* index.css */
.doc-page {
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
}
.list {
  width: 100%;
  height: 90%;
  flex-grow: 1;
}
.item {
  height: 120px;
  padding-left: 10%;
  border-top: 1px solid #dcdcdc;
}
.name {
  color: #000000;
  font-size: 39px;
}
.number {
  color: black;
  font-size: 25px;
}
.container {
  flex-direction: row;
  align-items: center;
}
.in-container {
  flex-direction: column;
  justify-content: space-around;
}
// test.js
export default { 
   data: { 
     namelist:[{ 
       name: 'Zoey', 
       section:'Z' 
     },{ 
       name: 'Quin', 
       section:'Q' 
     },{ 
       name:'Sam', 
       section:'S' 
     },{ 
       name:'Leo', 
       section:'L' 
     },{ 
       name:'Zach', 
       section:'Z' 
     },{ 
       name:'Wade', 
       section:'W' 
     },{ 
       name:'Zoe', 
       section:'Z' 
     },{ 
        name:'Warren', 
        section:'W' 
     },{ 
        name:'Kyle', 
        section:'K' 
     },{ 
       name:'Zaneta', 
       section:'Z' 
     }] 
   }, 
   onInit() { 
   } 
 }

2 -> dialog

Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。

2.1 -> 创建Dialog组件

在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

<!-- test.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" dragable="true">
    <div class="content">
      <text>this is a dialog</text>
    </div>
  </dialog>
  <button value="click me" onclick="openDialog"></button>
</div>
/* test.css */
.doc-page {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
  width: 80%;
  height: 250px;
  margin-start: 1%;
}
.content{
  width: 100%;
  height: 250px;
  justify-content: center;
  background-color: #e8ebec;
  border-radius: 20px;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
}
button{
  width: 70%;
  height: 60px;
}
/* test.js */
export default {
  //Touch to open the dialog box.
  openDialog(){
    this.$element('dialogId').show()
  },
}

2.2 -> 设置弹窗响应

点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。

<!-- test.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
    <div class="dialogDiv">
      <text>dialog</text>
      <button value="confirm" onclick="confirmClick"></button>
    </div>
  </dialog>
  <button value="click me" onclick="openDialog"></button>
</div>
/* test.css */
.doc-page {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
  width: 80%;
  height: 300px;
  margin-start: 1%;
}
.dialogDiv{
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
text{
  height: 100px;
  align-self: center;
}
button{
  align-self: center;
  margin-top: 20px;
  width: 60%;
  height: 80px;
}
/* test.js */
import prompt from '@system.prompt';
export default {
  canceldialog(e){
    prompt.showToast({
      message: 'dialogCancel'
    })
  },
  openDialog(){
    this.$element('dialogId').show()
     prompt.showToast({
      message: 'dialogShow'
    })
  },
  confirmClick(e) {
    this.$element('dialogId').close()
    prompt.showToast({
      message: 'dialogClose'
    })
  },
}

说明

  • 仅支持单个子组件。

  • Dialog属性、样式均不支持动态更新。

  • Dialog组件不支持focusable、click-effect属性。

2.3 -> 场景示例

在本场景中，可以通过Dialog组件实现一个日程表。弹窗在打开状态下，利用Textarea组件输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。

<!-- test.hml -->
<div class="doc-page">
  <text style="margin-top: 60px;margin-left: 30px;">
    <span>{
  
  {date}} events</span>
  </text>
  <div class="btndiv">
    <button type="circle" class="btn" onclick="addschedule">+</button>
  </div>
<!--  for Render events data  -->
  <list style="width: 100%;">
    <list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
      <div class="schedulediv">
        <text class="text1">{
  
  {date}}  event</text>
        <text class="text2">{
  
  {$item.schedule}}</text>
      </div>
    </list-item>
  </list>
  <dialog id="datedialog" oncancel="canceldialog" >
    <div class="dialogdiv">
      <div class="innertxt">
        <text class="text3">{
  
  {date}}</text>
        <text class="text4">New event</text>
      </div>
      <textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
      <div class="innerbtn">
        <button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
        <button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
      </div>
    </div>
  </dialog>
</div>
/* test.css */
.doc-page {
  flex-direction: column;
  background-color: #F1F3F5;
}
.btndiv {
  width: 100%;
  height: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn {
  radius:60px;
  font-size: 100px;
  background-color: #1E90FF;
}
.schedulediv {
  width: 100%;
  height: 200px;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 55px;
}
.text1 {
  color: #000000;
  font-weight: bold;
  font-size: 39px;
}
.text2 {
  color: #a9a9a9;
  font-size: 30px;
}
.dialogdiv {
  flex-direction: column;
  align-items: center;
}
.innertxt {
  width: 320px;
  height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.text3 {
  font-family: serif;
  color: #1E90FF;
  font-size: 38px;
}
.text4 {
  color: #a9a9a9;
  font-size: 33px;
}
.area {
  width: 320px;
  border-bottom: 1px solid #1E90FF;
}
.innerbtn {
  width: 320px;
  height: 120px;
  justify-content: space-around;
}
.btntxt {
  text-color: #1E90FF;
}
/* test.js */
var info = null;
import prompt from '@system.prompt';
import router from '@system.router';
export default {
  data: {
    curYear:'',
    curMonth:'',
    curDay:'',
    date:'',
    schedule:'',
    schedulelist:[]
  },
  onInit() {
    // Obtain the current date. 
    var date = new Date();
    this.curYear = date.getFullYear();
    this.curMonth = date.getMonth() + 1;
    this.curDay = date.getDate();
    this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
    this.schedulelist = []
  },
  addschedule(e) {
    this.$element('datedialog').show()
  },
  canceldialog(e) {
    prompt.showToast({
      message: 'Event setting canceled.'
    })
  },
  getschedule(e) {
    info = e.value
  },
  cancelschedule(e) {
    this.$element('datedialog').close()
    prompt.showToast({
      message: 'Event setting canceled.'
    })
  },
//    Touch OK to save the data.
  setschedule(e) {
    if (e.text === '') {
      this.schedule = info
    } else {
      this.schedule = info
      var addItem =  {schedule: this.schedule,}
      this.schedulelist.push(addItem)
    }
    this.$element('datedialog').close()
  }
}

3 -> form

Form是一个表单容器，支持容器内Input组件内容的提交和重置。

说明

从API Version 6开始支持。

3.1 -> 创建Form组件

在pages/index目录下的hml文件中创建一个Form组件。

<!-- test.hml -->
<div class="container">
  <form style="width: 100%; height: 20%">  
    <input type="text" style="width:80%"></input>
  </form>
</div>
/* test.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

3.2 -> 实现表单缩放

为Form组件添加click-effect属性，实现点击表单后的缩放效果。

<!-- test.hml -->
<div class="container">
  <form  id="formId" class="formClass" click-effect="spring-large">
    <input type="text"></input>  
  </form>
</div>

3.3 -> 设置Form样式

通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。

/* test.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.formClass{
  width: 80%;
  height: 100px;
  padding: 10px;
  border: 1px solid #cccccc;
}

3.4 -> 添加响应事件

为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。

<!-- test.hml -->
<div class="container">
  <form onsubmit='onSubmit' onreset='onReset' class="form">
    <div style="width: 100%;justify-content: center;">
      <label>Option 1</label>
      <input type='radio' name='radioGroup' value='radio1'></input>
      <label>Option 2</label>
      <input type='radio' name='radioGroup' value='radio2'></input>
    </div>
    <div style="width: 100%;justify-content: center; margin-top: 20px">
      <input type="submit" value="Submit" style="width:120px; margin-right:20px;" >   
      </input>
      <input type="reset" value="Reset" style="width:120px;"></input>
    </div>
  </form>
</div>
/* index.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  background-color: #F1F3F5;
}
.form{
  width: 100%;
  height: 30%;
  margin-top: 40%;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
/* test.js */
import prompt from '@system.prompt';
export default{
  onSubmit(result) {
    prompt.showToast({
      message: result.value.radioGroup
    })
  },
  onReset() {
    prompt.showToast({
      message: 'Reset All'
    })
  }
}

3.5 -> 场景示例

在本场景中，可以选择相应选项并提交或重置数据。

创建Input组件，分别设置type属性为checkbox(多选框)和radio(单选框)，再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。

<!-- test.hml -->
<div class="container">
   <form onsubmit="formSubmit" onreset="formReset">
 <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
      <span > Form </span>
  </text>
    <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
     <text class="txt">Select 1 or more options</text>
      <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
        <label target="checkbox1">Option 1</label>
        <input id="checkbox1" type="checkbox" name="checkbox1"></input>
        <label target="checkbox2">Option 2</label>
        <input id="checkbox2" type="checkbox" name="checkbox2"></input>
       </div>
       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
       <text class="txt">Select 1 option</text>
       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
         <label target="radio1">Option 1</label>
         <input id="radio1" type="radio" name="myradio"></input>
         <label target="radio2">Option 2</label>
         <input id="radio2" type="radio" name="myradio"></input>
       </div>
       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
       <text class="txt">Text box</text>
       <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
       <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
         <input type="submit">Submit</input>
         <input type="reset">Reset</input>
       </div>
    </div>
  </form>
</div>
/* index.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction:column;
  align-items:center;
  background-color:#F1F3F5;
}
.txt {
  font-size:33px;
  font-weight:bold;
  color:darkgray;
}
label{
  font-size: 20px;
}
/* test.js */
import prompt from '@system.prompt';
export default {
  formSubmit() {
    prompt.showToast({
      message: 'Submitted.'
    })
  },
  formReset() {
    prompt.showToast({
      message: 'Reset.'
    })
  }
}

感谢各位大佬支持！！！

互三啦！！！

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

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

相关文章

Linux：文件系统（软硬链接）

Linux：文件系统（软硬链接）

目录 inode ext2文件系统 Block Group 超级块&#xff08;Super Block&#xff09; GDT&#xff08;Group Descriptor Table&#xff09; 块位图&#xff08;Block Bitmap&#xff09; inode位图&#xff08;Inode Bitmap&#xff09; i节点表&#xff08;inode Tabl…
阅读更多...
深度学习系列--01.入门

深度学习系列--01.入门

一.深度学习概念 深度学习&#xff08;Deep Learning&#xff09;是机器学习的分支&#xff0c;是指使用多层的神经网络进行机器学习的一种手法抖音百科。它学习样本数据的内在规律和表示层次&#xff0c;最终目标是让机器能够像人一样具有分析学习能力&#xff0c;能够识别文字…
阅读更多...
如何抓取酒店列表： 揭开秘密

如何抓取酒店列表： 揭开秘密

搜索酒店列表是一种强大的工具&#xff0c;可以从各种在线资源中收集有关住宿、价格和可用性的综合数据。无论您是要比较价格、分析市场趋势&#xff0c;还是要创建个性化的旅行计划&#xff0c;搜索都能让您有效地汇编所需的信息。在本文中&#xff0c;我们将介绍如何搜索酒店…
阅读更多...
深度剖析 C++17 中的 std::byte：解锁字节级编程新境界

深度剖析 C++17 中的 std::byte：解锁字节级编程新境界

文章目录 一、引入背景二、基本定义三、特性详解不可隐式转换为整型显式转换为unsigned char位运算支持字面量支持四、使用场景内存操作数据序列化与反序列化网络通信文件读写操作五、与其他数据类型的交互与字符类型的交互与整数类型的交互与指针类型的交互六、注意事项避免混…
阅读更多...
【多线程】线程池核心数到底如何配置？

【多线程】线程池核心数到底如何配置？

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 前置回顾2. 动态线程池2.1 JMX 的介绍2.1.1 MBeans 介绍 2.2 使用 JMX jconsole 实现动态修改线程池2.2.…
阅读更多...
三维空间全局光照 | 及各种扫盲

三维空间全局光照 | 及各种扫盲

Lecture 6 SH for diffuse transport Lecture 7关于 SH for glossy transport 三维空间全局光照 diffuse case和glossy case的区别 在Lambertian模型中&#xff0c;BRDF是一个常数 diffuse case 跟outgoing point无关 glossy case 跟outgoing point有关 &#xff08;Gloss…
阅读更多...
Polardb三节点集群部署安装--附虚拟机

Polardb三节点集群部署安装--附虚拟机

1. 架构 PolarDB-X 采用 Shared-nothing 与存储计算分离架构进行设计&#xff0c;系统由4个核心组件组成。 计算节点&#xff08;CN, Compute Node&#xff09; 计算节点是系统的入口&#xff0c;采用无状态设计&#xff0c;包括 SQL 解析器、优化器、执行器等模块。负责数据…
阅读更多...
java s7接收Byte字节，接收word转16位二进制

java s7接收Byte字节，接收word转16位二进制

1图&#xff1a; 2.图&#xff1a; try {List list getNameList();//接收base64S7Connector s7Connector S7ConnectorFactory.buildTCPConnector().withHost("192.168.46.52").withPort(102).withTimeout(1000) //连接超时时间.withRack(0).withSlot(3).build()…
阅读更多...
挑战项目 --- 微服务编程测评系统（在线OJ系统）

挑战项目 --- 微服务编程测评系统（在线OJ系统）

一、前言 1.为什么要做项目 面试官要问项目&#xff0c;考察你到底是理论派还是实战派&#xff1f; 1.希望从你的项目中看到你的真实能力和对知识的灵活运用。 2.展示你在面对问题和需求时的思考方式及解决问题的能力。 3.面试官会就你项目提出一些问题&#xff0c;或扩展需求…
阅读更多...
基于springboot的体质测试数据分析及可视化设计

基于springboot的体质测试数据分析及可视化设计

作者&#xff1a;学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等 文末获取“源码数据库万字文档PPT”&#xff0c;支持远程部署调试、运行安装。 项目包含&#xff1a; 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…
阅读更多...
java-重载与重写

java-重载与重写

介绍 在 Java 中&#xff0c;重载&#xff08;Overloading&#xff09; 和 重写&#xff08;Overriding&#xff09; 是两个重要的概念&#xff0c;它们都与方法有关&#xff0c;但它们的应用场景和行为完全不同。 通过理解重载和重写的区别&#xff0c;可以更好地设计类的继承…
阅读更多...
DeepSeek各版本说明与优缺点分析

DeepSeek各版本说明与优缺点分析

DeepSeek各版本说明与优缺点分析 DeepSeek是最近人工智能领域备受瞩目的一个语言模型系列&#xff0c;其在不同版本的发布过程中&#xff0c;逐步加强了对多种任务的处理能力。本文将详细介绍DeepSeek的各版本&#xff0c;从版本的发布时间、特点、优势以及不足之处&#xff0…
阅读更多...
2024年12月 Scratch 图形化（三级）真题解析 中国电子学会全国青少年软件编程等级考试

2024年12月 Scratch 图形化（三级）真题解析 中国电子学会全国青少年软件编程等级考试

202412 Scratch 图形化&#xff08;三级&#xff09;真题解析 中国电子学会全国青少年软件编程等级考试 一、选择题(共18题&#xff0c;共50分) 第 1 题 气温和对应的穿衣建议如下表所示&#xff0c;下列选项能正确给出穿衣建议的是&#xff1f;&#xff08; &#xff09; A. …
阅读更多...
C# 中记录（Record）详解

C# 中记录（Record）详解

从C#9.0开始&#xff0c;我们有了一个有趣的语法糖&#xff1a;记录(record)　　 为什么提供记录&#xff1f; 开发过程中&#xff0c;我们往往会创建一些简单的实体&#xff0c;它们仅仅拥有一些简单的属性&#xff0c;可能还有几个简单的方法&#xff0c;比如DTO等等&#xf…
阅读更多...
【MQTT协议 03】 抓包分析

【MQTT协议 03】 抓包分析

一、MQTT测试工具 1、mqtt服务器 emqx 2、mqtt 客户端 mqttx 3、抓包工具 wireshark 搭建参考 【MQTT 协议 01】MQTT 服务器搭建_mqtt服务器搭建-CSDN博客 二、报文测试 2.1、CONNECT &#xff08;客户端连接&#xff09; 2.1.1、抓包 2.1.2、解析 #16进制表示 10300…
阅读更多...
手机上运行AI大模型(Deepseek等)

手机上运行AI大模型(Deepseek等)

最近deepseek的大火&#xff0c;让大家掀起新一波的本地部署运行大模型的热潮&#xff0c;特别是deepseek有蒸馏的小参数量版本&#xff0c;电脑上就相当方便了&#xff0c;直接ollamaopen-webui这种类似的组合就可以轻松地实现&#xff0c;只要硬件&#xff0c;如显存&#xf…
阅读更多...
电商项目-分布式事务(四)基于消息队列实现分布式事务

电商项目-分布式事务(四)基于消息队列实现分布式事务

基于消息队列实现分布式事务&#xff0c;实现消息最终一致性 如何基于消息队列实现分布式事务&#xff1f; 通过消息队列实现分布式事务的话&#xff0c;可以保证当前数据的最终一致性。实现思路&#xff1a;将大的分布式事务&#xff0c;进行拆分&#xff0c;拆分成若干个小…
阅读更多...
leetcode_双指针 160.相交链表

leetcode_双指针 160.相交链表

160.相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 思路: 本题中&#xff0c;交点不是数值相等&#xff0c;而是指针相等 双指针遍历两遍后必定相遇&#xff0c…
阅读更多...
深入理解浮点数：单精度、双精度、半精度和BFloat16详解

深入理解浮点数：单精度、双精度、半精度和BFloat16详解

文章目录 深入理解浮点数&#xff1a;单精度、双精度、半精度和BFloat16详解 &#x1f522;简介 &#x1f31f;1. 单精度&#xff08;Single Precision&#xff09;&#x1f3af;应用场景 &#x1f680; 2. 双精度&#xff08;Double Precision&#xff09;&#x1f4aa;应用场…
阅读更多...
Verilog基础（三）：过程

Verilog基础（三）：过程

过程(Procedures) - Always块 – 组合逻辑 (Always blocks – Combinational) 由于数字电路是由电线相连的逻辑门组成的，所以任何电路都可以表示为模块和赋值语句的某种组合. 然而，有时这不是描述电路最方便的方法. 两种always block是十分有用的： 组合逻辑： always @(…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023