毕设基于SSM+Vue3实现设备维修管理系统二：环境准备及项目创建

  本章介绍项目开发环境说明及创建项目过程说明，开发环境包括：SpringToolSuite4、Mysql、Vscode、JDK、Nodejs等工具。项目创建过程说明，包括后端项目创建、前端项目创建等过程说明。

源码下载：点击下载
讲解视频：

SMM+VUE3实现设备维修管理系统毕设：开发环境准备

一、环境准备

1.1 开发环境

1. 操作系统：win11
2. 数据库：mysql8.0
3. JDK：17
4. 后端开发工具：SpringToolSuite4
5. 前端开发工具：Visual Studio Code
6. 后端库管理：apache-maven-3.9.6
7. Nodejs：node-v18.14.1-win-x64
8. Vue3:3.4.23
9. Elementplus:2.7.0
10. Springboot:springboot3.0
11. Mybatis：3.5.16
12. Mybatis-plus：3.5.6
13. A.Ctable：1.5.0.RELEASE

1.2 工具及参考文档

1. mysql：https://www.mysql.com/downloads/
2. jdk：https://www.oracle.com/java/technologies/downloads/
3. SpringToolSuite4：https://spring.io/tools
4. vscode：https://code.visualstudio.com/
5. nodejs：https://nodejs.org/
6. mybatis-plus：https://baomidou.com/
7. elementplus：http://element-plus.org/zh-CN/
8. vue3：https://vuejs.org/
9. springboot3：https://docs.spring.io/spring-boot/
10. pinia：https://pinia.vuejs.org/
11. router：https://router.vuejs.org/
12. A.Ctable：https://gitee.com/sunchenbin/mybatis-enhance
13. maven：https://maven.apache.org/download.cgi
14. PostMan：https://www.postman.com/

1.3工具按照

1. mysql下载安装
   下载流程：
   
   
   
   
   

  安装流程：

2. JDK下载安装
   下载流程：
   
   

  安装流程：

3. SpringToolSuite4下载安装
   下载流程：
   

  安装流程： 直接双击运行自动解压即可使用。

4. Visual Studio Code下载安装
   下载流程：
   

  安装流程： 直接双击运行自动解压即可使用。

5. 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>

6. Nodejs下载安装
   下载流程：
   

  安装流程：

7. Postman下载安装
   下载地址： https://www.postman.com/
   下载流程：
   
   

  安装流程： 下载安装完毕后需注册账号并完成登录。

二、项目创建

2.1 后端项目创建

  使用springboot项目生成器创建后端项目，并引入lombok包。lombok下载地址：https://projectlombok.org/download，下载后双击运行，配置SpringToolSuite4路径。

1. 引入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>

2. 引入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();

3. 配置hikari相关参数

  参考地址：https://gitee.com/mirrors/hikaricp

• 使用MySQL Workbench 8.0 CE创建数据库
• 添加数据库相关配置
• 添加hikari相关配置

4. 日志相关配置处理

#日志配置
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。

1. Element-plus引入
   项目中引入element-plus前端UI框架处理，https://element-plus.org/zh-CN/#/zh-CN
2. 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/

3. Datav引入
   前端引入datav框架，用于实现大屏监控的动画效果。
   https://datav-vue3.jiaminghi.com/