当前位置：首页 > article >正文

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

article 2026/5/6 21:08:16

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 = infovar 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.'})}
}

感谢各位大佬支持！！！

互三啦！！！

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

目录 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 -> 创建…...

编程日记 2026/4/25 15:31:29

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

目录 inode ext2文件系统 Block Group 超级块（Super Block） GDT（Group Descriptor Table） 块位图（Block Bitmap） inode位图（Inode Bitmap） i节点表（inode Tabl…...

编程日记 2026/4/30 13:13:19

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

一.深度学习概念深度学习（Deep Learning）是机器学习的分支，是指使用多层的神经网络进行机器学习的一种手法抖音百科。它学习样本数据的内在规律和表示层次，最终目标是让机器能够像人一样具有分析学习能力，能够识别文字…...

编程日记 2026/4/26 12:00:09

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

搜索酒店列表是一种强大的工具，可以从各种在线资源中收集有关住宿、价格和可用性的综合数据。无论您是要比较价格、分析市场趋势，还是要创建个性化的旅行计划，搜索都能让您有效地汇编所需的信息。在本文中，我们将介绍如何搜索酒店…...

编程日记 2026/5/4 16:02:12

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

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

编程日记 2026/5/5 5:04:00

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

🥰🥰🥰来都来了，不妨点个关注叭！ 👉博客主页：欢迎各位大佬!👈 文章目录 1. 前置回顾2. 动态线程池2.1 JMX 的介绍2.1.1 MBeans 介绍 2.2 使用 JMX jconsole 实现动态修改线程池2.2.…...

编程日记 2026/5/4 23:45:03

Lecture 6 SH for diffuse transport Lecture 7关于 SH for glossy transport 三维空间全局光照 diffuse case和glossy case的区别在Lambertian模型中，BRDF是一个常数 diffuse case 跟outgoing point无关 glossy case 跟outgoing point有关 （Gloss…...

编程日记 2026/5/6 13:29:45

通过C/C++编程语言实现“数据结构”课程中的链表

引言链表（Linked List）是数据结构中最基础且最重要的线性存储结构之一。与数组的连续内存分配不同，链表通过指针将分散的内存块串联起来，具有动态扩展和高效插入/删除的特性。本文将以C/C++语言为例，从底层原理到代码实现，手把手教你构建完整的链表结构，并深入探讨其应…...

编程日记 2026/2/25 2:36:02

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

1. 架构 PolarDB-X 采用 Shared-nothing 与存储计算分离架构进行设计，系统由4个核心组件组成。计算节点（CN, Compute Node） 计算节点是系统的入口，采用无状态设计，包括 SQL 解析器、优化器、执行器等模块。负责数据…...

编程日记 2026/5/2 15:50:17

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

