Vue之axios请求

news2024/11/17 17:51:37

Vue之axios请求

axios请求, 是Vue前端框架非常重要的一部分, 今天我们就讲解axios请求, 到底有什么作用, 以及会告诉大家axios的常见用法。

axios请求, 是网页向后端发起请求, 后端吧数据给我们网页, 这是一个前后端交互的过程。当我们学会了axios, 我们可以实现前端和后端练习起来, 这个数据就是由后端来决定的, 而不是在前端写死了的。

如果我们在axios里面想要使用axios请求。
那我们需要在html里面引入axios:

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

这个axios.js文件如何下载?
我们打开命令行cmd:
然后切换路径到桌面
最后我们用命令行下载东西
curl -o 文件名(包含后缀) 文件链接url

// 分别输入这两行命令在cmd里面
cd Desktop
curl -o axios.js http://121.40.144.4:880/AxiosResource/axios.js


我们返回到桌面, 会发现axios.js文件

我们将这个文件放入到项目当中:

这次我们学习需要用到以前已经下载好的vue.js和现在下载好的axios.js。

好了, 我们进入今天的主题, 今天的主题分为三个部分:

1.如何使用axios

2.在vue里面如何发起请求

3.使用axios完成学员管理系统

一、如何使用axios

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 网络发起网络请求  那就必须引入这个库 -->
		<!-- 1.引入库 -->
		<script src="axios.js"></script>
		<!-- 2.使用库 -->
		<script>
			// 网页向后端发起请求  后端吧数据给我们网页 前后端交互
			// 引入进来了 就会有一个axios方法
			// 这个方法里面是一个对象 里面是键值对存储
			axios({
				// 一、我要向谁发请求
				// url就能存储发请求的后端
				url: "http://43.136.104.16:3002/chaxun",
				// 请求方式(GET, POST, PUT, DELETE等) 请求方法 不要加s 和vue里面的事件源要区分开来, 这两个不是一个东西
				// get 请求方式 可以大写也可以小写 常见的请求方式 get post
				method: "GET",
				// then方法 可以获取响应回来的数据 里面有一个回调函数
				// 里面有一个默认的形参
			}).then((res) => {
				// res获取到的数据很多 但是我们只需要data里面的数据
				console.log(res.data);
			});
		</script>
	</body>
</html>

我们分析一下axios里面的一些参数:
当我们需要用axios请求的时候, 我们用到了axios({})这样的写法。
axios函数里面存的是一个对象objects(这个和python的字典还有Java的Hash很像)
在axios方法里面的对象里面的参数:

  1. url, 这个参数就是我目标要请求的后端数据。
  2. method, 请求方式(GET, POST, PUT, DELETE等) 请求方法 不要加s 和vue里面的事件源要区分开来, 这两个不是一个东西。
  3. params(只有GET请求才能够使用这个参数)。
  4. data(只有POST请求才能够使用这个参数)。
    注意: 3和4这两个, 在后面讲到学员管理系统的时候, 都会用到。

在axios()方法后面还有.then()方法, 在then里面是一种匿名函数的写法, then方法 可以获取响应回来的数据, 里面有一个回调函数, 里面有一个默认的形参

then((res) => {
    console.log(res);
});

我们在控制台里面看一看会打印什么内容:

我们很清晰的可以发现, 有三个字段, age年龄, id代表唯一标识的id号, name名字。
我们将网址放到网页上去看一看:

返回的就是我们分析的那三个字段。

二、在vue里面如何发起请求

用GET方法请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="findAll()">点击发起请求 获取用户数据</button>
		</div>
		<!-- 1.引用vue包 -->
		<script src="vue.js"></script>
		<!-- 2.引用axios包 -->
		<script src="axios.js"></script>
		<!-- 3.使用vue框架 -->
		<script>
			new Vue({
				el: "#app",
				data: {
					// 数据源
				},
				// 你要发请求 肯定是需要做什么事情
				methods: {
					// 可以在这个事件里面发请求
					findAll(){
						axios({
							url: "http://43.136.104.16:3002/chaxun", // 请求地址
							method: "GET" // 请求方式
						}).then((res) => {
							console.log(res.data);
						});
					}
				}
			});
		</script>
	</body>
