【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(二)

目录

1 -> HML语法

1.1 -> 页面结构

1.2 -> 数据绑定

1.3 -> 普通事件绑定

1.4 -> 冒泡事件绑定5+

1.5 -> 捕获事件绑定5+

1.6 -> 列表渲染

1.7 -> 条件渲染

1.8 -> 逻辑控制块

1.9 -> 模板引用

2 -> CSS语法

2.1 -> 尺寸单位

2.2 -> 样式导入

2.3 -> 声明样式

2.4 -> 选择器

2.5 -> 选择器优先级

2.6 -> 伪类

2.7 -> 样式预编译

2.8 -> CSS样式继承6+

3 -> JS语法

3.1 -> 语法

3.2 -> 对象

3.3 -> 方法

3.4 -> 获取DOM元素

3.5 -> 获取ViewModel

1 -> HML语法

HML(HarmonyOS Markup Language)是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。

1.1 -> 页面结构

<!-- test.hml --><div class="item-container"><text class="item-title">Image Show</text><div class="item-content"><image src="/common/xxx.png" class="image"></image></div></div>

1.2 -> 数据绑定

<!-- test.hml --><div onclick="changeText"><text> {{content[1]}} </text></div>
/*test.css*/
.container{margin: 200px;
}
// test.js
export default {data: {content: ['Hello World!', 'Welcome to my world!']},changeText: function() {this.content.splice(1, 1, this.content[0]);}
}

说明

  • 针对数组内的数据修改，请使用splice方法生效数据绑定变更。

  • hml文件中的js表达式不支持ES6语法。

1.3 -> 普通事件绑定

事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。

事件支持的写法有：

  • "funcName"：funcName为事件回调函数名(在JS文件中定义相应的函数实现)。

  • "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量(前面不用写this.)。

  • 示例

<!-- test.hml --><div class="container"><text class="title">{{count}}</text><div class="box"><input type="button" class="btn" value="increase" onclick="increase" /><input type="button" class="btn" value="decrease" @click="decrease" /><!-- 传递额外参数 --><input type="button" class="btn" value="double" @click="multiply(2)" /><input type="button" class="btn" value="decuple" @click="multiply(10)" /><input type="button" class="btn" value="square" @click="multiply(count)" /></div></div>
/* test.css */
.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px;
}
.title {font-size: 30px;text-align: center;width: 200px;height: 100px;
}
.box {width: 454px;height: 200px;justify-content: center;align-items: center;flex-wrap: wrap;
}
.btn {width: 200px;border-radius: 0;margin-top: 10px;margin-left: 10px;
}
// test.js
export default {data: {count: 0},increase() {this.count++;},decrease() {this.count--;},multiply(multiplier) {this.count = multiplier * this.count;}
};

1.4 -> 冒泡事件绑定5+

冒泡事件绑定包括：

  • 绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{event}.bubble。

  • 绑定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。

  • 示例

<!-- test.hml --><div><!-- 使用事件冒泡模式绑定事件回调函数。5+ -->;
<div on:touchstart.bubble="touchstartfunc"></div><div on:touchstart="touchstartfunc"></div><!-- 绑定事件回调函数，但阻止事件向上传递。5+ --><div grab:touchstart.bubble="touchstartfunc"></div><div grab:touchstart="touchstartfunc"></div><!-- 使用事件冒泡模式绑定事件回调函数。6+ --><div on:click.bubble="clickfunc"></div><div on:click="clickfunc"></div><!-- 绑定事件回调函数，但阻止事件向上传递。6+ --><div grab:click.bubble="clickfunc"></div><div grab:click="clickfunc"></div></div>
// test.js
export default {clickfunc: function(e) {console.log(e);},touchstartfuc: function(e) {console.log(e);},
}

说明

采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。

1.5 -> 捕获事件绑定5+

Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。

捕获事件绑定包括：

  • 绑定捕获事件：on:{event}.capture。

  • 绑定并阻止事件向下传递：grab:{event}.capture。

  • 示例

<!-- test.hml --><div><!-- 使用事件捕获模式绑定事件回调函数。5+ --><div on:touchstart.capture="touchstartfunc"></div><!-- 绑定事件回调函数，但阻止事件向下传递。5+ --><div grab:touchstart.capture="touchstartfunc"></div></div>

