电子书管理平台

开发环境

Windows

配置环境

程序	版本	说明
Jdk	1.8.0 161	Java 开发工具包
Mysql	5.5.27	关系型数据库
Apache-maven	3.9.0	Java 项目管理和构建工具
Nvm	1.10	Node.js 版本管理器
Node	8.12.0	Node.js JavaScript 运行时环境

开发工具

工具	版本	说明
IDEA	2022.3.2	后前端开发IDE
Git	2.24.1	代码托管平台
Google Chrome	75.0.3770.100	浏览器、前端调试工具
Navicat	11.1.13	数据库连接工具
Postman	7.1.0	接口测试工具
VMware Workstation Pro	14.1.3	虚拟机(未用到或许你会用到)
PowerDesigner	15	数据库设计工具(未用到或许你会用到)
SQLyog	12.0.3	数据库连接工具 (未用到或许你会用到)
Visio	2013	时序图、流程图等绘制工具(未用到或许你会用到)
ProcessOn	——	架构图等绘制工具(未用到或许你会用到)
XMind ZEN	9.2.0	思维导图绘制工具(未用到或许你会用到)
RedisDesktop	0.9.3.817	redis客户端连接工具(未用到或许你会用到)

编码规范

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

包的结构

 +- inc -- 整个项目
+- inc-admin -- 后端
+- src
| +- main
| | +- java
| | | +- com
| | | | +- inc
| | | | | +- admin
| | | | | | +- aspect -- 切面类，实现 AOP 面向切面编程
| | | | | | +- config -- 配置类，包括 Spring 配置、Mybatis 配置、Swagger 配置等
| | | | | | +- constants -- 常量类
| | | | | | +- context -- Spring Context 相关类，用于获取 Spring 上下文信息
| | | | | | +- controller -- 控制器类，处理 HTTP 请求
| | | | | | +- biz -- 业务相关的控制器类
| | | | | | +- sys -- 系统相关的控制器类
| | | | | | +- dao -- 数据访问对象类，用于访问数据库
| | | | | | +- biz -- 业务相关的数据访问对象类
| | | | | | +- sys --系统相关的数据访问对象类
| | | | | | +- domain -- 实体类，对应数据库中的表
| | | | | | +- biz -- 业务相关的实体类
| | | | | | +- sys -- 系统相关的实体类
| | | | | | +- dto -- 数据传输对象，用于 Controller 与 Service 层之间传输数据
| | | | | | +- sys
| | | | | | +- req -- 请求 DTO，封装 HTTP 请求参数
| | | | | | +- exception -- 异常类
| | | | | | +- filters -- 过滤器类，实现 HTTP 请求过滤
| | | | | | +- intercepter -- 拦截器类，实现拦截器功能
| | | | | | +- service -- 服务类，处理业务逻辑
| | | | | | +- biz -- 业务相关的服务类
| | | | | | +- impl -- 业务相关的服务实现类
| | | | | | +- sys -- 系统相关的服务类
| | | | | | +- impl -- 系统相关的服务实现类
| | | | | | +- task -- 定时任务类
| | | | | | +- utils -- 工具类
| | | | | | +- vo -- 视图对象，用于封装视图数据
| | | | | | +- IncAdminApplication.java -- 应用程序入口类 | | +- resources
| | +- mapper | | | +- sys -- Mybatis Mapper 接口，用于访问数据库
| | | +- MenuMapper.xml -- 菜单相关的 Mybatis Mapper 接口
| | | +- RoleMapper.xml -- 角色相关的 Mybatis Mapper 接口
| | | +- RoleMenuMapper.xml -- 角色菜单相关的 Mybatis Mapper 接口
| | | +- UserMapper.xml -- 用户相关的 Mybatis Mapper 接口。
| | | +- UserRoleMapper.xml -- 用户角色相关的 Mybatis Mapper 接口。
| | +- application.yml -- 应用程序的配置信息，包括数据库连接、日志等
| | +- application-dev.yml -- 开发环境配置文件
| | +- application-pro.yml -- 生产环境配置文件
| | +- spring-ehcache.xml -- Ehcache 缓存配置文件
| +- test
| |	+- java -- 测试代码
| | +- com | | +- inc
| | +- admin
| | +- ClouddoAdminApplicationTests.java -- 测试应用程序的单元测试代码
+- target -- Maven建项目时自动生成的目录
+- inc.sql -- 数据库脚本文件
+- inc-admin.iml -- IntelliJ IDEA项目文件
+- pom.xml -- Maven项目配置文件
+- inc-view -- 前端
+- .vscode -- 包含 Visual Studio Code 的项目设置和配置文件的目录
+- build -- 包含项目构建相关的文件的目录
+- config -- 包含 Vue 项目配置相关的文件的目录
+- src
+- api -- 包含与后端 API 交互的代码的目录
+- assets -- 静态资源文件 如图片、字体等
+- common -- 包含应用程序通用功能模块的目录
+- components -- Vue 组件
+- router -- 路由配置
+- utils -- 包含应用程序工具函数的目录
+- views -- 页面级组件
+- vuex -- 包含 Vuex 状态管理器相关代码的目录
+- App.vue -- 根组件 协调整个应用程序的视图和管理应用程序的状态
+- bus.js -- 用于 Vue.js 组件之间通信的事件总线
+- main.js -- 项目的入口文件
+- static
+- images
+- cameras -- 包含摄像头图片资源的目录
+- .babelrc -- Babel 配置文件，用于将 ES6+ 代码转换为兼容的 JavaScript 代码
+- .editorconfig -- 编辑器配置文件，用于定义代码格式和风格的规则
+- .postcssrc.js -- PostCSS 配置文件，用于定义样式的预处理器和后处理器
+- index.html -- 应用程序的入口 HTML 文件
+- install.bat -- Windows 系统下用于安装依赖包的批处理脚本
+- packge.json -- 项目元数据的文件 用于描述 Node.js 应用程序或模块的属性
+- packge-lock.json -- 锁定当前安装的包的版本号和依赖关系
+- start.bat -- Windows 系统下用于启动应用程序的批处理脚本
+- readme-- 项目说明文档
+- .gitignore -- 指定需要 Git 忽略的文件或目录
+- inc.iml-- IntelliJ IDEA 配置文件
+- pom.xml -- Maven 配置文件
+- README.md -- 项目的相关信息文档
+- 系统安装部署文档V1.docx -- 应用程序的安装和部署说明文档。
+- mybatis-generator-core -- 生成代码

