11 图书借阅功能实现(Vue3+element plus +Spring Boot)

目录

  • [1 功能描述](#1 功能描述)
  • [2 接口地址](#2 接口地址)
  • [3 后端代码](#3 后端代码)
  • [4 api/book.js中编写借阅图书的接口代码](#4 api/book.js中编写借阅图书的接口代码)
  • [5 BookResourcesVue.vue组件中完成点击事件borrowBook](#5 BookResourcesVue.vue组件中完成点击事件borrowBook)
  • [6 功能演示](#6 功能演示)

1 功能描述

普通用户借阅图书,点击借阅按钮,修改图书状态,最多能够借阅3本图书。

2 接口地址

图书借阅

GET http://localhost:8082/book/borrowBook

3 后端代码

java 复制代码
 //用户借阅图书功能
    @GetMapping("/borrowBook")
    public Result userBorrowBook(String bookId){
       User user = ThreadLocalUtil.get();
//      查询用户当前借了是否达到三本书,如果达到,禁止借阅
        QueryWrapper<Book> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("book_borrower",user.getUserName());
        List<Book> books = iBookService.list(queryWrapper);
        if(books.size()>=3){
            return Result.error("借阅图书失败,借阅图书数量已达上限!");
        }
        //定义时间格式
        DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
        //获取当前时间 格式为 yyyy-MM-dd
        String borrowTime = LocalDate.now().format(dateFormatter);
        //设置还书时间为当前时间的30天之后
        String returnTime =  LocalDate.now().plusDays(30).format(dateFormatter);
        //通过book_id查找需要借阅的图书
        UpdateWrapper<Book> updateWrapper = new UpdateWrapper<>();
        updateWrapper.eq("book_id",bookId)
                .set("book_borrower",user.getUserName())
                .set("book_status","1")
                .set("book_borrowtime",borrowTime)
                .set("book_returntime",returnTime);

        boolean result = iBookService.update(updateWrapper); // 调用 update 方法
        if (result) {
            return Result.success("借阅图书成功");
        } else {
            return Result.error("借阅失败,可能图书已被其他人借阅或者是其他问题!");
        }
    }

4 api/book.js中编写借阅图书的接口代码

javascript 复制代码
//借阅图书 发送get请求
export const bookBorrowService = (bookId) => {
    return request.get('/book/borrowBook', { params: { bookId: bookId } })
}

5 BookResourcesVue.vue组件中完成点击事件borrowBook

html 复制代码
 <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>

点击借阅,实现对应代码

javascript 复制代码
// 导入借阅图书的接口
import { bookBorrowService } from '@/api/book.js'
const borrowBook = async (bookId) => {
    // 提示要借阅吗 如果确定 提交借阅申请
    await ElMessageBox.confirm('确定要借阅吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 用户点击了确定
        console.log("要借阅的图书为:" + bookId);
        bookBorrowService(bookId).then(result => {
            ElMessage.success(result.message ? result.message : '借阅成功')
            // 刷新列表
            getBooks()
        })
    }).catch(error => {
        ElMessage.error(error.message)
    })

}

6 功能演示

添加链接描述

相关推荐
摇滚侠1 分钟前
Spring Boot3零基础教程,生命周期启动加载机制,笔记64
spring boot·笔记
摇滚侠4 分钟前
Spring Boot3零基础教程,整合 Redis,笔记69
spring boot·redis·笔记
Thepatterraining8 分钟前
MySQL Java开发终极教程:三种技术栈对比,大厂资深开发经验分享
数据库·mysql
葡萄城技术团队11 分钟前
提升 Web 端 JavaScript 的可信度:WAICT 体系详解
javascript
yangwan11 分钟前
Ubunut 22.04 安装 Docker 24.0.x
前端·后端
等风起88111 分钟前
Element Plus实现TreeSelect树形选择在不同父节点下子节点有相同id的双向绑定联动
前端·javascript
摸着石头过河的石头12 分钟前
跨域资源共享(CORS)完全指南:从基础概念到实际应用
前端·javascript
小胖霞13 分钟前
阿里云域名解析 + Nginx 反向代理 + HTTPS 全流程:从 IP 访问到加密域名的完整配置
前端
xiaohe060113 分钟前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts
2301_8012522214 分钟前
Vue中的指令
前端·javascript·vue.js