// xxx.js
export default {touchstartfuc: function(e) {console.log(e);},
}

1.6 -> 列表渲染

<!-- test.hml --><div class="array-container" style="flex-direction: column;margin: 200px;"><!-- div列表渲染 --><!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 --><div for="{{array}}" tid="id" onclick="changeText"><text>{{$idx}}.{{$item.name}}</text></div><!-- 自定义元素变量名称 --><div for="{{value in array}}" tid="id" onclick="changeText"><text>{{$idx}}.{{value.name}}</text></div><!-- 自定义元素变量、索引名称 --><div for="{{(index, value) in array}}" tid="id" onclick="changeText"><text>{{index}}.{{value.name}}</text></div></div>
// test.js
export default {data: {array: [{id: 1, name: 'jack', age: 18},{id: 2, name: 'tony', age: 18},],},changeText: function() {if (this.array[1].name === "tony"){this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});} else {this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});}},
}

tid属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下：

  • for="array"：其中array为数组对象，array的元素变量默认为$item。

  • for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。

  • for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。

说明

  • 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。

  • 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。

  • tid不支持表达式。

1.7 -> 条件渲染

条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下：

<!-- test.hml --><div class="container"><button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button><button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button><text if="{{visible}}"> Hello-world1 </text><text elif="{{display}}"> Hello-world2 </text><text else> Hello-World </text></div>
/* test.css */
.container{flex-direction: column;align-items: center;
}
.btn{width: 280px;font-size: 26px;margin: 10px 0;
}
// test.js
export default {data: {visible: false,display: true,},toggleShow: function() {this.visible = !this.visible;},toggleDisplay: function() {this.display = !this.display;}
}

优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。

<!-- test.hml --><div class="container"><button class="btn" type="capsule" value="toggle" onclick="toggle"></button><text show="{{visible}}" > Hello World </text></div>
/* test.css */
.container{flex-direction: column;align-items: center;
}
.btn{width: 280px;font-size: 26px;margin: 10px 0;
}
// test.js
export default {data: {visible: false,},toggle: function() {this.visible = !this.visible;},
}

说明

禁止在同一个元素上同时设置for和if属性。

1.8 -> 逻辑控制块

<block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。

<!-- test.hml --><list><block for="glasses"><list-item type="glasses"><text>{{$item.name}}</text></list-item><block for="$item.kinds"><list-item type="kind"><text>{{$item.color}}</text></list-item></block></block></list>
// test.js
export default {data: {glasses: [{name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]},{name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]},],},
}

1.9 -> 模板引用

<!-- template.hml -->
<div class="item"> <text>Name: {{name}}</text><text>Age: {{age}}</text>
</div>
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div><comp name="Tony" age="18"></comp>
</div>

2 -> CSS语法

CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。

2.1 -> 尺寸单位

  • 逻辑像素px(文档中以<length>表示)：

    • 默认屏幕具有的逻辑宽度为720px，实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素(从720px向1440物理像素，所有尺寸放大2倍)。
    • 额外配置autoDesignWidth为true时，逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。

  • 百分比(文档中以<percentage>表示)：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。

2.2 -> 样式导入

为了模块化管理和代码复用，CSS样式文件支持 @import 语句，导入css文件。

2.3 -> 声明样式

每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。

1. 内部样式，支持使用style、class属性来控制组件的样式。例如：

<!-- index.hml -->
<div class="container"><text style="color: red">Hello World</text>
</div>
/* index.css */
.container {justify-content: center;
}

2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入：

/* style.css */
.title {font-size: 50px;
}
/* index.css */
@import '../../common/style.css';
.container {justify-content: center;
}

2.4 -> 选择器

css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：

选择器样例样例描述
.class

.container

用于选择class="container"的组件。
#id#titleld用于选择id="titleId"的组件。
tagtext用于选择text组件。
,.title, .content用于选择class="title"和class="content"的组件。
#id .class tag#containerld .content text非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：#containerId>.content。

示例：

