前端学习4：小白入门注册表单的制作（包括详细思考CSS、JS实现过程）

这篇我们来做一个简单表单，即常见的注册页面吧~学习完这篇我们将学习到Input、label、CSS伪类、CSS入门、更多的JS操作等。。

一、首先明确需求：

直接模仿常见的注册页面，包括：用户名、Email、性别（单选按钮男/女）、出生日期（点击出现日期表）、密码、确认密码和提交按钮。

二、实现思路分析

  1. 表单结构设计：

    • 使用HTML的<form>标签作为容器

    • 每个输入项用<div>包裹，包含<label>和<input>

    • 需要不同类型的输入控件：文本、密码、邮箱、单选、日期等

  2. 样式设计：

    • 添加响应式设计，适应不同屏幕

    • 添加交互反馈（如聚焦效果）

  3. JavaScript功能：

    • 表单验证（前端验证）

    • 密码一致性检查

    • 日期选择器功能

    • 表单提交处理

 三、HTML结构：

<!DOCTYPE html>
<html>
<head><title>注册表单</title><link rel="stylesheet" href="form.css">
</head>
<body><div class="form-container"><h2>用户注册</h2><form id="registerForm"><!-- 用户名 --><div class="form-group"><label for="username">用户名：</label><input type="text" id="username" name="username" required><span class="error-message" id="usernameError"></span></div><!-- 邮箱 --><div class="form-group"><label for="email">Email：</label><input type="email" id="email" name="email" required><span class="error-message" id="emailError"></span></div><!-- 性别 --><div class="form-group"><label>性别：</label><div class="radio-group"><input type="radio" id="male" name="gender" value="male" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label></div></div><!-- 出生日期 --><div class="form-group"><label for="birthdate">出生日期：</label><input type="date" id="birthdate" name="birthdate" required></div><!-- 密码 --><div class="form-group"><label for="password">密码：</label><input type="password" id="password" name="password" required><span class="error-message" id="passwordError"></span></div><!-- 确认密码 --><div class="form-group"><label for="confirmPassword">确认密码：</label><input type="password" id="confirmPassword" name="confirmPassword" required><span class="error-message" id="confirmPasswordError"></span></div><button type="submit" class="submit-btn">注册</button></form></div><script src="form.js"></script>
</body>
</html>

1. <label>标签详解：

<label for="username">用户名：</label>

<input type="text" id="username" name="username" required>

<label>是表单元素的文字说明，可以提升用户体验：点击label文字也能聚焦到对应的输入框

  • for的值必须与对应<input>的id值完全一致，这样浏览器就知道这个label是描述哪个input的

  • 点击"用户名："文字时，会自动聚焦到id为"username"的输入框

2. <input>标签详解

<input type="text" id="username" name="username" required>

 关键属性解析：

属性作用示例值
type定义输入框类型text(文本)、password(密码)、email(邮箱)等
id唯一标识符，用于label关联和CSS/JS操作username
name表单提交时的字段名（服务器接收的参数名）username
required表示必填项（HTML5验证）不需要值

备注：id和name经常设成相同，但作用不同：

  • id是给浏览器/DOM用的

  • name是给表单提交到服务器用的（是服务器接收的参数名）

3. 错误提示<span>的作用

<span class="error-message" id="usernameError"></span>

        这个空容器用来显示JS验证的错误提示。

4.性别的单选按钮(radio)详解：

<div class="form-group">
<label>性别：</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
</div>
</div>

  1. radio-group 整个div包含两个单选按钮及其对应标签

  2. 单选按钮(input radio)基本属性（重要）：

    • type="radio"：定义这是一个单选按钮

    • id="male"：唯一标识符，用于关联label

    • name="gender"：分组名称，相同name的单选按钮为一组

    • value="male"：选中时提交的值

    • checked：默认选中属性

  3. 配套label标签：

    • <label for="male">男</label>

      • for="male"：与input的id对应，点击label也能选中单选按钮（前面有说！）

      • "男"：显示给用户看的文本

  4. 为什么男和女的name属性相同？----相同name值使它们成为一组，只能选其中一个，如果name不同，就失去了单选的意义

  5. 关于这块的一些常见疑问：

        Q1：为什么不用select下拉菜单而用radio？

        A1：radio适合选项较少(2-5个)且需要直观展示所有选项的情况，select适合选项较多的情况。

        Q2：checked属性可以加在多个radio上吗？
