SpringBoot+Vue实现的高校图书馆管理系统附带详细运行指导视频

比眉伴天荒 2023-10-07 21:09 69阅读 0赞

#### 文章目录 ####

*   *  一、项目演示
     *  二、项目介绍
     *  三、项目运行截图
     *  四、主要代码

### 一、项目演示 ###

**项目演示地址：** [视频地址][Link 1]

### 二、项目介绍 ###

项目描述：这是一个基于**SpringBoot+Vue**框架开发的高校图书馆管理系统。首先，这是一个**前后端分离**的项目，代码简洁规范，注释说明详细，易于理解和学习。其次，这项目功能丰富，具有一个高校图书馆管理系统该有的所有功能。

项目功能：此项目分为**两个**角色：**学生**和**管理员**。**学生**有登录注册、管理个人信息、浏览座位信息、预约选座、浏览图书信息、借阅图书、浏览借阅信息、管理预约信息等等功能。**管理员**有管理所有用户新息、管理所有座位信息、管理所有时刻信息、管理所有信誉积分信息、管理所有图书信息、管理所有预约选座、借阅信息等等功能。

应用技术：SpringBoot + Vue + MySQL + MyBatis + Redis + ElementUI

运行环境：IntelliJ IDEA2019.3.5 + MySQL5.7（项目压缩包中自带) + Redis5.0.5（项目压缩包中自带） + JDK1.8 + Gradle5.6.4（项目压缩包中自带）+ Node14.16.1（项目压缩包中自带）

### 三、项目运行截图 ###

项目运行截图：  
![在这里插入图片描述][393e51c6b1034ee9892c9e685e5cd0df.png]  
![在这里插入图片描述][0ef83802f9e345fca7f647016604b219.png]  
![在这里插入图片描述][d11716b8f07f44958144f2a9e206702c.png]  
![在这里插入图片描述][c7a8406e557c4da49a9378c978a636dd.png]  
![在这里插入图片描述][73784edf720b4560a0365d1a7a9ab656.png]  
![在这里插入图片描述][55fb9ead44c2476d826c6d8cc0327fa1.png]  
![在这里插入图片描述][a01c064dc82f4dba8c1b6a965f22e8a0.png]  
![在这里插入图片描述][52856400775340e3a9184c33a23d0bdd.png]  
![在这里插入图片描述][d42d18786c26460d80fc7b926ff0d4ff.png]  
![在这里插入图片描述][87384bc4bec642a389568fdb4e442afa.png]  
![在这里插入图片描述][cf8522b3a75440438c337080eacef293.png]  
![在这里插入图片描述][9a16e37ec17a4a1c8da3fdf6c13fa879.png]  
![在这里插入图片描述][d610ca9c8ca94a0d812910a3378fd030.png]  
![在这里插入图片描述][9d580d4d04b541a5b2290545d61e7294.png]  
![在这里插入图片描述][e1fd0b7f65034641a70268bd131b38e3.png]

### 四、主要代码 ###

**1.前端预约选座页面代码：**

