【JavaScript 漫游】【042】表单和FormData 对象

山峦

文章简介

本篇文章为【JavaScript 漫游】专栏的第 042 篇文章，对浏览器模型中的表单和 FormData 对象的知识点进行了总结。

表单概述

表单（<form>）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单提供多种控件，让开发者使用。

<form action="/handling-page" method="post">
  <div>
    <label for="name">用户名：</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="passwd">密码：</label>
    <input type="password" id="passwd" name="user_passwd" />
  </div>
  <div>
    <input type="submit" id="submit" name="submit_button" value="提交" />
  </div>
</form>

用户点击“提交”按钮，每一个控件都会生成一个键值对，键名是控件的 name 属性，键值是控件的 value 属性，键名和键值之间由等号连接。比如，用户名输入框的 name 属性是 user_name，value 属性是用户输入的值，假定是“张三”，提交到服务器的时候，就会生成一个键值对 user_name=张三。

所有的键值对都会提交到服务器。但是，提交的数据格式跟 <form> 元素的 method 属性有关。该属性指定了提交数据的 HTTP 方法。如果是 GET 方法，所有键值对会以 URL 的查询字符串形式，提交到服务器，比如 /handling-page?user_name=张三&user_passwd=123&submit_button=提交。下面就是 GET 请求的 HTTP 头信息。

GET /handling-page?user_name=张三&user_passwd=123&submit_button=提交
Host: example.com

如果是 POST 开发，所有键值对会连接成一行，作为 HTTP 请求的数据体发送到服务器，比如 user_name=张三&user_passwd=123&submit_button=提交。下面就是 POST 请求的头信息。

POST /handling-page HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 74

user_name=张三&user_passwd=123&submit_button=提交

注意，实际提交的时候，只要键值不是 URL 的合法字符（比如汉字“张三”和“提交”），浏览器会自动对其进行编码。

点击 submit 控件，就可以提交表单。

<form>
  <input type="submit" value="提交">
</form>

注意，表单里面的 <button> 元素如果没有用 type 属性指定类型，那么默认就是 submit 控件。

<form>
  <button>提交</button>
</form>

除了点击 submit 控件提交表单，还可以用表单元素的 submit() 方法，通过脚本提交表单。

formElement.submit();

表单元素的 reset() 方法可以重置所有控件的值（重置为默认值）

formElement.reset();

FormData 对象

概述

表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过 XMLHttpRequest.send() 发送。浏览器原生提供了 FormData 对象来完成这项工作。

FormData 首先是一个构造函数，用来生成实例。

var formdata = new FormData(form);

FormData() 构造参数的参数是一个表单元素，这个参数是可选的。如果省略参数，就表示一个空的表单，否则就会处理表单元素里面的键值对。

<form id="myForm" name="myForm">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">账号：</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">上传文件：</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>

用 FormData 对象处理上面这个表单。

var myForm = document.getElementById('myForm');
var formData = new FormData(myForm);

// 获取某个控件的值
formData.get('username') // ""

// 设置某个控件的值
formData.set('username', '张三');

formData.get('username') // "张三"

实例方法

FormData 提供以下实例方法。

  • FormData.get(key)：获取指定键名对应的键值，参数为键名。如果有多个同名的键值对，则返回第一个键值对的键值
  • FormData.getAll(key)：返回一个数组，表示指定键名对应的所有键值。如果有多个同名的键值对，数组会包含所有的键值
  • FormData.set(key, value)：设置指定键名的键值，参数为键名。如果键名不存在，会添加这个键值对，否则会更新指定键名的键值。如果第二个参数是文件，还可以使用第三个参数，表示文件名
  • FormData.delete(key)：删除一个键值对，参数为键名
  • FormData.append(key, value)：添加一个键值对。如果键名重复，则会生成两个相同键名的键值对。如果第二个参数是文件，还可以使用第三个参数，表示文件名
  • FormData.has(key)：返回一个布尔值，表示是否具有该键名的键值对
  • FormData.keys()：返回一个遍历器对象，用于 for...of 循环遍历所有的键名
  • FormData.values()：返回一个遍历器对象，用于 for...of 循环遍历所有的键值
  • FormData.entries()：返回一个遍历器对象，用于 for...of 循环遍历所有的键值对。如果直接用 for...of 循环遍历 FormData 实例，默认就会调用这个方法