<!-- 页面布局test.hml -->
<div id="containerId" class="container"><text id="titleId" class="title">标题</text><div class="content"><text id="contentId">内容</text></div>
</div>
/* 页面样式test.css */
/\* 对所有div组件设置样式 \*/
div {flex-direction: column;
}
/* 对class="title"的组件设置样式 */
.title {font-size: 30px;
}
/* 对id="contentId"的组件设置样式 */
#contentId {font-size: 20px;
}
/* 对所有class="title"以及class="content"的组件都设置padding为5px */
.title, .content {padding: 5px;
}
/\* 对class="container"的组件下的所有text设置样式 \*/
.container text {color: \#007dff;
}
/\* 对class="container"的组件下的直接后代text设置样式 \*/
.container &gt; text {color: \#fa2a2d;
}

以上样式运行效果如下：

其中“.container text”将“标题”和“内容”设置为蓝色，而“.container > text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖。

2.5 -> 选择器优先级

选择器的优先级计算规则与w3c规则保持一致(只支持：内联样式，id，class，tag，后代和直接后代)，其中内联样式为在元素style属性中声明的样式。

当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 > id > class > tag。

2.6 -> 伪类

css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为true时的样式。

除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列：

名称支持组件描述
:diaabled支持disabled属性的组件表示disabled属性变为true时的元素(不支持动画样式的设置)。
:active支持click事件的组件表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。
:waitingbutton表示waiting属性为true的元素(不支持动画样式的设置)。
:checkedinput[type="checkbox"、type=“radio”]、switch表示checked属性为true的元素(不支持动画样式的设置)。

伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式：

<!-- index.hml -->
<div class="container"><input type="button" class="button" value="Button"></input>
</div>
/* index.css */
.button:active {background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
}

说明

针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker。

2.7 -> 样式预编译

预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。

  • 当前文件使用样式预编译，例如将原index.css改为index.less：

/* index.less */
/* 定义变量 */
@colorBackground: #000000;
.container {background-color: @colorBackground; /* 使用当前less文件中定义的变量 */
}

引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss：

/* style.scss */
/* 定义变量 */
$colorBackground: #000000;

在index.scss中引用：

/* index.scss */
/* 引入外部scss文件 */
@import '../../common/style.scss';
.container {background-color: $colorBackground; /* 使用style.scss中定义的变量 */
}

说明

引用的预编译文件建议放在common目录进行管理。

2.8 -> CSS样式继承6+

css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承：

  • font-family

  • font-weight

  • font-size

  • font-style

  • text-align

  • line-height

  • letter-spacing

  • color

  • visibility

3 -> JS语法

JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。

3.1 -> 语法

支持ES6语法。

  • 模块声明

    使用import方法引入功能模块：

import router from '@system.router';
  • 代码引用

        使用import方法导入js代码：

import utils from '../../common/utils.js';

3.2 -> 对象

  • 应用对象
属性类型描述
$defObject

使用this.$app.$def获取在app.js中暴露的对象。

 说明：

> 应用对象不支持数据绑定，需主动触发UI更新。

示例代码

// app.js
export default {onCreate() {console.info('Application onCreate');},onDestroy() {console.info('Application onDestroy');},globalData: {appData: 'appData',appVersion: '2.0',},globalMethod() {console.info('This is a global method!');this.globalData.appVersion = '3.0';}
};
// index.js页面逻辑代码
export default {data: {appData: 'localData',appVersion:'1.0',},onInit() {this.appData = this.$app.$def.globalData.appData;this.appVersion = this.$app.$def.globalData.appVersion;},invokeGlobalMethod() {this.$app.$def.globalMethod();},getAppVersion() {this.appVersion = this.$app.$def.globalData.appVersion;}
}
  • 页面对象
属性类型描述
dataObject/Function

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

data与private和public不能重合使用。

$refsObject持有注册过ref 属性的DOM元素或子组件实例的对象。
privateObject页面的数据模型，private下的数据属性只能由当前页面修改。
publicObject页面的数据模型，public下的数据属性的行为与data保持一致。
propsArray/Objectprops用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。
computedObject用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

3.3 -> 方法

  • 数据方法
方法参数描述
$setkey: string, value:any

添加新的数据属性或者修改已有数据属性。

用法：

this.$set('key',value)：添加数据属性。

$deletekey: string

删除数据属性。

用法：

this.$delete('key')：删除数据属性。

示例代码

