循环渲染ForEach

       

目录

1、接口说明

2、键值生成规则

3、组件创建规则

3.1、首次渲染

3.2、非首次渲染

4、使用场景

4.1、数据源不变

4.2、数据源组项发生变化

 4.3、数据源数组项子属性变化

5、反例 

5.1、渲染结果非预期

5.2、渲染性能降低

Android开发中我们有ListView组件、GridView组件、RecyclerView组件，这些组件可以为我们创建一个列表；在鸿蒙开发中，则不一样，它没有类似Android中的组件，但是却提供了循环渲染机制ForEach接口帮助我们渲染一个列表，本节主要介绍该主题。

        ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

1、接口说明

        ForEach接口定义如下：

ForEach(arr: Array,itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number): string => string
)
  • arr 

    数据源，为Array类型的数组。

    说明：

    - 可以设置为空数组，此时不会创建子组件。

    - 可以设置返回值为数组类型的函数，例如arr.slice(1, 3)，但设置的函数不应改变包括数组本身在内的任何状态变量，例如不应使用Array.splice(),Array.sort()或Array.reverse()这些会改变原数组的函数。

  • itemGenerator

    组件生成函数。

    - 为数组中的每个元素创建对应的组件。

    - item参数：arr数组中的数据项。

    - index参数（可选）：arr数组中的数据项索引。

    说明：

    - 组件的类型必须是ForEach的父容器所允许的。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

  • ForEach的itemGenerator函数可以包含if/else条件渲染逻辑。另外，也可以在if/else条件渲染语句中使用ForEach组件。
  • 在初始化渲染时，ForEach会加载数据源的所有数据，并为每个数据项创建对应的组件，然后将其挂载到渲染树上。如果数据源非常大或有特定的性能需求，建议使用LazyForEach组件。

2、键值生成规则

        在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

        ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即(item: any, index: number) => { return index + '__' + JSON.stringify(item); }。

        ArkUI框架对于ForEach的键值生成有一套特定的判断规则，这主要与itemGenerator函数的第二个参数index以及keyGenerator函数的返回值有关。总的来说，只有当开发者在itemGenerator函数中声明了index参数，并且自定义的keyGenerator函数返回值中不包含index参数时，ArkUI框架才会在开发者自定义的keyGenerator函数返回值前添加index参数，作为最终的键值。在其他情况下，系统将直接使用开发者自定义的keyGenerator函数返回值作为最终的键值。如果keyGenerator函数未定义，系统将使用上述默认的键值生成函数。具体的键值生成规则判断逻辑如下图所示。

ArkUI框架会对重复的键值发出警告。在UI更新的场景下，如果出现重复的键值，框架可能无法正常工作，具体请参见渲染结果非预期 

3、组件创建规则

        在确定键值生成规则后，ForEach的第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数组项创建组件。组件的创建包括两种情况：Foreach首次渲染和Foreach非首次渲染。

3.1、首次渲染

        在ForEach首次渲染时，会根据前述键值生成规则为数据源的每个数组项生成唯一键值，并创建相应的组件。

@Entry
@Component
struct ForeachRenderDemo1Page {@State simpleList: Array<string> = ['one', 'two', 'three'];build() {Row() {Column() {ForEach(this.simpleList, (item: string) => {ForeachDemo1ChildItem({ item: item })}, (item: string) => item)}.width('100%').height('100%')}.height('100%').backgroundColor(0xF1F3F5)}
}@Component
struct ForeachDemo1ChildItem {@Prop item: string;build() {Text(this.item).fontSize(50)}
}

        运行结果如下：


ForEach数据源不存在相同值案例首次渲染运行效果图

        在上述代码中，键值生成规则是keyGenerator函数的返回值item。在ForEach渲染循环时，为数据源数组项依次生成键值one、two和three，并创建对应的ChildItem组件渲染到界面上。

        当不同数组项按照键值生成规则生成的键值相同时，框架的行为是未定义的。例如，在以下代码中，ForEach渲染相同的数据项two时，只创建了一个ChildItem组件，而没有创建多个具有相同键值的组件。

