vue的axios请求2

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

html 复制代码

<!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请求的所有内容了, 如果有哪里不懂的地方,可以随时联系我, 我的qq号是1175235190, qq邮箱是1175235190@qq.com, 欢迎随时来提问题!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!

上一个

vue的axios请求

下一个

爬虫入门之爬虫原理以及请求响应

最近修改: 2024-09-18Powered by

所有分类