四、Flask学习之JavaScript

四、Flask学习之JavaScript

JavaScript,作为一种前端脚本语言,赋予网页生动的交互性和动态性。通过它,开发者能够操作DOM(文档对象模型)实现页面元素的动态改变、响应用户事件,并借助AJAX技术实现异步数据请求,为用户提供更流畅的浏览体验。在现代Web开发中,JavaScript不仅是构建丰富用户界面的关键工具,还被广泛应用于服务器端(Node.js)等多个领域,成为一门多用途、强大而灵活的编程语言。

1.下载jQuery(后续会用到)

jQuery 是一款被广泛应用的JavaScript库,旨在简化客户端脚本编写。通过提供便捷的DOM操作、事件处理、动画效果和AJAX请求等功能,jQuery极大地简化了跨浏览器的开发工作。其直观的API和优雅的语法使开发者能够更快速、更轻松地创建交互性强、用户体验良好的网页和Web应用。

下载官网:jQuery,然后找到Download,找到压缩版:

image-20240122163656613

直接复制链接去某网盘或者某雷新建任务下载就行。

2.初识JavaScript

2.1简单示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.name1{background-color: pink;}.name2{text-align: center;}</style>
</head>
<body>
<div class="name1"><div class="name2" onclick="f()"><h1>欢迎访问本系统</h1></div>
</div>
<script type="text/javascript">function f() {confirm("确定吗?")}
</script>
</body>
</html>

效果:当点击标题一所在的区域时,会弹出一个框

image-20240122170208041

2.2代码位置

JavaScript代码在HTML文件中,有两种存放位置,一种是在<head>标签里面,但一定要在<style>标签后面;另一种是在<body>标签里面,但也要在最后的位置,如上的示例代码。推荐使用第二种,因为HTML文件是从上往下进行执行的,如果<script>标签里面有非常耗时的动作,有可能下面的HTML页面显示不出来,所以推荐使用第二种。

2.3存在形式

  1. 直接写在当前的HTML文件中(如上面的例子)

  2. 写在一个文件中,然后导入

    <script src="你的js存放目录"></script>
    

以上两种存在形式的代码的位置同上。

2.4基础知识

2.4.1 变量

Javascript在定义变量的时候是使用var关键字来定义的:var a="panda";

在 2015 年以前,使用 var 关键字来声明 JavaScript 变量。

在 2015 后的 JavaScript 版本 (ES6) 允许使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。

在打印变量的时候使用:console.log(a);

2.4.2 字符串
1.声明

一个字符串可以使用单引号或双引号,或者使用String():

var name1 = "panda";
var name2 = String("panda");
document.write(name1 + '<p>');
document.write(name2 + '<p>')
2. 索引

使用位置(索引)可以访问字符串中任何的字符,字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

var name1 = "panda";
document.write(name1 + '<p>');
document.write(name1[0])
3. length属性

字符串(String)使用长度属性length来计算字符串的长度:

var txt="Hello World!";
document.write(txt.length);
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);
4. 查找

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
5. 切片
var name1 = "panda";
document.write(name1.substring(2,4));

substring()的参数遵循左闭右开的原则,比如上面的例子,会输出nd

更详细的内容可以参考JavaScript String 对象 | 菜鸟教程 (runoob.com)

2.4.3 案例:跑马灯
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="text-align: center;background-color: pink;font-weight: bolder" id="name1">编程如画,我是panda!
</div>
<script>function display() {var receive = document.getElementById("name1");var reString = receive.innerText;receive.innerText = reString.substring(1, reString.length) + reString[0];}// 这个函数相当于定时器,第一个参数是指要执行的函数名,第二个参数是指间隔多少毫秒setInterval(display, 1000)
</script>
</body>
</html>
2.4.4 数组
1. 声明
var a1=[1,2,3,4,5];//直接声明
var a2=Array(1,2,3,4,5);//内置声明
2. 修改

对于索引,数组与字符串一样,下标均为0到length-1,修改数组中某个元素的时候,直接使用索引即可,例如:

