一、系统环境配置

  1. 系统开发平台: JDK1.8 + Windows 7+ Maven3.6.1
  2. 开发语言: JavaEE+vue2.X
  3. 后台框架: Springboot2.X
  4. 前端: Vue2.9.6
  5. 数据库和工具: MySq|5.7，Navicat
  6. 开发工具: Intellij Idea，VSCode
  7. 刘览器: Chrome

二、系统搭建步骤

  • 前置条件: 系统已经安装了Mysql5.7、Mysql工具 ( Navicat )、JDK1.8、Maven3.6.1、vue3.0以 下开发环境、Intellij Idea、VSCode、 Chrome;
  • 导入数据库
  • 创建后台springboot并启动测试;
  • 导入并编译前端代码vue: 网站和后台管理
    • 编译: npm install
    • 试运行: npm run dev
  • 正式开发

2.1 搭建后台SpringBoot环境

image.png

2.2 POM依赖

  1. <dependencies>
  2.   <dependency>
  3.     <groupId>org.springframework.boot</groupId>
  4.     <artifactId>spring-boot-starter-web</artifactId>
  5.   </dependency>
  7.   <!--        <dependency>-->
  8.   <!--            <groupId>org.mybatis.spring.boot</groupId>-->
  9.   <!--            <artifactId>mybatis-spring-boot-starter</artifactId>-->
  10.   <!--            <version>2.2.0</version>-->
  11.   <!--        </dependency>-->
  13.   <!--mybatis-plus-->
  14.   <dependency>
  15.     <groupId>com.baomidou</groupId>
  16.     <artifactId>mybatis-plus-boot-starter</artifactId>
  17.     <version>3.0.5</version>
  18.   </dependency>
  20.   <!-- 下面两个是代码生成插件的依赖代码生成器依赖,自3.0.3.以后被单独移出来了,使用完毕以后注释掉-->
  21.   <!--        <dependency>-->
  22.   <!--            <groupId>com.baomidou</groupId>-->
  23.   <!--            <artifactId>mybatis-plus-generator</artifactId>-->
  24.   <!--            <version>3.4.1</version>-->
  25.   <!--        </dependency>-->
  27.   <!--        模板引擎依赖,使用完毕以后注释掉-->
  28.   <!--        <dependency>-->
  29.   <!--            <groupId>org.apache.velocity</groupId>-->
  30.   <!--            <artifactId>velocity-engine-core</artifactId>-->
  31.   <!--            <version>2.2</version>-->
  32.   <!--        </dependency>-->
  34.   <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 -->
  35.   <dependency>
  36.     <groupId>io.springfox</groupId>
  37.     <artifactId>springfox-swagger2</artifactId>
  38.     <version>2.9.2</version>
  39.   </dependency>
  40.   <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
  41.   <dependency>
  42.     <groupId>io.springfox</groupId>
  43.     <artifactId>springfox-swagger-ui</artifactId>
  44.     <version>2.9.2</version>
  45.   </dependency>
  47.   <!-- JWT -->
  48.   <dependency>
  49.     <groupId>io.jsonwebtoken</groupId>
  50.     <artifactId>jjwt</artifactId>
  51.     <version>0.9.1</version>
  52.   </dependency>
  53.   <dependency>
  54.     <groupId>javax.xml.bind</groupId>
  55.     <artifactId>jaxb-api</artifactId>
  56.     <version>2.3.0</version>
  57.   </dependency>
  58.   <dependency>
  59.     <groupId>com.sun.xml.bind</groupId>
  60.     <artifactId>jaxb-impl</artifactId>
  61.     <version>2.3.0</version>
  62.   </dependency>
  63.   <dependency>
  64.     <groupId>com.sun.xml.bind</groupId>
  65.     <artifactId>jaxb-core</artifactId>
  66.     <version>2.3.0</version>
  67.   </dependency>
  68.   <dependency>
  69.     <groupId>javax.activation</groupId>
  70.     <artifactId>activation</artifactId>
  71.     <version>1.1.1</version>
  72.   </dependency>
  75.   <dependency>
  76.     <groupId>org.springframework.boot</groupId>
  77.     <artifactId>spring-boot-devtools</artifactId>
  78.     <scope>runtime</scope>
  79.     <optional>true</optional>
  80.   </dependency>
  81.   <dependency>
  82.     <groupId>mysql</groupId>
  83.     <artifactId>mysql-connector-java</artifactId>
  84.     <version>8.0.11</version>
  85.   </dependency>
  86.   <dependency>
  87.     <groupId>org.springframework.boot</groupId>
  88.     <artifactId>spring-boot-configuration-processor</artifactId>
  89.     <optional>true</optional>
  90.   </dependency>
  91.   <dependency>
  92.     <groupId>com.alibaba</groupId>
  93.     <artifactId>druid</artifactId>
  94.     <version>1.1.10</version>
  95.   </dependency>
  97.   <dependency>
  98.     <groupId>org.springframework.boot</groupId>
  99.     <artifactId>spring-boot-starter-jdbc</artifactId>
  100.   </dependency>
  102.   <dependency>
  103.     <groupId>org.apache.commons</groupId>
  104.     <artifactId>commons-lang3</artifactId>
  105.   </dependency>
  107.   <dependency>
  108.     <groupId>org.projectlombok</groupId>
  109.     <artifactId>lombok</artifactId>
  110.     <version>1.18.18</version>
  111.   </dependency>
  113.   <dependency>
  114.     <groupId>com.alibaba</groupId>
  115.     <artifactId>fastjson</artifactId>
  116.     <version>1.2.47</version>
  117.   </dependency>
  118.   <dependency>
  119.     <groupId>org.springframework.boot</groupId>
  120.     <artifactId>spring-boot-starter-test</artifactId>
  121.     <scope>test</scope>
  122.   </dependency>
  123.   <dependency>
  124.     <groupId>junit</groupId>
  125.     <artifactId>junit</artifactId>
  126.   </dependency>
  127. </dependencies>

