请求类型说明:
分组:1.GET/DELETE 用法一致
2.POST/PUT用法一致
DELETE请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DELETE请求</title>
</head>
<body>
<h1>前后端调用-DELETE请求测试</h1>
<script src="../js/axios.js"></script>
<script>
/* DELETE测试1:
需求: 删除ID=232的数据
*/
let url = "http://localhost:8090/axios/deleteById?id=232"
axios.delete(url)
.then( promise => {
console.log(promise.data)
})
</script>
</body>
</html>
POST请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST请求</title>
</head>
<body>
<h1>前后端调用-POST请求测试</h1>
<script src="../js/axios.js"></script>
<script>
/**
* 需求: 实现用户新增操作
* 语法: axios.post(url,新增参数)
* 规则: 如果post/put 传递对象则直接赋值.
*/
let user = {
name: '小燕子',
age: 18,
sex: '女'
}
let url = "http://localhost:8090/saveUser"
axios.post(url,user)
.then(promise => {
console.log(promise.data)
})
</script>
</body>
</html>
请求参数的结构:
说明:http下一种只能识别字符串,传入数据库(修改或新增需要将参数由JSON串转换为user对象)
/*
* 需求: 实现用户入库操作
* URL: http://localhost:8090/axios/saveUser
* 参数: {name: "小燕子", age: 18, sex: "女"}
* 返回值: String 新增成功!!!
* 难点:
* json 互转 user对象
* 1. user对象转化为json @ResponseBody
* 2. json转化为user对象 @RequestBody
*/
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
userService.saveUser(user);
return "新增用户成功!!!";
}
PUT请求(一):
通过id修改数据:
/**
* 需求: 要求将id="238"
* 改为name="小鬼当家",age=4,sex=男
*/
let user = {
id: 238,
name: "小鬼当家",
age: 4,
sex: "男"
}
let url = "http://localhost:8090/axios/updateUser"
axios.put(url,user)
.then(promise => {
console.log(promise.data)
})
controller层代码:
PUT请求方式(二)由name字段修改:
/**
* 需求2: 要求将name="小燕子"
* 改为name="小鬼当家",age=18,sex=男
* 难点: 如果有多个参数,并且重复时 如何封装?
* 解决方案: 1.restFul + 对象 注意:使用反引号
*/
let name = "小燕子"
let user2 = {
name: "小鬼当家",
age: 18,
sex: "男"
}
let url2 = `http://localhost:8090/axios/updateUserByName/${name}`
axios.put(url2,user2)
.then(promise => {
console.log( promise.data)
})
controller层代码:
/**
* 需求: 根据name修改数据
* URL: http://localhost:8090/axios/updateUserByName/小燕子
* 参数: name条件, {name: "小鬼当家",age: 18,sex: "男"}
* 返回值: 修改成功
* 注意事项: restFul可以为对象的属性赋值.
* 注意restFul的名称不要与属性重名.否则会覆盖
* 引发BUG
*/
@PutMapping("/updateUserByName/{whereName}")
public String updateByName(@RequestBody User user,
@PathVariable String whereName){
userService.updateUserByName(user,whereName);
return "修改数据成功2222";
}
Vue-Axios案例
需求说明:
1.当展现页面时,用户发起请求 http://localhost:8090/vue/findAll,获取所有的user数据.
2.通过Vue.js 要求在页面中展现数据, 以表格的形式展现.
3.为每行数据添加 修改/删除的按钮
4.在一个新的DIV中 编辑3个文本框 name/age/sex 通过提交按钮实现新增.
5.如果用户点击修改按钮,则在全新的DIV中 回显数据.
6.用户修改完成数据之后,通过提交按钮 实现数据的修改.
7.当用户点击删除按钮时,要求实现数据的删除操作.
数据查询.数据新增.数据删除.数据修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例练习</title>
</head>
<body>
<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
<!-- 新增div -->
<div align="center">
<h3>用户新增</h3>
姓名: <input type="text" v-model="addUser.name"/>
年龄: <input type="text" v-model="addUser.age"/>
性别: <input type="text" v-model="addUser.sex"/>
<!-- -->
<button @click="addUserBtn">新增</button>
</div>
<hr />
<!-- 修改div -->
<div align="center">
<p>
编号: <input type="text" disabled/>
姓名: <input type="text" v-model="updateuser.name" />
</p>
<p>
年龄: <input type="text" v-model="updateuser.age"/>
性别: <input type="text" v-model="updateuser.sex"/>
</p>
<button @click="updateById()">修改</button>
</div>
<hr />
<!-- 展现div -->
<div>
<table border="1px" align="center">
<tr align="center">
<th colspan="5"><h3>用户列表</h3></th>
</tr>
<tr align="center">
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="user in users" align="center">
<th v-text="user.id"></th>
<th v-text="user.name"></th>
<th v-text="user.age"></th>
<th v-text="user.sex"></th>
<th width="20%">
<button @click="update(user)">修改</button>
<button @click="deleteById(user)" >删除</button>
</th>
</tr>
</table>
</div>
</div>
<script >
axios.defaults.baseURL = "http://localhost:8090/axios"
const app=new Vue({
el:"#app",
data:{
users:[],
addUser:{
name:'',
age:'',
sex:''
},
updateuser:{
name:'',
age:'',
sex:''
}
},
methods:{
//获取用户信息
getUserLiset(){
alert("查询数据")
axios.get("/getAll").then(
a=>{
console.log(a.data)
this.users=a.data
}
)
},
addUserBtn(){
axios.post("/post",this.addUser).then(promise=>{
alert("新增成功")
//新增之后刷新查询数据
this.getUserLiset()
//新增之后清空
this.addUser={}
})
},
update(user){
this.updateuser=user
},
deleteById(user){
axios.delete("/deleteById?id="+user.id).then(promise=>{
this.getUserLiset()
})
},
updateById(){
axios.put("/put",this.updateuser).then(promise=>{
this.getUserLiset()
this.updateuser={}
})
}
},
created() {
alert("生命周期函数")
this.getUserLiset()
}
})
</script>
</body>
</html>
定义axios请求前缀:
axios.defaults.baseURL = "http://localhost:8090/vue"
总结:数据查询:axios.get(url) 链接后端查询所有数据
数据新增:axios.post(url,user) 连接后台,传入网页用户输入参数
注意:需要双向绑定,将网页用户输入参数传给空值对象
注:删除与修改点击那个按钮,就会作用于哪个user,经v-for所得
数据删除:axios.delete(url)
注意:通过对象的字段值删除,例:通过该对象id删除
"/deleteById?id="+user.id
删除按钮需绑定事件,事件需要传参数,用以获取删除条件
修改数据:axios.put(url,用户修改后参数)
1.将user与用户输入框v-model的空值对象建立联系由回返参数,对其进行修改;
user后修改按钮需要绑定事件将user属性值赋值回返给用户修改的updateuser;
用户修改后updateuser后修改按钮需要绑定事件将修改后数据传给后端
2.通过id将用户修改的数据传入后端数据库,id不可被修改,default;