嵌入式必备的WEB知识

写在前面

嵌入式要学习Wed前端吗?答案是要的,不需要深入学习,只需要简单了解即可。为什么要学习?
原因如下:

  1. 可以远程控制和管理设备:通过简单的Web知识,嵌入式系统可以建立Web界面,使得用户可以通过浏览器进行远程控制和管理设备,无需直接连接物理接口。

  2. 显示和呈现数据:Web技术可以用于创建图形用户界面(GUI),从而展示和呈现嵌入式系统中收集的数据,让用户能够直观地看到和理解设备所采集的数据。

  3. 与其他系统进行通信:Web技术通常通过各种通信协议与其他系统或设备进行通信,如使用Websockets。这使得嵌入式系统可以轻松地与其他系统进行交互,实现更多更广泛的功能。

  4. 增加网络互联性:随着物联网的普及,越来越多的设备需要通过Internet进行连接和通信。学习Web知识可以帮助开发人员更好地了解和掌握网络互联性,为开发具有更广泛功能的嵌入式系统铺平道路。

相比嵌入式来说,Wed前端难度要简单一些。一名合格的嵌入式开发人员,对于前端的入门可能仅仅几天即可。为何不拿出几天时间来学习一下Wed呢?

一.HTML

1.简介

HTML(超文本标记语言)是一种用于创建和呈现网页的标记语言。它使用标签来描述网页的结构和内容,并通过这些标记告诉浏览器如何显示网页。HTML标签是由尖括号包围的关键词,如<html><head><body>等。

HTML文档由一个根元素<html>开始,其中包含<head><body>两个主要部分。<head>部分用于指定文档的元数据,如标题、样式表和脚本。<body>部分包含网页的实际内容,如文本、图像、链接等。

除了基本的文本内容,HTML还支持使用标签来创建标题、段落、列表、表格、表单以及嵌入多媒体内容(如图像和视频)。这些标签使得网页可以更好地组织和展示信息。

HTML是一种非常重要的技术,因为它是构建网页的基础。通过使用HTML,开发人员可以创建具有结构和样式的网页,并与用户进行交互。

2.标签格式

1)开始标签:尖括号包围的关键词,如<head>
2)结束标签:尖括号包围的关键词,前面有一个斜杠,如</body>
3)成对存在:通常开始标签和结束标签成对存在,开始标签用于标记元素的开始,结束标签用于标记元素的结束,如<body>...</body>

在某些情况下,有些标签只有开始标签而没有结束标签,例如<br>用于表示换行,<img>用于插入图像等。这些标签被称为单标签或空标签。

此外,还有一些标签可以在开始标签中直接关闭,而不需要单独的结束标签,例如<input>标签:

<input type="text" name="username" />

这只适用于某些特定的标签,可以在相关的文档或教程中查找更多关于特定标签格式的信息。

3.常用标签

1)标题标签:

  • <h1>:定义最高级标题,通常用于页面标题。
  • <h2>:定义次级标题,通常用于页面主要部分的标题。
  • <h3>:定义更小级别的标题,通常用于页面的子标题。
  • <h4><h5><h6>:依次定义更小级别的标题,用于更具层次感的标题。

举例:

<h1>这是标题标签</h1>
<h2>这是标题标签</h2>
<h3>这是标题标签</h3>
<h4>这是标题标签</h4>
<h5>这是标题标签</h5>
<h6>这是标题标签</h6>

2)换行标签:

  • <br />:用于在文本中插入一个换行符。

3)段落标签:

  • <p>:定义一个段落,浏览器会根据窗口大小自动换行。

举例:

<p>文本内容</p>

4)块标签:

  • <div>:定义一个文档中的块级容器,常用于组织和布局页面的不同部分。可以嵌套其他标签,可以使用class或id来设置属性。

举例:

<div class="news"> <h2>News headline 1</h2><p>some text. some text. some text...</p>
</div>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>hello<!--br表示换行--></br>world<!--h1~h6标题标签--><h1>标题一</h1><!--div块标签--><div style="color: cyan;background: darkgrey"><h2>标题二</h2><!--p是段标签--><p>HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”。是用来描述网页的一种语言。所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容</p></div></body></html>

5)表单标签 <input>
在这里插入图片描述

<input> 标签用于在表单中创建用户输入字段。