后端技术栈

技术	版本	说明
Spring Boot Starter Parent	2.0.4.RELEASE	Spring Boot 父依赖
MySQL Connector Java	未指定	MySQL 驱动
MyBatis	3.4.4	ORM框架
MyBatis Spring Boot Starter	1.1.1	MyBatis Spring Boot Starter
Apache Shiro	1.3.2	安全框架
Fastjson	1.2.42	JSON处理工具
jjwt	0.7.0	JSON Web Token 处理工具
Spring Boot Starter Websocket	未指定	WebSocket依赖
Spring Context Support	未指定	Spring上下文支持
Spring Boot Starter Security	未指定	Spring Security依赖
Ehcache	3.8.1	缓存框架
ehcache	未指定	ehcache
PageHelper Spring Boot Starter	1.2.3	分页插件
faker4j	1.0.0	随机数据生成工具
Commons Collections4	4.1	集合处理工具
Commons IO	1.4	IO操作工具
Commons Fileupload	未指定	文件上传工具

前端技术栈

技术	版本	说明
axios	^0.16.2	HTTP请求库
echarts	^3.7.1	可视化图表库
element-ui	^2.0.7	基于Vue.js的UI组件库
express	^4.16.3	基于Node.js的Web应用框架
fabric	2.3.6	HTML5 Canvas 库
fabric-customise-controls	2.0.6-beta	Fabric.js 的自定义控件扩展库
lodash	^4.17.4	实用工具库
v-viewer	^1.5.1	基于Viewer.js的Vue图片查看器组件
vue	^2.5.9	前端JavaScript框架
vue-clipboard2	^0.3.1	复制粘贴库
vue-router	^2.8.1	Vue.js的官方路由器
vue-template-compiler	^2.5.9	将Vue.js模板编译为渲染函数的库
vuex	^3.0.1	Vue.js的状态管理库
autoprefixer	^6.7.2	自动添加CSS3前缀的PostCSS插件
babel-core	^6.26.0	ES6转码器的核心库
babel-loader	^6.2.10	Webpack的Babel加载器
babel-plugin-transform-runtime	^6.22.0	Babel插件，将ES6的函数替换为使用 babel-runtime 来优化代码
babel-preset-env	^1.6.0	Babel的预设，根据当前的目标环境自动确定所需的插件
babel-preset-stage-2	^6.24.1	Babel的预设，包含ES7的部分特性
babel-register	^6.26.0	Babel的注册器，可以在运行时将ES6模块转换为ES5模块
chalk	^1.1.3	终端彩色输出库
connect-history-api-fallback	^1.3.0	为HTML5历史API提供回退选项的中间件
copy-webpack-plugin	^4.0.1	Webpack插件，用于将文件或文件夹复制到构建目录中
css-loader	^0.26.4	加载CSS文件的Webpack加载器
eventsource-polyfill	^0.9.6	用于WebSocket的EventSource polyfill
extract-text-webpack-plugin	^2.1.2	Webpack插件，用于从打包后的JS文件中提取CSS样
file-loader	^0.10.0	用于处理 webpack 中的文件依赖关系
friendly-errors-webpack-plugin	^1.1.3	友好显示 webpack 构建错误信息
function-bind	^1.1.1	ES6 函数绑定 polyfill
html-webpack-plugin	^2.30.1	用于生成 HTML 文件
http-proxy-middleware	^0.17.3	http 代理中间件
node-sass	^4.12.0	sass 的 Node.js 绑定模块
opn	^4.0.2	用于在 Node.js 中打开文件/URL 的模块
optimize-css-assets-webpack-plugin	^1.3.2	用于优化压缩 CSS 文件
ora	^1.3.0	用于在控制台显示 loading 动画的模块
rimraf	^2.6.2	Node.js 中删除文件和文件夹的模块
sass-loader	^6.0.6	用于处理 Sass 文件的 webpack loader
semver	^5.4.1	Node.js 的版本管理工具
style-loader	^0.16.1	用于将 CSS 添加到 DOM 的样式标签中
url-loader	^0.5.9	用于将文件转换成 base64 URL 的 webpack loader
vue-loader	^11.1.4	用于处理 Vue.js 单文件组件的 webpack loader
vue-style-loader	^2.0.0	用于将 CSS 添加到 Vue.js 组件中的样式标签中
webpack	^2.7.0	JavaScript 模块打包工具
webpack-bundle-analyzer	^2.9.0	用于分析 webpack 打包后的模块大小
webpack-dev-middleware	^1.12.0	用于在开发环境中将 webpack 打包后的文件暴露到 HTTP 服务器上
webpack-hot-middleware	^2.19.1	webpack 热更新中间件
webpack-merge	^2.6.1	用于合并 webpack 配置的工具

