这是vue中的前端代码axios({ method: 'get', url: '/BookShopSystem_war/getQueryBook/' + bookName <select id="getQueryBook" parameterType="String" resultMap="bookResult"> select * from book where book_name like CONCAT('%',#{bookName},'%') </select> 传递的bookName是String但最后会乱码导致查询不到书籍，如何解决

出现乱码的原因可能是因为在HTTP请求中未对参数进行编码。我们可以使用JavaScript的encodeURIComponent()函数来对参数进行编码，以确保它们被正确地传输。

在你的代码中，将`/BookShopSystem_war/getQueryBook/' + bookName`替换为`/BookShopSystem_war/getQueryBook/' + encodeURIComponent(bookName)`应该可以解决你的问题。这将对bookName进行编码，使其在HTTP请求中正确传输，从而避免了出现乱码。

相关问题

<div class="layui-tab-content layui-row layui-col-space30"> <div class="layui-col-xs3" v-for="(collect, index) in collectBook" :key="index"> <div class="goods"> <a :href="'detail?id='+collect.bookId"> <img :src="'/BookShopSystem_war/' + collect.image1"> </a> <p>{{ collect.bookName }}</p> <p class="price">￥{{ collect.bookPrice }}</p> <button @click="delCollect()"> <span class="del">&times;</span> </button> </div> </div> </div> new Vue({ el: "#app", data: { userId: '', collectBook: [] }, 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); }); }, 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("取消收藏"); }) } }该取消收藏方法有错，给出原因并纠正

在 `delCollect()` 方法中，`_this.collectBook.bookId` 是错误的，因为 `collectBook` 是一个数组，而不是一个单独的对象。另外，通过 `v-for="(collect, index) in collectBook"` 循环遍历 `collectBook` 数组，所以应该在 `delCollect()` 方法中传递 `collect.bookId` 作为参数，以便正确删除相应的收藏。以下是修改后的代码：

delCollect(bookId) {
  var _this = this;
  axios({
    method: "delete",
    url: "http://localhost:8080/BookShopSystem_war/deleteCollect",
    data: {
      userId: _this.userId,
      bookId: bookId
    }
  }).then(resp => {
    alert("取消收藏");
    // 从 collectBook 数组中移除被删除的收藏
    _this.collectBook = _this.collectBook.filter(collect => collect.bookId !== bookId);
  });
}

在模板中，需要将 `delCollect()` 方法调用中的参数改为 `collect.bookId`：

<button @click="delCollect(collect.bookId)">

这是前端代码 <div class="layui-tab-content layui-row layui-col-space30"> <div class="layui-col-xs3" v-for="(collect, index) in collectBook" :key="index"> <div class="goods"> <a :href="'detail?id='+collect.bookId"> <img :src="'/BookShopSystem_war/' + collect.image1"> </a> <p>{{ collect.bookName }}</p> <p class="price">￥{{ collect.bookPrice }}</p> <button @click="delCollect(collect.bookId)"> <span class="del">×</span> </button> </div> </div> </div> new Vue({ el: "#app", data: { userId: '', collectBook: [] }, 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); }); }, 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("取消收藏"); // 从 collectBook 数组中移除被删除的收藏 _this.collectBook = _this.collectBook.filter(collect => collect.bookId !== bookId); 请分析逻辑是否有误

这段前端代码主要是用于展示用户收藏的图书列表，其中通过 v-for 指令循环遍历用户收藏的每一本图书，展示图书的封面、名称和价格，并且为每一本图书提供了一个取消收藏的按钮。

在 mounted 钩子函数中，通过获取用户的 ID，调用后台接口获取该用户收藏的图书列表，并将数据赋值给 collectBook 数组，用于在页面中展示用户收藏的图书。

delCollect 方法用于取消用户收藏的图书，点击取消收藏按钮后，将调用后台接口将该图书从用户收藏的列表中删除，并且从 collectBook 数组中移除被删除的图书，最后弹出取消收藏的提示框。

逻辑上没有明显的错误，但是需要注意的是，由于涉及到与后台接口的交互，需要在后台接口中进行相应的安全性校验，以保证数据的安全。