常见的属性有:

  • type:指定输入字段的类型。
  • name:指定输入字段的名称。
  • value:指定输入字段的默认值。
  • id:指定输入字段的唯一标识符。
  • onclick:指定在用户点击输入字段时触发的 JavaScript 函数。
  • checked:当使用类型为 radio 的输入字段时,指定默认选中状态。

下面是不同类型的 <input> 标签的用法和示例:

  • 文本输入框:<input type="text" value="文本框默认值">

  • 单选框:<input type="radio" name="控件名称" value="提交的数值" onclick="处理函数" checked="checked">

<input> 标签可以用于创建各种类型的用户输入字段,例如文本输入框和单选框等。它的属性可以根据需要进行设置,以满足表单的要求。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>function fun(obj) {if (obj == 'man')console.log("i am man");elseconsole.log("i am woman");}//点击按钮,在文本框显示一个字符串function get() {//v不是一个变量,有点类似于数组var v=document.getElementsByName("usrname");//v[0]第一个名字为usrname的标签//v[0].value = "hello";var xhr=new XMLHttpRequest();//创建对象var url="";xhr.open("post",url,true);xhr.onreadystatechange=function()//状态发生变化{if(xhr.readyState===4&&xhr.status===200)v[0].value = xhr.responseText;//响应正文}xhr.send("get");}</script>
</head><body>hello<!--br表示换行--></br>world<!--h1~h6标题标签--><h1>标题一</h1><!--div块标签--><div style="color: cyan;background: darkgrey"><h2>标题二</h2><!--p是段标签--><p>HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”。是用来描述网页的一种语言。所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容</p></div><!--input表单标签,type类型为text表示单行文本输入框, value:表示默认值-->用户名:<input type="text" name="usrname" value="admin"><input type="button" name= "falsh" onclick="get()"><br><!--type类型为radio表示按钮,name:名字,表示同一类型得单选框name必须相同,checked表示默认选中-->男:<input type="radio" name="sex" id="man" checked="checked" onclick="fun(id)">女:<input type="radio" name="sex" id="woman" onclick="fun(id)"></body></html>

常用标签表格

标签描述
<html>定义HTML文档的根元素。
<head>定义文档的头部。
<body>定义文档的主体。
<h1> - <h6>定义标题,数字表示级别。
<p>定义一个段落。
<a>定义一个链接。
<img>定义一个图像。
<ul>定义一个无序列表。
<ol>定义一个有序列表。
<li>定义列表项。
<table>定义一个表格。
<tr>定义一个表格行。
<th>定义一个表头单元格。
<td>定义一个数据单元格。
<form>定义一个表单。
<input>定义一个表单输入框。
<button>定义一个按钮。
<div>定义一个容器。
<span>定义一小段行内文本。
<br>定义换行。

二.CSS层叠样式表

1.CSS简介

CSS(层叠样式表,Cascading Style Sheets)是一种用于描述网页上如何呈现元素的语言。它与HTML(超文本标记语言)一起被用于构建和设计网页。CSS 的主要目的是为网页提供样式和布局,使网页内容具有更好的可读性、可访问性和用户体验。

通过CSS,你可以控制网页上元素的外观,包括文本样式、字体、颜色、间距、边框、背景等等。CSS 通过选择器选中要应用样式的元素,并使用属性和值来定义样式。

CSS 的样式规则以选择器和声明块组成。选择器定义你要选择的元素,而声明块由一系列属性-值对组成,用于定义所选元素的样式。

CSS 是一种声明性语言,意味着你只需要描述所需的样式,而不需要关心实际的实现方式。浏览器会根据 CSS 规则自动应用样式。

除了可以直接在HTML文档中使用内联样式,CSS 还可以通过内部样式表或者外部样式表进行引用。内部样式表位于 <style> 标签中,而外部样式表以 .css 扩展名保存为独立的样式文件,然后在HTML文档中使用 <link> 标签引用。

通过使用CSS,你可以轻松地改变整个网站的样式,增强用户体验,并使网页更具吸引力和可用性。

2.CSS基本语法

<head><style>选择器{属性名:属性值;属性名:属性值;}</style>
</head>
  1. 选择器:要修饰的对象(东西)
  2. 属性名:修饰对象的哪一个属性(样式)
  3. 属性值:样式的取值

3.CSS常用属性

  1. font-size:设置文本大小
p {font-size: 16px;
}

上面的代码将设置所有 <p> 元素的字体大小为 16px。

  1. color:设置文本颜色