</html>

结果:
在按钮点击之前, 控制台里面没有任何输出

在点击按钮之后

我们会发现, 有数据在控制台里面打印出来了, 没错, 这个就是我们使用axios来请求的后端的数据。
注意: 我们在then函数里面有个res.data的写法, 这里我们讲解一下, 因为这里面后端返回的数据, 是以json格式返回, json格式本就是一个对象(键值对的形式), 里面有一个data属性, 在data属性里面, 返回的很多个对象。

我们打印res看一看效果:

console.log(res);


里面就有data字段, 这就再一次印证了上面所说的那些。

那问题来了, 我们如何实现不点击按钮, 让浏览器一打开的时候, 自己获取数据呢?

这个其实很简单, 我们这里需要用到created方法
和methods属性同级, 下面写上created(){}

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="findAll()">点击发起请求 获取用户数据</button>
		</div>
		<!-- 1.引用vue包 -->
		<script src="vue.js"></script>
		<!-- 2.引用axios包 -->
		<script src="axios.js"></script>
		<!-- 3.使用vue框架 -->
		<script>
			new Vue({
				el: "#app",
				data: {
					// 数据源
				},
				// 你要发请求 肯定是需要做什么事情
				methods: {
					// 可以在这个事件里面发请求
					findAll(){
						axios({
							url: "http://43.136.104.16:3002/chaxun", // 请求地址
							method: "GET" // 请求方式
						}).then((res) => {
							console.log(res.data);
						});
					}
				},
				// 你一打开这个网页, 就让他自动执行
				created(){
					// 一打开网页, 就能够自动请求数据
					this.findAll();
				}
			});
		</script>
	</body>
</html>

前面的代码不动, 就在后面写上这些代码:

// 你一打开这个网页, 就让他自动执行
created(){
	// 一打开网页, 就能够自动请求数据
	this.findAll();
}

结果:
打开网页之后

我们现在就可以直接获取数据啦!!!

三、使用axios完成学员管理系统

我们先看一看学员管理系统做出来的效果:

代码:
html标签部分:

<!-- 最外面的大盒子 -->
		<div id="app">
			<div class="fun">
				<!-- 标题 -->
				<h1>学员管理系统</h1>
				<!-- 输入框和按钮 -->
				姓名<input type="text" v-model="name"/>
				年龄<input type="text" v-model="age"/>
				<button @click="add()">点击添加学员</button>
				<!-- 操作栏 -->
				<div class="demo">
					<div class="item">学员id</div>
					<div class="item">学员姓名</div>
					<div class="item">学员年龄</div>
					<div class="item">操作模块</div>
				</div>
				<!-- 内容 -->
				<div class="demo" v-for="item in userdata" :key="item.id">
					<!-- 内容渲染指令 把数据里面的数据 渲染到页面上面 不是什么时候都需要写{{}}-->
					<div class="item">{{item.id}}</div>
					<div class="item">{{item.name}}</div>
					<div class="item">{{item.age}}</div>
					<!-- 传递参数 将id传递到函数里面去 -->
					<div class="item"><button @click="deleteData(item.id)">删除</button></div>
				</div>
			</div>
		</div>
		<!-- 导包 -->
		<script src="vue.js"></script>
		<script src="axios.js"></script>

css部分:

* {
  margin: 0;
	padding: 0;
}

.fun {
	width: 60%;
	/* height: 400px; */
	margin: auto;
	/* 阴影效果 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 20px;
}

h1 {
	text-align: center;
	/* 下外边距 */
	margin-bottom: 30px;
}

.demo {
	display: flex;
	padding: 20px;
	border-bottom: 1px solid black;
}

.item {
	/* 每个儿子属性站一份 */
	flex: 1;
	text-align: center;
}

javascript部分:

new Vue({
				el: "#app",
				// 数据源
				data: {
					userdata: null,
					name: "",
					age: ""
				},
				// 你要发请求 肯定是需要做什么事情
				methods: {
					// 可以在这个事件里面发请求
					findAll() {
						axios({
							url: "http://43.136.104.16:3002/chaxun", // 请求地址
							method: "GET" // 请求方式
						}).then((res) => {
							console.log(res.data);
							// 将后端拿过来的的数据, 存放到数据源里面
							this.userdata = res.data;
						});
					},
					// 添加数据
					add(){
						axios({
							url: "http://43.136.104.16:3002/xinzeng",
							method: "POST" ,// 请求方式是POST 绝大多数POST请求 需要传递参数进去
							data: {
								name: this.name, // 直接通过this.name获取你输入的名字
								age: this.age // 通过this.age获取你输入的年龄
							}
						// 当请求成功, 会执行then里面的代码
						}).then((res) => {
							console.log(res.data);
							// 添加成功后, 刷新界面
							this.findAll();
							this.name = "";
							this.age = "";
						}).catch((error) => {
							console.log(error);
							alert(error.response.data);
						});
					},
					// 删除数据, value就是学生的id号
					deleteData(value){
						axios({
							url: "http://43.136.104.16:3002/shanchu", // 请求地址
							method: "GET" ,// 请求方式
							params: {
								id: value
							}
						}).then((res) => {
							console.log(res.data);
							this.findAll();
						});
					}
				},
				// 你一打开这个网页, 就让他自动执行
				created() {
					// 一打开网页, 就能够自动请求数据
					this.findAll();
				}
			});

js种的三个方法, 1.findAll, 2.add, 3.deleteData
1.findAll

axios({
	url: "http://43.136.104.16:3002/chaxun", // 请求地址
	method: "GET" // 请求方式
}).then((res) => {
	console.log(res.data);
	// 将后端拿过来的的数据, 存放到数据源里面
	this.userdata = res.data;
});

这里是用GET方法请求的, 没有params和data传参, 存粹是从后端获取数据。

2.add

axios({
	url: "http://43.136.104.16:3002/xinzeng",
	method: "POST" ,// 请求方式是POST 绝大多数POST请求 需要传递参数进去
	data: {
		name: this.name, // 直接通过this.name获取你输入的名字
		age: this.age // 通过this.age获取你输入的年龄
	}
// 当请求成功, 会执行then里面的代码
}).then((res) => {
	console.log(res.data);
	// 添加成功后, 刷新界面
	this.findAll();
	this.name = "";
	this.age = "";
}).catch((error) => {
	console.log(error);
	alert(error.response.data);
});

这里是用POST方法请求的, 有data传参, 里面包含了name和age的参数, 就是添加一条包含名字和年龄的数据, id在后台会自动生成的(这个需要在后端代码里面写好), 执行这串代码, 会新增数据。
后面的catch((error) => {})这串代码, 就是打印错误信息, 当添加数据失败了, 会打印为什么失败, 什么原因导致无法添加数据(人性化操作)

3.deleteData

axios({
	url: "http://43.136.104.16:3002/shanchu", // 请求地址
	method: "GET" ,// 请求方式
	params: {
		id: value
	}
}).then((res) => {
	console.log(res.data);
  // 删除数据之后更新信息
	this.findAll();
});

这里是用方法GET请求的, params, 里面包含了id的参数, 就是删除数据, 是根据id号来删除对应的数据(这个需要在后端代码里面写好), 执行这串代码, 会删除数据。