安装教程

1. 在navicat中运行数据库脚本生成对应的数据库表
2. 在src/main/resources/application.yml文件里更改数据库名称或数据库密码
3. 在pom.xml文件的父目录运行 mvn clean spring-boot:run 启动后端
4. 启动前端 你可以在package.json的父目录执行下如命令 或者 直接在IDEA里点击也可运行 值得一提的是后两命令分别是打包命令和检查修复命令

npm install

npm run serve

npm run build

npm run lint

• 如下图所示

登录账户

用户名：admin 密码：1

截图

项目中需要说明的关键技术点

• 在inc-view项目中index.html是所有页面的html,Home.vue是html中ID为app的DIV的所有内容里面包含头部左侧以及内容三大部分组成，其所有的组件均在view文件夹中

1. 此项目中前端是如何跳转页面的？

• 通过router文件夹里的index.js配置实现与home.vue里的router-view元素相关联

2. 此项目中前端是如何获取后端的数据接口实现通信的？

• 通过api文件夹里的各种上js以及各个组件中引入而后进行前后端数据通信的

3. 此项目中后端是如何给前端提交数据接口实现数据通信的？

• 在 Spring Boot 中，控制器(Controller)处理 HTTP 请求，服务(Service)处理业务逻辑，数据访问对象(DAO)与数据库进行交互，而 Mapper 是 Mybatis 框架用于操作数据库的接口 总结出以下调用关系： Controller --> Service --> DAO --> Mapper.xml