var a1=[1,2,3,4,5];
a1[0]="panda";
3. 添加和删除
var a1=[1,2,3,4,5];
//在尾部添加
a1.push(6);
//在头部添加
a1.unshift(0);
/*在指定位置添加:
第一个参数是要添加元素的索引,
第二个元素是要从规定索引处删除元素的个数,如果是0就是不删除,
第三个元素是指要添加的元素*/
a1.splice(1,0,"panda")
a1.pop();//删除最后一个元素
a1.shift();//删除第一个元素
document.write(a1);
2.4.5 案例:动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul id="language">
</ul>
<script>var languageList=["C","C++","JAVA","Python","PHP"];for (var idx in languageList){var text = languageList[idx];//创建<li></li>标签var la=document.createElement("li");la.innerText=text;document.getElementById("language").appendChild(la);}
</script>
</body>
</html>
2.4.6 对象(字典)
1. 定义(声明)

两种方式:可以带引号也可以不带

my_dict={"name":"panda","age":20
}
my_dict2={name:"panda",age:20
}
2. 修改

直接使用成员运算符或者使用Python中字典的方式:

my_dict.name="你好";
my_dict["name"]="Hello";
2.4.6 案例:动态表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"></tbody>
</table>
<script>var my_array=[{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20}];for(var each in my_array) {var tr_la = document.createElement('tr');for (var key in my_array[each]) {var td_la = document.createElement('td');td_la.innerText = my_array[each][key];tr_la.appendChild(td_la);}document.getElementById('body').appendChild(tr_la)}
</script>
</body>
</html>

3.DOM

JavaScript DOM(文档对象模型) 是 JavaScript 的一个关键部分,通过它,开发者可以与网页的结构、内容和样式进行交互。DOM以树状结构的形式呈现文档,允许动态地选择、修改、添加和删除元素,实现页面的实时更新和用户交互。通过监听和响应事件,JavaScript DOM还使得开发者能够构建具有响应性和动态效果的现代网页应用,提升用户体验。

具体学习可以参考:JavaScript HTML DOM | 菜鸟教程 (runoob.com)

案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="re_text" placeholder="请输入内容...">
<input type="button" id="my_btn" onclick="f()" value="提交">
<ul id="language"></ul>
<script>function f() {//获取从输入框中获取的数据var text = document.getElementById('re_text').value;if (text.length!==0) {//创建<li></li>标签var la_li = document.createElement('li');//将从文本框中接收到的内容赋给<li></li>标签la_li.innerText = text;//获得id为'language'的标签var tag = document.getElementById('language');//将数据添加进去tag.appendChild(la_li)//最后将文本框中的字符串清除document.getElementById('re_text').value = "";}else{alert("输入内容为空!!!")}}
</script>
</body>
</html>

效果:

image-20240123114547822

4.jQuery

jQuery的东西很多,这里只展示一部分,更多请参考:jQuery API 文档

使用之前要引入:

<script src="static/jquery-3.7.1.min.js"></script>

4.1直接标签选择

4.1.1 ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="name1">Panda
</h1>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#name1').text('Hello')
</script>
</body>
</html>

<script></script>标签里面的$('#name1')是指找到ID为name1的标签。

4.1.2 样式选择器
<div class="c1">JAVA</div>
<div class="c1">Python</div>
<div class="c2">C/C++</div>
$('.c1')

$('.c1')是指找到所有样式名为c1的标签。

4.1.3 标签选择器
$('div')

是指找到所有标签为<div></div>的标签。

4.1.4 层级选择器
$('.c1 .c2 div')

是指找到应用样式c1的标签下应用c2样式的标签下的所有<div></div>标签。

4.1.5 多选择器
$('#name1,#name2,span')

是指找到所有的ID为name1和所有ID为name2和所有<span></span>标签。

4.1.6 属性选择器
$("div[class='name1']")

是指找到<div></div>标签里面class为name1的标签。

4.2间接标签选择

4.2.1 找到同级标签
<div><div>JAVA</div><div id="name1">Python</div><div>C/C++</div>
</div>
$('name1').prev();//找到前一个同级标签
$('name1').next();//找到后一个同级标签
$('name1').siblings()//找到所有的同级标签
4.2.2 找到父类和子类标签
$('name1').parent();//找到上一个父类标签
$('name1').children();//找到所有的子类标签

4.3案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="userid" placeholder="请输入学号">
<input type="text" id="username" placeholder="请输入用户名">
<input type="button" id="my_btn" value="提交">
<ul id="mylist"></ul>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#my_btn').click(function (){var id_user=$('#userid').val();var name_user=$('#username').val();var text=id_user+'-'+name_user;$('#mylist').append($('<li>').text(text));});
</script>
</body>
</html>

效果:
image-20240123180415807# 四、Flask学习之JavaScript

JavaScript,作为一种前端脚本语言,赋予网页生动的交互性和动态性。通过它,开发者能够操作DOM(文档对象模型)实现页面元素的动态改变、响应用户事件,并借助AJAX技术实现异步数据请求,为用户提供更流畅的浏览体验。在现代Web开发中,JavaScript不仅是构建丰富用户界面的关键工具,还被广泛应用于服务器端(Node.js)等多个领域,成为一门多用途、强大而灵活的编程语言。

1.下载jQuery(后续会用到)

jQuery 是一款被广泛应用的JavaScript库,旨在简化客户端脚本编写。通过提供便捷的DOM操作、事件处理、动画效果和AJAX请求等功能,jQuery极大地简化了跨浏览器的开发工作。其直观的API和优雅的语法使开发者能够更快速、更轻松地创建交互性强、用户体验良好的网页和Web应用。

下载官网:jQuery,然后找到Download,找到压缩版:

image-20240122163656613

直接复制链接去某网盘或者某雷新建任务下载就行。

2.初识JavaScript

2.1简单示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.name1{background-color: pink;}.name2{text-align: center;}</style>
</head>
<body>
<div class="name1"><div class="name2" onclick="f()"><h1>欢迎访问本系统</h1></div>
</div>
<script type="text/javascript">function f() {confirm("确定吗?")}
</script>
</body>
</html>

效果:当点击标题一所在的区域时,会弹出一个框

image-20240122170208041

2.2代码位置

JavaScript代码在HTML文件中,有两种存放位置,一种是在<head>标签里面,但一定要在<style>标签后面;另一种是在<body>标签里面,但也要在最后的位置,如上的示例代码。推荐使用第二种,因为HTML文件是从上往下进行执行的,如果<script>标签里面有非常耗时的动作,有可能下面的HTML页面显示不出来,所以推荐使用第二种。

2.3存在形式

  1. 直接写在当前的HTML文件中(如上面的例子)

  2. 写在一个文件中,然后导入

    <script src="你的js存放目录"></script>
    

以上两种存在形式的代码的位置同上。

2.4基础知识

2.4.1 变量

Javascript在定义变量的时候是使用var关键字来定义的:var a="panda";

在 2015 年以前,使用 var 关键字来声明 JavaScript 变量。

在 2015 后的 JavaScript 版本 (ES6) 允许使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。

在打印变量的时候使用:console.log(a);

2.4.2 字符串
1.声明

一个字符串可以使用单引号或双引号,或者使用String():

var name1 = "panda";
var name2 = String("panda");
document.write(name1 + '<p>');
document.write(name2 + '<p>')
2. 索引

使用位置(索引)可以访问字符串中任何的字符,字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

var name1 = "panda";
document.write(name1 + '<p>');
document.write(name1[0])
3. length属性

字符串(String)使用长度属性length来计算字符串的长度:

var txt="Hello World!";
document.write(txt.length);
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);
4. 查找

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
5. 切片
var name1 = "panda";
document.write(name1.substring(2,4));

substring()的参数遵循左闭右开的原则,比如上面的例子,会输出nd

更详细的内容可以参考JavaScript String 对象 | 菜鸟教程 (runoob.com)

2.4.3 案例:跑马灯
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="text-align: center;background-color: pink;font-weight: bolder" id="name1">编程如画,我是panda!
</div>
<script>function display() {var receive = document.getElementById("name1");var reString = receive.innerText;receive.innerText = reString.substring(1, reString.length) + reString[0];}// 这个函数相当于定时器,第一个参数是指要执行的函数名,第二个参数是指间隔多少毫秒setInterval(display, 1000)
</script>
</body>
</html>
2.4.4 数组
1. 声明
var a1=[1,2,3,4,5];//直接声明
var a2=Array(1,2,3,4,5);//内置声明
2. 修改

对于索引,数组与字符串一样,下标均为0到length-1,修改数组中某个元素的时候,直接使用索引即可,例如:

var a1=[1,2,3,4,5];
a1[0]="panda";
3. 添加和删除
var a1=[1,2,3,4,5];
//在尾部添加
a1.push(6);
//在头部添加
a1.unshift(0);
/*在指定位置添加:
第一个参数是要添加元素的索引,
第二个元素是要从规定索引处删除元素的个数,如果是0就是不删除,
第三个元素是指要添加的元素*/
a1.splice(1,0,"panda")
a1.pop();//删除最后一个元素
a1.shift();//删除第一个元素
document.write(a1);
2.4.5 案例:动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul id="language">
</ul>
<script>var languageList=["C","C++","JAVA","Python","PHP"];for (var idx in languageList){var text = languageList[idx];//创建<li></li>标签var la=document.createElement("li");la.innerText=text;document.getElementById("language").appendChild(la);}
</script>
</body>
</html>
2.4.6 对象(字典)
1. 定义(声明)

两种方式:可以带引号也可以不带

my_dict={"name":"panda","age":20
}
my_dict2={name:"panda",age:20
}
2. 修改

直接使用成员运算符或者使用Python中字典的方式:

my_dict.name="你好";
my_dict["name"]="Hello";
2.4.6 案例:动态表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"></tbody>
</table>
<script>var my_array=[{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20}];for(var each in my_array) {var tr_la = document.createElement('tr');for (var key in my_array[each]) {var td_la = document.createElement('td');td_la.innerText = my_array[each][key];tr_la.appendChild(td_la);}document.getElementById('body').appendChild(tr_la)}
</script>
</body>
</html>

3.DOM

JavaScript DOM(文档对象模型) 是 JavaScript 的一个关键部分,通过它,开发者可以与网页的结构、内容和样式进行交互。DOM以树状结构的形式呈现文档,允许动态地选择、修改、添加和删除元素,实现页面的实时更新和用户交互。通过监听和响应事件,JavaScript DOM还使得开发者能够构建具有响应性和动态效果的现代网页应用,提升用户体验。

具体学习可以参考:JavaScript HTML DOM | 菜鸟教程 (runoob.com)

案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="re_text" placeholder="请输入内容...">
<input type="button" id="my_btn" onclick="f()" value="提交">
<ul id="language"></ul>
<script>function f() {//获取从输入框中获取的数据var text = document.getElementById('re_text').value;if (text.length!==0) {//创建<li></li>标签var la_li = document.createElement('li');//将从文本框中接收到的内容赋给<li></li>标签la_li.innerText = text;//获得id为'language'的标签var tag = document.getElementById('language');//将数据添加进去tag.appendChild(la_li)//最后将文本框中的字符串清除document.getElementById('re_text').value = "";}else{alert("输入内容为空!!!")}}
</script>
</body>
</html>

效果:

image-20240123114547822

4.jQuery

jQuery的东西很多,这里只展示一部分,更多请参考:jQuery API 文档

使用之前要引入:

<script src="static/jquery-3.7.1.min.js"></script>

4.1直接标签选择

4.1.1 ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="name1">Panda
</h1>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#name1').text('Hello')
</script>
</body>
</html>

<script></script>标签里面的$('#name1')是指找到ID为name1的标签。

4.1.2 样式选择器
<div class="c1">JAVA</div>
<div class="c1">Python</div>
<div class="c2">C/C++</div>
$('.c1')

$('.c1')是指找到所有样式名为c1的标签。

4.1.3 标签选择器
$('div')

是指找到所有标签为<div></div>的标签。

4.1.4 层级选择器
$('.c1 .c2 div')

是指找到应用样式c1的标签下应用c2样式的标签下的所有<div></div>标签。

4.1.5 多选择器
$('#name1,#name2,span')

是指找到所有的ID为name1和所有ID为name2和所有<span></span>标签。

4.1.6 属性选择器
$("div[class='name1']")

是指找到<div></div>标签里面class为name1的标签。

4.2间接标签选择

4.2.1 找到同级标签
<div><div>JAVA</div><div id="name1">Python</div><div>C/C++</div>
</div>
$('name1').prev();//找到前一个同级标签
$('name1').next();//找到后一个同级标签
$('name1').siblings()//找到所有的同级标签
4.2.2 找到父类和子类标签
$('name1').parent();//找到上一个父类标签
$('name1').children();//找到所有的子类标签

4.3案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="userid" placeholder="请输入学号">
<input type="text" id="username" placeholder="请输入用户名">
<input type="button" id="my_btn" value="提交">
<ul id="mylist"></ul>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#my_btn').click(function (){var id_user=$('#userid').val();var name_user=$('#username').val();var text=id_user+'-'+name_user;$('#mylist').append($('<li>').text(text));});
</script>
</body>
</html>

效果:
image-20240123180415807

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

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

相关文章

云计算项目五:部署数据库服务mysql |部署共享存储服务NFS | 配置网站服务

部署数据库服务mysql |部署共享存储服务NFS | 配置网站服务 案例1:配置逻辑卷步骤一:创建LV步骤二:格式化案例2:配置数据库服务器步骤一:安装软件MySQL服务软件(2台数据库服务器都要安装)步骤二:挂载lv设备步骤三:启动服务步骤四:管理员登录案例3:配置主从同步步骤一…

网工内推 | 国企、合资公司IT专员,13薪,NA以上即可

01 上海新徐汇&#xff08;集团&#xff09;有限公司 招聘岗位&#xff1a;IT运维 职责描述&#xff1a; 1.负责制定网络体系搭建、IP地址分配、网络拓扑图、无线网络等&#xff1b; 2.负责桌面运维技术支持&#xff0c;确保各类系统和终端设备正常工作&#xff1b; 3.负责弱电…

【并发编程】活锁

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳重求进&#xff0c;晒太阳 活锁 定义&#xff1a;活锁出现在两个线程互相改变对象的结束条件&#xff0c;最后谁也无法结束 代码示例 public class TestLiveLock {stati…

微机原理常考填空以及注意事项第(三)弹~

前面已经总结了200个常考题注意事项&#xff0c;可以翻阅查看。 以下仅个人总结的易错以及注意事项&#xff1a; 1&#xff0c;汇编语言源程序的基本格式&#xff1a; DATA SEGMENT;存放数据项的数据段 DATA ENDS EXTRA SEGMENT;存放数据项的附加段 EXTRA ENDS STACK1 SEGM…

React实现字符串首字母大写、翻转字符串、获取用户选定的文本

目录 React实现字符串首字母大写React实现翻转字符串React获取用户选定的文本 React实现字符串首字母大写 import React, { useState } from reactfunction App() {const [inputText, setInputText] useState()const [outputText, setOutputText] useState()const handleInpu…

编辑图片加文字的软件?分享4款!

在数字时代&#xff0c;图片和文字的结合已经成为信息传递的重要方式。为了满足广大自媒体人和内容创作者的需求&#xff0c;本文将为您推荐几款编辑图片加文字的软件&#xff0c;帮助您轻松实现创意表达。 魔法抠图大师 作为一款专业的图片编辑软件&#xff0c;还提供了多种编…

四、MyBatis 动态语句

本章概要 动态语句需求和简介if 和 where 标签set 标签trim 标签(了解)choose/when/otherwise 标签foreach 标签sql 片段 4.1 动态语句需求和简介 经常遇到很多按照很多查询条件进行查询的情况&#xff0c;比如智联招聘的职位搜索等。其中经常出现很多条件不取值的情况&#…

IDEA插件(MyBatis Log Free)

引言 在Java开发中&#xff0c;MyBatis 是一款广泛使用的持久层框架&#xff0c;它简化了SQL映射并提供了强大的数据访问能力。为了更好地调试和优化MyBatis应用中的SQL语句执行&#xff0c;一款名为 MyBatis Log Free 的 IntelliJ IDEA 插件应运而生。这款插件旨在帮助开发者…

STM32F407移植OpenHarmony笔记1

参考文档&#xff1a; OpenAtom OpenHarmonywidthdevice-width,initial-scale1.0https://docs.openharmony.cn/pages/v3.2/zh-cn/device-dev/get-code/gettools-acquire.md/ 搭建环境 安装linux系统: Ubuntu 22.04.2 LTS (GNU/Linux 5.15.0-91-generic x86_64) 下载源代码&a…

2分钟搞定《幻兽帕鲁》联机服务,真爽!

2分钟搞定《幻兽帕鲁》联机服务&#xff0c;真爽&#xff01;教程 https://t.aliyun.com/U/DKivPS 幻兽帕鲁是Pocketpair开发的一款开放世界生存制作游戏&#xff0c;游戏于2024年1月18日发行抢先体验版本。游戏中&#xff0c;玩家可以在广阔的世界中收集神奇的生物“帕鲁”&a…

Zabbix 整合 Prometheus:案例分享与操作指南

一、简介 Zabbix 和 Prometheus 都是流行的开源监控工具&#xff0c;它们各自具有独特的优势。Zabbix 主要用于网络和系统监控&#xff0c;而 Prometheus 则专注于开源的分布式时间序列数据库。在某些场景下&#xff0c;将这两个工具整合在一起可以更好地发挥它们的优势&#…

论文阅读:Vary-toy论文阅读笔记

目录 引言整体结构图方法介绍训练vision vocabulary阶段PDF数据目标检测数据 训练Vary-toy阶段Vary-toy结构数据集情况 引言 论文&#xff1a;Small Language Model Meets with Reinforced Vision Vocabulary Paper | Github | Demo 说来也巧&#xff0c;之前在写论文阅读&…