一、知识回顾
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>
3.3）请求参数详情信息：
3.4）编辑后端Controller
接收前端传递的数据, 完成数据修改操作