<template>
        <div>
            
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home/dash-board' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>选座页面</el-breadcrumb-item>
            </el-breadcrumb>
            
            <el-form :inline="true" :model="searchParams" class="user-search">
                <el-form-item label="搜索：">
                    <el-date-picker
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            size="small"
                            v-model="searchParams.openTime"
                            type="date"
                            :picker-options="pickerOptions"
                            :clearable="false"
                            :editable="false">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchParams.scheduleId" size="small" placeholder="请选择时刻">
                        <el-option v-for="(item, index) in scheduleList" :key="index" :label="item.name + '(' + item.rangeTime + ')'" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="searchByTime">搜索</el-button>
                    <el-button size="small" v-if="loginUser.roleId === 1" type="primary" icon="el-icon-date" @click="pickOrderSeat">预约</el-button>
                </el-form-item>
            </el-form>
            <el-table :key="index" v-if="seat.row !== 0 && seat.col !== 0" size="small" :data="tableData" v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
                <el-table-column width="55">
                    <template slot-scope="scope">
                        <span style="color: #909399; font-weight: bold;">第{
       {scope.$index + 1}}行</span>
                    </template>
                </el-table-column>
                <el-table-column :width="seat.col > 9 ? 150 : ''" v-for="n in seat.col" :key="n"  align="center" :label="'第' + n + '列'" >
                    <template slot-scope="scope">
    
                        <el-badge v-if="scope.row.picked[n-1] === 0" type="danger" value="占座" style="margin-top: 10px">
                            <img style="width: 30px; height: 30px; margin-top: 10px"
                                 src="../../assets/img/sold_seat.jpg" />
                            <div>第{
       {scope.$index + 1}}行第{
       {n}}列</div>
                        </el-badge>
                        <el-badge v-else-if="scope.row.picked[n-1] === 1" type="primary" value="可选" style="margin-top: 10px">
                            <div @click="pickSeat(scope.$index, n-1)">
                                <img style="width: 30px; height: 30px; margin-top: 10px"
                                     src="../../assets/img/selectable_seat.jpg" />
                                <div>第{
       {scope.$index + 1}}行第{
       {n}}列</div>
                            </div>
                        </el-badge>
                        <el-badge v-else-if="scope.row.picked[n-1] === 2" type="success" value="选中" style="margin-top: 10px">
                            <div @click="cancelSeat(scope.$index + 1, n)">
                                <img style="width: 30px; height: 30px; margin-top: 10px"
                                     src="../../assets/img/selected_seat.jpg" />
                                <div>第{
       {scope.$index + 1}}行第{
       {n}}列</div>
                            </div>
                        </el-badge>
                    </template>
                </el-table-column>
            </el-table>
    
            <el-empty v-else :image-size="200"></el-empty>
        </div>
    </template>
    
    <script>
        export default {
          
            name: 'PickList',
            data() {
          
                return {
          
                    pickerOptions: {
          
                        disabledDate: (time) => {
          
                            return time.getTime() < Date.now() - 8.64e7
                        }
                    },
                    searchParams: {
          
                        openTime: '',
                        scheduleId: ''
                    },
                    seat: {
          
                        row: 0,
                        col: 0
                    },
                    scheduleList: [],
                    loading: false,
                    tableData: [],
                    pickSeatList: [],
                    seatItemList: [],
                    index: 0,
                    loginUser: {
          }
                }
            },
            created() {
          
                this.searchParams.openTime = this.getNowDay();
                this.getLoginUser();
                this.getAllScheduleList();
            },
            methods: {
          
                getNowDay() {
          
                    let date = new Date();
                    let y = date.getFullYear();
                    let m = date.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    let d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    return  y + '-' + m + '-' + d;
                },
                getLoginUser() {
          
                    this.$ajax.post("/user/getLoginUser", {
          token: Tool.getLoginUser()}).then((response)=>{
          
                        let resp = response.data;
                        if(resp.code === 0){
          
                            if(resp.data) {
          
                                this.loginUser = resp.data;
                            } else {
          
                                this.$message.error(resp.msg);
                                this.$router.push("/login");
                            }
                        }
                    });
                },
                pickSeat(row, col) {
          
                    if(this.pickSeatList.length >= 1) {
          
                        this.$message.warning("一次最多只能选1个座位！");
                        return false;
                    }
                    this.tableData[row].picked[col] = 2;
                    // 动态刷新表格
                    this.index = this.index + 1;
                    this.pickSeatList.push({
          row: row + 1, col: col + 1});
                },
                cancelSeat(row, col) {
          
                    this.tableData[row-1].picked[col-1] = 1;
                    // 动态刷新表格
                    this.index = this.index + 1;
                    let nowSeatList = [];
                    this.pickSeatList.forEach(item => {
          
                        if(item.col !== col || item.row !== row) {
          
                            nowSeatList.push(item);
                        }
                    });
                    this.pickSeatList = nowSeatList;
                },
                getSeatBySearch() {
          
                    this.loading = true;
                    this.$ajax.post("/seat/getByTime", this.searchParams).then((response)=>{
          
                        let resp = response.data;
                        if(resp.code === 0){
          
                            if(resp.data) {
          
                                this.seat = resp.data;
                                this.getSeatItem();
                            } else {
          
                                this.seat = {
          row: 0, col: 0};
                            }
                        }
                    });
                },
                initSeatDetailList() {
          
                    this.tableData = [];
                    for(let i=1; i<=this.seat.row; i++) {
          
                        let item = {
          picked: []};
                        for(let j=1; j<=this.seat.col; j++) {
          
                            item.picked.push(this.isPicked(i, j));
                        }
                        this.tableData.push(item);
                    }
                    this.loading = false;
                },
                isPicked(row, col) {
          
                    let result = 1;
                    this.seatItemList.forEach(item => {
          
                        if(item.row === row && item.col === col) {
          
                            result =  0; // 已被占座
                        }
                    });
                    return result; // 未被占座
                },
                getSeatItem() {
          
                    this.$ajax.post("/seat/getItemBySeatId", {
          id: this.seat.id}).then((response)=>{
          
                        let resp = response.data;
                        if(resp.code === 0){
          
                            this.seatItemList = resp.data;
                            this.initSeatDetailList();
                        } else {
          
                            this.$message.error(resp.msg);
                        }
                    });
                },
                pickOrderSeat() {
          
                     if(this.pickSeatList.length === 0) {
          
                         this.$message.warning("请至少选择一个座位！");
                         return false;
                     }
                     let seat = this.pickSeatList[0];
                     this.$confirm('确定要预约第'+ seat.row +'行第'+ seat.col +'列的座位？', '提示', {
          
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                     }).then(() => {
          
                         this.$ajax.post("/seat/pick", {
          ...seat, seatId: this.seat.id, userId: this.loginUser.id}).then((response)=>{
          
                             let resp = response.data;
                             if(resp.code === 0){
          
                                 this.$message.success(resp.msg);
                                 this.getSeatBySearch();
                                 this.pickSeatList = [];
                             } else {
          
                                 this.$message.error(resp.msg);
                             }
                         });
                     });
                },
                searchByTime() {
          
                    this.$confirm('搜索将导致当前选中的记录丢失，确认继续此操作？', '提示', {
          
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
          
                        this.pickSeatList = [];
                        this.getSeatBySearch();
                    });
                },
                getAllScheduleList() {
          
                    this.$ajax.post("/schedule/all").then((response)=>{
          
                        let resp = response.data;
                        if(resp.code === 0){
          
                            this.scheduleList = resp.data;
                            this.searchParams.scheduleId = this.scheduleList[0] ? this.scheduleList[0].id : '';
                            this.getSeatBySearch();
                        }
                    });
                }
            }
        }
    </script>
    
    <style scoped>
        .user-search {
          
            margin-top: 20px;
        }
        /deep/ .el-table tbody tr:hover>td {
          
            background-color:unset !important
        }
    </style>