学员管理系统的完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.fun {
				width: 60%;
				/* height: 400px; */
				margin: auto;
				/* 阴影效果 */
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				padding: 20px;
			}

			h1 {
				text-align: center;
				/* 下外边距 */
				margin-bottom: 30px;
			}

			.demo {
				display: flex;
				padding: 20px;
				border-bottom: 1px solid black;
			}

			.item {
				/* 每个儿子属性站一份 */
				flex: 1;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 最外面的大盒子 -->
		<div id="app">
			<div class="fun">
				<!-- 标题 -->
				<h1>学员管理系统</h1>
				<!-- 输入框和按钮 -->
				姓名<input type="text" v-model="name"/>
				年龄<input type="text" v-model="age"/>
				<button @click="add()">点击添加学员</button>
				<!-- 操作栏 -->
				<div class="demo">
					<div class="item">学员id</div>
					<div class="item">学员姓名</div>
					<div class="item">学员年龄</div>
					<div class="item">操作模块</div>
				</div>
				<!-- 内容 -->
				<div class="demo" v-for="item in userdata" :key="item.id">
					<!-- 内容渲染指令 把数据里面的数据 渲染到页面上面 不是什么时候都需要写{{}}-->
					<div class="item">{{item.id}}</div>
					<div class="item">{{item.name}}</div>
					<div class="item">{{item.age}}</div>
					<!-- 传递参数 将id传递到函数里面去 -->
					<div class="item"><button @click="deleteData(item.id)">删除</button></div>
				</div>
			</div>
		</div>
		<!-- 导包 -->
		<script src="vue.js"></script>
		<script src="axios.js"></script>
		<script>
			new Vue({
				el: "#app",
				// 数据源
				data: {
					userdata: null,
					name: "",
					age: ""
				},
				// 你要发请求 肯定是需要做什么事情
				methods: {
					// 可以在这个事件里面发请求
					findAll() {
						axios({
							url: "http://43.136.104.16:3002/chaxun", // 请求地址
							method: "GET" // 请求方式
						}).then((res) => {
							console.log(res.data);
							// 将后端拿过来的的数据, 存放到数据源里面
							this.userdata = res.data;
						});
					},
					// 添加数据
					add(){
						axios({
							url: "http://43.136.104.16:3002/xinzeng",
							method: "POST" ,// 请求方式是POST 绝大多数POST请求 需要传递参数进去
							data: {
								name: this.name, // 直接通过this.name获取你输入的名字
								age: this.age // 通过this.age获取你输入的年龄
							}
						// 当请求成功, 会执行then里面的代码
						}).then((res) => {
							console.log(res.data);
							// 添加成功后, 刷新界面
							this.findAll();
							this.name = "";
							this.age = "";
						}).catch((error) => {
							console.log(error);
							alert(error.response.data);
						});
					},
					// 删除数据, value就是学生的id号
					deleteData(value){
						axios({
							url: "http://43.136.104.16:3002/shanchu", // 请求地址
							method: "GET" ,// 请求方式
							params: {
								id: value
							}
						}).then((res) => {
							console.log(res.data);
							this.findAll();
						});
					}
				},
				// 你一打开这个网页, 就让他自动执行
				created() {
					// 一打开网页, 就能够自动请求数据
					this.findAll();
				}
			});
		</script>
	</body>
</html>

结果:
打开网页

新增数据:


删除数据(删除数据以后, 返回了id号):

以上就是vue的axios请求的所有内容了, 如果有哪里不懂的地方,可以把问题打在评论区, 大家多多交流互相学习, 欢迎随时来提问题!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!

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

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

相关文章

如何评估婚恋交友小程序的投资回报率

如何评估婚恋交友小程序的投资回报率

在这个数字化的时代&#xff0c;越来越多的人选择通过手机应用程序寻找自己的另一半。随着婚恋交友小程序的兴起&#xff0c;编辑h17711347205如何评估这类产品的投资回报率&#xff08;ROI&#xff09;成为了投资者和运营者关注的重点。本文将探讨如何有效地评估婚恋交友小程序…
阅读更多...
生活中重大决定，除了你自己，谁也帮不了你！

生活中重大决定，除了你自己，谁也帮不了你！

随着年龄增长&#xff0c;越来越发现&#xff1a;生活是非常现实&#xff0c;更现实的社会&#xff0c;自己除了自己&#xff0c;谁也帮不了你。 因此&#xff0c;一个人的生活是好是坏&#xff0c;往往取决于我们自己的努力程度&#xff0c;越努力才会越幸运。没有伞的孩子&am…
阅读更多...
程序设计题（65—72）

程序设计题（65—72）

第六十五题 题目 请编写函数fun&#xff0c;它的功能是&#xff1a;计算下列级数和&#xff0c;和值由函数值返回。 例如&#xff0c;当n10&#xff0c;x0.3时&#xff0c;函数值为1.349859。 #include <conio.h> #include <stdio.h> #include <math.h> #…
阅读更多...
万博智云CEO王嘉在华为全联接大会：以创新云应用场景，把握增长机遇

万博智云CEO王嘉在华为全联接大会：以创新云应用场景，把握增长机遇

一、大会背景 2024年9月19-21日&#xff0c;第九届华为全联接大会将在上海世博展览馆和上海世博中心举办。作为华为的旗舰盛会&#xff0c;本次大会以“共赢行业智能化”为主题邀请了众多思想领袖、商业精英、技术专家、合作伙伴、开发者等业界同仁&#xff0c;从战略、产业、…
阅读更多...
同比和环比怎么算？有什么区别一文讲清楚，附同比环比计算器

同比和环比怎么算？有什么区别一文讲清楚，附同比环比计算器

大家好&#xff0c;这里是效率办公指南&#xff01; &#x1f4ca; 在数据分析和财务报告中&#xff0c;同比和环比是两个常用的指标&#xff0c;它们帮助我们评估数据的时间序列变化。今天&#xff0c;我们将详细介绍同比和环比的定义、它们之间的区别以及如何计算这两个重要…
阅读更多...
【漏洞复现】孚盟云oa AjaxSendDingdingMessage接口 存在sql注入漏洞

【漏洞复现】孚盟云oa AjaxSendDingdingMessage接口 存在sql注入漏洞

》》》产品描述《《《 孚盟与阿里强强联手将最受青睐的经典C系列产品打造成全新的孚盟云产品&#xff0c;让用户可以用云模式实现信息化管理&#xff0c;让用户的异地办公更加流畅&#xff0c;大大降低中小企业在信息化上成本&#xff0c;用最小的投入享受大型企业级别的信息化…
阅读更多...
CSS 浏览器兼容问题探讨

CSS 浏览器兼容问题探讨

目录 非 VIP 用户可前往公众号回复“css”进行免费阅读 浏览器介绍 css 选择器兼容介绍 ie6 微型盒子兼容解决方法 ie6双倍margin div中放入一个img元素导致div高度多出几像素 非 VIP 用户可前往公众号回复“css”进行免费阅读 浏览器介绍 在国内，常见的网页浏览…
阅读更多...
Java：插入排序

Java：插入排序

目录 排序的概念 插入排序 直接插入排序 哈希排序 排序的概念 排序&#xff1a;所谓的排序&#xff0c;就是使一串记录&#xff0c;按照某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个…
阅读更多...
代码写得是真优雅呀！

代码写得是真优雅呀！

工作多年后&#xff0c;越发觉得代码整洁真的是太重要了&#xff01;尤其是在团队开发中&#xff0c;写出优雅工整的代码&#xff0c;能让同事更乐于跟你合作。 下面&#xff0c;将通过命名、类、函数、测试这四个章节,使我们的代码变得整洁。 1.为什么要保持代码整洁? 不整…
阅读更多...
大厂面试真题-说一下Mybatis的缓存

大厂面试真题-说一下Mybatis的缓存

首先看一下原理图 Mybatis提供了两种缓存机制&#xff1a;一级缓存&#xff08;L1 Cache&#xff09;和二级缓存&#xff08;L2 Cache&#xff09;&#xff0c;旨在提高数据库查询的性能&#xff0c;减少数据库的访问次数。注意查询的顺序是先二级缓存&#xff0c;再一级缓存。…
阅读更多...
牛肉高脂猫粮，福派斯猫粮新选择？乳鸽猫粮

牛肉高脂猫粮，福派斯猫粮新选择？乳鸽猫粮

福派斯鲜肉宠粮品牌近期对其旗舰产品——无麸质牛肉高脂猫粮单品进行了全面的配方和包装升级&#xff0c;这一举措不仅提升了产品的市场竞争力&#xff0c;更从多个维度确保了宠物食品的安全性与便捷性。 专业解析 "福派斯牛肉高脂猫粮&#xff0c;凭借其卓越的高肉配方&a…
阅读更多...
javaweb 实验3

javaweb 实验3

我发现了有些人喜欢静静看博客不聊天呐&#xff0c; 但是ta会点赞。 这样的人呢帅气低调有内涵&#xff0c; 美丽大方很优雅。 说的就是你&#xff0c; 不用再怀疑哦 实验三 Web基础-JavaScript 目的&#xff1a; 1、 理解和掌握Javascript基本语法 2、 掌握JavaScr…
阅读更多...
【JAVA开源】基于Vue和SpringBoot的足球俱乐部管理后台

【JAVA开源】基于Vue和SpringBoot的足球俱乐部管理后台

博主说明&#xff1a;本文项目编号 T 051 &#xff0c;文末自助获取源码 \color{red}{T051&#xff0c;文末自助获取源码} T051&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…
阅读更多...
多跳问答中的语言模型知识编辑增强

多跳问答中的语言模型知识编辑增强

人工智能咨询培训老师叶梓 转载标明出处 大模型在整合实时知识更新方面常常遇到困难&#xff0c;这可能导致回答过时或不准确。尤其当处理多跳问题时&#xff0c;挑战进一步增加&#xff0c;因为这类问题需要模型更新和整合与问题相关的多个知识点。图 1为传统基于相似度的搜索…
阅读更多...
一个神级 Python 日志管理库：Loguru

一个神级 Python 日志管理库：Loguru

大家好&#xff0c;在Python开发过程中&#xff0c;日志记录是不可或缺的一部分&#xff0c;它帮助开发者了解应用程序的运行状态和发现潜在错误。尽管Python自带的logging模块功能全面&#xff0c;但其配置复杂且不够直观。 这时&#xff0c;Loguru库以其简单易用和功能强大而…
阅读更多...
Java基础扫盲（二）

Java基础扫盲（二）

想看Java基础扫盲&#xff08;一&#xff09;的可以观看我的上篇文章Java基础扫盲 目录 String为什么设计为不可变的 String有长度限制吗 为什么JDK9将String的char[]改为byte[] 泛型中K,T,V,E,Object,?等都代表什么含义 怎么修改一个类中使用了private修饰的String类型…
阅读更多...
电子连接器信号完整性仿真实训教程 一

电子连接器信号完整性仿真实训教程 一

电子连接器信号完整性仿真学习除需要熟悉软件的基本操作外&#xff0c;还需要基本的实际操作练习才能完全掌握&#xff0c;学以致用。因此推出几期实训教程&#xff0c;教程中将不再详细讲怎么一步一步操作软件&#xff0c;重点讲一些步骤&#xff0c;及一些技巧。也会将连接器…
阅读更多...
Spring Boot实战：构建在线商城系统

Spring Boot实战：构建在线商城系统

1 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。这样的大环境让那些止步不前&#…
阅读更多...
QQ机器人搭建

QQ机器人搭建

使用QQ官方机器人Python SDK和三方框架搭建QQ群聊机器人 文章目录 使用QQ官方机器人Python SDK和三方框架搭建QQ群聊机器人前言编写机器人代码机器人监听群聊进行文字回复机器人监听群聊进行图片回复机器人监听群聊进行文件发送机器人监听群聊进行视频发送机器人监听群聊进行语…
阅读更多...
U-Net——当卷积遇见了扩散，图像生成便有了光

U-Net——当卷积遇见了扩散，图像生成便有了光

U-Net原文 LDM介绍 1. 引言 U-net 模型最初由 Olaf Ronneberger 等人在 2015 年提出&#xff0c;主要用于生物医学图像分割。其创新的网络结构&#xff0c;特别是跳跃连接的设计&#xff0c;使其在各种图像处理任务中表现优异。随着深度学习的快速发展&#xff0c;U-net 逐渐…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023