<button @click="delCollect()"> <span class="del">×</span> </button>methods: { delCollect() { var _this = this; axios({ method: "delete", url: "http://localhost:8080/BookShopSystem_war/deleteCollect", data: { userId: _this.userId, bookId: _this.collectBook.bookId } }).then(resp => { alert("取消收藏"); }) } } })这么写能调用到方法吗
时间: 2024-02-10 20:33:35 浏览: 23
这段代码看起来是一个 Vue 组件,其中 delCollect 方法使用 axios 发送了一个 DELETE 请求来调用后端的 deleteCollectById 方法。但是,这里需要注意的是,这里的 url 是 "http://localhost:8080/BookShopSystem_war/deleteCollect",而不是 "http://localhost:8080/BookShopSystem_war/deleteCollectById",因为你在控制层中使用的是 @DeleteMapping("/deleteCollect") 注解,表示请求的路径是 "/deleteCollect",所以这里的 url 也应该是 "/deleteCollect"。
另外,这里的 data 参数应该是一个对象,而不是一个 JSON 字符串,所以在使用 axios 发送请求时,应该将 data 参数改为一个对象,例如:
```
data: {
userId: this.userId,
bookId: this.collectBook.bookId
}
```
如果你将这些修改都完成了,那么这个 delCollect 方法应该是可以调用后端的 deleteCollectById 方法的。
相关问题
<button @click ="onButtonClick()"></button>
这是Vue.js中的语法,可以用来定义一个按钮组件,并将onButtonClick方法绑定到按钮的点击事件上。具体来说,这个语法使用了Vue.js的指令系统,其中@click是一个指令,表示绑定按钮的点击事件,而onButtonClick则是Vue.js实例中定义的一个方法。
例如,如果你有一个Vue.js组件,其中定义了一个名为onButtonClick的方法,你可以在组件的template中使用如下代码来创建一个按钮,并将onButtonClick方法绑定到按钮的点击事件上:
```
<template>
<button @click="onButtonClick()">Click me</button>
</template>
<script>
export default {
methods: {
onButtonClick() {
// 处理按钮点击事件的代码
}
}
}
</script>
```
在这个示例中,当用户单击按钮时,Vue.js将自动调用onButtonClick方法,并将事件对象作为参数传递给该方法。您可以在onButtonClick方法中编写任何JavaScript代码以响应按钮单击事件。
<div class="map-buttons"> <button class="map-button" @click="detectConflict"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">冲突检测</span> </div> </button> <button class="map-button" @click="captureScreenshot"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">截图</span> </div> </button> <button class="map-button" @click="generateMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">制图</span> </div> </button> <button class="map-button" @click="zoomIn"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">放大</span> </div> </button> <button class="map-button" @click="zoomOut"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">缩小</span> </div> </button> <button class="map-button" @click="showFullMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">全图</span> </div> </button> </div>改写成按钮名不在按钮元素中,而在按钮正下方
<div class="map-buttons">
<button class="map-button" @click="detectConflict">冲突检测</button>
<button class="map-button" @click="captureScreenshot">截图</button>
<button class="map-button" @click="generateMap">制图</button>
<button class="map-button" @click="zoomIn">放大</button>
<button class="map-button" @click="zoomOut">缩小</button>
<button class="map-button" @click="showFullMap">全图</button>
<div class="map-button-descriptions">
<span class="map-button-description">检测是否有冲突</span>
<span class="map-button-description">捕捉屏幕截图</span>
<span class="map-button-description">生成地图</span>
<span class="map-button-description">放大地图</span>
<span class="map-button-description">缩小地图</span>
<span class="map-button-description">查看全图</span>
</div>
</div>