@Entry
@Component
struct ForeachRenderDemo2Page {@State simpleList: Array<string> = ['one', 'two', 'two', 'three'];build() {Row() {Column() {ForEach(this.simpleList, (item: string) => {ForeachRenderDemo2ChildItem({ item: item })}, (item: string) => item)}.width('100%').height('100%')}.height('100%')}
}@Component
struct ForeachRenderDemo2ChildItem {@Prop item: string;build() {Text(this.item).fontSize(50)}
}

        运行结果如下：

数据源存在相同值案例首次渲染

        在该示例中，最终键值生成规则为item。当ForEach遍历数据源simpleList，遍历到索引为1的two时，按照最终键值生成规则生成键值为two的组件并进行标记。当遍历到索引为2的two时，按照最终键值生成规则当前项的键值也为two，此时不再创建新的组件。

3.2、非首次渲染

        在ForEach组件进行非首次渲染时，它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在，则会创建一个新的组件；如果键值存在，则不会创建新的组件，而是直接渲染该键值所对应的组件。例如，在以下的代码示例中，通过点击事件修改了数组的第三项值为"new three"，这将触发ForEach组件进行非首次渲染。 

@Entry
@Component
struct ForeachRenderDemo3Page {@State simpleList: Array<string> = ['one', 'two', 'three'];build() {Row() {Column() {Text('点击修改第3个数组项的值').fontSize(24).fontColor(Color.Red).onClick(() => {this.simpleList[2] = 'new three';})ForEach(this.simpleList, (item: string) => {ForeachRenderDemo3ChildItem({ item: item }).margin({ top: 20 })}, (item: string) => item)}.justifyContent(FlexAlign.Center).width('100%').height('100%')}.height('100%')}
}@Component
struct ForeachRenderDemo3ChildItem {@Prop item: string;build() {Text(this.item).fontSize(30)}
}

        运行效果如下图:

        从本例可以看出@State 能够监听到简单数据类型数组数据源 simpleList 数组项的变化。

  1. 当 simpleList 数组项发生变化时，会触发 ForEach 进行重新渲染。
  2. ForEach 遍历新的数据源 ['one', 'two', 'new three']，并生成对应的键值one、two和new three。
  3. 其中，键值one和two在上次渲染中已经存在，所以 ForEach 复用了对应的组件并进行了渲染。对于第三个数组项 "new three"，由于其通过键值生成规则 item 生成的键值new three在上次渲染中不存在，因此 ForEach 为该数组项创建了一个新的组件。

4、使用场景

        ForEach组件在开发过程中的主要应用场景包括：数据源不变、数据源数组项发生变化（如插入、删除操作）、数据源数组项子属性变化。

4.1、数据源不变

        在数据源保持不变的场景中，数据源可以直接采用基本数据类型。例如，在页面加载状态时，可以使用骨架屏列表进行渲染展示。

@Entry
@Component
struct ForeachRenderDemo4Page {@State simpleList: Array<number> = [1, 2, 3, 4, 5];build() {Column() {ForEach(this.simpleList, (item: string) => {ArticleSkeletonView().margin({ top: 20 })}, (item: string) => item)}.padding(20).width('100%').height('100%')}
}@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {Row().width(width).height(height).backgroundColor('#FFF2F3F4')
}@Component
struct ArticleSkeletonView {build() {Row() {Column() {textArea(80, 80)}.margin({ right: 20 })Column() {textArea('60%', 20)textArea('50%', 20)}.alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceAround).height('100%')}.padding(20).borderRadius(12).backgroundColor('#FFECECEC').height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}

运行结果如下：

        在本示例中，采用数据项item作为键值生成规则，由于数据源simpleList的数组项各不相同，因此能够保证键值的唯一性。 

4.2、数据源组项发生变化

        在数据源数组项发生变化的场景下，例如进行数组插入、删除操作或者数组项索引位置发生交换时，数据源应为对象数组类型，并使用对象的唯一ID作为最终键值。例如，当在页面上通过手势上滑加载下一页数据时，会在数据源数组尾部新增新获取的数据项，从而使得数据源数组长度增大。

