VUE练习

最新推荐文章于 2023-06-21 17:09:28 发布

AimerDaniil

最新推荐文章于 2023-06-21 17:09:28 发布

阅读量193

点赞数

分类专栏： VUE基础用法文章标签： vue java

本文链接：https://blog.csdn.net/AimerDaniel/article/details/119323060

版权

VUE基础用法专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、知识回顾

1、 Axios案例

1.1）Ajax发展史

JS的原生Ajax操作，处理复杂，不便于使用。
jQuery 是JS的高级函数类库，封装了很多的API，简化程序调用的过程 (回调地狱: Ajax嵌套问题)
promise对象，将Ajax嵌套的结构，转化为链式加载的结构。ajax.get().then(xxxxxx)
Axios主要封装了promise对象，将调用变得更加的简化，整合VUE.js中大部分条件下都整合axios发起ajax请求。

1.2）请求的类型

http常用的请求类型 8种 但是一般四种需要单独的记忆.

查询操作时 GET请求类型
		特点：参数结构 key=value URL?key=value&key2=value2

新增(form表单) POST请求类型
		特点：会将参数封装到请求头中，相对更加的安全，key=value key2=value2 可以直接采用对象的方式接收。
		Axios中的post 参数是一个JSON串 {key1:vallue1, key2:value2} ，@RequestBody将JSON串转化为对象 

删除操作 DELETE请求类型
		特点：与GET请求类型 一致的

更新操作 PUT请求类型
		特点：与POST请求类型一致的

RestFul风格：在上述的四大请求类型中都可以使用(单独的体系) 参数使用/分割 注意参数结构 灵活选用.

2 Axios – 删除数据

2.1）编辑页面JS

为删除按钮添加点击事件
在这里插入图片描述
编辑页面JS，发起Ajax请求

2.2）编辑Controller方法

在这里插入图片描述

2.3）编辑编辑Service方法

在这里插入图片描述

3、Axios作业-修改数据

3.1）业务说明

准备修改的DIV，其中包含4部分数据. name/age/sex where id!!!
当用户点击修改按钮时，应该实现数据的回显.
当用户已经修改完成之后，需要点击提交按钮时，应该发起ajax请求实现数据修改操作
注意事项：
在vue.js中看到了INPUT框, 则表示双向数据绑定，必须在data中定义属性

3.2）编辑页面JS

定义修改html标签
定义修改的对象 updateUser 并且双向数据绑定
为提交按钮添加点击事件. 实现ajax参数提交
清空已提交的数据,重新获取列表信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE-Axios练习</title>
	</head>
	<body>
		<!-- 定义VUE根标签 -->
		<div id="app">
				<div align="center">
						<h1 align="center">用户新增</h1>
						名称: <input type="text" v-model.trim="addUser.name"/>
						年龄: <input type="text" v-model.number="addUser.age"/>
						性别: <input type="text" v-model.trim="addUser.sex"/>
						<button @click="addUserMe">新增</button>
				</div>
				<hr />
				<div align="center">
						<!-- 需求: ID是修改操作的必备参数,用户不可以修改 
								 disabled="false" JS规范如果设定true 可以简化为key
						-->
						<h1 align="center">用户修改</h1>
						编号: <input type="text" v-model.trim="updateUser.id"	disabled />
						名称: <input type="text" v-model.trim="updateUser.name"/>
						年龄: <input type="text" v-model.number="updateUser.age"/>
						性别: <input type="text" v-model.trim="updateUser.sex"/>
						<!-- 当用户修改完成之后,点击提交按钮时发起ajax请求. -->
						<button @click="updateUserMe">提交</button>
				</div>
				<hr />
			
				<table id="tab1" border="1px" align="center" width="80%">
					<tr>
						<td colspan="5" align="center"><h1>用户列表</h1></td>
					</tr>
					<tr align="center">
						<td>编号</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
					<!-- 指令: 可以循环数据+标签  v-for -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>
						<td>
							<!-- 为修改按钮添加点击事件 传递当前行对象 -->
							<button @click="updateUserBtn(user)">修改</button>
							<!-- 为当前user对象绑定点击事件 -->
							<button @click="deleteUser(user)">删除</button>
						</td>
					</tr>
				</table>
		</div>
			
		<!-- 1.引入VUE.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入Axios.js -->
		<script src="../js/axios.js"></script>
		
		<!-- 
				需求分析1:
					1.当用户打开页面时就应该发起Ajax请求获取userList数据.
					2.将userList数据 在页面中展现  
							2.1页面中的数据必须在data中定义
							2.2 ajax请求的结果赋值给data属性
					3.利用v-for指令实现数据遍历
					
				需求分析2:  用户数据入库操作
					1.在页面中准备用户新增文本框/按钮
					2.准备双向数据绑定的规则
					3.为按钮添加事件,实现数据新增入库.
							
		 -->
		<script>
				//设定axios请求前缀
				axios.defaults.baseURL = "http://localhost:8090"
				const app = new Vue({
					el: "#app",
					data: {
						//1.定义集合数据 null
						userList: [],
						//2.定义addUser对象  新增的用户数据
						addUser: {
							name: '',
							age: 0,
							sex: ''
						},
						//定义一个修改的数据封装体
						updateUser: {
							id: '',
							name: '',
							age: 0,
							sex: ''
						}
					},
					methods: {
						//1.定义getuserList方法 获取后台服务器数据
						async getUserList(){
							let{data: result} = await axios.get("/vue/getUserList")
							//ajax调用之后,将数据给属性.
							this.userList = result
						},
						//新增操作 请求类型: post  接收时需要使用json方式处理
						async addUserMe(){
								//不需要返回值
								await axios.post("/vue/insertUser",this.addUser)
								//将列表页面重新刷新
								this.getUserList()
						},
						async deleteUser(user){
							//console.log(user)
							//只需要获取用户的ID 就可以完成删除的操作.
							//方法选择 ?id=xx 拼接    |  restFul结构
								let id = user.id
								await axios.delete("/vue/deleteUser?id="+id)
								alert("删除数据成功!!!")
								//需要重新获取列表数据
								this.getUserList()
								/* await axios.delete(`/vue/deleteUser?id=${id}`) */
						},
						//点击修改按钮时触发事件
						updateUserBtn(user){
							//console.log(user)
							//用户传递的User对象应该动态的传递给双向数据绑定的key updateUser
							this.updateUser = user
						},
						//1.是否发起ajax请求 2.参数是谁? updateUser 3.什么请求类型PUT
						//this.updateUser是JS对象 传递到后端JSON串 @RequestBody
						async updateUserMe(){
								await axios.put("/vue/updateUser",this.updateUser)
								//如果操作成功,则应该清空修改的对象
								this.updateUser = {}
								//如果操作成功,则重新获取列表信息
								this.getUserList()
								alert("修改操作成功!!!!")
						}
						
					},
					//调用生命周期函数 8个
					mounted(){
						//console.log("vue对象实例化成功!!!!")
						//初始化时调用getUserList()
						this.getUserList()
					}
				})
		</script>
	</body>
</html>