// index.js
export default {data: {keyMap: {OS: 'HarmonyOS',Version: '2.0',},},getAppVersion() {this.$set('keyMap.Version', '3.0');console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0this.$delete('keyMap');console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined}
}
  • 公共方法
方法参数描述
$elementid: string

获得指定id的组件对象，如果无指定id，则返回根组件对象。

用法：

<div id='xxx'></div>

- this.$element('xxx')：获得id为xxx的组件对象。

- this.$element()：获得根组件对象。

$rootElement无

获取根组件对象。

用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。

$root无获得顶级ViewModel实例。
$parent无获得父级ViewModel实例。
$childid: string

获得指定id的子级自定义组件的ViewModel实例。

用法：

this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

  • 事件方法
方法参数描述
$watchdata: string, callback: string | Function

观察data中的属性变化，如果属性值改变，触发绑定的事件。

用法：

this.$watch('key', callback)

  • 页面方法
方法参数描述
scrollTo6+scrollPageParam: ScrollPageParam将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。
表1 ScrollPageParam6+
名称类型默认值描述
positionnumber-指定滚动位置。
idstring-指定需要滚动到的元素id。
durationnumber300指定滚动时长，单位为毫秒。
timingFunctionstringease指定滚动动画曲线，可选值。
complete() => void-指定滚动完成后需要执行的回调函数。

示例：

this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})

3.4 -> 获取DOM元素

1. 通过$refs获取DOM元素

<!-- index.hml -->
<div class="container"><image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
// index.js
export default {data: {images: [{ src: '/common/frame1.png' },{ src: '/common/frame2.png' },{ src: '/common/frame3.png' },],},handleClick() {const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素const state = animator.getState();if (state === 'paused') {animator.resume();} else if (state === 'stopped') {animator.start();} else {animator.pause();}},
};

2. 通过$element获取DOM元素

