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

一、项目演示

项目演示地址： 视频地址

二、项目介绍

项目描述：这是一个基于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（项目压缩包中自带）

三、项目运行截图

项目运行截图：

四、主要代码

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.用户登录业务逻辑代码：文章来源地址https://www.toymoban.com/news/detail-425895.html

 	/**
     * 用户登录操作
     * @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, "登录成功！");
    }

到了这里，关于SpringBoot+Vue实现的高校图书馆管理系统 附带详细运行指导视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！