<button @click="delCollect()"> <span class="del">&times;</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("取消收藏"); }) } } })这么写能调用到方法吗

这段代码看起来是一个 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 方法的。

相关问题

<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>