拓展知识

1. 什么是utf8mb4和utf8mb3区别？
2. MySQL几种编码格式的区别（utf8、utf8mb4、utf8mb4_general_ci、utf8mb4_unicode_ci 、utf8mb4_0900_ai_ci）
3. 如何清除npm中的缓存
4. 解决：ERESOLVE unable to resolve dependency tree
5. node node-sass sass-loader版本对应问题
6. nvm for windows 下载、安装及使用
7. node安装和配置(node-v12.20.2-x64 ) 以及node版本切换介绍
8. nvm的下载与安装（保姆级）
9. nvm安装，nvm的使用，nvm常用命令，nvm安装node报错，nvm切换不了，等系列集合
10. 如何用Windows命令提示符(cmd.exe)进入指定目录
11. 如何使用nvm管理nodejs版本
12. nvm 查看所有可以下载node的版本
13. 解决nvm 切换node版本切换不成功的问题
14. win10中使用nvm安装nodejs遇到的坑整理
15. npm ERR! missing script: start
16. Java8原图片地址
17. 项目说明md参考
18. 【Windows / macOS】 Clash for Windows 设置方法
19. 项目框架搭建二-前端（HTML，CSS，JavaScript，JQuery，AngularJS，Bootstrap，NodeJS，React，Vue）
20. jquery和vue哪个简单(jquery和vue有什么区别)
21. ElementUI的el-table怎样隐藏某一列
22. HTML，css，js，vue的简单介绍
23. vue 项目html 与js,什么是VUE?VUE与JS的对比
24. vue和js区别是什么
25. IDEA 必备设置
26. idea 中新建java类不显示后缀名？
27. 什么叫构子函数？

钩子函数（hook function）是一种在特定事件或函数执行时自动执行的函数。在编程中，钩子函数可以让我们在程序执行特定任务时执行自己的代码。在Vue.js框架中，钩子函数也被称为生命周期函数。 Vue.js组件生命周期中包含多个不同的阶段，每个阶段都有对应的钩子函数，开发人员可以根据需要在不同阶段执行自定义的操作。例如，在组件被创建之前，可以使用beforeCreate钩子函数执行一些初始化操作；在组件DOM被创建之后，可以使用mounted钩子函数执行一些渲染和DOM操作。 以下是Vue.js组件生命周期钩子函数及对应的阶段： - beforeCreate：实例刚被创建，数据观测和事件机制尚未初始化。 - created：实例已经完成了数据观测、属性计算等相关工作，可以访问data、computed、methods等属性。 - beforeMount：模板编译完成，但没有挂载到页面上。 - mounted：实例已经挂载到页面上，可以进行DOM操作等，常用于初始化页面数据等任务。 - beforeUpdate：数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在此钩子函数中进行一些状态管理或更新操作。 - updated：数据更新完成，虚拟DOM已经重新渲染和打补丁，可以进行DOM操作等，但要注意避免无限循环更新。 - beforeDestroy：实例即将销毁，可以在此钩子函数中进行资源释放、事件销毁等操作。 - destroyed：实例已经销毁，与实例完全解绑，可以进行一些垃圾回收等操作。