**2.借阅图书业务逻辑代码：**

/**
         * 借阅图书操作
         * @param rentalItemDTO
         * @return
         */
        @Override
        public ResponseDTO<Boolean> rentalBook(RentalItemDTO rentalItemDTO) {
        
            // 进行统一表单验证
            CodeMsg validate = ValidateEntityUtil.validate(rentalItemDTO);
            if(!validate.getCode().equals(CodeMsg.SUCCESS.getCode())){
        
                return ResponseDTO.errorByMsg(validate);
            }
            User user = userMapper.selectByPrimaryKey(rentalItemDTO.getUserId());
            if(user == null) {
        
                return ResponseDTO.errorByMsg(CodeMsg.USER_NOT_EXIST);
            }
            if (user.getCreditRate() < 80) {
        
                return ResponseDTO.errorByMsg(CodeMsg.CREDIT_RENTAL_ERROR);
            }
            Book book = bookMapper.selectByPrimaryKey(rentalItemDTO.getBookId());
            if(book == null) {
        
                return ResponseDTO.errorByMsg(CodeMsg.BOOK_NOT_EXIST);
            }
            if(CommonUtil.differentDaysByMillisecond(new Date(), rentalItemDTO.getPredictTime()) > 180) {
        
                return  ResponseDTO.errorByMsg(CodeMsg.BOOK_RENTAL_TIME_OVER);
            }
            // 修改图书状态 乐观锁控制
            BookExample bookExample = new BookExample();
            bookExample.createCriteria().andIdEqualTo(book.getId()).andVersionEqualTo(book.getVersion());
            book.setState(BookStateEnum.RENTAL.getCode());
            book.setVersion(book.getVersion() + 1);
            if(bookMapper.updateByExampleSelective(book, bookExample) == 0) {
        
                return ResponseDTO.errorByMsg(CodeMsg.BOOK_EDIT_ERROR);
            }
            // 写入借阅详情信息
            RentalItem rentalItem = CopyUtil.copy(rentalItemDTO, RentalItem.class);
            rentalItem.setId(UuidUtil.getShortUuid());
            rentalItem.setCreateTime(new Date());
            rentalItem.setBookName(book.getName());
            rentalItem.setBookPhoto(book.getPhoto());
            rentalItem.setState(RentalItemStateEnum.RENTAL.getCode());
            if(rentalItemMapper.insertSelective(rentalItem) == 0) {
        
                throw new RuntimeException(CodeMsg.BOOK_RENTAL_ERROR.getMsg());
            }
            return ResponseDTO.successByMsg(true, "借阅成功！");
        }

**3.用户登录业务逻辑代码：**

