基于SpringBoot+Vue的校园图书管理系统+源码+文档

基于SpringBoot+Vue的校园图书管理系统

一、项目概述

本项目是一个基于SpringBoot + Vue 2构建的校园图书管理系统，采用前后端分离架构，分为前台用户端和后台管理端两个独立模块。系统实现了图书管理、借阅预约、归还登记、逾期管理、反馈处理等完整的图书馆业务流程。

二、技术栈

前端技术栈

后端技术栈

三、项目结构

校园图书管理系统/ ├── admin-web/ # 后台管理系统 │ ├── src/ │ │ ├── components/ # 公共组件 │ │ ├── router/ # 路由配置 │ │ ├── store/ # 状态管理 │ │ ├── utils/ # 工具函数 │ │ ├── views/ # 页面视图 │ │ │ └── modules/# 业务模块 │ │ ├── App.vue │ │ └── main.js │ └── package.json └── front-web/ # 前台用户系统 ├── src/ │ ├── common/ # 公共模块 │ ├── components/ # 公共组件 │ ├── config/ # 配置文件 │ ├── App.vue │ └── main.js └── package.json

四、核心功能模块

后台管理端功能

前台用户端功能

五、核心代码

5.1 路由配置（admin-web/src/router/router-static.js）

importVuefrom'vue';importVueRouterfrom'vue-router';Vue.use(VueRouter);importIndexfrom'@/views/index';importHomefrom'@/views/home';importLoginfrom'@/views/login';importtushuxinxifrom'@/views/modules/tushuxinxi/list';importjieyuejilufrom'@/views/modules/jieyuejilu/list';// ... 其他模块导入exportconstroutes=[{path:'/',name:'系统首页',component:Index,children:[{path:'/',name:'系统首页',component:Home,meta:{icon:'',title:'center',affix:true}},{path:'/tushuxinxi',name:'图书信息',component:tushuxinxi},{path:'/jieyuejilu',name:'借阅记录',component:jieyuejilu}]},{path:'/login',name:'login',component:Login,meta:{icon:'',title:'login'}},{path:'*',component:NotFound}];constrouter=newVueRouter({mode:'hash',routes});constoriginalPush=VueRouter.prototype.push;VueRouter.prototype.push=functionpush(location){returnoriginalPush.call(this,location).catch(err=>err);};exportdefaultrouter;

5.2 HTTP请求封装（admin-web/src/utils/http.js）

importaxiosfrom'axios';importrouterfrom'@/router/router-static';importstoragefrom'@/utils/storage';import{Message}from'element-ui';consthttp=axios.create({timeout:1000*86400,withCredentials:true,baseURL:'/xiaoyuantushu',headers:{'Content-Type':'application/json; charset=utf-8'}});// 请求拦截器：自动携带Tokenhttp.interceptors.request.use(config=>{config.headers['Token']=storage.get('Token');returnconfig;},error=>{returnPromise.reject(error);});// 响应拦截器：处理Token失效http.interceptors.response.use(response=>{if(response.data&&response.data.code===401){setTimeout(()=>{router.push({name:'login'});},1000);}returnresponse;},error=>{returnPromise.reject(error);});exportdefaulthttp;

5.3 登录组件核心逻辑（admin-web/src/views/login.vue）

exportdefault{data(){return{loginType:1,rulesForm:{username:"",password:"",role:"",},roles:[],showPassword:false,};},mounted(){letmenus=menu.list();for(leti=0;i<menus.length;i++){if(menus[i].hasBackLogin==='是'){this.roles.push(menus[i]);}}},methods:{login(){if(!this.rulesForm.username){this.$message.error('请输入账号');return;}if(!this.rulesForm.password){this.$message.error('请输入密码');return;}this.$http.post(`${this.rulesForm.role}/login`,{username:this.rulesForm.username,password:this.rulesForm.password}).then(res=>{if(res.data.code===200){this.$storage.set("Token",res.data.token);this.$storage.set("username",this.rulesForm.username);this.$storage.set("role",this.rulesForm.role);this.$router.push({name:'系统首页'});}else{this.$message.error(res.data.message);}});}}}

5.4 首页统计组件（admin-web/src/views/home.vue）

<template><divclass="home-content"><div id="home-title"class="home-title"><span>欢迎使用</span>{{this.$project.projectName}}</div><divclass="statis-box"><divclass="statis1"v-if="isAuth('tushuxinxi','首页总数')"><spanclass="icon iconfont icon-zhangjie7"></span><divclass="num">{{tushuxinxiCount}}</div><divclass="name">图书信息总数</div></div><divclass="statis2"v-if="isAuth('yuyueshenqing','首页总数')"><spanclass="icon iconfont icon-touxiang04"></span><divclass="num">{{yuyueshenqingCount}}</div><divclass="name">预约申请总数</div></div><divclass="statis3"v-if="isAuth('jieyuejilu','首页总数')"><spanclass="icon iconfont icon-hexiao4"></span><divclass="num">{{jieyuejiluCount}}</div><divclass="name">借阅记录总数</div></div></div><divclass="type4"><divclass="echarts1"v-if="isAuth('tushuxinxi','首页统计',2)"><div id="tushuxinxiChart1"style="width: 100%;height: 100%"></div></div></div></div></template>

5.5 图书信息列表（admin-web/src/views/modules/tushuxinxi/list.vue）

<template><divclass="main-content"><el-form:model="searchForm"inline><el-input v-model="searchForm.tushumingcheng"placeholder="图书名称"@keydown.enter.native="search()"clearable></el-input><el-select v-model="searchForm.tushufenlei"placeholder="图书分类"><el-option v-for="item in tushufenleiOptions":key="item":label="item":value="item"></el-option></el-select><el-button type="success"@click="search()">查询</el-button></el-form><el-button type="success"@click="addOrUpdateHandler()">添加</el-button><el-button type="danger"@click="deleteHandler()":disabled="dataListSelections.length === 0">批量删除</el-button><el-table:data="dataList"@selection-change="selectionChangeHandler"><el-table-column type="selection"width="50"></el-table-column><el-table-column prop="tushumingcheng"label="图书名称"></el-table-column><el-table-column prop="tushufenlei"label="图书分类"></el-table-column><el-table-column prop="kucunshuliang"label="库存数量"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="addOrUpdateHandler(scope.row)">修改</el-button><el-button type="danger"@click="deleteHandler(scope.row.id)">删除</el-button></template></el-table-column></el-table><el-pagination @size-change="sizeChangeHandler"@current-change="currentChangeHandler":current-page="page":page-sizes="[10, 20, 50]":page-size="limit":total="total"layout="total, sizes, prev, pager, next, jumper"></el-pagination></div></template>

5.6 工具函数 - 本地存储（admin-web/src/utils/storage.js）

conststorage={set(key,value){localStorage.setItem(key,JSON.stringify(value));},get(key){returnlocalStorage.getItem(key)?localStorage.getItem(key).replace('"','').replace('"',''):"";},getObj(key){returnlocalStorage.getItem(key)?JSON.parse(localStorage.getItem(key)):null;},remove(key){localStorage.removeItem(key);},clear(){localStorage.clear();}};exportdefaultstorage;

5.7 配置管理（admin-web/src/utils/base.js）

constbase={get(){return{url:"http://localhost:8080/xiaoyuantushu/",name:"xiaoyuantushu",indexUrl:'http://localhost:8080/xiaoyuantushu/front/dist/index.html'};},getProjectName(){return{projectName:"基于SpringBoot+Vue的校园图书管理系统"};},getUsersName(){return{usersname:'管理员'};}};exportdefaultbase;

六、运行说明

后台管理端

cdadmin-webnpminstallnpmrun serve# 开发环境npmrun build# 生产构建

前台用户端

cdfront-webnpminstallnpmrun serve# 开发环境npmrun build# 生产构建

七、系统界面

📞 联系方式
如果您需要 毕业设计指导 、 项目定制开发 或 技术咨询 ，欢迎联系我！

如果本文对您有帮助，欢迎点赞、收藏、关注！ 👍

✨ 关注我，获取更多优质毕设项目和技术分享！