1.参数传递的方式
1.1参数传递的类型
1.1.1 简单参数传递方式
url地址：http://localhost:3275/getUserById?id=100
后端代码：
//1.测试传递id
@RequestMapping("/getUserById01")
public String getUSerById01(Integer id){
return "动态传递的参数:"+id;
}1.1.2 对象方式传递
url地址：http://localhost:3275/getUser?id=100&name=“tomcat”&age=18
后端代码：
//2.测试对象方式的传递
@RequestMapping("/getUser")
public User getUSer(User user){
return user;
}1.1.3 RestFul风格
特点
1. 参数需要使用/ 进行分割
2. 参数的位置是固定的.
3. restFul请求方法路径不能出现动词
具体案例
/**1.restFul实现用户查询：查询id=100
* URL :http://localhost:2375/user/100
//@RequestMapping(value="/user",method=RequestMethod.GET)
@GetMapping("/user/{id}")
public String RestFulGet(@PathVariable Integer id){
return "restFul动态获取的参数："+id;
}
/**需求：查询name=tomact age=18 sex="男"
* 要求使用：RestFull
* URL:http://localhost:2375/user/tomact/18/"男"*/
@GetMapping("/user/{name}/{age}/{sex}")
public User RestGetUser(User user){
//执行后续的业务操作 userService
return user;
}
作用：
用户可以通过一个URL请求的地址，可以实现不同业务的操作
1.2 简单参数传递操作汇总
1.2.1简单参数汇总
知识回顾：
- 查询：http://localhost:8090/user/getUserById?id=100 type=get
- 新增：http://localhost:8090/user/tomcat/18/男 类型:post
- 更新： http://localhost:8090/updateUser 类型:post
- 删除：http://localhost:8090/deleteUserById?id=200 类型:get
特点：常规的请求的方式其中包含了动词,导致操作的意图非常明显.
具体案例1：
前端：
axios.get("http://localhost:2375/axios/getUserObj")
.then(function(result){
console.log(result.data)
})后端
@GetMapping("/axios/user/getUserObj")
public User RestGetUserObj(User user){
return user;
}具体案例2：
前端：
let name ="tomcat"
let age=18
/* 注意:里边的参数应该动态获取--模版字符串优化参数 */
axios.get(`http://localhost:2375/axios/user/${name}/${age}`)
.then(function(result){
console.log(result.data)
})
后端：
/**需求;axios传参
* * URL: http://localhost:2375/axios/user/mysql/20
* */
@GetMapping("axios/user/{name}/{age}")
public User getAx(User user){
return user;
}1.2.2restFull风格实现CRUD操作：
知识回顾：
1 查询：http://localhost:8090/user/100 type :GET
2 新增：http://localhost:8090/user/tomcat/18/男 type :POST
3 删除：http://localhost:8090/user/100 type :DELETE
4.更新：http://localhost:8090/user/mysql/100 type :PUT
2.axios参数传递
2.1Axios-get—对象传参（重要！！！）
2.1.2编辑前端用户信息
<!--需求：实现对象方式数据的传递
URL: http:localhost:2375/axios/user/getUserObj
语法：axios.get("url"，"参数").then(回调函数)--> */
//优化：对象封装
let user={
name:"tomact",
age:18,
sex:"男"
}
axios.get("http://localhost:2375/axios/user/getUserObj",{params:user})
.then(function(result){
console.log(result.data)
})
2.1.2编辑后端信息
@GetMapping("/axios/user/getUserObj")
public User RestGetUserObj(User user){
return user;
}2.2 Axios-Delete请求
2.2.1 Delete请求说明
一般用户通过Delete请求做删除操作. 删除的语法与Get请求的语法一致的.
2.2.2 Delete请求方式说明 了解delete代码结构
1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })2.携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })3.restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( "url地址/xxx/xxx/xxx").then(function(result){ … })4.采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( "url地址/xxx/xxx/xxx", {params: 封装后的对象}).then(function(result){ … })
具体操作代码如下：
axios.delete("http://localhost:2375/axios/user/delUser")
.then(function(result){
console.log("删除成功")
})
axios.delete("http://localhost:2375/axios/user/delUser?id=100")
.then(function(result){
console.log("删除成功")
})
axios.delete(`http://localhost:2375/axios/user/delUser/100/tomact/18/"男"`)
.then(function(result){
console.log("删除成功")
})
let user={
name:"tomact",
age:18,
sex:"男"
}
axios.get("http://localhost:2375/axios/user/getUserObj",{params:user})
.then(function(result){
console.log(result.data)
})2.3 Axios-post请求
2.3.1 编辑页面Ajax
/* 总结: 如果需要对象传参
* 1.get请求采用 axios.get(url,{params: 对象})
* 2.post请求 axios.post(url,对象)*/
let user = {
name: "post请求的语法",
age: 20,
sex: '女'
}
let url1 = "http://localhost:8090/axios/insertUser"
axios.post(url1, user)
.then(function(result){
console.log(result.data)
})
2.3.2 参数的数据结构
说明: 如果采用post的方式传递对象,则数据结构是一个JSON
后端代码：
/*注意事项：
* 如果前端发起post请求方式，则传递的数据是一个JSON串
* 常规参数：id=100 name=“tomcat”
* post参数：{id:100,name:"tomcat"}
* 解决方案：
* 1.对象转换Json:@RespondeBody
* 2.Json串转化为对象 @RequestBody
* */
@PostMapping("/axios/insertUser")
public User insertUser(@RequestBody User user){
return user;
}2.4 Axios-post（update）请求
2.4.1 编辑页面Ajax
let user={
name:"post请求的语法",
age:20,
sex:"女"
}
let url="http://localhost:2375/axios/updateUser?id=20"
axios.put(url,user).then(function(result){
console.log(result.data)
})2.4.2 后端代码
@PutMapping("/updataMe")
public void updateUser(User user){
userService.updateUser(user);
}2.5关于前后端调用细节说明
2.5.1 请求类型
请求的类型是由程序员手动控制
- 分类A
1.get 请求类型 查询
2.delete 请求类型 删除 - 分类B
1.post 请求类型 form表单提交 新增操作
2.put 请求类型 更新操作
2.5.2 关于POST请求说明
浏览器解析数据结构:
说明: 数据在进行参数传递时 数据需要转化
2.5.3 jQuery中的post请求/Axios中的post请求对比/restFul格式
Axios中的Post请求格式
如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象
jQuery中的post请求格式
如果采用form表单的方式提交,则可以直接采用对象的方式接收
name=xxx&age=xx&sex=xx
3. restFul的格式是将参数拼接到URL中 采用特殊的方式获取数据
2.6axios传参优化
2.6.1 概念解释
1.async/await 是ES7引入的新语法 可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中
2.6.2 箭头函数
let url = "http://localhost:8090/axios/getUserById?id=100"
axios.get(url)
.then( result => {
alert(result.data)
})
2.6.3 async-await 操作
//1.定义一个方法
async function getUserById(){
let url = "http://localhost:8090/axios/getUserById?id=100"
//2.发起ajax请求 获取promise对象
//let promise = await axios.get(url)
//console.log(promise)
//console.log(promise.data)
//解构赋值 提取对象中有价值的数据
let {data: resultData,status: code} = await axios.get(url)
console.log(resultData)
console.log(code)
}
//2.调用方法
getUserById()
2.6.4 Axios配置信息
说明: 可以通过下列的配置简化 Ajax请求的路径
//配置基本请求路径
axios.defaults.baseURL = "http://localhost:2375/3. 关于Axios练习(要求至少写2遍)
3.1 VUE+Axios 需求分析
说明:
1. 利用VUE.js构建页面
2. 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
3. 完成页面数据的删除操作
4. 完成页面数据的修改操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE-Axios练习</title>
</head>
<body>
<div id="app">
<div align="center">
<h1>用户新增</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">
<h1>用户修改</h1>
ID：<input type="text" disabled="true"
v-model.trim="updateUser.id" />
名称：<input type="text" v-model.trim="updateUser.name" />
年龄：<input type="text" v-model.number="updateUser.age"/>
性别：<input type="text" v-model.trim="updateUser.sex" />
<button @click="addUserMe()">修改</button>
</div><hr />
<table id="tab01" 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>
<tr align="center" v-for="user in userlist">
<td >{{user.id}}</td>
<td >{{user.name}}</td>
<td >{{user.age}}</td>
<td >{{user.sex}}</td>
<td >
<button @click="updateUserBtn(user)">修改</button>
<button @click="deleteUser(user)">删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
axios.defaults.baseURL="http://localhost:2375"
const App=new Vue({
el:"#app",
data:{
userlist:null,
addUser:{
name:'',
age:0,
sex:''
},
updateUser:{
id:'',
name:'',
age:0,
sex:''
}
},
methods:{
async getUserList(){
let {data:result}=await axios.get("/vue/getUserList")
this.userlist=result
console.log(result.data)
this.addUser={}
},
async addUserMe(){
await axios.post("vue/insertUser",this.addUser)
this.getUserList()
},
/* async deleteUser(ids){
await axios.delete("/vue/delUserById",{params : {id: ids}})
alert("删除数据成功！")
this.getUserList()
}, */
async deleteUser(user){
let id=user.id
await axios.delete("/vue/deleteUser?id="+id)
/* await axios.delete(`/vue/deleteUser?id=${id}`) */
alert("删除数据成功！！")
this.getUserList()
},
updateUserBtn(user){
this.updateUser=user
},
async updateUserMe(){
await axios.get("/vue/updateUser",this.updateUser)
this.updateUser={}
this.getUserList()
alert("修改数据成功！")
}
},
//调用生命周期函数 8个
mounted(){
this.getUserList()
}
})
</script>
</body>
</html>
3.2 总结
在传递参数的过程中，主要有两种参数传递方式（即普通参数传递方式和restful参数传递方式），两者的主要区别在于后者传递参数更为灵活。
在前后端交互的过程中，前端的参数传递方式也在不断升级，有原始的js传递参数，再到ajax传递参数，再到简化的写法Axios,前端的内容一再简化，也更方便开发者使用。除此外，在对于复杂业务的实现中，我们可以灵活运用知识，一步步将业务要求分解，从而实现复杂的功能。
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
