9 管理员功能-修改图书

1 请求接口

请求路径：http://localhost:8082/book/updateBook
请求方式：PUT
接口描述：提交登录的token信息，要求为管理员权限，根据获取的bookId来修改指定的图书相关信息。
请求参数：postman中使用 raw 模式，提交JSON格式请求体。

2 修改图书后台功能实现（Java）

//更新图书信息
    @PutMapping("/updateBook")
    public Result updateBookMsg(@RequestBody Book book){
        UpdateWrapper<Book> updateWrapper = new UpdateWrapper<>();
        updateWrapper.eq("book_id", book.getBookId())
                .set("book_name", book.getBookName())
                .set("book_isbn", book.getBookIsbn())
                .set("book_press", book.getBookPress())
                .set("book_author", book.getBookAuthor())
                .set("book_pagination", book.getBookPagination())
                .set("book_price", book.getBookPrice())
                .set("book_uploadtime", book.getBookUploadtime())
                .set("book_status", book.getBookStatus())
                .set("book_borrower", book.getBookBorrower())
                .set("book_borrowtime", book.getBookBorrowtime())
                .set("book_returntime", book.getBookReturntime());
        boolean result = iBookService.update(updateWrapper);
        if (result) {
            return Result.success("修改图书成功!");
        } else {
            return Result.error("修改失败,图书可能不存在或是出现错误!");
        }

    }

3 /api/book.js中添加修改图书的接口代码

// 修改图书
export const bookUpdateService = (bookData) => {
    return request.put('/book/updateBook', bookData)
}

4 修改BookResourcesVue组件中 图书列表部分框架如下

   <!-- 图书列表 -->
        <el-table :data="books" style="width: 100%" :default-sort="{ prop: 'bookName', order: 'descending' }">
            <el-table-column label="书名" sortable>
                <template #default="{ row }">
                    <el-input v-if="isEditing(row)" v-model="row.bookName" />
                    <span v-else>{{ row.bookName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="ISBN">
                <template #default="{ row }">
                    <el-input v-if="isEditing(row)" v-model="row.bookIsbn" />
                    <span v-else>{{ row.bookIsbn }}</span>
                </template>
            </el-table-column>
            <el-table-column label="出版社">
                <template #default="{ row }">
                    <el-input v-if="isEditing(row)" v-model="row.bookPress" />
                    <span v-else>{{ row.bookPress }}</span>
                </template>
            </el-table-column>
            <el-table-column label="作者">
                <template #default="{ row }">
                    <el-input v-if="isEditing(row)" v-model="row.bookAuthor" />
                    <span v-else>{{ row.bookAuthor }}</span>
                </template>
            </el-table-column>
            <el-table-column label="页数">
                <template #default="{ row }">
                    <el-input v-if="isEditing(row)" v-model.number="row.bookPagination" />
                    <span v-else>{{ row.bookPagination }}</span>
                </template>
            </el-table-column>
            <el-table-column label="价格">
                <template #default="{ row }">
                    <el-input v-if="isEditing(row)" v-model="row.bookPrice" />
                    <span v-else>{{ row.bookPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上传时间" prop="bookUploadtime"></el-table-column>
            <el-table-column label="状态" prop="bookStatus" sortable></el-table-column>
            <el-table-column label="借阅人" prop="bookBorrower"></el-table-column>
            <el-table-column label="借阅时间" prop="bookBorrowtime"></el-table-column>
            <el-table-column label="归还时间" prop="bookReturntime"></el-table-column>
            <el-table-column v-if="useruserInfoStore.isAdmin" label="操作" width="100">
                <template #default="{ row }">
                    <el-button v-if="!isEditing(row)" :icon="Edit" circle plain type="primary"
                        @click="startEdit(row.bookId)"></el-button>
                    <el-button v-else :icon="Check" circle plain type="success" @click="updateBook(row)">提交</el-button>
                    <el-button v-if="isEditing(row)" :icon="Close" circle plain type="danger"
                        @click="cancelEdit()">取消</el-button>
                    <el-button v-if="!isEditing(row)" :icon="Delete" circle plain type="danger"
                        @click="deleteBook(row.bookId)"></el-button>
                </template>
            </el-table-column>
            <el-table-column v-else label="操作" width="100">
                <template #default="{ row }">
                    <el-button v-if="row.bookStatus == 0" plain type="primary"
                        @click="borrowBook(row.bookId)">借阅</el-button>
                    <el-button v-if="row.bookStatus == 1" plain disabled type="primary"
                        @click="borrowBook(row.bookId)">借阅</el-button>
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

5 调用接口代码，实现编辑功能

// 开始编辑图书
const startEdit = (bookId) => {
    editingBookId.value = bookId

}

// 取消编辑图书
const cancelEdit = () => {
    editingBookId.value = null
}

// 更新图书
import { bookUpdateService } from '@/api/book.js'
const updateBook = (book) => {
    bookUpdateService(book).then(result => {
        ElMessage.success(result.message ? result.message : '更新成功')
        // 刷新列表
        getBooks()
        // 取消编辑状态
        editingBookId.value = null
    }).catch(error => {
        ElMessage.error(error.message)
    })
}

6 功能演示

修改操作演示
修改图书操作演示