A2：不可以，同name的radio组中只有一个能被checked，浏览器会自动处理。

        Q3：如何设置默认不选中任何选项？
A3：去掉所有radio的checked属性即可，但通常建议设置一个默认选中项。

        Q4：value属性是必须的吗？
A4：是的，否则表单提交时该字段的值会是"on"而不是你期望的值。

四、CSS结构：

本次必须讲解下CSS的编写的思路！（严肃脸）

步骤1：分析页面结构

前面我们写好了html，搭好了结构，现在装修下，但是怎么“装修”呢？先分析下我们html页面的一个整体结构涉及到的class=“xxx”，可以发现，基本都是这样的结构：

表单容器（form-container）
├─ 标题（h2）
└─ 表单（form）
├─ 表单项1（form-group）
│  ├─ 标签（label）
│  └─ 输入框（input）
└─ 表单项2........

 步骤2：按照思路：从外到内，从大到小编写CSS

  1. 先写最外层容器样式

  2. 然后写内部大区块

  3. 最后处理细节和小元素

脑子里先构建好大致的长什么样？比如我们现在就做最简单的一个表：

（1）先从第一个最外层的容器——form-container：

（以下都按三步法：确定设计图-->思考过程-->实现代码）

First：构建图：

Second：思考过程：

  1. 需要白色背景 → background-color：white；

  2. 需要和里面的内容有间距 → padding（内边距）

  3. 需要圆角效果 → border-radius

  4. 需要阴影提升层次感 → box-shadow，一般都是用box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  5. 在手机上占满宽度，但不超过500px → width:100% + max-width

Third：总结就是：

.form-container {background-color: white;padding: 30px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 100%;                  /* 宽度 */max-width: 500px;             /* 最大宽度 */
}
 （2） 表单项.form-group

First：构建图：

Second：思考过程： 

  • 每个表单项（用户名、邮箱、密码...）之间需要垂直间距

  • 不需要左右margin因为父容器已经有padding

  • 不需要上margin因为第一个元素不需要顶部间距

Third：总结就是：

.form-group {margin-bottom: 20px;
}
（3）标签label：

其次就是标签这一块，即“用户名”、“密码”等等这一块搞个统一的样式：

First：构建图：

Second：思考过程：  

  • 我们需要这独占一行 ，而<label>元素默认属于行内元素，所以我们需要转成块级元素（搞不明白的去学我之前的文章块级和行内的区别）：display: block;
  • 然后文字跟框有距离：margin-bottom（如图中的橙色部分）
  • 字体设置为粗体，醒目：font-weight: bold;
  • 字的颜色设置为黑色：color

Third：总结就是：

label {display: block;margin-bottom: 8px;font-weight: bold;color: #555;
}
（4）输入框样式 （重要）

先学习下新写法——属性选择器input[type="xxx"]：精确选择特定类型的input

First：构建图：

Second：思考过程：   

  • 框需要充满父容器 ：width：100%
  • 文字与框之间需要距离，即内边距padding
  • 框我们想要黑边的、圆角的：border和border-radius，一般大圆角就是8px，小圆角就是4px
  • 输入的内容的字体我们也可以控制下：font-size
  • 还有一个重要的点，因为我们需要框刚好去充满父容器，所以需要保证内边距+边框的宽度是不会影响整个总宽度的：box-sizing: border-box

Third：总结就是：

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {width: 100%;                  /* 充满父容器 */padding: 10px;                /* 内边距 */border: 1px solid #ddd;       /* 边框 */border-radius: 4px;           /* 圆角 */font-size: 16px;              /* 字体大小 */box-sizing: border-box;       /* 盒模型计算方式：让width包含padding和border */
}
 （5）单选按钮组：

First：构建图：

Second：思考过程：   

先看整个radio-group（包括了按钮和标签）：

  • 我们想要水平放置按钮： display: flex;
  • 两个按钮需要有间距：gap
  • 与上方的标签“性别”需要有距离（外边距）：margin-top（图中橙色的那部分）

再看radio-group的标签（也就是“男”，“女”）：

  • 同样也需要水平放置：display: flex;
  • 与上一个按钮之间需要间距，不然贴在一起不好看：gap

好，看下结果却是：

发现“男”、“女”两个字“飘”上去了，有个margin-bottom: 8px;存在，对不齐，太丑了。

为什么会有margin-bottom: 8px这个存在呢？因为男女也是属于label，而前面我们设置了label中的margin-bottom: 8px;，因此这个男女也被应用上了，所以！我们需要在这个男女这个标签单独去加个margin-bottom: 0;！

还有同样的取消掉加粗：font-weight: normal;

Third：总结就是：

.radio-group {display: flex;     /* 使用flex布局让单选按钮水平排列 */gap: 20px;             /* 设置20px的间距 */margin-top: 8px;     /* 与上方标签的间距 */
}.radio-group label {display: flex;gap: 5px;          /* 文字和按钮间距 */font-weight: normal;          /* 取消加粗 */margin-bottom: 0;
}

 总结一个小的思考路线：

是否需要布局？ → 是 → 需要水平排列吗？ → 是 → display: flex
│                                                     → 否 → display: block
→ 否 → 需要间距吗？ → 是 → margin/padding/gap
→ 否 → 需要美化吗？ → 是 → 颜色/圆角/阴影... 

CSS的全部代码（form.css）：

body {font-family: 'Arial', sans-serif;background-color: #f5f5f5;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;
}.form-container {background-color: white;padding: 30px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 100%;                  /* 宽度 */max-width: 500px;             /* 最大宽度 */
}h2 {text-align: center;color: #333;margin-bottom: 20px;
}.form-group {margin-bottom: 20px;
}label {display: block;margin-bottom: 8px;font-weight: bold;color: #555;
}input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {width: 100%;                  /* 充满父容器 */padding: 10px;                /* 内边距 */border: 1px solid #ddd;       /* 边框 */border-radius: 4px;           /* 圆角 */font-size: 16px;              /* 字体大小 */box-sizing: border-box;   /* 确保内边距和边框不影响总宽度 */
}input:focus {               /* input:focus	选择元素输入后具有焦点 */outline: none;                /* 移除默认焦点轮廓线 */border-color: #4a90e2;         /* 聚焦时的边框颜色 */box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);  /* 添加聚焦时的阴影效果 */
}.radio-group {display: flex;     /* 使用flex布局让单选按钮水平排列 */gap: 20px;             /* 设置20px的间距 */margin-top: 8px;     /* 与上方标签的间距 */
}.radio-group label {display: flex;gap: 5px;          /* 文字和按钮间距 */font-weight: normal;          /* 取消加粗 */margin-bottom: 0;
}.error-message {color: #e74c3c;font-size: 14px;margin-top: 5px;display: block;
}.submit-btn {width: 100%;padding: 12px;background-color: #4a90e2;color: white;border: none;   /* 移除默认边框 */border-radius: 4px;font-size: 16px;cursor: pointer;        /* 鼠标悬停时显示手型光标 */transition: background-color 0.3s;
}.submit-btn:hover {background-color: #357ab8;
}

 一个答疑总结：

Q：width:100%和width:auto有什么区别？
A：

  • 100%：强制撑满父容器，包含padding和border

  • auto：根据内容自动计算，可能不会占满宽度

五、JavaScript功能实现：

总体流程：

首先还是我们常用的DOMContentLoaded事件（还是那句话：让HTML文档完全加载和解析完成后，再执行里面的代码，这样可以确保我们能找到DOM元素。）

document.addEventListener('DOMContentLoaded', function() {// 代码在这里执行
});

这一块的逻辑可以想想：当用户点击提交表单的按钮时，系统直接获取用户输入的所有数据，进行数据有效性的验证，然后提示注册成功，最后重置表单。大概就是这样的一个流程了。

 第一步：处理点击提交按钮的事件监听：

