Skip to content

Repository files navigation

Java 8Spring Boot 2Vue 3
Github starsGithub forksGitee starsGitee forks

图书管理系统

项目说明

  • 此项目为图书管理系统,后台使采用的是springboot+mybatis等技术实现数据持久化以及api服务调用,前台使用vue.js,vue-resource,vue-router,iView2.0UI框架,vue-quill-editor等技术实现前台页面

开发环境

Windows

配置环境

程序版本说明
Jdk1.8.0 161Java 开发工具包
Mysql5.5.27关系型数据库
Apache-maven3.9.0Java 项目管理和构建工具
Nvm1.10Node.js 版本管理器
Node8.12.0Node.js JavaScript 运行时环境

开发工具

工具版本说明
IDEA2022.3.2后前端开发IDE
Git2.24.1代码托管平台
Google Chrome75.0.3770.100浏览器、前端调试工具
Navicat11.1.13数据库连接工具
Postman7.1.0接口测试工具
VMware Workstation Pro14.1.3虚拟机(未用到或许你会用到)
PowerDesigner15数据库设计工具(未用到或许你会用到)
SQLyog12.0.3数据库连接工具 (未用到或许你会用到)
Visio2013时序图、流程图等绘制工具(未用到或许你会用到)
ProcessOn——架构图等绘制工具(未用到或许你会用到)
XMind ZEN9.2.0思维导图绘制工具(未用到或许你会用到)
RedisDesktop0.9.3.817redis客户端连接工具(未用到或许你会用到)

编码规范

  • 规范方式:严格遵守阿里编码规约。
  • 命名统一:简介最大程度上达到了见名知意。
  • 分包明确:层级分明可快速定位到代码位置。
  • 注释完整:描述性高大量减少了开发人员的代码阅读工作量。
  • 工具规范:使用统一jar包避免出现内容冲突。
  • 代码整洁:可读性、维护性高。

包结构

 +- libraryms-sb -- 图书管理系统服务端
+- .mvn
+- wrapper
+- src
| +- main
| | +- java
| | | +- com
| | | | +- lin
| | | | | +- appapidemo
| | | | | | +- controller -- 控制器类 负责接收和处理HTTP请求
| | | | | | +- mapper -- MyBatis框架的数据访问层
| | | | | | +- model -- 数据模型类
| | | | | | +- util -- 工具类
| | | | | | +- AppapidemoApplication.java -- 应用程序入口类
| | | | | | +- CorsConfig.java -- 配置跨域访问
| | | | | | +- Swagger2.java -- 用于集成 Swagger2 API 文档工具的相关配置
| | +- resources
| | +- application.properties -- 应用程序的配置信息
| +- test -- 测试代码
| |	+- java
| | +- com
| | +- lin
| | +- appapidemo
+- target -- Maven建项目时自动生成的目录
+- .gitignore -- 指定需要 Git 忽略的文件或目录
+- LICENSE -- 开源软件的授权协议
+- mvnw -- Maven Wrapper 的脚本,作用是为了在开发团队中使用一致的 Maven 版本,以及简化在新环境中安装 Maven 的步骤 用于 Linux 或 macOS 系统
+- mvnw.cmd -- Maven Wrapper 的脚本,作用是为了在开发团队中使用一致的 Maven 版本,以及简化在新环境中安装 Maven 的步骤 用于 Windows 系统
+- pom.xml -- 用于声明和管理项目依赖的XML文件
+- README.md -- 项目的相关信息文档
+- libraryms-Vue -- 图书管理系统客户端
+- build -- 用于存放打包构建相关的配置文件和脚本
+- build.js -- 构建脚本
+- check-versions.js -- 用于检查 Node.js 和 npm 版本是否符合要求的脚本
+- logo.png -- 项目的 logo 图片文件
+- utils.js -- 构建脚本中用到的工具函数
+- vue-loader.conf.js -- Vue-loader 的配置文件,用于解析和转换 .vue 文件
+- webpack.base.conf.js -- Webpack 基础配置文件
+- webpack.dev.conf.js -- Webpack 开发环境配置文件
+- webpack.prod.conf.js -- Webpack 生产环境配置文件
+- config --用于存放项目的配置文件
+- dev.env.js -- 开发环境的配置文件
+- index.js -- 主配置文件
+- prod.env.js -- 生产环境的配置文件
+- src
+- assets -- 静态资源文件 如图片、字体等
+- components -- Vue 组件
+- router -- 路由配置
+- App.vue -- 根组件 协调整个应用程序的视图和管理应用程序的状态
+- main.js -- 项目的入口文件
+- tip -- 提示信息相关的组件和样式
+- static -- 用于存放不需要 webpack 处理的静态文件
+- .babelrc -- Babel 的配置文件
+- .editorconfig -- 编辑器的配置文件,用于约定不同编辑器之间的代码风格和格式
+- .eslintgnore -- 指定需要忽略的文件或目录,让 ESLint 不对其进行检查
+- .eslintrc.js -- ESLint 的配置文件
+- .gitignore -- 指定需要 Git 忽略的文件或目录
+- .postcssrc.js -- PostCSS 的配置文件
+- db_appapidemo.sql --用于初始化数据库的 SQL 脚本文件
+- index.html -- 项目的入口 HTML 文件
+- LICENSE -- 开源软件的授权协议
+- packge.json -- 项目元数据的文件 用于描述 Node.js 应用程序或模块的属性
+- packge-lock.json -- 锁定当前安装的包的版本号和依赖关系
+- READE.md -- 项目的相关信息文档