/**
         * 用户登录操作
         * @param userDTO
         * @return
         */
        @Override
        public ResponseDTO<UserDTO> login(UserDTO userDTO) {
        
            // 进行是否为空判断
            if(CommonUtil.isEmpty(userDTO.getUsername())){
        
                return ResponseDTO.errorByMsg(CodeMsg.USERNAME_EMPTY);
            }
            if(CommonUtil.isEmpty(userDTO.getPassword())){
        
                return ResponseDTO.errorByMsg(CodeMsg.PASSWORD_EMPTY);
            }
            if(CommonUtil.isEmpty(userDTO.getCaptcha())){
        
                return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_EMPTY);
            }
            if(CommonUtil.isEmpty(userDTO.getCorrectCaptcha())){
        
                return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_EXPIRED);
            }
            // 比对验证码是否正确
            String value = stringRedisTemplate.opsForValue().get((userDTO.getCorrectCaptcha()));
            if(CommonUtil.isEmpty(value)){
        
                return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_EXPIRED);
            }
            if(!value.toLowerCase().equals(userDTO.getCaptcha().toLowerCase())){
        
                return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_ERROR);
            }
            // 对比昵称和密码是否正确
            UserExample userExample = new UserExample();
            // select * from user where username = ? and password = ?
            userExample.createCriteria().andUsernameEqualTo(userDTO.getUsername()).andPasswordEqualTo(userDTO.getPassword());
            List<User> userList = userMapper.selectByExample(userExample);
            if(userList == null || userList.size() != 1){
        
                return ResponseDTO.errorByMsg(CodeMsg.USERNAME_PASSWORD_ERROR);
            }
            // 生成登录token并存入Redis中
            UserDTO selectedUserDto = CopyUtil.copy(userList.get(0), UserDTO.class);
            String token = UuidUtil.getShortUuid();
            selectedUserDto.setToken(token);
            //把token存入redis中 有效期1小时
            stringRedisTemplate.opsForValue().set("USER_" + token, JSON.toJSONString(selectedUserDto), 3600, TimeUnit.SECONDS);
            return ResponseDTO.successByMsg(selectedUserDto, "登录成功！");
        }

[Link 1]: https://www.bilibili.com/video/BV1ze411L7NP
[393e51c6b1034ee9892c9e685e5cd0df.png]: https://img-blog.csdnimg.cn/393e51c6b1034ee9892c9e685e5cd0df.png
[0ef83802f9e345fca7f647016604b219.png]: https://img-blog.csdnimg.cn/0ef83802f9e345fca7f647016604b219.png
[d11716b8f07f44958144f2a9e206702c.png]: https://img-blog.csdnimg.cn/d11716b8f07f44958144f2a9e206702c.png
[c7a8406e557c4da49a9378c978a636dd.png]: https://img-blog.csdnimg.cn/c7a8406e557c4da49a9378c978a636dd.png
[73784edf720b4560a0365d1a7a9ab656.png]: https://img-blog.csdnimg.cn/73784edf720b4560a0365d1a7a9ab656.png
[55fb9ead44c2476d826c6d8cc0327fa1.png]: https://img-blog.csdnimg.cn/55fb9ead44c2476d826c6d8cc0327fa1.png
[a01c064dc82f4dba8c1b6a965f22e8a0.png]: https://img-blog.csdnimg.cn/a01c064dc82f4dba8c1b6a965f22e8a0.png
[52856400775340e3a9184c33a23d0bdd.png]: https://img-blog.csdnimg.cn/52856400775340e3a9184c33a23d0bdd.png
[d42d18786c26460d80fc7b926ff0d4ff.png]: https://img-blog.csdnimg.cn/d42d18786c26460d80fc7b926ff0d4ff.png
[87384bc4bec642a389568fdb4e442afa.png]: https://img-blog.csdnimg.cn/87384bc4bec642a389568fdb4e442afa.png
[cf8522b3a75440438c337080eacef293.png]: https://img-blog.csdnimg.cn/cf8522b3a75440438c337080eacef293.png
[9a16e37ec17a4a1c8da3fdf6c13fa879.png]: https://img-blog.csdnimg.cn/9a16e37ec17a4a1c8da3fdf6c13fa879.png
[d610ca9c8ca94a0d812910a3378fd030.png]: https://img-blog.csdnimg.cn/d610ca9c8ca94a0d812910a3378fd030.png
[9d580d4d04b541a5b2290545d61e7294.png]: https://img-blog.csdnimg.cn/9d580d4d04b541a5b2290545d61e7294.png
[e1fd0b7f65034641a70268bd131b38e3.png]: https://img-blog.csdnimg.cn/e1fd0b7f65034641a70268bd131b38e3.png