本章介绍项目开发环境说明及创建项目过程说明,开发环境包括:SpringToolSuite4、Mysql、Vscode、JDK、Nodejs等工具。项目创建过程说明,包括后端项目创建、前端项目创建等过程说明。
源码下载:点击下载
讲解视频:
SMM+VUE3实现设备维修管理系统毕设:开发环境准备
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/870fd727504b414e951ee8cbf31d786a.png#pic_center)
一、环境准备
1.1 开发环境
- 操作系统:win11
- 数据库:mysql8.0
- JDK:17
- 后端开发工具:SpringToolSuite4
- 前端开发工具:Visual Studio Code
- 后端库管理:apache-maven-3.9.6
- Nodejs:node-v18.14.1-win-x64
- Vue3:3.4.23
- Elementplus:2.7.0
- Springboot:springboot3.0
- Mybatis:3.5.16
- Mybatis-plus:3.5.6
- A.Ctable:1.5.0.RELEASE
1.2 工具及参考文档
- mysql:https://www.mysql.com/downloads/
- jdk:https://www.oracle.com/java/technologies/downloads/
- SpringToolSuite4:https://spring.io/tools
- vscode:https://code.visualstudio.com/
- nodejs:https://nodejs.org/
- mybatis-plus:https://baomidou.com/
- elementplus:http://element-plus.org/zh-CN/
- vue3:https://vuejs.org/
- springboot3:https://docs.spring.io/spring-boot/
- pinia:https://pinia.vuejs.org/
- router:https://router.vuejs.org/
- A.Ctable:https://gitee.com/sunchenbin/mybatis-enhance
- maven:https://maven.apache.org/download.cgi
- PostMan:https://www.postman.com/
1.3工具按照
- mysql下载安装
下载流程:
安装流程:
- JDK下载安装
下载流程:
安装流程:
- SpringToolSuite4下载安装
下载流程:
安装流程: 直接双击运行自动解压即可使用。
- Visual Studio Code下载安装
下载流程:
安装流程: 直接双击运行自动解压即可使用。
- maven下载安装.
下载地址: https://maven.apache.org/download.cgi
下载流程:
安装流程:
下载源:
<mirror>
<id>alimaven</id>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<mirrorOf>central</mirrorOf>
</mirror>
- Nodejs下载安装
下载流程:
安装流程:
- Postman下载安装
下载地址: https://www.postman.com/
下载流程:
安装流程: 下载安装完毕后需注册账号并完成登录。
二、项目创建
2.1 后端项目创建
使用springboot项目生成器创建后端项目,并引入lombok包。lombok下载地址:https://projectlombok.org/download,下载后双击运行,配置SpringToolSuite4路径。
- 引入Mybatis-Plus
Mybatis-Plus官网地址:https://baomidou.com/pages/24112f/。
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-spring-boot3-starter</artifactId>
<version>最新版本</version>
</dependency>
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
</repository>
- 引入A.Ctable
文档地址:https://www.yuque.com/sunchenbin/actable/nfz097
<dependency>
<groupId>com.gitee.sunchenbin.mybatis.actable</groupId>
<artifactId>mybatis-enhance-actable</artifactId>
<version>1.5.0.RELEASE</version>
<exclusions>
<exclusion>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-annotation</artifactId>
</exclusion>
</exclusions>
</dependency>
# actable的配置信息
actable.table.auto=update
actable.model.pack=com.yours.model
actable.database.type=mysql
actable.index.prefix=自己定义的索引前缀#该配置项不设置默认使用actable_idx_
actable.unique.prefix=自己定义的唯一约束前缀#该配置项不设置默认使用actable_uni_
# mybatis自有的配置信息,key也可能是:mybatis.mapperLocations
mybatis.mapper-locations=classpath*:com/gitee/sunchenbin/mybatis/actable/mapping/*/*.xml
@MapperScan("com.gitee.sunchenbin.mybatis.actable.dao.*")
@ComponentScan(basePackages = {"com.gitee.sunchenbin.mybatis.actable.manager.*"})
// 容器中获取actable的核心处理类
StartUpHandler bean =run.getBean(StartUpHandler.class, args);
// 手动执行actable的建表方法
bean.startHandler();
- 配置hikari相关参数
参考地址:https://gitee.com/mirrors/hikaricp
- 使用MySQL Workbench 8.0 CE创建数据库
- 添加数据库相关配置
- 添加hikari相关配置
- 日志相关配置处理
#日志配置
logging:
level:
root: debug
sql: debug
web: debug
file:
path: ./logs/
logback:
rollingpolicy:
# 日志存档的文件名格式(默认值:${LOG_FILE}.%d{yyyy-MM-dd}.%i.gz)
file-name-pattern: ${LOG_FILE}.%d{yyyy-MM-dd}.%i.gz
# 应用启动时是否清除以前存档(默认值:false)
clean-history-on-start: true
# 存档前,每个日志文件的最大大小(默认值:10MB)
max-file-size: 10MB
# 日志文件保存的最大天数(默认值:7).
max-history: 10
# 日志文件被删除之前,可以容纳的最大大小(默认值:0B)。设置1GB则磁盘存储超过 1GB 日志后就会删除旧日志文件
total-size-cap: 0
2.2 前端项目创建
使用vue3实现前端项目的创建,vue3官网:https://cn.vuejs.org/guide/quick-start.html。
- Element-plus引入
项目中引入element-plus前端UI框架处理,https://element-plus.org/zh-CN/#/zh-CN - Echarts引入
项目中引入echarts框架,用于实现图表相关功能:
- https://echarts.apache.org/zh/option.html
- https://echarts.apache.org/zh/download-extension.html
- https://github.com/ecomfe/vue-echarts
- https://github.com/panteng/vue-echarts
- https://vue-echarts.dev/
- Datav引入
前端引入datav框架,用于实现大屏监控的动画效果。
https://datav-vue3.jiaminghi.com/