form.addEventListener('submit', function(e) {e.preventDefault(); // 阻止表单默认提交行为
});

这里我们先写上阻止表单默认的提交行为（页面跳转），这样我们就能用JavaScript后续处理表单数据。

第二步： 获取用户输入的所有数据，需要使用到键值对，比如username对应document.getElementById('username').value，这里的.value可以拿到用户输入的值，因此我们直接把这些一个个键值对整合到一个对象里面：

            // 获取表单数据const formData = {username: document.getElementById('username').value,email: document.getElementById('email').value,gender: document.querySelector('input[name="gender"]:checked').value,birthdate: document.getElementById('birthdate').value,password: document.getElementById('password').value};

formData对象的作用是收集表单数据，把各个表单字段的值（如用户名、邮箱）整合到一个对象中。

 第三步：数据有效性验证，这里我们是想校验用户输入的用户名比如要求在4-20个字符内等等要求，所以我们需要对每个字段数据去校验。把校验的功能单独分出来，后续再具体写，这里先假装调用函数：

if (validateForm()) {
。。。
}

第四步：提示注册成功：

alert('注册成功！');

第五步：重置表单： 

form.reset();

整体代码如下：

document.addEventListener('DOMContentLoaded', function() {const form = document.getElementById('registerForm');// 表单提交事件处理form.addEventListener('submit', function(e) {e.preventDefault(); // 阻止表单默认提交行为// 验证表单if (validateForm()) {// 获取表单数据const formData = {username: document.getElementById('username').value,email: document.getElementById('email').value,// 使用CSS选择器找到被选中的单选按钮，获取其valuegender: document.querySelector('input[name="gender"]:checked').value,birthdate: document.getElementById('birthdate').value,password: document.getElementById('password').value};// 这里通常是发送到服务器的代码console.log('表单数据:', formData);alert('注册成功！');form.reset(); // 重置表单}});

表单验证函数validateForm()：

然后我们具体来写表单验证函数validateForm()，先定义函数function  validateForm(){...}

定义一个标志，比如验证用户输入的用户名是4-20个字符里面，就设置标志为true，验证密码至少6个字符，就设置为true，一一验证，最后返回标志，这样回到前面我们的if (validateForm())就可以判断是不是true，从而走下面的步骤。

// 表单验证函数function validateForm() {let isValid = true;// 验证用户名const username = document.getElementById('username').value;if (username.length < 4 || username.length > 20) {document.getElementById('usernameError').textContent = '用户名需4-20个字符';isValid = false;}// 验证邮箱const email = document.getElementById('email').value;const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailRegex.test(email)) {document.getElementById('emailError').textContent = '请输入有效的邮箱地址';isValid = false;}// 验证密码const password = document.getElementById('password').value;if (password.length < 6) {document.getElementById('passwordError').textContent = '密码至少6个字符';isValid = false;}// 验证确认密码const confirmPassword = document.getElementById('confirmPassword').value;if (confirmPassword !== password) {document.getElementById('confirmPasswordError').textContent = '两次输入的密码不一致';isValid = false;}return isValid;}

总结一下前面的代码都在干嘛？-----就是用户点击提交按钮，我们去校验每个字段是不是合乎我们自定义的规则的？是就提示“注册成功”。

但是我们想继续实时校验每个字段数据呢？就是比如用户输入第一个用户名不符合规则，就提示，而不是等到点击提交按钮了再统一提示。

全部代码如下（form.js）：

// script.js
document.addEventListener('DOMContentLoaded', function() {const form = document.getElementById('registerForm');// 表单提交事件处理form.addEventListener('submit', function(e) {e.preventDefault(); // 阻止表单默认提交行为// 验证表单if (validateForm()) {// 获取表单数据const formData = {username: document.getElementById('username').value,email: document.getElementById('email').value,gender: document.querySelector('input[name="gender"]:checked').value,birthdate: document.getElementById('birthdate').value,password: document.getElementById('password').value};// 这里通常是发送到服务器的代码console.log('表单数据:', formData);alert('注册成功！');form.reset(); // 重置表单}});// 实时验证用户名document.getElementById('username').addEventListener('input', function() {const username = this.value;const errorElement = document.getElementById('usernameError');if (username.length < 4) {errorElement.textContent = '用户名至少4个字符';} else if (username.length > 20) {errorElement.textContent = '用户名不能超过20个字符';} else {errorElement.textContent = '';}});// 实时验证邮箱document.getElementById('email').addEventListener('input', function() {const email = this.value;const errorElement = document.getElementById('emailError');const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailRegex.test(email)) {errorElement.textContent = '请输入有效的邮箱地址';} else {errorElement.textContent = '';}});// 密码验证document.getElementById('password').addEventListener('input', function() {const password = this.value;const errorElement = document.getElementById('passwordError');if (password.length < 6) {errorElement.textContent = '密码至少6个字符';} else {errorElement.textContent = '';}});// 确认密码验证document.getElementById('confirmPassword').addEventListener('input', function() {const confirmPassword = this.value;const password = document.getElementById('password').value;const errorElement = document.getElementById('confirmPasswordError');if (confirmPassword !== password) {errorElement.textContent = '两次输入的密码不一致';} else {errorElement.textContent = '';}});// 表单验证函数function validateForm() {let isValid = true;// 验证用户名const username = document.getElementById('username').value;if (username.length < 4 || username.length > 20) {document.getElementById('usernameError').textContent = '用户名需4-20个字符';isValid = false;}// 验证邮箱const email = document.getElementById('email').value;const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailRegex.test(email)) {document.getElementById('emailError').textContent = '请输入有效的邮箱地址';isValid = false;}// 验证密码const password = document.getElementById('password').value;if (password.length < 6) {document.getElementById('passwordError').textContent = '密码至少6个字符';isValid = false;}// 验证确认密码const confirmPassword = document.getElementById('confirmPassword').value;if (confirmPassword !== password) {document.getElementById('confirmPasswordError').textContent = '两次输入的密码不一致';isValid = false;}return isValid;}
});

六、运行结果图：

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

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

相关文章

强化学习 (RL) 新突破：超越游戏，走向复杂现实决策

强化学习 (RL) 新突破：超越游戏，走向复杂现实决策

强化学习 (RL) 新突破&#xff1a;超越游戏&#xff0c;走向复杂现实决策 强化学习&#xff08;Reinforcement Learning&#xff0c; RL&#xff09;作为人工智能的核心范式之一&#xff0c;历经数十年的发展&#xff0c;正迎来一场深刻的范式转移。曾以战胜人类顶尖选手的Alph…
阅读更多...
2025年6-7月AI领域关键进展：从药物研发到全球监管--AI深度融入产业与社会

2025年6-7月AI领域关键进展：从药物研发到全球监管--AI深度融入产业与社会

2025年6月至7月&#xff0c;人工智能领域继续以惊人速度发展&#xff0c;在技术突破、行业应用、政策法规、企业战略及学术研究等方面取得了一系列重要里程碑。以下为关键动态&#xff1a;一、技术突破&#xff1a; AI向生命科学和认知科学纵深挺进DeepMind启动AI设计药物人体试…
阅读更多...
【TOOL】ubuntu升级cmake版本

【TOOL】ubuntu升级cmake版本

文章目录一、下载cmake脚本二、安装一、下载cmake脚本 在编译新工程时遇到cmake版本过低的情况&#xff0c;到 cmake官网 下载指定cmake安装脚本&#xff1a; 若需下载指定版本&#xff0c;见上图右上角蓝框。 二、安装 # 赋予可执行权限 sudo chmod x cmake-3.31.8-linux-x8…
阅读更多...
GMSK调制解调系统的matlab性能仿真,对比维特比解调,1bit差分解调,2bit差分解调

GMSK调制解调系统的matlab性能仿真,对比维特比解调,1bit差分解调,2bit差分解调

目录 1.前言 2.算法运行效果图预览 3.算法运行软件版本 4.部分核心程序 5.算法仿真参数 6.算法理论概述 7.参考文献 8.算法完整程序工程 1.前言 GMSK(Gaussian Minimum Shift Keying&#xff0c;高斯最小频移键控)是一种连续相位调制技术&#xff0c;基于MSK调制改进而…
阅读更多...
SQL138 连续两次作答试卷的最大时间窗

SQL138 连续两次作答试卷的最大时间窗

SQL138 连续两次作答试卷的最大时间窗 问题分析 找出2021年至少有两天作答的用户计算每个用户连续两次作答的最大时间窗基于历史数据预测在这个时间窗内平均会做多少套试卷 版本1 with-- 功能​&#xff1a;筛选2021年至少有两天作答的用户及其作答记录-- 子查询找出2021年…
阅读更多...
TensorFlow2 study notes[2]

TensorFlow2 study notes[2]

文章目录tf.autodiff.ForwardAccumulatorreferencestf.autodiff.ForwardAccumulator the function can be used to achieve the Computation of Jacobian-vector products with forward-mode autodiff. primals is variables need to watch.tangents is direction vector. …
阅读更多...
稳定币将成为新时代的重要金融工具

稳定币将成为新时代的重要金融工具

在数字经济加速渗透的今天，加密货币作为一种新型价值载体，正深刻改变着全球金融的运作逻辑。其中，稳定币与非稳定币构成了加密货币生态的两大支柱，二者在设计逻辑、应用场景和市场表现上呈现出显著差异。 稳定币锚定法定货币 稳定币是一类以法定货币、大宗商品或其他资产…
阅读更多...
Constants

Constants

本节是《Solidity by Example》的中文翻译与深入讲解&#xff0c;专为零基础或刚接触区块链开发的小白朋友打造。我们将通过“示例 解说 提示”的方式&#xff0c;带你逐步理解每一段 Solidity 代码的实际用途与背后的逻辑。 Solidity 是以太坊等智能合约平台使用的主要编程语…
阅读更多...
五镜头倾斜摄影相机的技术优势与应用原理

五镜头倾斜摄影相机的技术优势与应用原理

倾斜摄影技术作为三维实景建模的核心手段&#xff0c;其硬件设计直接影响数据采集效率与模型质量。在众多镜头配置方案中&#xff0c;五镜头结构&#xff08;下视前、后、左、右四个倾斜视角&#xff09;已成为行业主流选择。这一设计并非偶然&#xff0c;而是基于严苛的技术需…
阅读更多...
ThinkSound V2版 - 一键给无声视频配音，为AI视频生成匹配音效 支持50系显卡 一键整合包下载

ThinkSound V2版 - 一键给无声视频配音，为AI视频生成匹配音效 支持50系显卡 一键整合包下载

ThinkSound 是阿里通义实验室开源的首个音频生成模型&#xff0c;它能够让AI像专业“音效师”一样&#xff0c;根据视频内容生成高度逼真、与视觉内容完美契合的音频。 ThinkSound 可直接应用于影视后期制作&#xff0c;为AI生成的视频自动匹配精准的环境噪音与爆炸声效&#x…
阅读更多...
如何从0开始构建自己的第一个AI应用？（Prompt工程、Agent自定义、Tuning）

如何从0开始构建自己的第一个AI应用？（Prompt工程、Agent自定义、Tuning）

一、前言 从0开始基于自定义Agent构建AI应用&#xff0c;涉及从创建智能Agent到使用、测试及优化提示词等一系列步骤。前置&#xff1a;什么是LLM、Prompt、Mcp和Agent&#xff1f; 二、步骤一&#xff1a;规划和设计AI应用 在创建AI应用之前&#xff0c;你需要明确应用的目标…
阅读更多...
Java ThreadLocal详解：从原理到实践

Java ThreadLocal详解：从原理到实践

Java ThreadLocal详解&#xff1a;从原理到实践&#xff08;图解极简示例&#xff09; 一、什么是ThreadLocal&#xff1f;——线程的"专属储物柜" ThreadLocal 是 Java 提供的线程本地存储机制&#xff0c;通俗来说&#xff0c;它能为每个线程创建一个独立的变量副本…
阅读更多...
如何在 Visual Studio Code 中使用 Cursor AI

如何在 Visual Studio Code 中使用 Cursor AI

在当今快节奏的开发环境中&#xff0c;像 Cursor AI 这样的 AI 工具正在彻底改变开发人员编写和管理代码的方式。Cursor AI 通过提供智能代码建议、自然语言编辑和多文件项目更新功能&#xff0c;增强了“ Visual Studio Code (VS Code )”的功能&#xff0c;所有这些功能均由 …
阅读更多...
阿里面试：服务与发现 ，该选择 CP 还是 AP？为什么？

阿里面试：服务与发现 ，该选择 CP 还是 AP？为什么？

说在前面 最近有小伙伴拿到了一线互联网企业如微博、阿里、汽车之家、极兔、有赞、希音、百度、网易、滴滴的面试资格&#xff0c;遇到一几个很重要的面试题&#xff1a; 服务注册发现&#xff0c;该选 AP 还是 CP&#xff1f; 为什么&#xff1f; 最近有小伙伴在面 阿里。 小伙…
阅读更多...
模拟实现Vue2-Vue3响应式更新

模拟实现Vue2-Vue3响应式更新

Vue2作为 MVVM框架/* Vue2 通过 Object.defineProperty 监听、挟持数据&#xff0c;实现响应式 并通过 Dep&#xff08;依赖收集器&#xff09; 和 Watcher 实现依赖收集&#xff0c;通知视图更新 *//* 但是 Vue2用Object.defineProperty 无法监听新增属性、无法监听数组索引变…
阅读更多...
一文理解锂电池充电、过放修复与电量测量：从原理到实战

一文理解锂电池充电、过放修复与电量测量：从原理到实战

一、为什么要看这篇文章&#xff1f; 手机电量突然从20%跳到0%&#xff1f;电动车冬天续航腰斩&#xff1f;18650过放后还能救吗&#xff1f; 本文用一张思维导图一张表格一段口诀&#xff0c;一次性讲透锂电池的充电四阶段、过放修复全方案、电量测量底层原理&#xff0c;并给…
阅读更多...
【爬虫】01 - 爬虫原理及其入门

【爬虫】01 - 爬虫原理及其入门

爬虫01 - 爬虫原理及其入门 文章目录爬虫01 - 爬虫原理及其入门一&#xff1a;爬虫原理1&#xff1a;爬虫的优势‌2&#xff1a;爬虫的核心库3&#xff1a;经典举例4&#xff1a;合规问题一&#xff1a;爬虫原理 学习爬虫之前前置知识需要了解这些&#xff1a; 我的HTTP介绍, 了…
阅读更多...
React对于流式数据和非流式数据的处理和优化

React对于流式数据和非流式数据的处理和优化

React 在处理流式数据和非流式数据时&#xff0c;可以借助其组件模型、状态管理以及 React 18 引入的并发特性来实现高效的数据处理与渲染优化。 文章目录一、流式数据&#xff08;Streaming Data&#xff09;1. 定义2. 常见来源3. 处理方式使用 useState / useReducer 管理状态…
阅读更多...
3、Vue 中使用 Cesium 实现可拖拽点标记及坐标实时显示功能

3、Vue 中使用 Cesium 实现可拖拽点标记及坐标实时显示功能

在 Cesium 地图开发中&#xff0c;实现点标记的拖拽交互并实时显示坐标信息是一个常见的需求。本文将详细介绍如何在 Vue 框架中使用 Cesium 的 Primitive 方式创建点标记&#xff0c;并实现拖拽功能及坐标提示框跟随效果。先看效果图功能实现概述我们将实现的功能包括&#xf…
阅读更多...
Anthropic：从OpenAI分支到AI领域的领军者

Anthropic：从OpenAI分支到AI领域的领军者

自2021年由前OpenAI高管Dario和Daniela Amodei创立以来&#xff0c;Anthropic已迅速崛起为人工智能&#xff08;AI&#xff09;领域的重要力量。 公司专注于开发安全、可控且具备深度推理能力的AI系统&#xff0c;其Claude系列模型在生成式AI领域取得了显著成就。 此外&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023