var formData = new FormData();

formData.set('username', '张三');
formData.append('username', '李四');
formData.get('username') // "张三"
formData.getAll('username') // ["张三", "李四"]

formData.append('userpic[]', myFileInput.files[0], 'user1.jpg');
formData.append('userpic[]', myFileInput.files[1], 'user2.jpg');

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

for (var key of formData.keys()) {
  console.log(key);
}
// "key1"
// "key2"

for (var value of formData.values()) {
  console.log(value);
}
// "value1"
// "value2"

for (var pair of formData.entries()) {
  console.log(pair[0] + ': ' + pair[1]);
}
// key1: value1
// key2: value2

// 等同于遍历 formData.entries()
for (var pair of formData) {
  console.log(pair[0] + ': ' + pair[1]);
}
// key1: value1
// key2: value2

表单的内置验证

自动校验

表单提交的时候，浏览器允许开发者指定一些条件，它会自动验证各个表单控件的值是否符合条件。

<!-- 必填 -->
<input required>

<!-- 必须符合正则表达式 -->
<input pattern="banana|cherry">

<!-- 字符串长度必须为6个字符 -->
<input minlength="6" maxlength="6">

<!-- 数值必须在1到10之间 -->
<input type="number" min="1" max="10">

<!-- 必须填入 Email 地址 -->
<input type="email">

<!-- 必须填入 URL -->
<input type="URL">

如果一个控件通过验证，它就会匹配 :valid 的 CSS 伪类，浏览器会继续进行表单提交的流程。如果没有通过验证，该控件就会匹配 :invalid 的 CSS 伪类，浏览器会终止表单提交，并显示一个错误信息。

input:invalid {
  border-color: red;
}
input,
input:valid {
  border-color: #ccc;
}

checkValidity()

除了提交表单的时候，浏览器自动校验表单，还可以手动触发表单的校验。表单元素和表单控件都有 checkValidity() 方法，用于手动触发校验。

// 触发整个表单的校验
form.checkValidity()

// 触发单个表单控件的校验
formControl.checkValidity()

checkValidity() 方法返回一个布尔值，true 表示通过校验，false 表示没有通过校验。因此，提交表单可以封装为下面的函数。

function submitForm(action) {
  var form = document.getElementById('form');
  form.action = action;
  if (form.checkValidity()) {
    form.submit();
  }
}

willValidate 属性

控件元素的 willValidate 属性是一个布尔值，表示该控件是否会在提交时进行校验。

// HTML 代码如下
// <form novalidate>
//   <input id="name" name="name" required />
// </form>

var input = document.querySelector('#name');
input.willValidate // true

validationMessage 属性

控件元素的 validationMessage 属性返回一个字符串，表示控件不满足校验条件时，浏览器显示的提示文本。以下两种情况，该属性返回空字符串。

  • 该控件不会在提交时自动校验
  • 该控件满足校验条件
// HTML 代码如下
// <form><input type="text" required></form>
document.querySelector('form input').validationMessage
// "请填写此字段。"

var myInput = document.getElementById('myinput');
if (!myInput.checkValidity()) {
  document.getElementById('prompt').innerHTML = myInput.validationMessage;
}

setCustomValidity()

控件元素的 setCustomValidity() 用来定制校验失败时的报错信息。它接受一个字符串作为参数，该字符串就是定制的报错信息。如果参数为空字符串，则上次设置的报错信息被清除。

这个方法可以替换浏览器内置的表单验证报错信息，参数就是要显示的报错信息。

