day6JS-DOM(文档对象模型)
DOM树
DOM 操作
1. 获取元素
1.1 根据id名获取元素
document.getElementById("id名");案例：
<body><div id="box">div盒子</div><h1>一级标题</h1><script>console.log(document.getElementById("box"))</script>
</body>1.2 根据标签名获取
// 返回一个集合 （类数组对象）从整个文档获取
document.getElementsByTagName("标签名") // 从element的后代元素中获取
element.getElementsByTagName("标签名") 案例：
<body><div id="box">div盒子</div><h1>一级标题</h1><p>段落1</p><p>段落2</p><p>段落3</p><script>//获取到文档中所有的p标签，返回的是一个集合console.log(document.getElementsByTagName("p"))</script>
</body>1.3 根据类名获取（不兼容ie6~8）
// 返回一个集合（类数组对象） 从整个文档获取
document.getElementsByClassName("class名") // 从element的后代中获取
element.getElementsByClassName("class名") 案例：
<body><div class="box">div盒子</div><h1>一级标题</h1><p>段落1</p><p>段落2</p><p>段落3</p><script>console.log(document.getElementsByClassName("box"))</script>
</body>1.4 根据 name 属性值获取(适用于表单标签)
正常的规范中，咱们只会给表单元素起name值，如果给其它元素设置name，在ie9以下版本浏览器不兼容，是获取不到的，所以为了这种情况，咱们以后养成习惯，只给表单元素用name，非表单元素不用name。
//返回集合，只有document才有该方法
document.getElementsByName("name属性的值") 案例：
<body>用户名：<input type="text" name="usename" value="">用户名：<input type="password" name="pwd" value=""><script>console.log(document.getElementsByName("usename"))</script>
</body>1.5 根据css选择器获取（重点记忆）
注意：querySelector（） 和querySelectorAll（） 在ie6-ie8 下不兼容。
//选择器第一个满足选择器条件的
document.querySelector(选择器)
//选择所有满足选择器条件的，返回nodeList（类数组对象）
document.querySelectorAll(选择器) element.querySelector(选择器)
element.querySelectorAll(选择器)案例：
<body><div id="divbox"><p class="pbox">段落1</p><p>段落2</p>用户名：<input type="text" name="usename" value=""></div><script>//querySelector只能获取第一个符合条件的元素console.log(document.querySelector("#divbox"))console.log(document.querySelector(".pbox"))console.log(document.querySelector("#divbox p"))// querySelectorAll获取所有符合条件的元素，返回的是集合console.log(document.querySelectorAll("#divbox"))console.log(document.querySelectorAll(".pbox"))console.log(document.querySelectorAll("#divbox p"))console.log(document.querySelectorAll("input"))</script>
</body>注意！！！
根据css选择器获取时，是什么选择器就要带上该选择器的语法符号。
例如：id选择器 ---- #选择器名； 类选择器 ---- .选择器名
1.6 获取Head元素对象
document.head 案例：
<body><script>console.log(document.head);</script>
</body>1.7 获取body元素对象
document.body案例：
<body><script>console.log(document.body);</script>
</body>1.8 获取html元素对象
document.documentElement案例：
<body><script>console.log(document.documentElement);</script>
</body>1.9 获取一屏幕的宽度或者高度
// 获取一屏幕的高度
let vH = document.documentElement.clientHeight || document.body.clientHeight;// 获取一屏幕的宽度
let vW = document.documentElement.clientWidth || document.body.clientWidth;1.10 id小妙招
直接把id当成变量去用的时候，可以获取相应的id元素。（浏览器的机制）。
<div id="box1">111</div>
<script>console.log(box1)
</script>2. 节点
2.1 常用的节点5个
- 文档节点
- 属性节点
- 元素（标签）节点
- 文本节点
- 注释节点
2.2 文档节点
- nodeType（节点类型）：9（类型值9就是文档节点）
- nodeName（节点名称）：" #document "
- nodeValue（节点值）: null
案例:
<body><script>console.log(document.nodeType);//9console.log(document.nodeName);//#documentconsole.log(document.nodeValue);//null</script>
</body>2.3 元素节点（重点记忆）
- nodeType（节点类型）：1（类型值1就是元素节点）
- nodeName（节点名称）：大写的标签名
- nodeValue（节点值）: null
案例：
<body><div id="box">111</div><div class="one">222</div><h1>大标题</h1><script>// 1.根据id属性先获取元素let divBox = document.getElementById("box");console.log(divBox.nodeType);//1console.log(divBox.nodeName);//DIVconsole.log(divBox.nodeValue);//nulllet divBox2 = document.querySelector("h1");console.log(divBox2.nodeType);//1console.log(divBox2.nodeName);//H1console.log(divBox2.nodeValue);//null</script>
</body>2.4 属性节点
- nodeType（节点类型）：2（类型值2就是属性节点）
- nodeName（节点名称）：属性名
- nodeValue（节点值）: 属性值
getAttributeNode("属性名") 方法从当前元素中通过属性名称获取属性节点。
案例：
<body><div id="box" class="one" name="xiaoxiao">111</div><script>// 1.先获取属性var myclass1 = box.getAttributeNode("class");// 2.在控制台输出console.log(myclass1);//class="one"console.log(myclass1.nodeType);//2console.log(myclass1.nodeName);//classconsole.log(myclass1.nodeValue);//one// 1.先获取属性var myclass2 = box.getAttributeNode("name");// 2.在控制台输出console.log(myclass2);//name="xiaoxiao"console.log(myclass2.nodeType);//2console.log(myclass2.nodeName);//nameconsole.log(myclass2.nodeValue);//xiaoxiao</script>
</body>2.5 文本节点
- nodeType（节点类型）：3（类型值3就是文本节点）
- nodeName（节点名称）：" # text "
- nodeValue（节点值）: 文本内容
- 在标准浏览器中，换行和空格也属于文本节点
使用childNodes方法获得文本内容。
案例：
<body><div id="box">111</div><div class="one">222</div><h1>大标题</h1><script>// 1.根据id属性先获取元素let h1Box = document.querySelector("h1");let textBox = h1Box.childNodes[0];console.log(textBox);//"大标题"console.log(textBox.nodeType);//3console.log(textBox.nodeName);//#textconsole.log(textBox.nodeValue);//大标题</script>
</body>2.6 注释节点
- nodeType（节点类型）：8（类型值8就是注释节点）
- nodeName（节点名称）：" #comment "
- nodeValue（节点值）: 注释的内容
<body><!--这是一个div --><div id="box">111</div><script>let commentBox = document.body.childNodes[1];console.log(commentBox);//<!--这是一个div -->console.log(commentBox.nodeType);//8console.log(commentBox.nodeName);//#commentconsole.log(commentBox.nodeValue);//这是一个div</script>
</body>3. 节点之间关系的属性
3.1 节点类
parentNode ：父节点。
childNodes ：所有子节点的集合。
firstChild ：第一个子节点。
lastChild ：最后一个子节点。
previousSibling ：上一个兄弟节点。
nextSibling ：下一个兄弟节点。
3.2 元素类
children ：所有子元素的集合。
firstElementChild ：第一个子元素 IE9+。
lastElementChild ：最后一个子元素 IE9+。
previousElementSibling ：上一个兄弟元素 IE9+。
nextElementSibling ：下一个兄弟元素 IE9+。
4. 节点查找方式
4.1 parentNode（父节点）
获取当前节点唯一的父亲节点。
<body><div id="box">111</div><script>console.log(box.parentNode);</script>
</body>4.2 childNodes（子节点）
获取当前节点所有的子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><script>console.log(ulBox.childNodes);//NodeList(7)</script>
</body>注意！！！
在js中换行和空格也算是text文本内容。
4.3 firstChild
获取当前节点的第一个子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><script>console.log(ulBox.firstChild);//#text</script>
</body>4.4 lastChild
获取被选节点的最后一个子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><script>console.log(ulBox.lastChild);//#text</script>
</body>4.5 previousSibling
获取当前节点的上一个兄弟节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.previousSibling);//#text</script>
</body>4.6 nextSibling
获取当前节点的下一个兄弟节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.nextSibling);//#text</script>
</body>5. 元素查找方式
5.1 children
获取当前元素所有的元素子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.children);//[li,li,li]</script>
</body>5.2 firstElementChild
获取当前节点的第一个元素子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.firstElementChild);//<li>查找子节点1</li></script>
</body>5.3 lastElementChild
获取当前节点的最后一个元素子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.lastElementChild);//<li>查找子节点3</li></script>
</body>5.4 previousElementSibling
获取当前节点的上一个兄弟元素节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.previousElementSibling);//<div id="box">111</div></script>
</body>5.5 nextElementSibling
获取当前节点的下一个兄弟元素节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.nextElementSibling);//<h1>标题</h1></script>
</body>6.练习题
使用previousSibling编写出previousElementSibling的效果。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>function getPreviousSibling(itme) {let getPrevious = itme.previousSibling;while (getPrevious && getPrevious.nodeType !== 1) {getPrevious = getPrevious.previousSibling;}return getPrevious;}let ulBox = document.querySelector("#ulBox");let result = getPreviousSibling(ulBox);console.log(result);</script>
</body>DOM 的增删改
1. createElement：创建一个元素
document.createElement("标签名");案例：
<body><script>// 1.创建标签let div = document.createElement("div");// 2.给标签添加内容div.innerHTML = "这是一个div标签";// 3.把标签写入页面document.body.appendChild(div);</script>
</body>2. createTextNode: 创建一个文本节点
var/let 变量名 = document.createTextNode("文本内容");案例：
<body><script>// 1.创建标签let div = document.createElement("div");// 2.给标签添加内容let divText = document.createTextNode("这是一个div标签");div.appendChild(divText);// 3.把标签写入页面document.body.appendChild(div);</script>
</body>3. appendChild: 把元素追加到一个容器的末尾
语法：父元素.appendChild(子元素)；
<body><script>// 1.创建标签let div = document.createElement("div");// 2.给标签添加内容let divText = document.createTextNode("这是一个div标签");div.appendChild(divText);// 3.把标签写入页面document.body.appendChild(div);</script>
</body>4. insertBefore: 把一个元素插入到另一个元素的前面
步骤一：创建一个标签（元素）。
步骤二：给标签（元素）添加内容。
步骤三：获取到指定一个父节点。然后父节点使用insertBefore插入。
语法：
var/let 变量名 = 父节点.insertBefore(新的子元素, 旧的子元素)案例：
<body><ul><li>1</li><li id="two">2</li></ul><script>// 1.创建标签let li = document.createElement("li");// 2.给标签添加内容li.innerHTML = "3";// 3.获取到要加入的父元素let ulParent = document.querySelector("ul");// 4. 将新元素插入到旧的元素之前ulParent.insertBefore(li, two);</script>
</body>使用该方法还可以交换标签的位置。
<body><ul><li id="one">1</li><li id="two">2</li></ul><script>// 1.获取到要加入的父元素let ulParent = document.querySelector("ul");// 1. 交换位置ulParent.insertBefore(two, one);</script>
</body>5. cloneNode: 把某一个节点进行克隆
- cloneNode()浅克隆： 只是克隆了一个节点，里面的内容还有样式都没克隆。
- cloneNode(true)深克隆：把节点包含的所有内容和样式进行克隆。
<body><ul><li id="one" style="color: red">111</li><li id="two">222</li></ul><script>// 1.获取到要克隆的元素let ulParent = document.querySelector("ul");// 2. 无参，只克隆了一个节点，不克隆样式let con1 = ulParent.cloneNode();document.body.appendChild(con1);//页面不显示内容// 3. 有参，既有内容，又有样式let con2 = ulParent.cloneNode(true);document.body.appendChild(con2);</script>
</body>6. removeChild：移除某个节点
【context】.removeChild(ele);
<body><ul><li id="one" style="color: red">111</li><li id="two">222</li></ul><script>// 1.获取到要克隆的元素let ulParent = document.querySelector("ul");ulParent.removeChild(one);console.log(ulParent);</script>
</body>7. set/get/removeAttribute()
- setAttribute()：设置当前元素的某一个自定义属性。
- getAttribute()：获取当前元素的某一个自定义属性。
- removeAttribute()：删除当前元素的某一个自定义属性。
box.setAttribute("index", 1);
box.getAttribute("index");
box.removeAttribute("index");
console.log(box)
// 设置
// box["aa"] = 22;
// 获取
// box["aa"]
//移除
// delete box["aa"];基于键值对方式增删改：修改当前对象的堆内存空间完成的（在堆内存空间可以看到）
基于Attribute dom方法增删改，是修改html结构来完成的（此种方法设置的在结构上可以看到）。
以上两种方式不能混用
8. 练习题
利用a标签的href来重新获取url参数。
前置知识：a标签的两个方法：
<a href="http://www.zhufengpeixun.cn?name=lili&age=18#123"></a>a.search ：截取网址？（包括？）之后的内容。例如：?name=lili&age=18
a.hash：截取网址#（包括#）之后的内容。例如：#123
<body><a href="http://www.zhufengpeixun.cn?name=lili&age=18#123"></a><script>function getUrl() {let a = document.querySelector("a");let obj = {};obj.hash = a.hash.slice(1);let searchStr = a.search.slice(1).split("&");for (let i = 0; i < searchStr.length; i++) {let arr = searchStr[i].split("=");obj[arr[0]] = arr[1];}return obj;}console.log(getUrl());</script>
</body>相关文章：
day6JS-DOM(文档对象模型)
DOM树 DOM 操作 1. 获取元素 1.1 根据id名获取元素 document.getElementById("id名"); 案例： <body><div id"box">div盒子</div><h1>一级标题</h1><script>console.log(document.getElementById(&quo…...
MySQL列表分区分区表
什么是列表分区分区表？ 列表分区是一种根据某个列的离散值将表数据分割成多个分区的分区方式。在列表分区中，每个分区都有自己的离散值集合，当插入数据时，MySQL会根据指定的列值将数据分配到相应的分区中。这种分区方式可以使得表…...
qt打包程序方法（非常好用）
1.下载 Index of /official_releases/qt-installer-framework/4.6.1 bi...
IP地址管理：优化网络布局与提升效率
在日益复杂的网络环境中，IP地址管理成为了网络管理员日常工作中不可或缺的一部分。有效的IP地址管理不仅能够优化网络布局，提升网络运行效率，还能确保网络安全和稳定性。本文将探讨IP地址管理的重要性、实施策略以及最佳实践。 一、IP地址管…...
老古董Lisp实用主义入门教程（5）：好奇先生用Lisp探索Lisp
鲁莽先生什么都不管 鲁莽先生打开电脑，安装一堆东西，噼里啪啦敲了一堆代码，叽里呱啦说了一堆话，然后累了就回家睡觉了。 这可把好奇先生的兴趣勾起来，他怎么也睡不着。好奇先生打开电脑，看了看鲁莽先生留…...
linux文件——用户缓冲区——概念深度理解、IO模拟实现
前言：本篇文章主要讲解文件缓冲区。 讲解的方式是通过抛出问题， 然后通过分析问题， 将缓冲区的概念与原理一步一步地讲解。同时， 本节内容在最后一部分还会带友友们模拟实现一下c语言的printf， fprintf接口，…...
Selenium模拟鼠标滚动页面：实现自动化测试中的页面交互
Selenium模拟鼠标滚动页面：实现自动化测试中的页面交互 在进行网页自动化测试时，经常需要模拟用户的滚动行为来加载更多内容或触发页面上的某些交互。Selenium WebDriver提供了强大的工具来模拟这些用户行为，包括鼠标滚动。本文将介绍如何使…...
Eureka原理与实践：构建高效的微服务架构
Eureka原理与实践：构建高效的微服务架构 Eureka的核心原理Eureka Server：服务注册中心Eureka Client：服务提供者与服务消费者 Eureka的实践应用集成Eureka到Spring Cloud项目中创建Eureka Server创建Eureka Client（服务提供者&…...
OpenJDK 和 OracleJDK 的区别、下载方式
OpenJDK 和 OracleJDK 都是 Java 开发套件 (JDK)，用于开发和运行 Java 应用程序。它们之间的主要区别如下： 许可证和使用限制： OpenJDK：由 OpenJDK 社区开发和维护，基于 GPL v2 with Classpath Exception 许可证&#…...
arthas源码刨析：arthas-core (2)
文章目录 attach JVMagent**ArthasBootstrap** arthas-core的启动可以从上一篇做参考 参考 pom，即启动是调用的 Arthas 的 main 方法 attach JVM JVM提供了 Java Attach 功能，能够让客户端与目标JVM进行通讯从而获取JVM运行时的数据，甚至可以…...
【分享】格力手机色界G0245D 刷REC、root、 救砖、第三方rom教程和资源
开门见山 帮别人弄了一台 格力G0245D，把找到的资源和教程分享一下 教程 这个写的很详细了格力手机色界G0245D-Root-最简指南 不过教程里刷rec这一步漏了加上电源键，加上就行了。 附加参考：格力手机2刷机 格力手机二代刷机 GREE G0215D刷机…...
开学必备清单来啦！大学好物合集推荐！每一个都能帮你提升幸福感
随着开学季的到来，好多学生都在忙着准备各类学习与生活必需品，以迎接新的大学生活到来。以下是一些开学季必备的好物推荐，每一个都很实用，可以帮你提升学习和生活的幸福感！ 1、西圣电容笔 一句话推荐：公认…...
已解决：javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！
1. 问题描述 javax.xml.transform.TransformerFactoryConfigurationError 是在使用 Java 的 XML 处理库时，配置 TransformerFactory 出错时抛出的异常。通常，这个异常发生在应用程序试图创建一个 TransformerFactory 实例时，由于无法找到合适…...
商品价格与优惠信息在API返回值中的位置
在API返回值中，商品价格与优惠信息的具体位置可能因不同的电商平台和API设计而有所不同。然而，一般来说，这些信息会以结构化的方式呈现，通常包含在一个包含多个字段的JSON对象或XML文档中。以下是根据多个电商平台（如阿…...
Oracle Index Partition索引分区的管理
Oracle索引分区的管理是数据库管理中的重要任务之一，它涉及索引的创建、维护、重建以及优化等多个方面。以下是对Oracle索引分区管理的详细解析： 一、索引分区的概念 索引分区（Partitioned Index）是针对分区表而言的，…...
统信UOS系统访问windows共享目录
问题背景 当我们使用UOS系统的时候，想要访问windows系统的一些资料并将其拷贝下来使用的话，应该怎么操作呢？这个需求是可以实现的，统信UOS系统是基于Linux系统开发的，Linux系统和windows系统之间可以通过SMB协议来共享…...
单一职责原则与REST API设计：如何定义清晰的资源与职责
在软件设计中，单一职责原则（Single Responsibility Principle, SRP）和 REST API 设计是两个重要的概念。单一职责原则是一种设计原则，它强调一个类或模块应当只有一个单一的职责，这有助于提高系统的可维护性和扩展性。…...
JAVA IO模型
我们在平常开发过程中接触最多的就是 磁盘 IO（读写文件） 和 网络 IO（网络请求和响应）。从应用程序的视角来看的话，我们的应用程序对操作系统的内核发起 IO 调用（系统调用），操作系统负…...
《C/C++实战专栏》介绍
🚀 前言 本文是《C/C实战专栏》专栏的说明贴（点击链接，跳转到专栏主页，欢迎订阅，持续更新…）。 专栏介绍：以多年的开发实战为基础，总结并讲解一些的C/C基础与项目实战进阶内容&…...
前端跨域2
前端跨域2 前端跨域解决方案（11种方案） 1.JSONP跨域解决方案的底层原理 script、img、link、iframe...<script src"https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>// 这个就是因为script标签没有跨域限制࿰…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...