SpringBoot + Vue 项目创建详细步骤

目录

一、本地开发环境

二、后端创建

三、前端创建

---

一、本地开发环境

1. 后端开发软件：IntelliJ IDEA 2022.1.3
2. 后端框架：SpringBoot
3. 前端框架：@vue/cli 5.0.8 + Element UI
4. 后端语言：Java
5. jdk版本：1.8.0_371
6. 数据库：Oracle 19c
7. 数据库操作：PLSQL Developer 15 (64 bit)
8. 接口测试工具：Postman

二、后端创建

1、New Project 开始创建新项目

2、配置项目的名称、存储位置、语言、jdk等信息

3、选择对应的依赖，少选多选都没事，创建完了可以在配置文件里面加，选完了就点击 create

4、这是加载完成的情况

6、在pom文件里改一下 java 的版本，为了每个模块的版本不发生冲突，统一改成了适配 jdk1.8 的情况 （有的版本冲突是启动不了的）

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.rabbitsystem</groupId>
    <artifactId>carrot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>rabbit-system</name>
    <description>rabbit-system</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>1.8</java.version> <!-- 保持 JDK 1.8 -->
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->
        </dependency>

        <dependency>
            <groupId>com.oracle.database.jdbc</groupId>
            <artifactId>ojdbc8</artifactId> <!-- 使用适合 JDK 1.8 的 ojdbc8 -->
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.12.0</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.16</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

7、把 application.properties 文件的后缀改成 yml，并进行项目配置

## 指定web容器访问端口号
rabbit:
  name: 兔子系统
  version: v-1.0
## web容器端口号
server:
  port: 8080
## 配置数据库连接
spring:
  datasource:
    driver-class-name: oracle.jdbc.OracleDriver
    url: jdbc:oracle:thin:@//localhost:1521/ORCL
    username: 用户名
    password: 密码
## 配置mybatis中mapper.xml文件扫描
mybatis:
  type-aliases-package: com.rabbitSystem.carrot.pojo.sel.*
  mapper-locations: classpath:mapper/*.xml   # mapper.xml文件映射

8、在数据库建一个用户表（这里是拿来示范的，建完表可以加一些测试数据）

-- 创建用户表
CREATE TABLE CUSTOMER (
  ID VARCHAR2(32) NOT NULL,
  ACCOUNT VA