<form action="somefile.php">
  <input
    type="text"
    name="username"
    placeholder="Username"
    pattern="[a-z]{1,15}"
    id="username"
  >
  <input type="submit">
</form>

上面的表单输入框，要求只能输入小写字母，且不得超过 15 个字符。如果输入不符合要求（比如输入“ABC”），提交表单的时候，Chrome 浏览器会弹出报错信息“Please match the requested format.”，禁止表单提交。下面使用 setCustomValidity() 替换掉报错信息。

var input = document.getElementById('username');
input.oninvalid = function (event) {
  event.target.setCustomValidity(
    '用户名必须是小写字母，不能为空，最长不超过15个字符'
  );
}

上面代码中，setCustomValidity() 方法是在 invalid 事件的监听函数里面调用。该方法也可以直接调用，这时如果参数不为空字符串，浏览器就会认为该控件没有通过校验，就会立刻显示该方法设置的报错信息。

/* HTML 代码如下
<form>
  <p><input type="file" id="fs"></p>
  <p><input type="submit"></p>
</form>
*/

document.getElementById('fs').onchange = checkFileSize;

function checkFileSize() {
  var fs = document.getElementById('fs');
  var files = fs.files;
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) {
       fs.setCustomValidity('文件不能大于 75KB');
       return;
     }
  }
  fs.setCustomValidity('');
}

上面代码一旦发现文件大于 75KB，就会设置校验失败，同时给出自定义的报错信息。然后，点击提交按钮时，就会显示报错信息。这种校验失败是不会自动消除的，所以如果所有文件都符合条件，要将报错信息设为空字符串，手动消除校验失败的状态。

validity 属性

控件元素的属性 validity 属性返回一个 ValidityState 对象，包含当前校验状态的信息。

该对象有以下属性，全部为只读属性，返回布尔值。

  • ValidityState.badInput：浏览器是否不能将用户的输入转换成正确的类型，比如用户在数值框里面输入字符串
  • ValidityState.customError：是否已经调用 setCustomValidity() 类型，将校验信息设置为一个非空字符串
  • ValidityState.patternMismatch：用户输入的值是否不满足模式的要求
  • ValidityState.rangeOverflow：用户输入的值是否大于最大范围
  • ValidityState.rangeUnderflow：用户输入的值是否小于最小范围
  • ValidityState.stepMismatch：用户输入的值不符合步长的设置（即不能被步长值整除）
  • ValidityState.tooLong：用户输入的字数超出了最长字数
  • ValidityState.tooShort：用户输入的字符少于最短字数
  • ValidityState.typeMismatch：用户填入的值不符合类型要求（主要是类型为 Email 或 URL 的情况）
  • ValidityState.valid：用户是否满足所有校验条件
  • ValidityState.valueMissing：用户没有填入必填的值
var input = document.getElementById('myinput');
if (input.validity.valid) {
  console.log('通过校验');
} else {
  console.log('校验失败');
}

如果想禁止浏览器弹出表单验证的报错信息，可以监听 invalid 事件。

var input = document.getElementById('username');
var form  = document.getElementById('form');

var elem = document.createElement('div');
elem.id  = 'notify';
elem.style.display = 'none';
form.appendChild(elem);

input.addEventListener('invalid', function (event) {
  event.preventDefault();
  if (!event.target.validity.valid) {
    elem.textContent   = '用户名必须是小写字母';
    elem.className     = 'error';
    elem.style.display = 'block';
    input.className    = 'invalid animated shake';
  }
});

input.addEventListener('input', function(event){
  if ( 'block' === elem.style.display ) {
    input.className = '';
    elem.style.display = 'none';
  }
});

上面代码中，一旦发生 invalid 事件（表单验证失败），event.preventDefault() 用来禁止浏览器弹出默认的验证失败提示，然后设置定制的报错提示框。

表单的 novalidate 属性

表单元素的 HTML 属性 novalidate，可以关闭浏览器的自动校验。