1图： 2.图： try {List list getNameList();//接收base64S7Connector s7Connector S7ConnectorFactory.buildTCPConnector().withHost("192.168.46.52").withPort(102).withTimeout(1000) //连接超时时间.withRack(0).withSlot(3).build()…...

编程日记 2026/4/26 12:00:24

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

一、前言 1.为什么要做项目面试官要问项目，考察你到底是理论派还是实战派？ 1.希望从你的项目中看到你的真实能力和对知识的灵活运用。 2.展示你在面对问题和需求时的思考方式及解决问题的能力。 3.面试官会就你项目提出一些问题，或扩展需求…...

编程日记 2026/4/26 12:01:51

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

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

编程日记 2026/5/2 1:19:55

java-重载与重写

介绍在 Java 中，重载（Overloading） 和重写（Overriding） 是两个重要的概念，它们都与方法有关，但它们的应用场景和行为完全不同。通过理解重载和重写的区别，可以更好地设计类的继承…...

编程日记 2026/4/26 12:00:27

使用C++构建一个优先级队列

1.优先级队列的介绍优先级队列是一种特殊的队列数据结构，它是队列，但又不完全是，因为它要将装载的数据进行优先级排序，找到一个最大或者最小优先级的元素，下一次出队列的元素就是这个元素，所以说它不完全是…...

编程日记 2026/5/3 3:48:14

linux驱动开发之字符设备与总线设备驱动模型的区别与联系

Linux驱动开发核心概念解析 1. 字符设备（Character Device） 定义与特点： 以字节流形式进行数据交换，适用于顺序访问的设备（如键盘、鼠标、串口）。用户空间通过设备文件（如/dev/xxx&#xff0…...

编程日记 2026/2/18 20:37:49

AI deepseek对数据治理的影响

DEEPSEEK作为智能一款助手，在数据治理体系中具有深远的影响。它通过提供智能化、自动化和高效化的解决方案，推动企业在数据治理变革与领域的优化。以下是EPSEEK对数据治理体系影响的多角度分析： 一、战略层面：推动数据治理目标的…...

编程日记 2026/2/19 20:15:07

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

DeepSeek各版本说明与优缺点分析 DeepSeek是最近人工智能领域备受瞩目的一个语言模型系列，其在不同版本的发布过程中，逐步加强了对多种任务的处理能力。本文将详细介绍DeepSeek的各版本，从版本的发布时间、特点、优势以及不足之处&#xff0…...

编程日记 2026/5/2 19:40:32

iOS 老项目适配 #Preview 预览功能

前言 iOS 开发者最憋屈的就是UI 布局慢，一直以来没有实时预览功能，虽然swiftUI 早就支持了，但是目前主流还是使用UIKit在布局，iOS 17 苹果推出了 #Preview 可以支持UIKit 实时预览，但是仅仅是 iOS 17，老项目怎么办呢？于是就有了这篇老项目适配 #Preview 预览的文章，…...

编程日记 2026/2/19 2:08:13

在ubuntu22.04上先部署docker，再编译安装kamailio，附详细操作流程及docker和makailio的版本号

以下是在Ubuntu 22.04上部署Docker并编译安装Kamailio的详细操作流程，包含版本号信息： 一、部署Docker（版本：24.0.7） 更新系统包 sudo apt update && sudo apt upgrade -y安装依赖工具 sudo apt install -y ap…...

编程日记 2026/4/5 6:34:58

蓝桥杯试题：排序

一、问题描述给定 nn 个正整数 a1,a2,…,ana1,a2,…,an，你可以将它们任意排序。现要将这 nn 个数字连接成一排，即令相邻数字收尾相接，组成一个数。问，这个数最大可以是多少。输入格式第一行输入一个正整数 nn&#xff…...

编程日记 2026/4/17 3:59:11

C++常用拷贝和替换算法

算法简介： copy // 容器内指定的元素拷贝到另一容器replace // 将容器内指定范围的旧元素改为新元素replace_if // 容器内指定范围满足条件的元素替换为新元素swap //互换两个容器的元素 1. copy 功能描述： 将容器内指定范围的数据拷贝到另一容器中函…...

编程日记 2026/3/26 22:03:55

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

202412 Scratch 图形化（三级）真题解析中国电子学会全国青少年软件编程等级考试一、选择题(共18题，共50分) 第 1 题气温和对应的穿衣建议如下表所示，下列选项能正确给出穿衣建议的是？（ ） A. …...

编程日记 2026/4/30 6:47:04

C# 中记录（Record）详解

从C#9.0开始，我们有了一个有趣的语法糖：记录(record)　　为什么提供记录？ 开发过程中，我们往往会创建一些简单的实体，它们仅仅拥有一些简单的属性，可能还有几个简单的方法，比如DTO等等&#xf…...

编程日记 2026/4/26 12:00:27

【MQTT协议 03】抓包分析

一、MQTT测试工具 1、mqtt服务器 emqx 2、mqtt 客户端 mqttx 3、抓包工具 wireshark 搭建参考【MQTT 协议 01】MQTT 服务器搭建_mqtt服务器搭建-CSDN博客二、报文测试 2.1、CONNECT （客户端连接） 2.1.1、抓包 2.1.2、解析 #16进制表示 10300…...

编程日记 2026/5/2 14:14:59

深度学习-100-RAG技术之最简单的RAG系统概念和效果优化提升方向

文章目录 1 数据是基础2 Naive RAG(最简单的RAG系统)2.1 RAG周边技术2.2 标准的RAG流程2.3 RAG的潜在问题2.4 如何应对RAG的问题3 优化方向3.1 原始数据创建/准备3.1.1 易于理解的文本3.1.2 提高数据质量3.2 预检索优化3.2.1 分块优化3.2.2 添加元数据3.2.3 选对嵌入模型3.2.4 …...

编程日记 2026/2/19 2:56:48

Redis面试题总结（题目来源JavaGuide）

Redis 基础问题1：Redis 有什么作用?为什么要用 Redis/为什么要用缓存？ Redis 是一个开源的高性能键值对数据库，它的作用主要体现在以下几个方面： 缓存：Redis 常被用作缓存系统，可以将频繁访问的数据存储…...

编程日记 2026/2/21 7:30:01

Django 多数据库

django 支持项目连接多个数据库 DATABASES = {default: {ENGINE: django.db.backends.mysql,NAME: xxx,USER: root,"PASSWORD": xxxxx,HOST: xxxx,PORT: 3306,},bak: {ENGINE: django.db.backends.mysql,NAME: xxx,USER: root,"PASSWORD": xxxx,HOST: xxx…...

编程日记 2026/2/28 5:55:03