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 配置的工具 |
- 在navicat中运行数据库脚本生成对应的数据库表
- 在src/main/resources/application.yml文件里更改数据库名称或数据库密码
- 在pom.xml文件的父目录运行 mvn clean spring-boot:run 启动后端
- 启动前端 你可以在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文件夹中
- 此项目中前端是如何跳转页面的？
- 通过router文件夹里的index.js配置实现与home.vue里的router-view元素相关联
- 此项目中前端是如何获取后端的数据接口实现通信的？
- 通过api文件夹里的各种上js以及各个组件中引入而后进行前后端数据通信的
- 此项目中后端是如何给前端提交数据接口实现数据通信的？
- 在 Spring Boot 中，控制器(Controller)处理 HTTP 请求，服务(Service)处理业务逻辑，数据访问对象(DAO)与数据库进行交互，而 Mapper 是 Mybatis 框架用于操作数据库的接口 总结出以下调用关系： Controller --> Service --> DAO --> Mapper.xml
- 什么是utf8mb4和utf8mb3区别？
- MySQL几种编码格式的区别（utf8、utf8mb4、utf8mb4_general_ci、utf8mb4_unicode_ci 、utf8mb4_0900_ai_ci）
- 如何清除npm中的缓存
- 解决：ERESOLVE unable to resolve dependency tree
- node node-sass sass-loader版本对应问题
- nvm for windows 下载、安装及使用
- node安装和配置(node-v12.20.2-x64 ) 以及node版本切换介绍
- nvm的下载与安装（保姆级）
- nvm安装，nvm的使用，nvm常用命令，nvm安装node报错，nvm切换不了，等系列集合
- 如何用Windows命令提示符(cmd.exe)进入指定目录
- 如何使用nvm管理nodejs版本
- nvm 查看所有可以下载node的版本
- 解决nvm 切换node版本切换不成功的问题
- win10中使用nvm安装nodejs遇到的坑整理
- npm ERR! missing script: start
- Java8原图片地址
- 项目说明md参考
- 【Windows / macOS】 Clash for Windows 设置方法
- 项目框架搭建二-前端（HTML，CSS，JavaScript，JQuery，AngularJS，Bootstrap，NodeJS，React，Vue）
- jquery和vue哪个简单(jquery和vue有什么区别)
- ElementUI的el-table怎样隐藏某一列
- HTML，css，js，vue的简单介绍
- vue 项目html 与js,什么是VUE?VUE与JS的对比
- vue和js区别是什么
- IDEA 必备设置
- idea 中新建java类不显示后缀名？
- 什么叫构子函数？
钩子函数（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：实例已经销毁，与实例完全解绑，可以进行一些垃圾回收等操作。