p {color: #333;
}

上面的代码将设置所有 <p> 元素的文本颜色为 #333。

  1. background-color:设置背景颜色
body {background-color: #f5f5f5;
}

上面的代码将设置整个页面的背景颜色为 #f5f5f5。

  1. border:设置边框
div {border: 1px solid #ccc;
}

上面的代码将在所有 <div> 元素周围创建1像素宽的灰色实线边框。

  1. margin:设置外边距
h1 {margin-top: 20px;margin-bottom: 10px;
}

上面的代码将设置 <h1> 元素的上外边距为 20px,下外边距为 10px。

  1. width/height:设置元素宽度和高度
img {width: 200px;height: 100px;
}

上面的代码将设置所有图片的宽度为 200px,高度为 100px。

三. JavaScript

1.JavaScript简介

JS,即 JavaScript,是一种用于在网页上添加交互功能的脚本语言。通过 JavaScript,你可以对网页中的元素进行操作、响应用户的事件、发送网络请求、处理数据等。

JavaScript 是一种基于对象和事件驱动的语言。它在网页上操作 DOM(文档对象模型),可以修改元素的内容、样式、属性等。例如,你可以使用 JavaScript 来更改网页上的文本、创建或删除元素、动态更新样式。

JavaScript 也提供了处理用户交互、响应事件的能力。你可以通过 JavaScript 来检测和响应按钮点击、鼠标移动、键盘输入等事件。通过添加事件处理程序,你可以执行特定的操作或触发其他功能。

此外,JavaScript 还具有处理数据的能力。它提供了各种数据类型(例如字符串、数字、数组、对象等)和内置函数来处理和操作这些数据。你可以执行数学计算、字符串操作、数组操作等。

通过 JavaScript,你还可以发送和接收网络请求。你可以使用 JavaScript 发起 AJAX 请求,从服务器获取数据,然后将其动态加载到网页上,实现异步更新和交互。

总的来说,JavaScript 是一种用于在网页上添加交互功能的强大语言,使得网页能够响应用户的操作,处理数据,与服务器通信,为用户提供更丰富、动态的体验。

2.JavaScript基本语法

JavaScript 的基础语法包括以下几个方面:

  1. 变量声明:
    使用 var关键字声明一个变量。
var name = "John";
  1. 数据类型:
    JavaScript 包含多种数据类型,例如字符串(string)、数字(number)、布尔值(boolean)、数组(array)、对象(object)等。
var name = "John"; // 字符串
var age = 25; // 数字
var isMale = true; // 布尔值
var fruits = ["apple", "banana", "orange"]; // 数组
var person = { name: "John", age: 25 }; // 对象
  1. 运算符:
    JavaScript 提供了多种运算符,用于进行数学运算、逻辑运算等。
var x = 5;
var y = 3;
var sum = x + y; // 相加运算
var isGreater = x > y; // 大于运算,返回布尔值
  1. 条件语句:
    使用 if...else 来执行条件判断。
var age = 18;
if (age >= 18) {console.log("成年人");
} else {console.log("未成年人");
}
  1. 循环语句:
    使用 forwhiledo...while 进行循环操作。
for (var i = 0; i < 5; i++) {console.log(i);
}var j = 0;
while (j < 5) {console.log(j);j++;
}var k = 0;
do {console.log(k);k++;
} while (k < 5);
  1. 函数:
    使用 function 关键字定义一个函数。
function sayHello(name) {console.log("Hello, " + name + "!");
}sayHello("John"); // 调用函数,输出 "Hello, John!"

3.javascript输入输出

感谢您提供的信息。您列出的方法是常用的 JavaScript 语言中的几个方法,在浏览器环境中使用。

  1. alert(msg):该方法在浏览器中弹出一个警示框,显示传入的消息 msg
alert("Hello World");
  1. console.log(msg):该方法在浏览器的开发者工具控制台中打印输出信息 msg,用于调试和输出运行时的信息。
console.log("Hello World");
  1. prompt(info):该方法在浏览器中弹出一个输入框,显示传入的提示信息 info 并等待用户输入。用户输入的内容将作为该方法的返回值。
var name = prompt("Please enter your name:");
console.log("Hello, " + name);

需要注意的是,alert() 主要用于向用户显示消息,而 console.log() 主要用于在开发者工具控制台中输出调试信息。

