# 基于Spring Boot+Vue的图书管理系统 **Repository Path**: L1mit1337/library-management-system ## Basic Information - **Project Name**: 基于Spring Boot+Vue的图书管理系统 - **Description**: 技术栈 vue3 ts elementplus springboot mybatisplus redis mysql - **Primary Language**: Java - **License**: GPL-2.0 - **Default Branch**: develop - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 8 - **Forks**: 1 - **Created**: 2023-05-10 - **Last Updated**: 2025-06-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 📖介绍 ![Vue](https://img.shields.io/badge/Vue-3.0%2B-brightgreen) ![UIFrame: element-plus (shields.io)](https://img.shields.io/badge/UIFrame-element--plus-blue) ![JDK](https://img.shields.io/badge/JDK-1.8-yellow) ![Framework: Springboot (shields.io)](https://img.shields.io/badge/Framework-Springboot-yellowgreen) ![DataBase: MySql (shields.io)](https://img.shields.io/badge/DataBase-MySql-9cf) ![Cache: Redis (shields.io)](https://img.shields.io/badge/Cache-Redis-red) ![ORM: Mybatis-plus (shields.io)](https://img.shields.io/badge/ORM-Mybatis--plus-87CEFA) ![Token: JWT (shields.io)](https://img.shields.io/badge/Token-JWT-32CD32) > 自己第一个Vue前后端分离项目 写的时间一个月了 毕竟都是第一次写 这是个demo版本 基于Vue3+elementplus+java+Springboot+Mysql+Redis+JWT+Mybatis-plus的图书管理系统 基本上技术是**近几年比较新**的 第一次写**前后端分离** 之前用老框架写了个 软件项目管理系统(侧重于那种 项目代码接单 ) 这个项目是从4月中旬开始写的 当时考虑采用的技术是没有**Redis和JWT**的 5月份开发过程中陆续加上的 *** ## ⌨️开发过程 > 详细的可以去markdown文件夹中查看**开发日志**和**bug记录** 总之是相当困难 由于是**个人开发**而且是**第一次 缺乏经验** 大都数情况下都要边查边写 不过好在功能都一一实现了 大部分功能基本上是**两天一个**比如 登录功能 吧 写先写后端的接口 然后写前端的接口 再写后端的业务逻辑 再写前端的业务逻辑 过程中可能有**无数BUG** 光修这些都**耗费了大量的时间** 导致**开发进度缓慢** *** ## 🙏🏻特别鸣谢 得感谢开源社区 各个技术的开源 让我这个项目得以实现 感谢 掘金 CSDN Element-plus Vue Mybatis-plus MySQl..... *** ## 🔨技术栈 Vue3+vue-cli+elementplus+java+Springboot+Mysql+Redis+Mybatis-plus 前端还用到了一些小玩意: :pineapple: [Pinia](https://pinia.vuejs.org/zh/ "Pinia官网") 用于代替Vuex 可以更容易写store 数据统计方面使用了 [Apache Echarts](https://echarts.apache.org/zh/index.html "Apache Echarts官网") 这个图表库 后端的Redis主要是应用于 **电子邮箱验证功能** *** ## ✨亮点 ✅新颖的界面样式 使用了**element-plus** UI框架 ✅完整的登录 注册(使用**电子邮箱注册**) 找回密码 ✅较为完善的**路由拦截**，**后端接口拦截**(使用**JWT**验证) **安全性**较高 ✅功能较全的后台管理 实现了**数据统计(Echarts图表库)**和**图书,借书,用户管理** ✅上传图片功能 可以更换**个人头像**与**图书封面** ✅普通用户也可以**借书** 查看自己**借阅的书籍** **未来**将有更多功能陆续加入 比如 聊天室 热门图书排行榜 推送公告通知... *** ## 🖼️界面 ![登录](https://img.picui.cn/free/2024/06/13/666aefc75f834.png) ![首页](https://img.picui.cn/free/2024/06/13/666aefc71ce56.png) ![用户管理](https://img.picui.cn/free/2024/06/13/666aefc73807e.png) ![图书管理](https://img.picui.cn/free/2024/06/13/666aefc734e0c.png) ![借书管理](https://img.picui.cn/free/2024/06/13/666aefc723bae.png) *** # ⚙️项目设置 ## 前提 环境 **JDK1.8 Node.js16.xx maven-3.6.3** **Redis Mysql5.7** 确保这些**全部安装** **再进行后面的相关设置** ## 前后端相关设置 ### 🛠️前端安装依赖 以下是npm的命令也可以使用yarn node.js 版本最好是16.xx 最好配置一下国内的镜像源 ``` npm install npm i @icon-park/vue npm install echarts ``` ### ▶️启动项目 ``` npm run serve ``` ### 📦编译项目用于线上部署 ``` npm run build ``` ### 🛠️后端安装依赖 ``` 后端这边使用的是maven 使用ide的话直接安装 最好配置国内镜像源 ``` ### 📦后端打包用于线上部署 ``` 使用maven lifecycle 中的package命名 在src\java\ 目录下会生成target文件夹 打开后有xxx.jar就是打包好的文件了 ``` ## 📄自定义配置（必须配置） ### vue.config.js 网站端口 代理服务器地址 等等设置 ```typescript const { defineConfig } = require('@vue/cli-service') const { VueLoaderPlugin } = require('vue-loader') module.exports = defineConfig({ transpileDependencies: true, devServer: { //记住，别写错了devServer//设置本地默认端口 选填 port: 8080, //前端项目端口 proxy: { //设置代理，必须填 '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定 target: 'http://localhost:9090', //代理的目标地址 changeOrigin: true, //是否设置同源，输入是的 pathRewrite: { //路径重写 '/api': '' //选择忽略拦截器里面的内容 } } } } } ) ``` ### application.properties 后端服务器端口 mysql数据库 redis stmp邮箱等需要手动配置 ```properties #后端服务器端口 server.port=9090 #Mysql数据库相关配置 spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.druid.url=jdbc:mysql://localhost:3306/springboot_vue?characterEncoding=UTF8&useUnicode=true&allowMultiQueries=true&useSSL=false spring.datasource.druid.username=root spring.datasource.druid.password=XXXX spring.datasource.druid.initialSize=10 spring.datasource.druid.maxActive=20 spring.datasource.druid.maxWait=60000 spring.datasource.druid.minIdle=1 spring.datasource.druid.timeBetweenEvictionRunsMillis=60000 spring.datasource.druid.minEvictableIdleTimeMillis=300000 spring.datasource.druid.testWhileIdle=true spring.datasource.druid.testOnBorrow=true spring.datasource.druid.testOnReturn=false spring.datasource.druid.poolPreparedStatements=true spring.datasource.druid.maxOpenPreparedStatements=20 spring.datasource.druid.validationQuery=SELECT 1 spring.datasource.druid.validation-query-timeout=500 spring.datasource.druid.filters=stat spring.datasource.druid.stat-view-servlet.enabled=true spring.datasource.druid.stat-view-servlet.url-pattern=/druid/* spring.datasource.druid.stat-view-servlet.reset-enable=true spring.datasource.druid.stat-view-servlet.login-username=admin spring.datasource.druid.stat-view-servlet.login-password=longpanws9 #mybatis.mapper-locations=classpath:mappers/*xml #mybatis.type-aliases-package=com.example.demo.mybatis.entity mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl #邮箱验证相关配置 spring.mail.default-encoding=UTF-8 #填写你的邮箱相关配置 stmp服务器 授权码 spring.mail.host=smtp.163.com spring.mail.username=xxxxx@163.com spring.mail.password=xxxxxx spring.mail.properties.mail.smtp.auth=true spring.mail.properties.mail.smtp.starttls.enable=true spring.mail.properties.mail.smtp.starttls.required=true #redis相关配置 spring.redis.host=localhost spring.redis.password=xxxx #端口 6379 spring.redis.port=6379 spring.redis.pool.max-actice=3 #如果是线上部署 则改为你服务器的ip file.ip=localhost #请求设置 用于JWT验证 jwt.tokenHeader=Authorization jwt.expiration=86400 jwt.tokenHead=Bearer ``` ### MySql数据库配置 创建名为**springboot_vue**的数据库 运行**springboot_vue.sql**文件 完成**建库建表** 账号密码在**user**表用于**用户管理** **book**表用于**图书管理** **borrowbook**表用于**借书管理** ### Redis数据库配置 安装即可 设置好**端口 密码** 与application.properties中相关**Redis的配置保持一致**