2.3 开启热部署、热更新

热更新和热加载步骤 1、CTRL+SHIFT+A —> 搜索registry，找到registry… ，然后是带三个点的那个然后找到compiler.automake.allow.when.app.running，勾选就可以了 2、执行CTRL+F9快捷键 就可以起到热更新的效果

image.png

image.png

添加个热部署pom依赖

  1. <dependency>
  2.   <groupId>org.springframework.boot</groupId>
  3.   <artifactId>spring-boot-devtools</artifactId>
  4.   <scope>runtime</scope>
  5.   <optional>true</optional>
  6. </dependency>

启动热部署创建

  1. <build>
  2.   <plugins>
  3.     <plugin>
  4.       <groupId>org.springframework.boot</groupId>
  5.       <artifactId>spring-boot-maven-plugin</artifactId>
  6.       <configuration>
  7.         <executable>true</executable>
  8.         <fork>true</fork>
  9.       </configuration>
  10.     </plugin>
  11.   </plugins>
  12. </build>

执行CTRL+F9快捷键 就可以起到热更新的效果

2.4 application.properties配置文件配置

  1. #配置端口号
  2. server.port=8888
  4. #配置数据源的类型
  5. spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
  7. #配置数据库的连接信息
  8. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  9. spring.datasource.url=jdbc:mysql://localhost:3306/music-server?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&useSSL=false
  10. spring.datasource.username=root
  11. spring.datasource.password=root
  13. #配置mybatis信息
  14. mybatis.type-aliases-package=com.gmw.music.entity
  15. mybatis.mapper-locations=classpath:mapper/*.xml
  16. #配置mapper xml文件的路径
  17. mybatis-plus.mapper-locations=classpath:com/gmw/payment/mapper/xml/*.xml
  19. #配置时间
  20. spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
  21. spring.jackson.time-zone=GMT+8
  23. #配置上传文件的信息
  24. spring.servlet.multipart.max-file-size=100000MB
  25. spring.servlet.multipart.max-request-size=1000000MB
  27. #打印出sql语句
  28. #logging.level.com.gmw.music.mapper=debug

2.5 搭建前端Vue环境

创建一个Vue2脚手架：

image.png

启动创建的脚手架项目：

image.png