这些方法属于 JavaScript 语言的标准方法,并且在浏览器中提供。不同的环境(如 Node.js)可能具有不同的方法和工具来进行类似的操作。

4.JavaScript书写位置

JavaScript 可以写在 HTML 文件的不同位置,具体取决于需求和最佳实践。

  1. 内联脚本:可以直接在 HTML 元素的 onclickonload 等事件属性内写入 JavaScript 代码,或者通过 <script> 标签将代码嵌入到 HTML 文档中。

    <button onclick="myFunction()">点击我</button><script>function myFunction() {// 在这里编写 JavaScript 代码}
    </script>
    

    在简单的情况下,如少量代码或用于特定元素的事件处理,内联脚本是一种快速方便的方式。

  2. 内部脚本:可以将 JavaScript 代码放在 <script> 标签内部,放在 HTML 的 <head><body> 部分中。

    <head><script>function myFunction() {// 在这里编写 JavaScript 代码}</script>
    </head><body><!-- 这里可以使用 myFunction() 函数 -->
    </body>
    

    这样定义的脚本可以在页面加载时立即执行,但它可能会阻塞 HTML 解析,因此,如果脚本较大或需要请求远程资源,可能会导致页面加载变慢。

  3. 外部脚本:可以将 JavaScript 代码放在单独的外部文件中,然后通过 <script> 标签的 src 属性将其包含在 HTML 页面中。

    <script src="script.js"></script>
    

    在外部脚本中编写代码具有多个优点,如代码重用、缓存、解耦等。将 JavaScript 代码与 HTML 文件分离,有助于保持代码结构的整洁和可维护性。

通常,将 JavaScript 文件放在 HTML 页面的 <head> 部分时,可以确保在页面加载时立即加载并解析脚本。将 JavaScript 文件放在页面的底部(</body> 之前)时,可以确保 HTML 文档的其他内容(如DOM结构、样式等)已经加载完毕,再加载并执行 JavaScript 代码。这有助于提高页面加载性能和用户体验。

将 JavaScript 写在 HTML 文件的哪里取决于代码量、功能需求和最佳实践,应根据具体情况选择合适的方式。

五.XMLHttpRequest对象

XMLHttpRequest 是一个内置的 JavaScript 对象,用于在前端与后端进行数据交互。它是实现异步数据传输的基础,常用于发送 HTTP 请求并获取响应的数据。

以下是使用 XMLHttpRequest 发送 GET 请求的基本示例:

var xhr = new XMLHttpRequest();  // 创建 XMLHttpRequest 对象xhr.open("GET", "https://api.example.com/data", true);  // 使用 GET 方法请求指定 URLxhr.onreadystatechange = function() {  // 监听状态变化事件if (xhr.readyState === 4 && xhr.status === 200) {  // 请求已完成并得到成功的响应var responseData = JSON.parse(xhr.responseText);  // 解析响应数据// 在这里处理响应数据}
};xhr.send();  // 发送请求

上述代码的执行步骤:

  1. 创建一个 XMLHttpRequest 对象。
  2. 通过 open 方法指定要发送的请求类型(“GET”、“POST” 等)和请求的 URL。
  3. 使用 onreadystatechange 事件监听请求状态的变化。
  4. onreadystatechange 回调函数中检查请求的状态是否为 4(请求已完成)以及响应的状态码是否为 200(响应成功)。
  5. 如果条件满足,使用 responseText 获取服务器返回的响应数据,并根据需要进行解析或处理。
  6. 最后,通过 send 方法发送请求。

XMLHttpRequest 对象仅支持同源策略,即只能与同域名、同协议和同端口的服务器进行通信。如果需要与其他域名进行通信,可以使用 CORS(跨源资源共享)或使用代理服务器来解决。

六.document对象

document 对象是 JavaScript 中表示当前 HTML 文档的内置对象。它提供了访问和操作 HTML 文档的接口,允许 JavaScript 与 HTML 元素、样式和事件进行交互。

通过 document 对象,可以进行诸如查找元素、修改文档内容、添加事件监听器等操作。下面简要介绍一些常用的 document 对象属性和方法:

  1. 获取元素:

    • getElementById(id): 根据元素的 ID 属性获取对应的元素对象。
    • getElementsByClassName(className): 根据元素的类名获取所有符合条件的元素对象列表。
    • getElementsByTagName(tagName): 根据元素的标签名获取所有符合条件的元素对象列表。
    • querySelector(selector): 根据 CSS 选择器获取匹配的第一个元素对象。
    • querySelectorAll(selector): 根据 CSS 选择器获取所有匹配的元素对象列表。
  2. 修改文档内容:

    • innerHTML: 获取或设置元素的 HTML 内容。
    • innerTexttextContent: 获取或设置元素的文本内容。
    • createElement(tagName): 创建指定标签名的新元素。
  3. 修改元素样式:

    • style.property: 获取或设置元素的特定样式属性。
    • className: 获取或设置元素的类名。
    • classList: 获取或设置元素的类名列表。
  4. 文档信息:

    • title: 获取或设置文档的标题。
    • URL: 获取文档的URL。
    • referrer: 获取当前文档的引用来源。
  5. 事件处理:

    • addEventListener(event, callback): 为元素添加事件监听器。
    • removeEventListener(event, callback): 移除已添加的事件监听器。

document 对象也提供了其他属性和方法,用于操作文档结构、处理表单、管理样式等。通过这些属性和方法,JavaScript 可以实现对页面的动态操作和交互。

写在后面

对于前端知识,嵌入式工程师只需要了解其框架,基本的格式。能够书写简单的页面并能与后端服务器通信即可。学习完当然要写项目了,后面小编会写一个基于WebServer的工业数据采集的项目。项目用到的知识包括HTTP协议、HTML、CSS、JS、共享内存、消息队列、Modbus协议…。知识比较杂且琐碎,最会给出Wed前端学习网站,对于嵌入式开发人员,我建议使用菜鸟教程。

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

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

相关文章

【Effective Objective - C】—— 熟悉Objective-C

【Effective Objective - C】—— 熟悉Objective-C 熟悉Objective-C1.oc的起源消息和函数的区别运行期组件和内存管理要点&#xff1a; 2.在类的头文件中尽量少引入其他头文件向前声明要点&#xff1a; 3.多使用字面量语法&#xff0c;少用与之等价的方法字符串字面量字面数值字…

Java--业务场景:SpringBoot 通过Redis进行IP封禁实现接口防刷

文章目录 前言具体实现步骤1. 定义自定义注解2. 编写拦截器类IpUrlLimitInterceptor3. 在WebConfig类中添加IpUrlLimitInterceptor4. 添加注解到接口上 测试效果参考文章 前言 在实际项目中&#xff0c;有些攻击者会使用自动化工具来频繁刷新接口&#xff0c;造成系统的瞬时吞…

单因素方差分析--R

任务说明 三个剂量水平的药物处理受试者&#xff0c;每个剂量水平十个受试者&#xff0c;现在收集到数据后&#xff0c;问&#xff1a; 药物剂量水平显著影响受试者的response&#xff1f; 或者不同剂量药物处理受试者有显著效果的差异吗&#xff1f; 数据 library(tidyvers…

css选择器在python中如何使用

css选择器整理&#xff1a;https://blog.csdn.net/qq_40910788/article/details/84842951 目标&#xff1a;爬取某文章网站列表&#xff1a; 基础代码如下&#xff1a; import random import time import urllib.request import redef reptileTest(url):try:my_headers [&q…

Self-Attention

前置知识&#xff1a;RNN&#xff0c;Attention机制 在一般任务的Encoder-Decoder框架中&#xff0c;输入Source和输出Target内容是不一样的&#xff0c;比如对于英-中机器翻译来说&#xff0c;Source是英文句子&#xff0c;Target是对应的翻译出的中文句子&#xff0c;Attent…

Danswer部署指南

Quickstart How to deploy Danswer on your local machine ​ Requirements gitdocker with compose (docker version > 1.13.0) ​ Setup This quickstart guide covers setting up Danswer for local execution Clone the Danswer repo: git clone https://github.com…

Mysql 数据库ERROR 1820 (HY000): You must reset your password using ALTER USER 解决办法

Mysql 5.7数据库原来一直都能正常访问&#xff0c;突然访问不了&#xff0c;查看日志提示数据库需要修改密码&#xff0c; 具体解决办法如下操作&#xff1a; Windows 下&#xff1a; mysql的bin目录下&#xff0c; mysql>use mysql; mysql>mysql -uroot -p密码; 判…

gem5学习(14):将gem5扩展到ARM——Extending gem5 for ARM

目录 一、Downloading ARM Binaries 二、Building gem5 to run ARM Binaries 三、Modifying simple.py to run ARM Binaries 四、Running gem5 五、ARM Full System Simulation An aside on FS simulations 这个是gem5-learning中Getting Started的最后一篇文章&#xff…

imgaug库指南(20):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

各版本 操作系统 对 .NET Framework 与 .NET Core 支持

有两种类型的受支持版本&#xff1a;长期支持 (LTS) 版本和标准期限支持 (STS) 版本。 所有版本的质量都是一样的。 唯一的区别是支持的时间长短。 LTS 版本可获得为期三年的免费支持和补丁。 STS 版本可获得 18 个月的免费支持和修补程序。 有关详细信息&#xff0c;请参阅 .N…

Java重修第五天—面向对象2

通过学习本篇文章可以掌握如下知识 static&#xff1b;设计单例&#xff1b;继承。 之前文章我们已经对面向对象进行了入门学习&#xff0c;这篇文章我们就开始深入了解面向对象设计。 static 我们定义了一个 Student类&#xff0c;增加姓名属性&#xff1a;name &#xff1…

用通俗易懂的方式讲解:内容讲解+代码案例,轻松掌握大模型应用框架 LangChain

本文介绍了 LangChain 框架&#xff0c;它能够将大型语言模型与其他计算或知识来源相结合&#xff0c;从而实现功能更加强大的应用。 接着&#xff0c;对LangChain的关键概念进行了详细说明&#xff0c;并基于该框架进行了一些案例尝试&#xff0c;旨在帮助读者更轻松地理解 L…

最好的 8 个解锁 Android 手机的应用程序分析

如何解锁我的 Android 手机是一个困扰全球数百万人的问题。有多种Android解锁器可用于解锁手机。用户应确保选择最好的应用程序以轻松满意地完成工作。必须注意的是&#xff0c;数据在解锁手机的整个过程中都是安全可靠的。此类应用程序还应该能够在所有情况下检索数据。 锁屏移…

时间差异导致数据缺失,如何调整Grafana时间与Prometheus保持同步?

Grafana时间如何调快或调慢&#xff1f; 在k8s环境中&#xff0c;常使用prometheusgrafana做监控组件&#xff0c;prometheus负责采集、存储数据&#xff0c;grafana负责监控数据的可视化。 在实际的使用中&#xff0c;有时会遇到这样的问题&#xff0c;k8s集群中的时间比真实…

力扣:209.长度最小的子数组

1.题目分析&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 …

Vue的api接口封装以及使用说明、模块说明

在Api目录下面建立user.js&#xff0c;如果以后有不同的接口请求地址都可以单独创建不同的&#xff0c;目的是方便维护&#xff01; import request from /utils/request 这个代码是引入之前封装好的 request.js 文件&#xff0c;具体可以参考上门一篇文档 Vue的request.js模…

传奇手游详细图文架设教程

开始架设 1. 架设条件 传世手游架设需要准备&#xff1a; linux 服务器&#xff0c;建议 CentOs 7.6 版本&#xff0c;游戏源码&#xff0c; 游戏运行大约占 2.5G 左右内存。 2. 安装宝塔及环境 宝塔是一个服务器运维管理软件&#xff0c;安装命令&#xff1a; yum inst…

NVMe-oF 1.1规范:多路径、非对称命名空间和NVMe/TCP

提到NVMe over Fabric&#xff0c;我就会想到它的几种应用场景&#xff1a; 1、 存储阵列到主机的网络连接&#xff08;替代FC、iSCSI等&#xff09;&#xff1b; 2、 服务器、本地NVMe存储解耦&#xff08;跨机箱/JBOF&#xff09;&#xff0c;SSD存储资源池化共享&#xff…

序章 搭建环境篇—准备战士的剑和盾

第一步&#xff1a;安装node.js Node.js 内置了npm&#xff0c;只要安装了node.js&#xff0c;就可以直接使用 npm&#xff0c;官网地址&#xff1a; Download | Node.js 在这里不建议安装最新版本的node.js&#xff0c;可以选跟我一样的版本&#xff0c;node版本v16.13.2 链…

C++内存管理机制(侯捷)笔记3

C内存管理机制&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youtube: 侯捷-C内存管理机制 Github课程视频、PPT和源代码: https://github.com/ZachL1/Bilibili-plus 第三讲&#xff1a;malloc和…