<form novalidate>
</form>

这个属性也可以在脚本里设置。

form.noValidate = true;

如果表单元素没有设置 novalidate 属性，那么提交按钮（<button>或 <input> 元素）的 formnovalidate 属性也有同样的作用。

<form>
  <input type="submit" value="submit" formnovalidate>
</form>

enctype 属性

表单能够用四种编码，向服务器发送数据。编码格式由表单的 enctype 属性决定。

假定表单有两个字段，分别是 foo 和 baz，其中 foo 字段的值等于 bar，baz 字段的值是一个分为两行的字符串。

The first line.
The second line.

下面四种格式，都可以将这个表单发送到服务器。

GET 方法

如果表单使用 GET 方法发送数据，enctype 属性无效。

<form
  action="register.php"
  method="get"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

数据将以 URL 的查询字符串发出。

?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.

application/x-www-form-urlencoded

如果表单用 POST 方法发送数据，并省略 enctype ，那么数据以 application/x-www-form-urlencoded 格式发送（因为这是默认值）。

<form
  action="register.php"
  method="post"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

发送的 HTTP 请求如下。

Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

上面代码中，数据体里面的 %0D%0A 代表换行符（\r\n）。

text/plain

如果表单使用 POST 方法发送数据，enctype 属性为 text/plain，那么数据将以纯文本格式发送。

<form
  action="register.php"
  method="post"
  enctype="text/plain"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

发送的 HTTP 请求如下。

Content-Type: text/plain

foo=bar
baz=The first line.
The second line.

multipart/form-data

如果表单使用 POST 方法，enctype 属性为 multipart/form-data，那么数据将以混合的格式发送。

<form
  action="register.php"
  method="post"
  enctype="multipart/form-data"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

发送的 HTTP 请求如下。

Content-Type: multipart/form-data; boundary=---------------------------314911788813839

-----------------------------314911788813839
Content-Disposition: form-data; name="foo"

bar
-----------------------------314911788813839
Content-Disposition: form-data; name="baz"

The first line.
The second line.

-----------------------------314911788813839--

文件上传

用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。

<input type="file" id="file" name="myFile">

此外，还需要将表单 <form> 元素的 method 属性设为 POST，enctype 属性设为 multipart/form-data。其中，enctype 属性决定了 HTTP 头信息的 Content-Type 字段的值，默认情况下这个字段的值是 application/x-www-form-urlencoded，但是文件上传的时候要改成 multipart/form-data。

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">选择一个文件</label>
    <input type="file" id="file" name="myFile" multiple>
  </div>
  <div>
    <input type="submit" id="submit" name="submit_button" value="上传" />
  </div>
</form>

上面的 HTML 代码中，file 控件的 multiple 属性，指定可以一次选择多个文件；如果没有这个属性，则一次只能选择一个文件。

var fileSelect = document.getElementById('file');
var files = fileSelect.files;

然后，新建一个 FormData 实例对象，模拟发送到服务器的表单数据，把选中的文件添加到这个对象上面。

var formData = new FormData();

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  
  // 只上传图片文件
  if (!file.type.match('image.*')) {
    continue;
  }
  
  formData.append('photos[]', file, file.name);
}

最后，使用 Ajax 向服务器上传文件。

var xhr = new XMLHttpRequest();

xhr.open('POST', 'handler.php', true);

xhr.onload = function () {
  if (xhr.status !== 200) {
    console.log('An error occurred!');
  }
};

xhr.send(formData);

除了发送 FormData 实例，也可以直接 AJAX 发送文件。

var file = document.getElementById('test-input').files[0];
var xhr = new XMLHttpRequest();

xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

面试算法-87-分隔链表

面试算法-87-分隔链表

题目 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&#xff1a;head [1,4,3,2,5,2], x …
阅读更多...
2024年 前端JavaScript Web APIs 第五天 笔记

2024年 前端JavaScript Web APIs 第五天 笔记

5.1-BOM和延迟函数setTimeout 5.2-事件循环eventloop 1-》 3 -》2 1-》 3 -》2 5.3-location对象 案例&#xff1a;5秒钟之后自动跳转页面 <body><a href"http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a><sc…
阅读更多...
利用API打造卓越的用户体验

利用API打造卓越的用户体验

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 1. 数据驱动的设计 2. 功能扩展与整合 3. 实时性与响应性 4. 个性化推荐与定制化服务 结语 我的其他博客 正文 随着数字化时代的…
阅读更多...
程序设计语言+嵌入式系统设计师备考笔记

程序设计语言+嵌入式系统设计师备考笔记

0、前言 本专栏为个人备考软考嵌入式系统设计师的复习笔记&#xff0c;未经本人许可&#xff0c;请勿转载&#xff0c;如发现本笔记内容的错误还望各位不吝赐教&#xff08;笔记内容可能有误怕产生错误引导&#xff09;。 1、嵌入式系统开发与设计 1.1嵌入式应用程序的生成与加…
阅读更多...
机器学习基础知识面经（个人记录）

机器学习基础知识面经（个人记录）

朴素贝叶斯 特征为理想状态下的独立同分布&#xff0c;作为机器学习的重要基石和工具 由贝叶斯公式推导而来 是后验概率&#xff1a;在B发生的条件下A发生的概率。 是似然概率: 在 发生的条件下 发生的概率。 是先验概率: 发生的概率&#xff0c;而不考虑 的影响。 是…
阅读更多...
Redis入门到实战-第五弹

Redis入门到实战-第五弹

Redis实战热身Hashes篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、消息代理和…
阅读更多...
【Java初阶（四）】数组的定义和使用

【Java初阶（四）】数组的定义和使用

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; 目录 1.前言2.数组的概念2.1数组的初始化2.2数组的使用2.2.1数组元素访问2.2.2遍历数组 3.数组是引用类型3.1实例3.2 认识null 4.数组的应用4.1 二分查找4.2…
阅读更多...
合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测

合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测

原文链接&#xff1a;合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247598798&idx7&snc054ed7c9d9c433d00837a7798080935&chksmfa820329cdf58a3f6b5986d6d4da3d19f81e3efd0b159f…
阅读更多...
YOLOv9/YOLOv8算法改进【NO.106】使用YOLOv7下采样进行改进

YOLOv9/YOLOv8算法改进【NO.106】使用YOLOv7下采样进行改进

前 言 YOLO算法改进系列出到这&#xff0c;很多朋友问改进如何选择是最佳的&#xff0c;下面我就根据个人多年的写作发文章以及指导发文章的经验来看&#xff0c;按照优先顺序进行排序讲解YOLO算法改进方法的顺序选择。具体有需求的同学可以私信我沟通&#xff1a; 首推…
阅读更多...
米多论文怎么用 #学习方法#职场发展

米多论文怎么用 #学习方法#职场发展

米多论文是一款专为论文写作者设计的工具&#xff0c;可以帮助用户进行论文的查重和降重。它的使用非常简单&#xff0c;只需将需要检测的论文内容粘贴到相应的输入框中&#xff0c;点击“检测”按钮即可开始查重。米多论文通过比对用户提交的论文和互联网上已经存在的内容&…
阅读更多...
零基础机器学习(4)之线性回归的基本原理

零基础机器学习(4)之线性回归的基本原理

文章目录 一、线性回归的基本原理1.相关与回归2.线性回归的原理分析①线性回归的一般公式②线性回归的损失函数③线性回归方程的参数求解方法A.最小二乘法B.梯度下降法 一、线性回归的基本原理 1.相关与回归 相关描述的是变量之间的一种关系。 从统计角度看&#xff0c;变量之…
阅读更多...
数据结构面试题

数据结构面试题

1、数据结构三要素&#xff1f; 逻辑结构、物理结构、数据运算 2、数组和链表的区别&#xff1f; 数组的特点&#xff1a; 数组是将元素在内存中连续存放&#xff0c;由于每个元素占用内存相同&#xff0c;可以通过下标迅速访问数组中任何元素。数组的插入数据和删除数据效率低…
阅读更多...
自己动手做一个批量doc转换为docx文件的小工具

自己动手做一个批量doc转换为docx文件的小工具

前言 最近遇到了一个需求&#xff0c;就是要把大量的doc格式文件转换为docx文件&#xff0c;因此就动手做了一个批量转换的小工具。 背景 doc文件是什么&#xff1f; “doc” 文件是一种常见的文件格式&#xff0c;通常用于存储文本文档。它是 Microsoft Word 文档的文件扩…
阅读更多...
主干网络篇 | YOLOv8更换主干网络之SwinTransformer

主干网络篇 | YOLOv8更换主干网络之SwinTransformer

前言：Hello大家好，我是小哥谈。Swin Transformer是一种基于Transformer架构的图像分类模型，与传统的Transformer模型不同，Swin Transformer通过引入分层的窗口机制来处理图像，从而解决了传统Transformer在处理大尺寸图像时的计算和内存开销问题。Swin Transformer的核心思…
阅读更多...
【算法】环形纸牌均分问题

【算法】环形纸牌均分问题

104. 货仓选址 - AcWing题库 有n家商店&#xff0c;求把货仓建在哪能使得货仓到每个点的距离总和最小&#xff0c;输出最短的距离总和。 首先&#xff0c;我们看只有两个点的情况&#xff0c;在这种情况下我们选[1,2]的任何一个位置都是一样的&#xff0c;总和就是这段区间的长…
阅读更多...
利用sealos安装k8s集群

利用sealos安装k8s集群

1. 环境准备 准备三台干净&#xff08;未安装过k8s环境&#xff09;的虚拟机 # 所有的主机都要配置主机名和域名映射 # 设置主机名 hostnamectl set-hostname k8s-master01 # vim /etc/hosts 192.168.59.201 k8s-master01 192.168.59.202 k8s-worker01 192.168.59.203 k8…
阅读更多...
01. 如何配置ESP32环境？如何开发ESP32？

01. 如何配置ESP32环境？如何开发ESP32？

0. 前言 此文章收录于《ESP32学习笔记》专栏&#xff0c;此专栏会结合实际项目记录作者学习ESP32的过程&#xff0c;争取每篇文章能够将细节讲明白&#xff0c;会应用。 1. 安装IDE&#xff1a;Thonny 后续项目中我们都是使用pythont语言&#xff0c;而thonny工具能很好的支撑E…
阅读更多...
Mongodb入门到入土，安装到实战，外包半年学习的成果

Mongodb入门到入土，安装到实战，外包半年学习的成果

这是我参与「第四届青训营 」笔记创作活动的的第27天&#xff0c;今天主要记录前端进阶必须掌握内容Mongodb数据库,从搭建环境到运行数据库,然后使用MongodB; 一、文章内容 数据库基础知识关系型数据库和非关系型数据库为什么学习Mongodb数据库环境搭建及运行MongodbMongodb命…
阅读更多...
React生命周期新旧对比

React生命周期新旧对比

组件从创建到死亡&#xff0c;会经过一些特定的阶段React组件中包含一系列钩子函数{生命周期回调函数}&#xff0c;会在特定的时刻调用我们在定义组件的时候&#xff0c;会在特定的声明周期回调函数中&#xff0c;做特定的工作。旧生命周期总结 旧的生命周期分为三个阶段 1 初…
阅读更多...
Nacos部署（三）Docker部署Nacos2.3单机环境

Nacos部署（三）Docker部署Nacos2.3单机环境

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; Nacos部署&#xff08;三&#xff09;Docker部署Nacos2.3单机环境 ⏱️…
阅读更多...
最新文章

Copyright @ 2022~2023