import { Article } from './bean/Article';@Entry
@Component
struct ForeachRenderDemo5Page {@State isListReachEnd: boolean = false;@State articleList: Array<Article> = [new Article('001', '第1篇文章', '文章简介内容'),new Article('002', '第2篇文章', '文章简介内容'),new Article('003', '第3篇文章', '文章简介内容'),new Article('004', '第4篇文章', '文章简介内容'),new Article('005', '第5篇文章', '文章简介内容'),new Article('006', '第6篇文章', '文章简介内容'),new Article('007', '第7篇文章', '文章简介内容'),new Article('008', '第8篇文章', '文章简介内容'),new Article('009', '第9篇文章', '文章简介内容'),new Article('010', '第10篇文章', '文章简介内容')]private count: number = 11;loadMoreArticles() {console.log('loadMoreArticles')this.articleList.push(new Article(`0${++this.count}`, `加载的第${this.count}篇新文章`, `第${this.count}篇文章简介内容`));}build() {Column({ space: 5 }) {List() {ForEach(this.articleList, (item: Article) => {ListItem() {ForeachRenderDemo5ArticleCard({ article: item }).margin({ top: 20 })}}, (item: Article) => item.id)}.onReachEnd(() => {console.log('onReachEnd')this.isListReachEnd = true;}).parallelGesture(PanGesture({ direction: PanDirection.Up, distance: 80 }).onActionStart(() => {console.log('onActionStart')if (this.isListReachEnd) {this.loadMoreArticles();this.isListReachEnd = false;}})).padding(20).scrollBar(BarState.Off).height('100%').height('100%')}.width('100%').height('100%').backgroundColor(0xF1F3F5)}
}@Component
struct ForeachRenderDemo5ArticleCard {@Prop article: Article;build() {Row() {Image($r('app.media.icon')).width(80).height(80).margin({ right: 20 })Column() {Text(this.article.title).fontSize(20).margin({ bottom: 8 })Text(this.article.brief).fontSize(16).fontColor(Color.Gray).margin({ bottom: 8 })}.alignItems(HorizontalAlign.Start).width('80%').height('100%')}.padding(20).borderRadius(12).backgroundColor('#FFECECEC').height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}
运行结果如下：

        在本示例中，ArticleCard组件作为ArticleListView组件的子组件，通过@Prop装饰器接收一个Article对象，用于渲染文章卡片。

  1. 当列表滚动到底部时，如果手势滑动距离超过指定的80，将触发loadMoreArticle()函数。此函数会在articleList数据源的尾部添加一个新的数据项，从而增加数据源的长度。
  2. 数据源被@State装饰器修饰，ArkUI框架能够感知到数据源长度的变化，并触发ForEach进行重新渲染
 4.3、数据源数组项子属性变化

        当数据源的数组项为对象数据类型，并且只修改某个数组项的属性值时，由于数据源为复杂数据类型，ArkUI框架无法监听到@State装饰器修饰的数据源数组项的属性变化，从而无法触发ForEach的重新渲染。为实现ForEach重新渲染，需要结合@Observed和@ObjectLink装饰器使用。例如，在文章列表卡片上点击“点赞”按钮，从而修改文章的点赞数量。

import { Article } from './bean/Article';@Entry
@Component
struct ForeachRenderDemo6Page {@State articleList: Array<Article> = [new Article('001', '第0篇文章', '文章简介内容'),new Article('002', '第1篇文章', '文章简介内容'),new Article('003', '第2篇文章', '文章简介内容'),new Article('004', '第4篇文章', '文章简介内容'),new Article('005', '第5篇文章', '文章简介内容'),new Article('006', '第6篇文章', '文章简介内容'),];build() {List() {ForEach(this.articleList, (item: Article) => {ListItem() {ForeachRenderDemo6ArticleCard({article: item}).margin({ top: 20 })}}, (item: Article) => item.id)}.padding(20).scrollBar(BarState.Off).backgroundColor(0xF1F3F5)}
}@Component
struct ForeachRenderDemo6ArticleCard {@ObjectLink article: Article;handleLiked() {this.article.isLiked = !this.article.isLiked;this.article.likesCount = this.article.isLiked ? this.article.likesCount + 1 : this.article.likesCount - 1;}build() {Row() {Image($r('app.media.icon')).width(80).height(80).margin({ right: 20 })Column() {Text(this.article.title).fontSize(20).margin({ bottom: 8 })Text(this.article.brief).fontSize(16).fontColor(Color.Gray).margin({ bottom: 8 })Row() {Image(this.article.isLiked ? $r('app.media.icon_approve_checked') : $r('app.media.icon_approve_normal')).width(24).height(24).margin({ right: 8 })Text(this.article.likesCount.toString()).fontSize(16)}.onClick(() => this.handleLiked()).justifyContent(FlexAlign.Center)}.alignItems(HorizontalAlign.Start).width('80%').height('100%')}.padding(20).borderRadius(12).backgroundColor('#FFECECEC').height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}
运行结果如下：