后端技术栈

技术版本说明
Spring Boot1.5.8.RELEASESpring Boot框架版本
Spring Boot DevTools-热部署工具
Spring Boot Starter Web-Web模块依赖
MyBatis Spring Boot Starter1.3.0整合MyBatis的核心依赖
mysql-connector-java5.1.43连接MySQL数据库依赖
Mapper Spring Boot Starter1.1.3MyBatis通用Mapper依赖
PageHelper Spring Boot Starter1.1.2分页插件PageHelper依赖
Lombok1.16.18避免Get/Set方法重复创建依赖
Spring Boot Starter Data Redis-Redis数据库依赖
springfox-swagger22.7.0Swagger2 API文档依赖
springfox-swagger-ui2.7.0Swagger2 API文档UI依赖
Spring Boot Starter Mail-发送邮件依赖

前端技术栈

技术版本说明
iview^2.7.4基于 Vue.js 的 UI 组件库
vue^2.5.2渐进式 JavaScript 框架
vue-quill-editor^3.0.4基于 Quill 的富文本编辑器
vue-resource^1.3.4基于 Vue.js 的网络请求库
vue-router^3.0.1Vue.js 官方的路由管理器
autoprefixer^7.1.2为 CSS 自动添加浏览器前缀的 PostCSS 插件
babel-core^6.22.1一个用于使用 Babel 的 JavaScript 编译器
babel-eslint^7.1.1用于使用 ESLint 的 Babel 解析器
babel-helper-vue-jsx-merge-props^2.0.3合并 Vue JSX 组件中的属性
babel-loader^7.1.1用于 Webpack 的 Babel 模块加载器
babel-plugin-syntax-jsx^6.18.0Babel 插件,用于支持 JSX 语法
babel-plugin-transform-runtime^6.22.0Babel 插件,用于将 ES6+ 语法转换为 ES5
babel-plugin-transform-vue-jsx^3.5.0Babel 插件,用于将 Vue JSX 转换为渲染函数
babel-preset-env^1.3.2Babel 预设,用于将 ES6+ 语法转换为 ES5
babel-preset-stage-2^6.22.0Babel 预设,用于支持 ES7+ 语法
chalk^2.0.1用于在终端中输出彩色文字的 Node.js 模块
copy-webpack-plugin^4.0.1用于复制文件和目录的 Webpack 插件
css-loader^0.28.0用于在 Webpack 中加载 CSS 文件的加载器
eslint^3.19.0用于在 JavaScript 代码中检测和报告问题的工具
eslint-config-standard^10.2.1用于在 JavaScript 代码中实施标准风格的 ESLint 配置
eslint-friendly-formatter^3.0.0用于在终端中输出更友好的 ESLint 错误信息的插件
eslint-loader^1.7.1用于 Webpack 的 ESLint 模块加载器
eslint-plugin-html^3.0.0ESLint 插件,用于处理 HTML 文件
eslint-plugin-import^2.7.0一个 ESLint 插件,用于检查 import/export 语句
eslint-plugin-node^5.2.0一个 ESLint 插件,用于检查 Node.js 代码
eslint-plugin-promise^3.4.0一个 ESLint 插件,用于检查 Promise 相关的代码
eslint-plugin-standard^3.0.1一个 ESLint 插件,提供一组符合 JavaScript Standard 风格规范的规则
eventsource-polyfill^0.9.6一个 Webpack 插件,提供 EventSource 接口的 polyfill
extract-text-webpack-plugin^3.0.0一个 Webpack 插件,用于将所有的 CSS 代码提取到一个文件中
file-loader^1.1.4一个 Webpack 加载器,用于将文件作为模块导入,并返回其 URL
friendly-errors-webpack-plugin^1.6.1一个 Webpack 插件,用于在终端上友好地展示 Webpack 构建时的错误信息
html-webpack-plugin^2.30.1一个 Webpack 插件,用于生成 HTML 文件,并将打包后的资源自动引入该文件中
node-notifier^5.1.2用于跨平台显示通知的 Node.js 模块
optimize-css-assets-webpack-plugin^3.2.0优化和最小化 CSS 资源的 Webpack 插件
ora^1.2.0为终端显示 spinner 和文字消息的 Node.js 模块
portfinder^1.0.13在 Webpack 开发服务器上查找可用端口的 Node.js 模块
postcss-import^11.0.0用于处理 @import 规则的 PostCSS 插件
postcss-loader^2.0.8将 CSS 转换为 JavaScript 可以导入的模块的 Webpack 加载器
rimraf^2.6.0用于删除文件和文件夹的 Node.js 模块
semver^5.3.0语义化版本控制的 Node.js 模块
shelljs^0.7.6在 Node.js 脚本中使用 Unix shell 命令的 Node.js 模块
uglifyjs-webpack-plugin^1.1.1用于缩小 JavaScript 文件的 Webpack 插件
url-loader^0.5.8处理和加载 URL 的 Webpack 加载器
vue-loader^13.3.0将 Vue.js 组件转换为 JavaScript 模块的 Webpack 加载器
vue-style-loader^3.0.1将 CSS 转换为 JavaScript 模块的 Webpack 加载器
vue-template-compiler^2.5.2编译 Vue.js 模板的 Node.js 模块
webpack^3.6.0JavaScript 模块打包器
webpack-bundle-analyzer^2.9.0可视化分析 Webpack 打包输出的工具
webpack-dev-server^2.9.1Webpack 开发服务器
webpack-merge^4.1.0合并 Webpack 配置的工具

项目启动

  • 1.数据库:mysql5.6执行以下脚本,前台项目下脚本文件--db_appapidemo.sql (数据库脚本在前台项目下)
  • 2.后台启动:导入项目,进入控制台,到项目所在路径,执行命令:mvn clean spring-boot:run
  • 3.前台启动:导入项目,进入控制台,到项目所在路径,执行命令:npm install 后 npm run dev,访问地址:http://localhost:8075 测试账号:super 密码: super

  • 目前里面各种bug懒得改了。。。。

效果展示

解决bug

  1. 解决端口被占用的问题,如下图所示

  • 解决方法,打开Windows PowerShell 输入如下的命令查看被占用的端口
netstat -ano | findstr :8080
  • 输入如下的命令,杀掉进程
taskkill /F /PID 进程ID
在这里进行id为8080
taskkill /F /PID 14696

About

Springboot + Vue 图书管理系统

Resources

Stars

5 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages