【React】详解受控表单绑定
文章目录
- 一、受控组件的基本概念
- 1. 什么是受控组件?
- 2. 受控组件的优势
- 3. 基本示例
- 导入和初始化
- 定义函数组件
- 处理输入变化
- 处理表单提交
- 渲染表单
- 导出组件
- 二、受控组件的进阶用法
- 1. 多个输入框的处理
- 使用多个状态变量
- 使用一个对象管理状态
- 2. 处理选择框(select)和复选框(checkbox)
- 选择框
- 复选框
- 三、受控组件的常见问题
- 1. 表单重置
- 2. 实时校验
在React开发中,表单是非常常见的需求。为了实现表单的灵活控制和状态管理,受控组件的使用尤为重要。本文将深入探讨React中受控表单的绑定方法,包括基本用法、常见问题以及高级应用。通过本文,你将全面了解如何在React中使用受控表单,从而提升表单处理的效率和用户体验。
一、受控组件的基本概念
1. 什么是受控组件?
受控组件是指表单元素的值由React组件的状态控制,而不是由DOM自己维护。通过在组件状态和表单元素之间建立绑定,React可以完全控制表单的行为和显示内容。
2. 受控组件的优势
- 单一数据源:表单数据和组件状态保持同步,数据源统一,便于管理。
- 实时校验:可以在用户输入时进行实时校验,提升用户体验。
- 便于调试:状态可控,便于调试和测试。
3. 基本示例
以下是一个简单示例,展示如何使用受控组件来处理表单输入:
import React, { useState } from 'react';function ControlledForm() {const [inputValue, setInputValue] = useState('');const handleChange = (event) => {setInputValue(event.target.value);};const handleSubmit = (event) => {event.preventDefault();alert(`提交的值: ${inputValue}`);};return (<form onSubmit={handleSubmit}><label>输入:<input type="text" value={inputValue} onChange={handleChange} /></label><button type="submit">提交</button></form>);
}export default ControlledForm;
在上述示例中,inputValue
的状态由React组件的状态管理,handleChange
函数更新状态,使输入框的值与状态保持同步。
导入和初始化
import React, { useState } from 'react';
这行代码从react
库中导入React
和useState
。useState
是一个React Hook,用于在函数组件中添加状态。
定义函数组件
function ControlledForm() {const [inputValue, setInputValue] = useState('');
ControlledForm
是一个函数组件。组件内部使用useState
Hook 创建了一个名为inputValue
的状态变量和一个更新状态的函数setInputValue
。初始状态为一个空字符串。
处理输入变化
const handleChange = (event) => {setInputValue(event.target.value);
};
handleChange
是一个事件处理函数,用于处理输入框内容的变化。它接受一个事件对象event
作为参数,通过event.target.value
获取输入框的当前值,并使用setInputValue
更新组件的状态。
处理表单提交
const handleSubmit = (event) => {event.preventDefault();alert(`提交的值: ${inputValue}`);
};
handleSubmit
是一个事件处理函数,用于处理表单的提交。它接受一个事件对象event
作为参数,并调用event.preventDefault()
阻止默认的表单提交行为。然后,通过alert
函数弹出一个提示框,显示当前的输入值inputValue
。
渲染表单
return (<form onSubmit={handleSubmit}><label>输入:<input type="text" value={inputValue} onChange={handleChange} /></label><button type="submit">提交</button></form>
);
return
语句返回JSX,用于渲染表单。表单包含以下几个元素:
<form onSubmit={handleSubmit}>
:定义一个表单,并将handleSubmit
函数绑定到表单的onSubmit
事件上。当表单提交时,将调用handleSubmit
函数。<label>
:定义一个标签,包含一个输入框和说明文字。<input type="text" value={inputValue} onChange={handleChange} />
:定义一个文本输入框。value
属性绑定到组件的状态inputValue
,确保输入框的值始终与状态同步。onChange
事件绑定到handleChange
函数,当输入框内容变化时,调用handleChange
函数更新状态。
<button type="submit">提交</button>
:定义一个提交按钮。当按钮被点击时,表单将尝试提交,并触发handleSubmit
函数。
导出组件
export default ControlledForm;
最后,通过export default
导出ControlledForm
组件,使其可以在其他文件中导入和使用。
二、受控组件的进阶用法
1. 多个输入框的处理
在实际应用中,表单往往包含多个输入框。可以通过使用多个状态变量或一个对象来管理多个输入框的值。
使用多个状态变量
import React, { useState } from 'react';function MultiInputForm() {const [firstName, setFirstName] = useState('');const [lastName, setLastName] = useState('');const handleFirstNameChange = (event) => {setFirstName(event.target.value);};const handleLastNameChange = (event) => {setLastName(event.target.value);};const handleSubmit = (event) => {event.preventDefault();alert(`提交的值: ${firstName} ${lastName}`);};return (<form onSubmit={handleSubmit}><label>名字:<input type="text" value={firstName} onChange={handleFirstNameChange} /></label><br /><label>姓氏:<input type="text" value={lastName} onChange={handleLastNameChange} /></label><br /><button type="submit">提交</button></form>);
}export default MultiInputForm;
使用一个对象管理状态
import React, { useState } from 'react';function MultiInputForm() {const [formValues, setFormValues] = useState({ firstName: '', lastName: '' });const handleChange = (event) => {const { name, value } = event.target;setFormValues({...formValues,[name]: value,});};const handleSubmit = (event) => {event.preventDefault();alert(`提交的值: ${formValues.firstName} ${formValues.lastName}`);};return (<form onSubmit={handleSubmit}><label>名字:<inputtype="text"name="firstName"value={formValues.firstName}onChange={handleChange}/></label><br /><label>姓氏:<inputtype="text"name="lastName"value={formValues.lastName}onChange={handleChange}/></label><br /><button type="submit">提交</button></form>);
}export default MultiInputForm;
状态初始化
const [formValues, setFormValues] = useState({ firstName: '', lastName: '' });
useState
Hook 用于声明组件的状态变量formValues
,它是一个对象,包含两个属性:firstName
和lastName
,初始值均为空字符串。setFormValues
是更新状态的函数。
处理输入变化的函数
const handleChange = (event) => {const { name, value } = event.target;setFormValues({...formValues,[name]: value,});
};
-
handleChange
是一个事件处理函数,当输入字段的值发生变化时调用。 -
event
是事件对象,其中event.target
指向触发事件的元素(即输入字段)。 -
{ name, value } = event.target
是使用解构赋值从event.target
中提取name
和
value
属性。name
是输入字段的名称属性,对应formValues
中的键(即firstName
或lastName
)。value
是输入字段的当前值。
-
setFormValues
函数使用展开运算符...
复制formValues
对象的现有属性,并更新对应输入字段的值:- 这样做的目的是保持
formValues
中现有的其他属性不变,仅更新需要修改的属性。 [name]: value
动态地根据输入字段的名称属性设置formValues
对象中的值。
- 这样做的目的是保持
处理表单提交的函数
const handleSubmit = (event) => {event.preventDefault();alert(`提交的值: ${formValues.firstName} ${formValues.lastName}`);
};
handleSubmit
是一个事件处理函数,当表单被提交时调用。event.preventDefault()
用于阻止表单的默认提交行为,以便在JavaScript中处理表单数据。alert
函数弹出一个对话框,显示提交的firstName
和lastName
值。
2. 处理选择框(select)和复选框(checkbox)
受控组件不仅适用于文本输入框,还可以用于选择框和复选框。
选择框
import React, { useState } from 'react';function SelectForm() {const [selectedValue, setSelectedValue] = useState('option1');const handleChange = (event) => {setSelectedValue(event.target.value);};const handleSubmit = (event) => {event.preventDefault();alert(`选择的值: ${selectedValue}`);};return (<form onSubmit={handleSubmit}><label>选择:<select value={selectedValue} onChange={handleChange}><option value="option1">选项1</option><option value="option2">选项2</option><option value="option3">选项3</option></select></label><button type="submit">提交</button></form>);
}export default SelectForm;
复选框
import React, { useState } from 'react';function CheckboxForm() {const [isChecked, setIsChecked] = useState(false);const handleChange = (event) => {setIsChecked(event.target.checked);};const handleSubmit = (event) => {event.preventDefault();alert(`复选框状态: ${isChecked}`);};return (<form onSubmit={handleSubmit}><label>复选框:<input type="checkbox" checked={isChecked} onChange={handleChange} /></label><button type="submit">提交</button></form>);
}export default CheckboxForm;
三、受控组件的常见问题
1. 表单重置
在某些情况下,我们需要在表单提交后重置表单的状态。可以通过将状态重置为初始值来实现。
import React, { useState } from 'react';function ResettableForm() {const initialFormState = { firstName: '', lastName: '' };const [formValues, setFormValues] = useState(initialFormState);const handleChange = (event) => {const { name, value } = event.target;setFormValues({...formValues,[name]: value,});};const handleSubmit = (event) => {event.preventDefault();alert(`提交的值: ${formValues.firstName} ${formValues.lastName}`);setFormValues(initialFormState); // 重置表单};return (<form onSubmit={handleSubmit}><label>名字:<inputtype="text"name="firstName"value={formValues.firstName}onChange={handleChange}/></label><br /><label>姓氏:<inputtype="text"name="lastName"value={formValues.lastName}onChange={handleChange}/></label><br /><button type="submit">提交</button></form>);
}export default ResettableForm;
2. 实时校验
在表单中进行实时校验可以提高用户体验,防止提交无效数据。
import React, { useState } from 'react';function ValidatedForm() {const [email, setEmail] = useState('');const [error, setError] = useState('');const handleChange = (event) => {const value = event.target.value;setEmail(value);if (!/\S+@\S+\.\S+/.test(value)) {setError('无效的邮箱地址');} else {setError('');}};const handleSubmit = (event) => {event.preventDefault();if (!error) {alert(`提交的邮箱: ${email}`);}};return (<form onSubmit={handleSubmit}><label>邮箱:<input type="email" value={email} onChange={handleChange} /></label><br />{error && <p style={{ color: 'red' }}>{error}</p>}<button type="submit" disabled={!!error}>提交</button></form>);
}export default ValidatedForm;
相关文章:
![](https://img-blog.csdnimg.cn/direct/ee9077c56a1c476d803af8a178e0eb98.gif#pic_center)
【React】详解受控表单绑定
文章目录 一、受控组件的基本概念1. 什么是受控组件?2. 受控组件的优势3. 基本示例导入和初始化定义函数组件处理输入变化处理表单提交渲染表单导出组件 二、受控组件的进阶用法1. 多个输入框的处理使用多个状态变量使用一个对象管理状态 2. 处理选择框(…...
![](https://i-blog.csdnimg.cn/direct/2be6abb900b641498ae3b6e610b9dd4b.png)
使用puma部署ruby on rails的记录
之前写过一篇《记录一下我的Ruby On Rails的systemd服务脚本》的记录,现在补上一个比较政治正确的Ruby On Rails的生产环境部署记录。使用Puma部署项目。 创建文件 /usr/lib/systemd/system/puma.service [Unit] DescriptionPuma HTTP Server DocumentationRuby O…...
![](https://www.ngui.cc/images/no-images.jpg)
如何在Linux上使用Ansible自动化部署
Ansible是一个开源的自动化工具,可以帮助开发人员和系统管理员对大规模的服务器进行自动化部署和管理。它使用SSH协议来在远程服务器上执行任务,并通过模块化的方式提供了丰富的功能,可以轻松地管理服务器配置、软件部署和应用程序运行。 在…...
![](https://i-blog.csdnimg.cn/direct/9ea236e32361415094214fac13226738.png)
scrapy爬取城市天气数据
scrapy爬取城市天气数据 一、创建scrapy项目二、修改settings,设置UA,开启管道三、编写爬虫文件四、编写items.py五、在weather.py中导入WeatherSpiderItem类六、管道中存入数据,保存至csv文件七、完整代码一、创建scrapy项目 先来看一下爬取的字段情况: 本次爬取城市天…...
![](https://img-blog.csdnimg.cn/img_convert/2e310b26e0cdd17a525ebe0e7da71f30.png)
一天搞定React(5)——ReactRouter(下)【已完结】
Hello!大家好,今天带来的是React前端JS库的学习,课程来自黑马的往期课程,具体连接地址我也没有找到,大家可以广搜巡查一下,但是总体来说,这套课程教学质量非常高,每个知识点都有一个…...
![](https://i-blog.csdnimg.cn/direct/3aae1b65a59942858d3a5060f638d679.png)
微信小程序之计算器
在日常生活中,计算器是人们广泛使用的工具,可以帮助我们快速且方便地计算金额、成本、利润等。下面将会讲解如何开发一个“计算器”微信小程序。 一、开发思路 1、界面和功能 “计算器”微信小程序的页面效果如图所示 在计算器中可以进行整数和小数的…...
![](https://www.ngui.cc/images/no-images.jpg)
【logstash】logstash使用多个子配置文件
这里有个误区在pipelines.yml中写conf.d/*,实测会有问题,不同的filter处理逻辑会复用。 现在有两个从kafka采集日志的配置文件:from_kafka1.conf,from_kafka2.conf 修改pipelines.yml配置文件 config/pipelines.yml- pipeline.i…...
![](https://img-blog.csdnimg.cn/img_convert/0ae7682957e6b88f1ead69c882797bc8.jpeg)
暴风骑士S9电摩上市,定义青少年骑行安全新标准
暴风骑士,作为全球高端儿童电动车的开创品牌,以其卓越的技术实力和创新精神,不断推动行业发展。如今,暴风骑士再次突破自我,推出了全新力作——S9青少年电摩。这款全新上市的青少年专属电摩,以其领先的安全…...
![](https://img-blog.csdnimg.cn/img_convert/c0d033111b2f29a42b65b00f0af5a531.png)
spring security如何适配盐存在数据库中的密码
19.token认证过滤器代码实现_哔哩哔哩_bilibili19.token认证过滤器代码实现是SpringSecurity框架教程-Spring SecurityJWT实现项目级前端分离认证授权-挑战黑马&尚硅谷的第20集视频,该合集共计41集,视频收藏或关注UP主,及时了解更多相关视…...
![](https://i-blog.csdnimg.cn/direct/10d9d87b11fe4da0b92e844c1559c958.png)
Go语言编程 学习笔记整理 第2章 顺序编程 后半部分
1.流程控制 1.1 条件语句 if a < 5 { return 0 } else { return 1 } 注意:在有返回值的函数中,不允许将“最终的”return语句包含在if...else...结构中, 否则会编译失败!!! func example(x int) i…...
![](https://www.ngui.cc/images/no-images.jpg)
美团后端二面
美团后端二面 ……………………………… 两道场景 一道 数字转中文读法(1000-》一千) 0八股0自我介绍 反问 “您觉得我能过吗?” “这个需要横行对比之后才能有结果” ……………………………… 什么时候到岗 场景题 1 假设我有一个…...
![](https://www.ngui.cc/images/no-images.jpg)
学懂C语言(十六):对C语言作用域规则 局部变量、全局变量的认识
一、C 作用域规则 任何一种编程中,作用域是程序中定义的变量所存在的区域,超过该区域变量就不能被访问。C 语言中有三个地方可以声明变量: 局部变量:在函数或块内部全局变量:在所有函数外部形式参数:在函数…...
![](https://www.ngui.cc/images/no-images.jpg)
关于TS(typescript)的理论知识
关于TS(typescript)的理论知识 TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,添加了可选的静态类型和基于类的面向对象编程。TypeScript 最终会被编译成纯 JavaScript 代码,以便在任何支持 …...
![](https://i-blog.csdnimg.cn/direct/15e9310f49bf44089dd334833a87cf72.png#pic_center)
【OpenCV C++20 学习笔记】基本图像容器——Mat
【OpenCV C20 学习笔记】基本图像容器——Mat 概述Mat内部结构引用计数机制颜色数据格式 显式创建Mat对象使用cv::Mat::Mat构造函数矩阵的数据项 使用数组进行初始化的构造函数cv::Mat::create函数MATLAB风格的初始化小型矩阵通过复制创建Mat对象 Mat对象的输出其他普通数据项的…...
![](https://www.ngui.cc/images/no-images.jpg)
枚举单例是怎么保证线程安全和防止反射的
枚举单例在Java中具有天然的线程安全性和防止反射攻击的特性,这是由于Java对枚举类型的特殊处理方式。以下是详细解释: 1. 线程安全性 Java 枚举类的特性 类加载机制:枚举类型在Java中是特殊的类,由JVM保证其线程安全性。枚举类…...
![](https://i-blog.csdnimg.cn/direct/c95954fd90254166bb6f712d5d2ef77a.png)
传知代码-智慧医疗:纹理特征VS卷积特征(论文复现)
代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 论文链接:https://www.sciencedirect.com/science/article/abs/pii/S1076633223003537?__cf_chl_rt_tkJ9Aipfxyk5d.leu48P20ePFNd4B2aunaSmzVpXCg.7g-1721292386-0.0.1.1-6249 论文概述 今天我们把视线…...
![](https://i-blog.csdnimg.cn/direct/b838ba3a65b545048825d82ff1e7dbfd.png)
数据结构中的八大金刚--------八大排序算法
目录 引言 一:InsertSort(直接插入排序) 二:ShellSort(希尔排序) 三:BubbleSort(冒泡排序) 四: HeapSort(堆排序) 五:SelectSort(直接选择排序) 六:QuickSort(快速排序) 1.Hoare版本 2.前后指针版本 …...
![](https://i-blog.csdnimg.cn/direct/0e80306c02d3491ea251c06f0f3546f0.png)
ACC2.【C语言】经验积累 栈区简单剖析
int main() {int i0;int arr[10]{1,2,3,4,5,6,7,8,9,10};for (i0;i<12;i){arr[i]0;printf("A");}return 0; } 执行后无限打印A 在VS2022,X86,Debug环境下,用监视后,原因是arr[12]的地址与i的地址重合(数组越界&…...
![](https://www.ngui.cc/images/no-images.jpg)
c# 索引器
索引器(Indexer)允许你像访问数组一样,通过索引访问对象的属性或数据。索引器的主要用途是在对象内部封装复杂的数据结构,使得数据访问更加直观。下面是关于 C# 索引器的详细解释及示例: 基本语法 索引器的语法类似于…...
![](https://i-blog.csdnimg.cn/direct/ccb1acd3666a42759b1ed5f6ce0dea22.webp)
低代码如何加速数字化转型
数字化转型,正日益决定企业成功的关键。这里的一个关键因素是它可以以更快的速度和质量来实施技术计划。在当今瞬息万变的商业环境中,战略性地采用低代码平台对于旨在加快上市时间、增强业务敏捷性和促进跨团队无缝协作的首席技术官来说至关重要。日益增…...
![](https://i-blog.csdnimg.cn/direct/ab320c5f0df941f5bd9464dbccd803c6.png)
Pytest进阶之fixture的使用(超详细)
目录 Fixture定义 Fixture使用方式 作为参数使用 Fixture间相互调用(作为参数调用) 作为conftest.py文件传入 Fixture作用范围Scope function class module session Fixture中params和ids Fixture中autouse Fixture中Name 总结 pytest fixture 是一种用来管理测试…...
![](https://www.ngui.cc/images/no-images.jpg)
GitHub 详解教程
1. 引言 GitHub 是一个用于版本控制和协作的代码托管平台,基于 Git 构建。它提供了强大的功能,使开发者可以轻松管理代码、追踪问题、进行代码审查和协作开发。 2. Git 与 GitHub 的区别 Git 是一个分布式版本控制系统,用于跟踪文件的更改…...
![](https://i-blog.csdnimg.cn/direct/ef409676c13c4d39b931699344a5746b.png)
边界网关IPSEC VPN实验
拓扑: 实验要求:通过IPSEC VPN能够使PC2通过网络访问PC3 将整个路线分为三段 IPSEC配置在FW1和FW2上,在FW1与FW2之间建立隧道,能够传递IKE(UDP500)和ESP数据包,然后在FW1与PC2之间能够流通数据…...
![](https://i-blog.csdnimg.cn/direct/f28fcd13ae4644e281386715ad5bce48.png)
力扣高频SQL 50题(基础版)第六题
文章目录 1378. 使用唯一标识码替换员工ID题目说明思路分析实现过程结果截图总结 1378. 使用唯一标识码替换员工ID 题目说明 Employees 表: ---------------------- | Column Name | Type | ---------------------- | id | int | | name | varchar | ------…...
![](https://www.ngui.cc/images/no-images.jpg)
在一个事物方法中开启新事物,完成对数据库的修改
在Java中,使用Transactional注解来管理事务非常常见。但是,在一个已经标记为Transactional的方法内部调用另一个也标记了Transactional的方法时,如果不正确处理,可能会导致一些意料之外的行为。这是因为默认情况下,Spr…...
![](https://i-blog.csdnimg.cn/direct/6c3bbb575b5b4323b9bccf4f6b9876bb.png)
ffmpeg的vignetting filter
vignetting filter是暗角过滤器 vignetting filter在官网是vignette。但是我查了一下,vignetting应该是正确的表达,vignette是什么鬼? 官网参数 官书参数 参数解释 angle,x0,y0可以使用表达式。 angle:不知道什么意思…...
![](https://i-blog.csdnimg.cn/direct/45b4a721e1d242f6933e8f983af8cec9.png)
商场导航系统:从电子地图到AR导航,提升顾客体验与运营效率的智能解决方案
商场是集娱乐、休闲、社交于一体的综合性消费空间,随着商场规模的不断扩大和布局的日益复杂,顾客在享受丰富选择的同时,也面临着寻路难、店铺曝光率低以及商场管理效率低下等挑战。商场导航系统作为提升购物体验的关键因素,其重要…...
![](https://www.ngui.cc/images/no-images.jpg)
vue3中父子组件的双向绑定defineModel详细使用方法
文章目录 一、defineProps() 和 defineEmits()二、defineModel() 的双向绑定2.1、基础示例2.2、定义类型2.3、声明prop名称2.4、其他声明2.5、绑定多个值2.6、修饰符和转换器2.7、修饰符串联 一、defineProps() 和 defineEmits() 组件之间通讯,通过 props 和 emits…...
![](https://i-blog.csdnimg.cn/direct/2073367a989443e499417519329eee2a.jpeg)
耳机、音响UWB传输数据模组,飞睿智能低延迟、高速率超宽带uwb模块技术音频应用
在数字化浪潮席卷全球的今天,无线通信技术日新月异,其中超宽带(Ultra-Wideband,简称UWB)技术以其独特的优势,正逐步成为无线传输领域的新星。本文将深入探讨飞睿智能UWB传输数据模组在音频应用中的创新应用…...
![](https://www.ngui.cc/images/no-images.jpg)
webpack配置报错:Invalid options object.
前言: 今天在使用webpack进行项目配置的时候,运行之后终端报错:Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property inline. Thes…...
![](https://img-blog.csdnimg.cn/img_convert/7b201826e8075dc81239d4691fc94df6.png)
Java 并发编程:一文了解 Java 内存模型(处理器优化、指令重排序与内存屏障的深层解析)
大家好,我是栗筝i,这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 022 篇文章,在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验,并希望进…...
![](https://i-blog.csdnimg.cn/direct/2b0707f5109b41b39963772f0f710118.png)
谷粒商城实战笔记-64-商品服务-API-品牌管理-OSS前后联调测试上传
文章目录 1,拷贝文件到前端工程2,局部修改3,在品牌编辑界面使用上传组件4,OSS配置允许跨域5,测试multiUpload.vue完整代码singleUpload.vue完整代码policy.js代码 在Web应用开发中,文件上传是一项非常常见的…...
![](https://i-blog.csdnimg.cn/direct/b13af978e02a43dcaad39b6f6322797b.png)
Springboot 开发之 RestTemplate 简介
一、什么是RestTemplate RestTemplate 是Spring框架提供的一个用于应用中调用REST服务的类。它简化了与HTTP服务的通信,统一了RESTFul的标准,并封装了HTTP连接,我们只需要传入URL及其返回值类型即可。RestTemplate的设计原则与许多其他Sprin…...
![](https://i-blog.csdnimg.cn/direct/1ef20ee4090e4f8693862c8aa375413d.png)
Django transaction.atomic()事务处理
在Django中,transaction.atomic()是一个上下文管理器,它会自动开始一个事务,并在代码块执行完毕后提交事务。如果在代码块中抛出异常,事务将被自动回滚,确保数据库的一致性和完整性。 在实际应用中,你可能需…...
![](https://www.ngui.cc/images/no-images.jpg)
2024.07-电视版免费影视App推荐和猫影视catvod、TVBox源(最新接口地址)
文章目录 电视版免费影视App推荐精选列表(2024.07可用筛选列表):2024.07可用筛选列表,盲盒资源打包合集下载安装说明真的是盲盒? 猫影视catvod、TVBoxTVBox源推荐可用列表目前不可用列表(前缀为错误状态码&…...
![](https://i-blog.csdnimg.cn/direct/a1016a410b0f4e06890e149a30daee90.gif)
【Python】 基于Q-learning 强化学习的贪吃蛇游戏(源码+论文)【独一无二】
👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…...
![](https://i-blog.csdnimg.cn/direct/f38483b70aa74872bec6db20e7ea271b.png)
谷粒商城实战笔记-44-前端基础-Vue-整合ElementUI快速开发/设置模板代码
文章目录 一,安装导入ElementUI1,安装 element-ui2,导入 element-ui 二,ElementUI 实战1,将 App.vue 改为 element-ui 中的后台布局2,开发导航栏2.1 开发MyTable组件2.2 注册路由2.3 改造App.vue2.4 新增左…...
Android adb shell ps进程查找以及kill
Android adb shell ps进程查找以及kill 列出当前Android手机上运行的所有进程信息如PID等: adb shell ps 但是这样会列出一大堆进程信息,不便于定向查阅,可以使用关键词查找: adb shell "ps | grep 关键词" 关键词查…...
![](https://i-blog.csdnimg.cn/blog_migrate/4b329db6ce52fc68b0ccbcb46c767d0e.png)
[OJ]水位线问题,1.采用回溯法(深度优先遍历求解)2.采用广度优先遍历求解
1.深度优先遍历 使用回溯法,深度优先遍历利用栈先进后出的特点,在加水控制水量失败时, 回到最近一次可对水进行加水与否的位置1.对于给定水量k,是否在[l,r]之间, 是:是否加水(加水y,用掉x,是否在[l,r]之间)(不加水y,用掉x,是否在[l,r]之间)先尝试加水,如…...
![](https://i-blog.csdnimg.cn/direct/637faf7e1553418a877c65ed772c6e20.png)
《华为数据之道》读书笔记六---面向自助消费的数据服务建设
七、从结果管理到过程管理, 从能“看”到能“管” 1、数据赋能业务运营 数字化运营旨在利用数字化技术获取、管理和分析数据,从而为企业的战略决策与业务运营提供可量化的、科学的支撑。 数字化运营归根结底是运营,旨在推动运营效率与能力的…...
![](https://i-blog.csdnimg.cn/direct/d451dc4e3b3e4334ae47167f700b755a.png)
go语言day18 reflect反射
Golang-100-Days/Day16-20(Go语言基础进阶)/day19_Go语言反射.md at master rubyhan1314/Golang-100-Days (github.com) 7-19 接口:底层实现_哔哩哔哩_bilibili 一、interface接口 接口类型内部存储了一对pair(value,Type) type interface { type *Type // 类型信…...
![](https://www.ngui.cc/images/no-images.jpg)
理解 Objective-C 中 `+load` 方法的执行顺序
理解 Objective-C 中 load 方法的执行顺序 在 Objective-C 中,load 方法是在类或分类被加载到内存时调用的。它在程序启动过程中非常早的阶段执行,用于在类或分类被加载时进行一些初始化工作。理解 load 方法的执行顺序对于编写可靠的 Objective-C 代码…...
![](https://i-blog.csdnimg.cn/direct/5168550608b445249fd89929ce7d200e.png)
C++:类和对象2
1.类的默认成员函数 默认成员函数就是用户没有显示实现编译器会自动生成的成员函数称为默认成员函数。一个类,我们在不写的情况下编译器会默认生成6个默认成员函数,分别是构造函数,析构函数,拷贝构造函数,拷贝赋值运算…...
![](https://i-blog.csdnimg.cn/direct/cab6693f48374719b218f12252864c5e.png)
Docker安装kkFileView实现在线文件预览
kkFileView为文件文档在线预览解决方案,该项目使用流行的spring boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等 官方文档地址:https://kkview.cn/zh-cn/docs/production.html 一、拉取镜像 do…...
![](https://i-blog.csdnimg.cn/direct/ac462fb617ac48e09ed3fb3a9dcb2f64.png)
ElasticSearch(四)— 数据检索与查询
一、基本查询语法 所有的 REST 搜索请求使用_search 接口,既可以是 GET 请求,也可以是 POST请求,也可以通过在搜索 URL 中指定索引来限制范围。 _search 接口有两种请求方法,一种是基于 URI 的请求方式,另一种是基于…...
![](https://www.ngui.cc/images/no-images.jpg)
Pytest之parametrize()实现数据驱动
一、Pytest之parametrize()实现数据驱动 方法: pytest.mark-parametrize(argsname,args_value) args_name:参数名称,用于将参数值传递给函数 args value:参数值:(列表和字典列表,元组和字典元组),有n个值那么用例执行n次 第一种用法…...
![](https://www.ngui.cc/images/no-images.jpg)
关于鸿蒙系统前景
鸿蒙系统的前景看起来非常乐观。 鸿蒙系统以其全新的分布式架构和快速运行速度,展现了其独特的优势。它没有历史包袱,可以轻量前进,这一点在开发适配上具有明显优势。此外,鸿蒙系统的最大优势在于其“万物互联”的…...
![](https://i-blog.csdnimg.cn/direct/b19c7b3a1f0745e48f8f9a6f95fd3072.png)
针对datax-web 中Swagger UI接口未授权访问
application.yml 添加以下配置 实现访问doc.html 以及/v2/api-docs 接口时需要进行简单的校验 swagger:basic:enable: trueusername: adminpassword: 12345 配置重启后再进行相关访问则需要输入用户名和密码...
![](https://www.ngui.cc/images/no-images.jpg)
生成式AI如何帮助小型企业高效运营?
即使只有几家或几十家店的小规模生意,也可以利用AI技术来提升效率。不管企业组织规模如何,未来可能会有新的工作流程需要适应。就像计算机编程一样,我们需要将业务逻辑拆解成多个可管理的小任务,并设计它们之间的协同关系。这样&a…...
![](https://img-blog.csdnimg.cn/direct/a40cbcf204584f43a9067ace79d4a508.jpeg)
2024最新网络安全自学路线,内容涵盖3-5年技能提升
01 什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面…...