        在本示例中，Article类被@Observed装饰器修饰。父组件ArticleListView传入Article对象实例给子组件ArticleCard，子组件使用@ObjectLink装饰器接收该实例。

  1. 当点击第1个文章卡片上的点赞图标时，会触发ArticleCard组件的handleLiked函数。该函数修改第1个卡片对应组件里article实例的isLiked和likesCount属性值。
  2. 由于子组件ArticleCard中的article使用了@ObjectLink装饰器，父子组件共享同一份article数据。因此，父组件中articleList的第1个数组项的isLiked和likedCounts数值也会同步修改。
  3. 当父组件监听到数据源数组项属性值变化时，会触发ForEach重新渲染。
  4. 在此处，ForEach键值生成规则为数组项的id属性值。当ForEach遍历新数据源时，数组项的id均没有变化，不会新建组件。
  5. 渲染第1个数组项对应的ArticleCard组件时，读取到的isLiked和likesCount为修改后的新值。
  • 尽量避免在最终的键值生成规则中包含数据项索引index，以防止出现渲染结果非预期和渲染性能降低。如果业务确实需要使用index，例如列表需要通过index进行条件渲染，开发者需要接受ForEach在改变数据源后重新创建组件所带来的性能损耗。
  • 为满足键值的唯一性，对于对象数据类型，建议使用对象数据中的唯一id作为键值。
  • 基本数据类型的数据项没有唯一ID属性。如果使用基本数据类型本身作为键值，必须确保数组项无重复。因此，对于数据源会发生变化的场景，建议将基本数据类型数组转化为具备唯一ID属性的对象数据类型数组，再使用ID属性作为键值生成规则。

5、反例 

        开发者在使用ForEach的过程中，若对于键值生成规则的理解不够充分，可能会出现错误的使用方式。错误使用一方面会导致功能层面问题，例如渲染结果非预期，另一方面会导致性能层面问题，例如渲染性能降低。

5.1、渲染结果非预期

        在本示例中，通过设置ForEach的第三个参数KeyGenerator函数，自定义键值生成规则为数据源的索引index的字符串类型值。当点击父组件Parent中“在第1项后插入新项”文本组件后，界面会出现非预期的结果。

@Entry
@Component
struct ForeachRenderDemo7Page {@State simpleList: Array<string> = ['one', 'two', 'three'];build() {Column() {Button() {Text('在第1项后插入新项').fontSize(30)}.onClick(() => {this.simpleList.splice(1, 0, 'new item');})ForEach(this.simpleList, (item: string) => {ChildItem({ item: item })}, (item: string, index: number) => index.toString())}.justifyContent(FlexAlign.Center).width('100%').height('100%')}
}@Component
struct ChildItem {@Prop item: string;build() {Text(this.item).fontSize(30)}
}

运行结果如下：

        ForEach在首次渲染时，创建的键值依次为"0"、"1"、"2"。

        插入新项后，数据源simpleList变为['one', 'new item', 'two', 'three']，框架监听到@State装饰的数据源长度变化触发ForEach重新渲染。

        ForEach依次遍历新数据源，遍历数据项"one"时生成键值"0"，存在相同键值，因此不创建新组件。继续遍历数据项"new item"时生成键值"1"，存在相同键值，因此不创建新组件。继续遍历数据项"two"生成键值"2"，存在相同键值，因此不创建新组件。最后遍历数据项"three"时生成键值"3"，不存在相同键值，创建内容为"three"的新组件并渲染。

        从以上可以看出，当最终键值生成规则包含index时，期望的界面渲染结果为['one', 'new item', 'two', 'three']，而实际的渲染结果为['one', 'two', 'three', 'three']，渲染结果不符合开发者预期。因此，开发者在使用ForEach时应尽量避免最终键值生成规则中包含index。

5.2、渲染性能降低

在本示例中，ForEach的第三个参数KeyGenerator函数处于缺省状态。根据上述键值生成规则，此例使用框架默认的键值生成规则，即最终键值为字符串index + '__' + JSON.stringify(item)。当点击“在第1项后插入新项”文本组件后，ForEach将需要为第2个数组项以及其后的所有项重新创建组件。

@Entry
@Component
struct ForeachRenderDemo8Page {@State simpleList: Array<string> = ['one', 'two', 'three'];build() {Column() {Button() {Text('在第1项后插入新项').fontSize(30)}.onClick(() => {this.simpleList.splice(1, 0, 'new item');console.log(`[onClick]: simpleList is ${JSON.stringify(this.simpleList)}`);})ForEach(this.simpleList, (item: string) => {ForeachRenderDemo8ChildItem({ item: item })})}.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor(0xF1F3F5)}
}@Component
struct ForeachRenderDemo8ChildItem {@Prop item: string;aboutToAppear() {console.log(`[aboutToAppear]: item is ${this.item}`);}build() {Text(this.item).fontSize(50)}
}

         运行结果如下：

         点击插入新项，ide打印如下日志：

        插入新项后，ForEach为new item、 two、 three三个数组项创建了对应的组件ChildItem，并执行了组件的aboutToAppear()生命周期函数。这是因为：

  1. 在ForEach首次渲染时，创建的键值依次为0__one、1__two、2__three。
  2. 插入新项后，数据源simpleList变为['one', 'new item', 'two', 'three']，ArkUI框架监听到@State装饰的数据源长度变化触发ForEach重新渲染。
  3. ForEach依次遍历新数据源，遍历数据项one时生成键值0__one，键值已存在，因此不创建新组件。继续遍历数据项new item时生成键值1__new item，不存在相同键值，创建内容为new item的新组件并渲染。继续遍历数据项two生成键值2__two，不存在相同键值，创建内容为two的新组件并渲染。最后遍历数据项three时生成键值3__three，不存在相同键值，创建内容为three的新组件并渲染。

