methods: { delCollect() { var _this = this; axios({ method: "delete", url: "http://localhost:8080/BookShopSystem_war/deleteCollect", data: { userId: _this.userId, bookId: _this.collectBook.bookId }, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }).then(resp => { alert("取消收藏"); }) } }根据该代码,不通过路径获取参数,而是从data获取参数,控制层应该如何写
时间: 2024-02-10 20:33:36 浏览: 123
如果前端使用axios向后端发送请求,并且使用data属性传递请求参数,则后端控制层应该使用@RequestBody注解来接收请求参数。具体的代码实现如下:
```java
@PostMapping("/deleteCollect")
public void deleteCollect(@RequestBody Map<String, Object> params) {
Integer userId = (Integer) params.get("userId");
Integer bookId = (Integer) params.get("bookId");
// TODO: 执行删除收藏操作
}
```
在上述代码中,@RequestBody注解用来接收前端传递的参数,通过Map<String, Object>类型的params参数来接收数据。然后通过params.get方法获取指定的参数值,进行后续的业务逻辑处理。
相关问题
methods: { delCollect(bookId) { var _this = this; axios({ method: "delete", url: "http://localhost:8080/BookShopSystem_war/deleteCollect", data: { userId: _this.userId, bookId: bookId } }).then(resp => { alert("取消收藏"); }); } }该方法还需要userId,请仿照以下接口的方式获取到usrIdmounted() { var _this = this; axios.get('/BookShopSystem_war/getUserId') .then((response) => { this.userId = response.data; var userId = this.userId; // 将userId赋值给一个变量 axios({ method: 'get', url: 'http://localhost:8080/BookShopSystem_war/getCollectBook/' + userId }).then(function (result) { var code = result.data.code; var data = result.data.data; if (code == 200) { _this.collectBook = data; } console.log(data) }) }) .catch((error) => { console.log(error); }); },
你的问题是如何获取 userId,对吧?
对于获取 userId,可以仿照以下接口的方式,在 mounted 钩子函数中使用 axios 发送 get 请求,获取到后将 userId 赋值给一个变量。具体代码如下:
```
mounted() {
var _this = this;
axios.get('/BookShopSystem_war/getUserId')
.then((response) => {
this.userId = response.data;
var userId = this.userId; // 将userId赋值给一个变量
axios({
method: 'get',
url: 'http://localhost:8080/BookShopSystem_war/getCollectBook/' + userId
}).then(function (result) {
var code = result.data.code;
var data = result.data.data;
if (code == 200) {
_this.collectBook = data;
}
console.log(data)
})
})
.catch((error) => {
console.log(error);
});
},
```
在 delCollect 方法中,可以直接使用 this.userId 获取到 userId,具体代码如下:
```
delCollect(bookId) {
var _this = this;
axios({
method: "delete",
url: "http://localhost:8080/BookShopSystem_war/deleteCollect",
data: {
userId: this.userId, // 直接使用 this.userId 获取到 userId
bookId: bookId
}
}).then(resp => {
alert("取消收藏");
});
}
```
mounted() { // 页面加载完成之后 加载数据 var _this = this; axios({ // 请求方式 method: 'GET', // 请求的地址 url: 'http://localhost:8080/mayikt_ssm_war/user/getUsersAll', }).then(function (result) { var code = result.data.code; var data = result.data.data; if (code == "200") { _this.users = data; } }) }若要调用多个后端查询接口,如何实现
可以通过多次使用 `axios` 或其他类似的 AJAX 库来实现调用多个后端查询接口。在 `mounted` 生命周期中,可以按照以下方式进行调用:
```javascript
mounted() {
var _this = this;
axios.all([
axios.get('http://localhost:8080/mayikt_ssm_war/user/getUsersAll'),
axios.get('http://localhost:8080/mayikt_ssm_war/user/getUsersByName', {
params: {
name: '张三'
}
})
]).then(axios.spread(function (res1, res2) {
var code1 = res1.data.code;
var data1 = res1.data.data;
var code2 = res2.data.code;
var data2 = res2.data.data;
if (code1 == "200") {
_this.users = data1;
}
if (code2 == "200") {
_this.usersByName = data2;
}
}));
}
```
在这个例子中,我们同时调用了两个接口,一个是获取所有用户列表,另一个是根据用户名获取用户信息。我们使用 `axios.all()` 方法同时发起这两个请求,并在两个请求都完成后,使用 `axios.spread()` 方法将两个请求的结果分别赋值给 `res1` 和 `res2`,然后分别处理这两个请求的结果。注意,`axios.all()` 方法返回一个 Promise 对象,因此需要使用 `then()` 方法来处理结果。
阅读全文