<!-- index.hml -->
<div class="container"><image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
// index.js
export default {data: {images: [{ src: '/common/frame1.png' },{ src: '/common/frame2.png' },{ src: '/common/frame3.png' },],},handleClick() {const animator = this.$element('animator'); // 获取id属性为animator的DOM元素const state = animator.getState();if (state === 'paused') {animator.resume();} else if (state === 'stopped') {animator.start();} else {animator.pause();}},
};

3.5 -> 获取ViewModel

根节点所在页面：

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container"><div class="container"><text>{{text}}</text><parentComp></parentComp></div>
</div>
// root.js
export default {data: {text: 'I am root!',},
}

自定义parent组件：

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked"><text class="text-style" onclick="parentClicked">parent component click</text><text class="text-style" if="{{showValue}}">hello parent component!</text><childComp id = "selfDefineChild"></childComp>
</div>
// parent.js
export default {data: {showValue: false,text: 'I am parent component!',},parentClicked () {this.showValue = !this.showValue;console.info('parent component get parent text');console.info(`${this.$parent().text}`);console.info("parent component get child function");console.info(`${this.$child('selfDefineChild').childClicked()}`);},
}

自定义child组件：

<!-- child.hml -->
<div class="item" onclick="textClicked"><text class="text-style" onclick="childClicked">child component clicked</text><text class="text-style" if="{{show}}">hello child component</text>
</div>
// child.js
export default {data: {show: false,text: 'I am child component!',},childClicked () {this.show = !this.show;console.info('child component get parent text');console.info('${this.$parent().text}');console.info('child component get root text');console.info('${this.$root().text}');},
}

感谢各位大佬支持！！！

互三啦！！！

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

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

相关文章

三路排序算法

三路排序算法

三路排序算法 引言 排序算法是计算机科学中基础且重要的算法之一。在数据分析和处理中&#xff0c;排序算法的效率直接影响着程序的执行速度和系统的稳定性。本文将深入探讨三路排序算法&#xff0c;包括其原理、实现和应用场景。 一、三路排序算法的原理 三路排序算法是一…
阅读更多...
Python的那些事第五篇：数据结构的艺术与应用

Python的那些事第五篇：数据结构的艺术与应用

新月人物传记&#xff1a;人物传记之新月篇-CSDN博客 目录 一、列表&#xff08;List&#xff09;&#xff1a;动态的容器 二、元组&#xff08;Tuple&#xff09;&#xff1a;不可变的序列 三、字典&#xff08;Dict&#xff09;&#xff1a;键值对的集合 四、集合&#xf…
阅读更多...
【AI】DeepSeek 概念/影响/使用/部署

【AI】DeepSeek 概念/影响/使用/部署

在大年三十那天&#xff0c;不知道你是否留意到&#xff0c;“deepseek”这个词出现在了各大热搜榜单上。这引起了我的关注&#xff0c;出于学习的兴趣&#xff0c;我深入研究了一番&#xff0c;才有了这篇文章的诞生。 概念 那么&#xff0c;什么是DeepSeek&#xff1f;首先百…
阅读更多...
MapReduce简单应用(一)——WordCount

MapReduce简单应用(一)——WordCount

目录 1. 执行过程1.1 分割1.2 Map1.3 Combine1.4 Reduce 2. 代码和结果2.1 pom.xml中依赖配置2.2 工具类util2.3 WordCount2.4 结果 参考 1. 执行过程 假设WordCount的两个输入文本text1.txt和text2.txt如下。 Hello World Bye WorldHello Hadoop Bye Hadoop1.1 分割 将每个文…
阅读更多...
Dest1ny漏洞库：用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞（CNVD-2024-33023）

Dest1ny漏洞库：用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞（CNVD-2024-33023）

大家好&#xff0c;今天是Dest1ny漏洞库的专题&#xff01;&#xff01; 会时不时发送新的漏洞资讯&#xff01;&#xff01; 大家多多关注&#xff0c;多多点赞&#xff01;&#xff01;&#xff01; 0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP&#xff0c;主要聚…
阅读更多...
使用where子句筛选记录

使用where子句筛选记录

默认情况下,SearchCursor将返回一个表或要素类的所有行.然而在很多情况下,常常需要某些条件来限制返回行数. 操作方法: 1.打开IDLE,加载先前编写的SearchCursor.py脚本 2.添加where子句,更新SearchCursor()函数,查找记录中有<>文本的<>字段 with arcpy.da.Searc…
阅读更多...
使用国内镜像加速器解决 Docker Hub 拉取镜像慢或被屏蔽的问题

使用国内镜像加速器解决 Docker Hub 拉取镜像慢或被屏蔽的问题

一、问题背景 Docker Hub 是 Docker 默认的镜像仓库&#xff0c;但由于网络限制&#xff0c;国内用户直接拉取镜像可能面临以下问题&#xff1a; 下载速度极慢&#xff08;尤其是大镜像&#xff09;。连接超时或完全被屏蔽&#xff08;部分网络环境&#xff09;。依赖国外源的…
阅读更多...
AI大模型开发原理篇-4：神经概率语言模型NPLM

AI大模型开发原理篇-4：神经概率语言模型NPLM

神经概率语言模型&#xff08;NPLM&#xff09;概述 神经概率语言模型&#xff08;Neural Probabilistic Language Model, NPLM&#xff09; 是一种基于神经网络的语言建模方法&#xff0c;它将传统的语言模型和神经网络结合在一起&#xff0c;能够更好地捕捉语言中的复杂规律…
阅读更多...
2.1.2 Bayer阵列与去马赛克

2.1.2 Bayer阵列与去马赛克

文章目录 Bayer阵列去马赛克方法 Bayer阵列 由于传感器只能感受到光的强度&#xff0c;而无法感知颜色&#xff0c;所以需要用红、绿、蓝颜色的滤光片将光中的R、G、B亮度滤出&#xff0c;再通过R、G、B的组合得到各种色彩。Bayer阵列是使用一个传感器获得彩色图像的方法&#…
阅读更多...
红黑树的学习

红黑树的学习

红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩倍&#xff0c;因…
阅读更多...
2025年01月31日Github流行趋势

2025年01月31日Github流行趋势

项目名称&#xff1a;Qwen2.5项目地址url&#xff1a;https://github.com/QwenLM/Qwen2.5项目语言&#xff1a;Shell历史star数&#xff1a;13199今日star数&#xff1a;459项目维护者&#xff1a;jklj077, JustinLin610, bug-orz, huybery, JianxinMa项目简介&#xff1a;Qwen…
阅读更多...
Java基础面试题总结（题目来源JavaGuide）

Java基础面试题总结（题目来源JavaGuide）

问题1&#xff1a;Java 中有哪 8 种基本数据类型&#xff1f;它们的默认值和占用的空间大小知道不&#xff1f; 说说这 8 种基本数据类型对 应的包装类型。 在 Java 中&#xff0c;有 8 种基本数据类型&#xff08;Primitive Types&#xff09;&#xff1a; 基本数据类型关键…
阅读更多...
人工智能|基本概念|人工智能相关重要概念---AI定义以及模型相关知识

人工智能|基本概念|人工智能相关重要概念---AI定义以及模型相关知识

一、 前言&#xff1a; 最近deepseek&#xff08;深度求索&#xff09;公司的开源自然语言处理模型非常火爆。 本人很早就对人工智能比较感兴趣&#xff0c;但由于种种原因没有过多的深入此领域&#xff0c;仅仅是做了一点初步的了解&#xff0c;借着这个deepseek&#xff0…
阅读更多...
Python GIL（全局解释器锁）机制对多线程性能影响的深度分析

Python GIL（全局解释器锁）机制对多线程性能影响的深度分析

在Python开发领域&#xff0c;GIL&#xff08;Global Interpreter Lock&#xff09;一直是一个广受关注的技术话题。在3.13已经默认将GIL去除&#xff0c;在详细介绍3.13的更亲前&#xff0c;我们先要留了解GIL的技术本质、其对Python程序性能的影响。本文将主要基于CPython&am…
阅读更多...
从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架（绘图设备封装）

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架（绘图设备封装）

目录 图像层的底层抽象——绘图设备抽象 如何抽象一个绘图设备&#xff1f; 桥接绘图设备&#xff0c;特化为OLED设备 题外话&#xff1a;设备的属性&#xff0c;与设计一个相似函数化简的通用办法 使用函数指针来操作设备 总结一下 图像层的底层抽象——绘图设备抽象 在…
阅读更多...
Git 版本控制：基础介绍与常用操作

Git 版本控制：基础介绍与常用操作

目录 Git 的基本概念 Git 安装与配置 Git 常用命令与操作 1. 初始化本地仓库 2. 版本控制工作流程 3. 分支管理 4. 解决冲突 5. 回退和撤销 6. 查看提交日志 前言 在软件开发过程中&#xff0c;开发者常常需要在现有程序的基础上进行修改和扩展。但如果不加以管理&am…
阅读更多...
（笔记+作业）书生大模型实战营春节卷王班---L0G2000 Python 基础知识

（笔记+作业）书生大模型实战营春节卷王班---L0G2000 Python 基础知识

学员闯关手册&#xff1a;https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频&#xff1a;https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业&#xff1a;htt…
阅读更多...
仿真设计|基于51单片机的高速路口货车称重系统仿真

仿真设计|基于51单片机的高速路口货车称重系统仿真

目录 具体实现功能 设计介绍 51单片机简介 资料内容 仿真实现&#xff08;protues8.7&#xff09; 程序&#xff08;Keil5&#xff09; 全部内容 资料获取 具体实现功能 &#xff08;1&#xff09;LCD1602液晶第一行显示当前的车辆重量&#xff0c;第二行显示车辆重量…
阅读更多...
Ubuntu Server 安装 XFCE4桌面

Ubuntu Server 安装 XFCE4桌面

Ubuntu Server没有桌面环境&#xff0c;一些软件有桌面环境使用起来才更加方便&#xff0c;所以我尝试安装桌面环境。常用的桌面环境有&#xff1a;GNOME、KDE Plasma、XFCE4等。这里我选择安装XFCE4桌面环境&#xff0c;主要因为它是一个极轻量级的桌面环境&#xff0c;适合内…
阅读更多...
2025：影刀RPA使用新实践--CSDN博客下载

2025：影刀RPA使用新实践--CSDN博客下载

文章目录 一键CSDN博客下载器程序说明指导说明使用步骤 获取方法 一键CSDN博客下载器 程序说明 配置信息&#xff1a;CSDN账号&#xff08;手机号/邮箱/用户名&#xff09;、密码、博客文件类型支持markdown格式、html格式&#xff08;默认值markdown格式&#xff09;、博客保…
阅读更多...
最新文章

Copyright @ 2022~2023