        尽管此示例中界面渲染的结果符合预期，但每次插入一条新数组项时，ForEach都会为从该数组项起后面的所有数组项全部重新创建组件。当数据源数据量较大或组件结构复杂时，由于组件无法得到复用，将导致性能体验不佳。因此，除非必要，否则不推荐将第三个参数KeyGenerator函数处于缺省状态，以及在键值生成规则中包含数据项索引index。

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

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

相关文章

linux：IP地址、修改主机名、域名解析、虚拟机配置固定IP

linux：IP地址、修改主机名、域名解析、虚拟机配置固定IP

一:IP地址 1、每一台联网的电脑都会有一个地址&#xff0c;用于和其它计算机进行通讯 2、IP地址主要有2个版本,V4版本和V6版本(V6很少用暂不涉及) 3、IPv4版本的地址格式是:a.b.c.d,其中abcd表示0~255的数字,如192.168.88.101就是一个标准的IP地址 4、可以通过命令:ifconfi…
阅读更多...
视频监控技术经历了哪些发展阶段？视频监控技术未来趋势展望

视频监控技术经历了哪些发展阶段？视频监控技术未来趋势展望

随着城市经济的发展和进步&#xff0c;视频监控也已经应用在人们衣食住行的方方面面&#xff0c;成为社会主体的一个重要组成部分。随着视频监控的重要性越来越凸显&#xff0c;大家对视频监控技术的发展也非常关注。今天我们来简单阐述一下&#xff0c;视频监控技术经历的几个…
阅读更多...
基于多反应堆的高并发服务器【C/C++/Reactor】（中）ChannelMap 模块的实现

基于多反应堆的高并发服务器【C/C++/Reactor】（中）ChannelMap 模块的实现

&#xff08;三&#xff09;ChannelMap 模块的实现 这个模块其实就是为Channel来服务的&#xff0c;前面讲了Channel这个结构体里边它封装了文件描述符。假如说我们得到了某一个文件描述符&#xff0c;需要基于这个文件描述符进行它对应的事件处理&#xff0c;那怎么办呢&…
阅读更多...
windos/ubuntu20.4下UE4.27.2像素流送

windos/ubuntu20.4下UE4.27.2像素流送

windows/ubuntu20.4下UE4.27.2像素流送 像素流送技术可以将服务器端打包的虚幻引擎应用程序在客户端的浏览器上运行&#xff0c;用户可以通过浏览器操作虚幻引擎应用程序&#xff0c;客户端无需下载虚幻引擎&#xff0c;本文实现两台机器通过物理介质网线实现虚幻引擎应用程序…
阅读更多...
企业出海－如何保护客户账户安全？

企业出海－如何保护客户账户安全？

近年来国内企业竞争日益激烈&#xff0c;许多企业在这般环境下难以持续发展。那么该如何获得业务的可持续性增长&#xff0c;如何获取更多的客户的同时开阔公司的视野&#xff1f;出海便是如今帮助国内企业能快速发展壮大的潮流之一&#xff0c;摆脱了局限于国内发展的束缚奔向…
阅读更多...
单调栈分类、封装和总结

单调栈分类、封装和总结

作者推荐 map|动态规划|单调栈|LeetCode975:奇偶跳 通过枚举最小&#xff08;最大&#xff09;值不重复、不遗漏枚举所有子数组 C算法&#xff1a;美丽塔O(n)解法单调栈左右寻找第一个小于maxHeight[i]的left,right&#xff0c;[left,right]直接的高度都是maxHeight[i] 可以…
阅读更多...
第十二章 异常-Exception

第十二章 异常-Exception

一、异常的概念&#xff08;P444&#xff09; Java 语言中&#xff0c;将程序执行中发生的不正常情况称为“异常”。&#xff08;开发过程中的语法错误和逻辑错误不是异常&#xff09; 执行过程中所发生的异常事件可分为两大类 &#xff08;1&#xff09;Error&#xff08;错误…
阅读更多...
OpenCV-Python(19):Canny边缘检测

OpenCV-Python(19):Canny边缘检测

目录 学习目标 Canny 边缘检测原理 1.噪声抑制(噪声去除) 2.梯度计算 3.非极大值抑制 4.双阈值检测(滞后阈值) 5.边缘连接 Canny 边缘检测步骤 Canny 边缘检测的OpenCV实现 不同阈值的边缘检测效果 学习目标 了解Canny边缘检测的概念学习掌握函数cv2.Canny()的用法 …
阅读更多...
【星海出品】Keepalived 使用基础案例 (二)

【星海出品】Keepalived 使用基础案例 (二)

keepalived 使用 [rootmaster ~]# cat /etc/keepalived/keepalived.conf ! Configuration File for keepalivedglobal_defs { //全局配置notification_email { //定义报警收件人邮件地址acassenfirewall.locfailoverfirewall.locsysadminfirewall.loc}notification_…
阅读更多...
laravel 对接支付，本地穿透问题

laravel 对接支付，本地穿透问题

本地穿透有好多工具&#xff0c;参考链接&#xff1a;https://zhuanlan.zhihu.com/p/339923535 我这边是用的 NATAPP 官网&#xff1a;https://natapp.cn/ 客户端下载&#xff1a;https://natapp.cn/# NATAPP1分钟快速新手图文教程&#xff1a;https://natapp.cn/article/n…
阅读更多...
内部FLASH模拟EPPROM

内部FLASH模拟EPPROM

本例程基于STM32F103ZET6 FLASH大小为512K。 介绍FLASH 不同型号的 STM32&#xff0c;其 FLASH 容量也有所不同&#xff0c;最小的只有 16K 字节&#xff0c;最大的则达到了 1024K 字节。我们的精英 STM32 开发板选择的是 STM32F103ZET6 的 FLASH 容量为 512K 字节&#xff0…
阅读更多...
MATLAB Mobile - 使用预训练网络对手机拍摄的图像进行分类

MATLAB Mobile - 使用预训练网络对手机拍摄的图像进行分类

系列文章目录 前言 此示例说明如何使用深度学习对移动设备摄像头采集的图像进行分类。 在您的移动设备上安装和设置 MATLAB Mobile™。然后&#xff0c;从 MATLAB Mobile 的“设置”登录 MathWorks Cloud。 在您的设备上启动 MATLAB Mobile。 一、在您的设备上安装 MATLAB M…
阅读更多...
qt项目-《图像标注软件》源码阅读笔记-Command类绘图及其子类

qt项目-《图像标注软件》源码阅读笔记-Command类绘图及其子类

目录 1. Command 概览 2. Command2D 1. Command 概览 功能&#xff1a;命令栈基类&#xff0c;用来实现撤销和重做功能。 其子类Command2D和Command3D都是实现父类方法&#xff0c;除了构造函数没有自己的独有方法。 字段&#xff1a; redoCommands&#xff1a;存储re…
阅读更多...
变量覆盖漏洞 [BJDCTF2020]Mark loves cat 1

变量覆盖漏洞 [BJDCTF2020]Mark loves cat 1

打开题目 我们拿dirsearch扫描一下看看 扫描得到 看见有git字眼&#xff0c;那我们就访问 用githack去扒一下源代码看看 可以看到确实有flag.php结合index.php存在 但是当我去翻源代码的时候却没有翻到 去网上找到了这道题目的源代码 <?phpinclude flag.php;$yds &qu…
阅读更多...
JWT是什么？它有什么用？

JWT是什么？它有什么用？

1. 什么是 JWT&#xff1f; JWT是 JSON Web Token 的缩写&#xff0c;通过数字签名的方式&#xff0c;以 JSON 对象为载体&#xff0c;在不同的服务器终端之间安全传输的信息。 2. JWT 有什么用&#xff1f; JWT 最常见的场景就是授权认证&#xff0c;一旦用户登录&#xff…
阅读更多...
系列八、VMWare无法启动CentOS7问题排查 解决

系列八、VMWare无法启动CentOS7问题排查 解决

一、VMWare无法启动CentOS7 1.1、问题描述 今天在测试代码的时候&#xff0c;需要用到Linux&#xff0c;然后就打开VMWare进行启动&#xff0c;但是启动的时候发现无法启动起来&#xff0c;报了一个如下的错误&#xff1a; 出现了问题那就要解决问题&#xff0c;然后想起来前几…
阅读更多...
Koordinator 支持 K8s 与 YARN 混部，小红书在离线混部实践分享

Koordinator 支持 K8s 与 YARN 混部，小红书在离线混部实践分享

作者&#xff1a;索增增&#xff08;小红书&#xff09;、宋泽辉&#xff08;小红书&#xff09;、张佐玮&#xff08;阿里云&#xff09; 背景介绍 Koordinator 是一个开源项目&#xff0c;基于阿里巴巴在容器调度领域多年累积的经验孵化诞生&#xff0c;目前已经支持了 K8s…
阅读更多...
【数据结构】线段树算法总结（单点修改）

【数据结构】线段树算法总结（单点修改）

知识概览 用作单点修改的线段树有4个操作&#xff1a; pushup&#xff1a;由子节点的信息计算父节点的信息build&#xff1a;初始化一棵树modify&#xff1a;修改一个区间query&#xff1a;查询一个区间 线段树用一维数组来存储&#xff1a; 编号是x的节点&#xff0c;它的父节…
阅读更多...
【MySQL工具】pt-online-schema-change源码分析

【MySQL工具】pt-online-schema-change源码分析

通过阅读源码 更加深入了解原理&#xff0c;以及如何进行全量数据同步&#xff0c;如何使用触发器来同步变更期间的原表的数据更改。(&#xff3e;&#xff0d;&#xff3e;)V 目录 源码分析 Get configuration information. Connect to MySQL. Create --plugin. Setup la…
阅读更多...
使用 ElementUI 组件构建无边框 Window 桌面应用（WinForm/WPF）

使用 ElementUI 组件构建无边框 Window 桌面应用（WinForm/WPF）

生活不可能像你想象得那么好，但也不会像你想象得那么糟。 我觉得人的脆弱和坚强都超乎自己的想象。 有时，我可能脆弱得一句话就泪流满面；有时，也发现自己咬着牙走了很长的路。 ——莫泊桑 《一生》 一、技术栈 Vite + Vue3 + TS + ElementUI(plus) + .NET Framework 4.7.2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023