草庐IT

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

这里是杨杨吖 2023-12-31 原文

文章目录

一、项目演示

项目演示地址: 视频地址

二、项目介绍

项目描述:这是一个基于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.用户登录业务逻辑代码:

 	/**
     * 用户登录操作
     * @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实现的高校图书馆管理系统 附带详细运行指导视频的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器,并将RVM安装的ruby​​实现设置为默认值,这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时,它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径?谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣,可以在这里获取:http://github.com/senny/rvm.el

  4. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  5. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  6. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  7. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  9. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  10. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

随机推荐