Springboot Vue 前后端先分离后结合，闻名已久，今日实战

待我称王封你为后i 2021-10-23 14:09 271阅读 0赞

关于SpringBoot + Vue，这里列出一个基本的项目实例。  
源码：[https://github.com/slhuang520/study/tree/master/spring-boot-vue-cli-parent][https_github.com_slhuang520_study_tree_master_spring-boot-vue-cli-parent]

# 1. 环境 #

使用的开发工具为IDEA，最新版本，专为开发Springboot而制。

JDK 版本为8，  
Apache Server 为 Tomcat，版本为8

使用Maven来管理开发项目，进行项目的整个合与编译。整个项目结构如下：  
![在这里插入图片描述][2019081421191115.]

# 2. 项目架构 #

基本采用前后端分离，使用是的先分离后结合的方案，开发是独立进行的，但最后打包成一个项目进行发布。  
前端使用 node js 环境，使用 Vue Cli 3.0以上版本。  
后端使用 SpringBoot 搭建整体项目架构，版本为2.1.7-Release。  
最后项目整合打包时，使用 Maven 工具。

# 3. 具体手顺 #

## ３.１ 创建前后端管理父类 ##

使用IDEA父级别的 Module:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]  
然后，在新建 module中创建一个 Maven 项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 1]

指定groupId 和 artifactId，Next 创建好。

整个 parent 项目中，删除自动生成的一些目录，比如src | test，只留下 pom.xml 和 iml配置文件，其他的全部删除，没有用。  
同时将 packaging 指定为 pom

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>cn.com.love.hsl</groupId>
        <artifactId>spring-boot-vue-cli-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
        <packaging>pom</packaging>
    
    </project>

## 3.2 创建前端 UI 项目 ##

整体的项目结构图如下：  
![在这里插入图片描述][20190814213535412.]  
![在这里插入图片描述][20190814213559464.]

### 3.2.1 使用 IDEA 创建 UI 项目，使其作为之前创建的 Parent的一个 module ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 2]

需要将目录结构指定在之前创建的 Parent 目录之下：  
![在这里插入图片描述][20190814214936162.]  
注意，这里前端我们还是创建一个带有 Maven 的 Module，跟之前的 Parent 项目一样。  
将 packaging 也指定为 pom.

删除 src 目录下的其他所有子目录，那些是不需要的。  
只需要留下：

*  src 空目录，
 *  pom.xml
 *  iml 配置文件

### 3.2.2 安装 vue ###

创建 Vue Cli 项目，可以完全参考官网给的手顺：  
官网地址：[https://cli.vuejs.org/zh/guide/installation.html][https_cli.vuejs.org_zh_guide_installation.html]

如果电脑Vue环境已经安装好了，需要确认一下版本是否对，若是不对的话，请按如下方式更新。

*  关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

*  Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli

查看版本信息，确认是否安装成功：

vue --version

### 3.2.3 创建 Vue Cli 项目 ###

打开 IDEA的 terminal 窗口(需要将路径调整到UI 项目下)，在其中输入以下命令，创建项目：

vue create .

注意这里不需要再指定项目名称了，之前已经创建好的，只需要将 vue的环境配置好。  
这个过程可能会有一点慢，需要下载第三方的一些包，在这之前，最好将 npm 的镜像使用为淘宝的，这样下载速度会快一些。

#### 3.2.3.1 .eslintrc.js ####

配置好自己的编码规则：

module.exports = { 
      root: true,
      env: { 
        node: true
      },
      extends: ["plugin:vue/essential", "@vue/prettier"],
      rules: { 
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        "vue/html-indent": [
          "error",
          4,
          { 
            attribute: 1,
            alignAttributesVertically: true,
            ignores: []
          }
        ],
        "vue/max-attributes-per-line": [
          2,
          { 
            singleline: 10,
            multiline: { 
              max: 5,
              allowFirstLine: false
            }
          }
        ],
        "vue/html-self-closing": "off",
        "vue/name-property-casing": ["error", "PascalCase"],
        "prettier.jsxBracketSameLine": true,
        "editor.formatOnSave": true,
        "eslint.autoFixOnSave": true,
        "prettier/prettier": "off"
      },
      globals: { 
        $: true,
        Vue: true
      },
      parserOptions: { 
        parser: "babel-eslint"
      }
    };

#### 3.2.3.2 package.json ####

引入外部的 jquery bootstrap axios

{ 
      "name": "spring-boot-vue-cli-ui",
      "version": "0.1.0",
      "private": true,
      "scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": { 
        "core-js": "^2.6.5",
        "vue": "^2.6.10",
        "vue-router": "^3.0.3"
      },
      "devDependencies": { 
        "@vue/cli-plugin-babel": "^3.10.0",
        "@vue/cli-plugin-eslint": "^3.10.0",
        "@vue/cli-service": "^3.10.0",
        "@vue/eslint-config-prettier": "^5.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-vue": "^5.0.0",
        "prettier": "^1.18.2",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.33.0",
        "jquery": "^3.4.1",
        "bootstrap": "^4.3.1",
        "popper.js": "^1.15.0",
        "axios": "^0.19.0"
      }
    }

#### 3.2.3.3 配置 pom.xml 文件 ####

需要让不同的用户，直接将项目拿过去可以进行编译打包，而不需要自己手动搭建环境。

#### 3.2.3.4 在根目录下面新建 Vue cli 的配置文件 vue.config.js ####

引入外部的 jquery,将jquery 作为一个全局的块，直接引入项目中，这样就不用在项目的每个块中再单独引入了。

并指定整个前端项目的 publicPath.  
publicPath 其实就是后端项目指定的 context-path，如果后端没有指定的话，这里也可以不用指定。

const webpack = require("webpack");
    
    module.exports = { 
      publicPath: "sbvc",
      configureWebpack: { 
        plugins: [
          new webpack.ProvidePlugin({ 
            $: "jquery",
            jQuery: "jquery",
            Popper: ["popper.js", "default"]
          })
        ]
      }/*, devServer: { proxy: { "/apis": { target: "http://localhost:8443/sbvc/", ws: true, changeOrigin: true, pathRewrite: { '^/apis': '' } } } }*/
    };

这样在项目的任何地方都可以正常使用 $ 符号了。

#### 3.2.3.5 引入外部 bootstrap ####

前面 package.json文件中，已经将需要的 jquery 和 bootstrap 下载下来了，这里只需要将其引入到项目模块中。

##### 3.2.3.5.1 引入 bootstrap 的静态 css #####

在 src 目录下面新建一个 static 子目录，用于存放静态资源。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 3]

##### 3.2.3.5.2 修改 main.js入口文件 #####

引入 bootstrap.js 和 bootstrap.css.

后面需要使用 axios 发送 http 请求（跟 jquery 的 ajax 类似），这里也一起引入了。  
并指定后端的接口，注意目前这个接口是无法使用的，都还没有搭建呢。。。。

import "bootstrap";
    import "./static/bootstrap.css";
    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import axios from "axios";
    
    Object.defineProperty(Vue.prototype, "$http", { 
        value: axios
    });
    
    Vue.config.productionTip = false;
    //后台接口
    axios.defaults.baseURL = 'http://localhost:8080/sbvc/';
    
    new Vue({ 
        router,
        render: h => h(App)
    }).$mount("#app");

其他的都可以不用再另行配置了，使用默认的，到这里应该是可以正常启动前端项目了。

### 3.2.4 启动前端项目 ###

在 IDEA 的 Terminal 窗口中（注意这里还是需要指定到 UI 目录下），输入如下命令启动前端项目：

npm run serve

启动成功后，直接在浏览器中访问：  
[http://localhost:8080/sbvc/][http_localhost_8080_sbvc]

应该就可以直接看到画面了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 4]

### 3.2.5 编写自己的前端页面 ###

以下以创建部门列表页面为列：

#### 3.2.5.1 Dept.vue ####

在 views 目录下创建页面。

<template>
        <div class="dept">
            <table id="dept_table" class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :key="dept.id" v-for="dept in deptList">
                        <td>{
       {dept.id}}</td>
                        <td>{
       {dept.name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    
    <style>
        .dept {
            width: 80%;
            margin: 0 auto;
        }
    </style>
    
    <script>
        export default {
            name: "Dept",
            data() {
                return {
                    deptList: []
                }
            },
            created() {
                //this.deptList.push({id: 1, name: "dept1"}, {id: 2, name: "dept2"});
                this.getDeptList();
            },
            watch: {},
            methods: {
                getDeptList() {
                	//这里的请求只是模拟的，只获取一个dept信息，而没有获取列表信息
                    this.$http.get("/dept/get?id=6abad1b324fd438a9cfe1099ab4c78d7").then(res => {
                        this.deptList = [res.data];
                    });
                }
            },
            computed: {},
            mounted() {
            },
            components: {}
        };
    </script>

#### 3.2.5.2 修改 App.vue ####

<template>
        <div id="app">
            <div id="nav">
                <router-link to="/">Home</router-link>
                |
                <router-link to="/about">About</router-link>
                |
                <router-link to="/dept">Dept</router-link>
            </div>
            <router-view />
        </div>
    </template>
    
    <style>
        #app {
            font-family: "Avenir", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
        }
    
        #nav {
            padding: 30px;
        }
    
        #nav a {
            font-weight: bold;
            color: #2c3e50;
        }
    
        #nav a.router-link-exact-active {
            color: #42b983;
        }
    </style>

#### 3.2.5.3 修改router.js ####

import Vue from "vue";
    import Router from "vue-router";
    import Home from "./views/Home.vue";
    
    Vue.use(Router);
    
    export default new Router({ 
        mode: "history",
        base: process.env.BASE_URL,
        routes: [
            { 
                path: "/",
                name: "home",
                component: Home
            },
            { 
                path: "/about",
                name: "about",
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () =>
                    import(/* webpackChunkName: "about" */ "./views/About.vue")
            },
            { 
                path: "/dept",
                name: "dept",
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () =>
                    import(/* webpackChunkName: "about" */ "./views/Dept.vue")
            }
        ]
    });

注意，这些修改后，前端环境是会自动编译的，不用我们再次手动编译，并且页面也会刷新，如果页面有打开的话。

## 3.3 创建后端SpringBoot项目 ##

使用 IDEA 的 Spring Initializr 功能模块，生成 SpringBoot 项目架构。

### 3.3.1 创建项目 ###

#### 3.3.1.1 New Project ####

![在这里插入图片描述][20190814224521771.]

注意这里使用的是 project，而不再是 module。

#### 3.3.1.2 选择 Spring Initializr 功能， next > ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 5]

#### 3.3.1.3 指定自己的 gourp 和 artical，并将 packaging 修改为war。 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 6]

#### 3.3.1.4 选择自己的功能。 ####

我这里选择的功能如下：  
Spring Boot DevTools  
Spring Web Strarter  
MYSQL Driver  
JDBC API  
MyBatis Framework

#### 3.3.1.5 指定项目名称 ####

注意需要在最开始创建的 parent 目录之下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 7]

### 3.3.2 项目整体结构图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 8]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 9]

### 3.3.3 添加自己的配置 ###

#### 3.3.3.1 修改 pom.xml ####

*  引入 Log4j2 并引入 yml 的配置方式。
 *  使用自己配置的 tomcat
 *  修改一些打war包的配置
 *  结合前端的项目，将前端编译好的文件，直接解压过来，然后再生成 war 包

<?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 http://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.1.7.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <artifactId>spring-boot-vue-cli</artifactId>
        <name>spring-boot-vue-cli</name>
        <description>Spring Boot Vue Cli</description>
        <packaging>war</packaging>
    
        <properties>
            <java.version>1.8</java.version>
        </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>
                <exclusions>
                    <exclusion>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-starter-tomcat</artifactId>
                    </exclusion>
                    <exclusion>
                        <groupId>org.slf4j</groupId>
                        <artifactId>slf4j-log4j12</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter</artifactId>
                <exclusions>
                    <exclusion>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-starter-logging</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-configuration-processor</artifactId>
                <optional>true</optional>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-log4j2</artifactId>
            </dependency>
            <dependency>
                <groupId>com.fasterxml.jackson.dataformat</groupId>
                <artifactId>jackson-dataformat-yaml</artifactId>
            </dependency>
    
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.0</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
                <scope>provided</scope>
            </dependency>
    
            
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
        </dependencies>
    
        <build>
            <resources>
                <resource>
                    <directory>src/main/java</directory>
                    <includes>
                        <include>**/*.xml</include>
                    </includes>
                    <filtering>true</filtering>
                </resource>
                
            </resources>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-dependency-plugin</artifactId>
                    <version>3.1.1</version>
                    <executions>
                        <execution>
                            <id>prepare-package</id>
                            <phase>process-resources</phase>
                            <goals>
                                <goal>unpack</goal>
                            </goals>
                            <configuration>
                                <artifactItems>
                                    <artifactItem>
                                        <groupId>cn.com.love.hsl</groupId>
                                        <artifactId>spring-boot-vue-cli-ui</artifactId>
                                        <version>1.0-SNAPSHOT</version>
                                        <type>zip</type>
                                    </artifactItem>
                                </artifactItems>
                                <outputDirectory>${project.basedir}/src/main/resources/static/</outputDirectory>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <version>1.5.3.RELEASE</version>
                    <configuration>
                        <mainClass>cn.com.love.hsl.Application</mainClass>
                        <fork>true</fork>
                    </configuration>
                    <executions>
                        <execution>
                            <goals>
                                <goal>repackage</goal>
                                <goal>build-info</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.4.2</version>
                    <configuration>
                        <skipTests>true</skipTests>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-war-plugin</artifactId>
                    <configuration>
                        
                        <attachClasses>true</attachClasses>
                        <classesClassifier>api</classesClassifier>
                        <failOnMissingWebXml>false</failOnMissingWebXml>
                    </configuration>
                </plugin>
                
            </plugins>
        </build>
    
    </project>

#### 3.3.3.2 配置application.yml ####

*  不使用SpringBoot 提供的模板。
 *  配置context-path(这里需要与前端配置的 pubicPaht一致)
 *  配置 datasource
 *  配置 Logging
 *  配置静态资源处理
 *  指定配置环境（生产还是开发，目前这里只做的生产）
 *  开启SSL，注入 server-key(有需要的就添加，具体生成方式，请百度)

debug: false
    trace: false
    
    server:
      port: 8080
      servlet:
        context-path: /sbvc
    # session:
    # timeout: 30
    
    # ssl:
    # enabled: true
    # ## server single ssl auth
    # key-store: classpath:key/server.key.p12
    # key-store-password: welcome02@
    # key-store-type: PKCS12
    # key-alias: fx_cq.alias
    #
    # ## client more ssl auth
    # trust-store: classpath:key/server.key.p12
    # trust-store-password: welcome02@
    # trust-store-type: PKCS12
    # client-auth: need
    
    mybatis:
      mapper-locations: classpath:mapper/*.xml
      type-aliases-package: jp.co.fujixerox.log.analysis.model
      configuration:
        log-impl: org.apache.ibatis.logging.log4j2.Log4j2Impl #这里需要使用log4j2生成日志，因为整个项目都是使用的log4j2
    
    spring:
      profiles:
        active: prod
    
      devtools:
        restart:
          enabled: true
          additional-paths: src/main/java
    
      datasource:
        hikari:
          idle-timeout: 300000
          minimum-idle: 5
          auto-commit: true
          max-lifetime: 1200000
          connection-timeout: 20000
          maximum-pool-size: 12
      mvc:
        view:
          suffix: .html
        static-path-pattern: /**
      resources:
        static-locations: classpath:/templates/,classpath:/static/
    
    # thymeleaf:
    # prefix: classpath:/templates/
    # suffix: .html
    
    logging:
      config: classpath:log4j2.yml

#### 3.3.3.3 配置生产环境数据源 ####

注意：如果mysql版本使用得比较高，在url 中需要如下配置：

&characterEncoding=utf-8&allowMultiQueries=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC

否则不能成功连接DB。

spring:
      datasource:
    # driver-class-name: com.mysql.jdbc.Driver
    # url: jdbc:mysql://127.0.0.1:3306/chat?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
        url: jdbc:mysql://127.0.0.1:3306/sbvc?useSSL=false&useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
        username: root
        password: root
        name: mysql

#### 3.3.3.4 log4j2.yml ####

Configuration:
      status: warn
      monitorInterval: 30
      Properties:
        Property:
          - name: log.level.console
            value: info
          - name: log.path
            value: log
          - name: project.name
            value: sbvc
          - name: log.pattern
            value: "%d{yyyy-MM-dd HH:mm:ss.SSS} -%5p ${PID:-} [%15.15t] %-30.30C{1.} : %m%n"
      Appenders:
        Console:
          name: CONSOLE
          target: SYSTEM_OUT
          PatternLayout:
            pattern: ${ log.pattern}
        RollingFile:
          - name: ROLLING_FILE
            fileName: ${ log.path}/${ project.name}.log
            filePattern: "${log.path}/historyRunLog/$${date:yyyy-MM}/${project.name}-%d{yyyy-MM-dd}-%i.log.gz"
            PatternLayout:
              pattern: ${ log.pattern}
            Filters:
              ThresholdFilter:
                - level: error
                  onMatch: DENY
                  onMismatch: NEUTRAL
                - level: info
                  onMatch: ACCEPT
                  onMismatch: DENY
            Policies:
              TimeBasedTriggeringPolicy:
                modulate: true
                interval: 1
            DefaultRolloverStrategy:
              max: 100
    
          - name: PLATFORM_ROLLING_FILE
            ignoreExceptions: false
            fileName: ${ log.path}/platform/${ project.name}_platform.log
            filePattern: "${log.path}/platform/$${date:yyyy-MM}/${project.name}-%d{yyyy-MM-dd}-%i.log.gz"
            PatternLayout:
              pattern: ${ log.pattern}
            Policies:
              TimeBasedTriggeringPolicy:
                modulate: true
                interval: 1
            DefaultRolloverStrategy:
              max: 100
    
          - name: BUSINESS_ROLLING_FILE
            ignoreExceptions: false
            fileName: ${ log.path}/business/${ project.name}_business.log
            filePattern: "${log.path}/business/$${date:yyyy-MM}/${project.name}-%d{yyyy-MM-dd}-%i.log.gz"
            PatternLayout:
              pattern: ${ log.pattern}
            Policies:
              TimeBasedTriggeringPolicy:
                modulate: true
                interval: 1
            DefaultRolloverStrategy:
              max: 100
    
          - name: EXCEPTION_ROLLING_FILE
            ignoreExceptions: false
            fileName: ${ log.path}/exception/${ project.name}_exception.log
            filePattern: "${log.path}/exception/$${date:yyyy-MM}/${project.name}-%d{yyyy-MM-dd}-%i.log.gz"
            ThresholdFilter:
              level: error
              onMatch: ACCEPT
              onMismatch: DENY
            PatternLayout:
              pattern: ${ log.pattern}
            Policies:
              TimeBasedTriggeringPolicy:
                modulate: true
                interval: 1
            DefaultRolloverStrategy:
              max: 100
    
          - name: DB_ROLLING_FILE
            ignoreExceptions: false
            fileName: ${ log.path}/db/${ project.name}_db.log
            filePattern: "${log.path}/db/$${date:yyyy-MM}/${project.name}-%d{yyyy-MM-dd}-%i.log.gz"
            PatternLayout:
              pattern: ${ log.pattern}
            Policies:
              TimeBasedTriggeringPolicy:
                modulate: true
                interval: 1
            DefaultRolloverStrategy:
              max: 100
      Loggers:
        Root:
          level: info
          AppenderRef:
            - ref: CONSOLE
            - ref: ROLLING_FILE
            - ref: EXCEPTION_ROLLING_FILE
        Logger:
          - name: platform
            level: info
            additivity: false
            AppenderRef:
              - ref: CONSOLE
              - ref: PLATFORM_ROLLING_FILE
          - name: business
            level: debug
            additivity: false
            AppenderRef:
              - ref: BUSINESS_ROLLING_FILE
          - name: exception
            level: debug
            additivity: true
            AppenderRef:
              - ref: EXCEPTION_ROLLING_FILE
          - name: db
            level: debug
            additivity: true
            AppenderRef:
              - ref: DB_ROLLING_FILE
          - name: jp.co.fujixerox.log.analysis.mapper
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: jp.co.fujixerox.log.analysis.model
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: jp.co.fujixerox.log.analysis.service
            level: debug
            additivity: false
            AppenderRef:
              - ref: BUSINESS_ROLLING_FILE
              - ref: CONSOLE
          - name: jp.co.fujixerox.log.analysis.controller
            level: debug
            additivity: false
            AppenderRef:
              - ref: BUSINESS_ROLLING_FILE
              - ref: CONSOLE
          - name: org.springframework
            level: info
            additivity: false
            AppenderRef:
              - ref: PLATFORM_ROLLING_FILE
              - ref: CONSOLE
          - name: javax.servlet
            level: info
            additivity: false
            AppenderRef:
              - ref: PLATFORM_ROLLING_FILE
              - ref: CONSOLE
          - name: org.mybatis
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: java.sql
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: java.sql.Connection
            level: debug
            additivity: false
            AppenderRef:
             - ref: DB_ROLLING_FILE
             - ref: CONSOLE
          - name: java.sql.Statement
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: java.sql.PreparedStatement
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: java.sql.ResultSet
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: javax.sql
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: com.ibatis
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: org.apache.ibatis
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: org.mybatis.spring
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: com.zaxxer.hikari
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: org.springframework.jdbc
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: org.springframework.transaction
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE
          - name: javax.sql.DataSource
            level: debug
            additivity: false
            AppenderRef:
              - ref: DB_ROLLING_FILE
              - ref: CONSOLE

#### 3.3.3.5 处理静态资源 WebMvcConfig.java ####

这个是必须处理的，不然static下面的 html 无法获取css 或是 js 资源。

package cn.com.love.hsl.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        }
        
    }

#### 3.3.3.6 编写启动类Application.java ####

package cn.com.love.hsl;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.builder.SpringApplicationBuilder;
    import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    
    import java.util.UUID;
    
    @Controller
    @SpringBootApplication
    public class Application extends SpringBootServletInitializer { 
    
        /** * war package required * @param builder * @return */
        @Override
        protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { 
            return builder.sources(Application.class);
        }
    
        public static void main(String[] args) { 
            System.out.println(UUID.randomUUID().toString().replaceAll("-", ""));
            SpringApplication.run(Application.class, args);
        }
    
        @GetMapping({ "/index/", "/"})
        public String index() { 
            return "index";
        }
    
    // /**
    // * Open http and https two port
    // */
    // @Bean
    // public ServletWebServerFactory servletContainer() { 
    // TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
    // tomcat.addAdditionalTomcatConnectors(createHTTPConnector());
    // return tomcat;
    // }
    //
    // private Connector createHTTPConnector() { 
    // Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
    // //open http（8080）、https（8443）two ports
    // connector.setScheme("http");
    // connector.setSecure(false);
    // connector.setPort(8080);
    // connector.setRedirectPort(8443);
    // return connector;
    // }
    
    // /**
    // * http redirect to https
    // */
    // @Bean
    // public TomcatServletWebServerFactory servletContainer() { 
    // TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory() { 
    // @Override
    // protected void postProcessContext(Context context) { 
    // SecurityConstraint constraint = new SecurityConstraint();
    // constraint.setUserConstraint("CONFIDENTIAL");
    // SecurityCollection collection = new SecurityCollection();
    // collection.addPattern("/*");
    // constraint.addCollection(collection);
    // context.addConstraint(constraint);
    // }
    // };
    // tomcat.addAdditionalTomcatConnectors(httpConnector());
    // return tomcat;
    // }
    // @Bean
    // public Connector httpConnector() { 
    // Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
    // connector.setScheme("http");
    // //Connector listening http port
    // connector.setPort(8080);
    // connector.setSecure(false);
    // //and the redirect to https port
    // connector.setRedirectPort(8443);
    // return connector;
    // }
    }

其他的一些都可以使用 SpringBoot的默认配置。  
目前整个后端项目应该是可以正常启动了。

### 3.3.4 启动后端项目 ###

直接运行 Application.java 文件的 main 类就可以了。能正常启动说明配置就好了。  
若是不能，请具体查找一下相应的错误，比如：  
[An incompatible version \[1.1.32\] of the APR based Apache Tomcat Native library is installed][An incompatible version _1.1.32_ of the APR based Apache Tomcat Native library is installed]

### 3.3.5 编写业务逻辑代码 ###

#### 3.3.5.1 Controller(DeptController.java) ####

package cn.com.love.hsl.controller;
    
    import cn.com.love.hsl.model.Dept;
    import cn.com.love.hsl.service.DeptService;
    import cn.com.love.hsl.utils.ContextProp;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.ResponseEntity;
    import org.springframework.stereotype.Controller;
    import org.springframework.util.StringUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    @RequestMapping("/dept")
    public class DeptController { 
    
        @Autowired
        private DeptService deptService;
    
        @Autowired
        private ContextProp prop;
    
        private final static Logger logger = LoggerFactory.getLogger(DeptController.class);
    
        @RequestMapping("/get")
        public ResponseEntity get(String id) { 
            logger.info(this.getClass().getName() + "{} {}", ".get(" + id + ")", "started..");
            System.out.println(1222222222);
            logger.debug(prop.getName());
            return ResponseEntity.ok(deptService.get(id));
        }
    
        @RequestMapping("/save")
        public ResponseEntity save(Dept dept) { 
            if (StringUtils.isEmpty(dept.getId()))
                return ResponseEntity.ok(deptService.insert(dept));
            else
                return ResponseEntity.ok(deptService.update(dept));
        }
    
        @RequestMapping("/delete")
    // public ResponseEntity delete(Integer id) { 
    // deptService.delete(id);
    // return ResponseEntity.ok("Delete success!");
    // }
        public @ResponseBody String delete(String id) { 
            deptService.delete(id);
            return "Delete success!";
        }
    
        @RequestMapping("/list")
        public ResponseEntity find() { 
            return ResponseEntity.ok(deptService.findAll());
        }
    }

#### 3.3.5.2 Mapper (DeptMapper.java) ####

package cn.com.love.hsl.mapper;
    
    import cn.com.love.hsl.model.Dept;
    import org.apache.ibatis.annotations.Mapper;
    import org.springframework.stereotype.Component;
    
    import java.util.List;
    
    @Mapper
    @Component
    public interface DeptMapper { 
        List<Dept> findAll();
        int insert(Dept dept);
        int update(Dept dept);
        void delete(String id);
        Dept get(String id);
    }

#### 3.3.5.3 Model ####

##### 3.3.5.3.1 BaseModel.java #####

package cn.com.love.hsl.model;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
    import java.io.Serializable;
    import java.util.Date;
    
    public class BaseModel implements Serializable { 
        private String id;
        private User creator;
        private Date createDate;
        private User Updater;
        private Date updateDate;
    
        private final static Logger logger = LoggerFactory.getLogger(BaseModel.class);
    
        public String getId() { 
            //String.format("Hello, %s!", name);
            logger.info(this.getClass().getName() + "{} {}", ".get(" + id + ")", "started..");
            return id;
        }
    
        public void setId(String id) { 
            this.id = id;
        }
    
        public User getCreator() { 
            return creator;
        }
    
        public void setCreator(User creator) { 
            this.creator = creator;
        }
    
        public Date getCreateDate() { 
            return createDate;
        }
    
        public void setCreateDate(Date createDate) { 
            this.createDate = createDate;
        }
    
        public User getUpdater() { 
            return Updater;
        }
    
        public void setUpdater(User updater) { 
            Updater = updater;
        }
    
        public Date getUpdateDate() { 
            return updateDate;
        }
    
        public void setUpdateDate(Date updateDate) { 
            this.updateDate = updateDate;
        }
    }

##### 3.3.5.3.2 Dept.java #####

package cn.com.love.hsl.model;
    
    import cn.com.love.hsl.controller.DeptController;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Component;
    
    @Component
    public class Dept extends BaseModel { 
        private String name;
    
        private final static Logger logger = LoggerFactory.getLogger(DeptController.class);
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    }

##### 3.3.5.3.3 User.java #####

package cn.com.love.hsl.model;
    
    import org.springframework.stereotype.Component;
    
    @Component
    public class User extends BaseModel { 
    
    }

#### 3.3.5.4 Service ####

##### 3.3.5.4.1 BaseService.java #####

package cn.com.love.hsl.service;
    
    import cn.com.love.hsl.model.BaseModel;
    import cn.com.love.hsl.model.User;
    
    import java.util.Date;
    import java.util.UUID;
    
    public class BaseService { 
    
        protected void preInsert(BaseModel entity) { 
            entity.setId(UUID.randomUUID().toString().replaceAll("-", ""));
            entity.setCreator(new User());
            entity.setCreateDate(new Date());
            entity.setUpdater(new User());
            entity.setUpdateDate(new Date());
        }
    
        protected void preUpdate(BaseModel entity) { 
            entity.setUpdater(new User());
            entity.setUpdateDate(new Date());
        }
    }

##### 3.3.5.4.2 DeptService.java #####

package cn.com.love.hsl.service;
    
    import java.util.List;
    
    public interface DeptService<T> { 
        List<T> findAll();
    
        int insert(T dept);
    
        int update(T dept);
    
        void delete(String id);
    
        T get(String id);
    }

##### 3.3.5.4.3 DeptServiceImpl.java #####

package cn.com.love.hsl.service.impl;
    
    import cn.com.love.hsl.controller.DeptController;
    import cn.com.love.hsl.mapper.DeptMapper;
    import cn.com.love.hsl.model.Dept;
    import cn.com.love.hsl.service.BaseService;
    import cn.com.love.hsl.service.DeptService;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    import org.springframework.transaction.annotation.Transactional;
    
    import java.util.List;
    
    @Service
    public class DeptServiceImpl extends BaseService implements DeptService<Dept> { 
        @Autowired
        private DeptMapper deptMapper;
    
        private final static Logger logger = LoggerFactory.getLogger(DeptController.class);
        @Override
        public List<Dept> findAll() { 
            return deptMapper.findAll();
        }
    
        @Override
        @Transactional
        public int insert(Dept dept) { 
            this.preInsert(dept);
            return deptMapper.insert(dept);
        }
    
        @Override
        @Transactional
        public int update(Dept dept) { 
            this.preUpdate(dept);
            return deptMapper.update(dept);
        }
    
        @Override
        @Transactional
        public void delete(String id) { 
            deptMapper.delete(id);
        }
    
        @Override
        public Dept get(String id) { 
            logger.info(this.getClass().getName() + "{} {}", ".get(" + id + ")", "started..");
            return deptMapper.get(id);
        }
    }

#### 3.3.5.5 Utils ####

##### 3.3.5.5.1 LogEnum.java #####

package cn.com.love.hsl.utils;
    
    public enum LogEnum { 
        BUSINESS("business"),
        PLATFORM("platform"),
        DB("db"),
        EXCEPTION("exception"),
        ;
    
        private String category;
    
        LogEnum(String category) { 
            this.category = category;
        }
    
        public String getCategory() { 
            return category;
        }
    
        public void setCategory(String category) { 
            this.category = category;
        }
    
    }

##### 3.3.5.5.2 LogUtils.java #####

package cn.com.love.hsl.utils;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
    public class LogUtils { 
        /** * Get Business logger */
        public static Logger getBusinessLogger() { 
            return LoggerFactory.getLogger(LogEnum.BUSINESS.getCategory());
        }
    
        /** * Get Platform logger */
        public static Logger getPlatformLogger() { 
            return LoggerFactory.getLogger(LogEnum.PLATFORM.getCategory());
        }
    
        /** * Get DB logger */
        public static Logger getDBLogger() { 
            return LoggerFactory.getLogger(LogEnum.DB.getCategory());
        }
    
        /** * Get normal exception logger */
        public static Logger getExceptionLogger() { 
            return LoggerFactory.getLogger(LogEnum.EXCEPTION.getCategory());
        }
    }

##### 3.3.5.5.3 ContextProp.java #####

package cn.com.love.hsl.utils;
    
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.stereotype.Component;
    
    @Component
    @ConfigurationProperties(prefix = "spring.datasource")
    public class ContextProp { 
        private String name;
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    }

#### 3.3.5.6 DB Mapper(DeptMapper.xml) ####

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="cn.com.love.hsl.mapper.DeptMapper">
        <select id="get" resultType="cn.com.love.hsl.model.Dept" parameterType="java.lang.String">
            select * from dept where id= #{id};
        </select>
    
        <select id="findAll" resultType="cn.com.love.hsl.model.Dept">
            SELECT * from dept;
        </select>
    
        <insert id="insert">
            insert into dept ( name ) values (#{name});
        </insert>
    
        <delete id="delete" parameterType="java.lang.String">
             delete from dept where id= #{id};
        </delete>
    
        <update id="update">
            update dept set name=#{name} where id=#{id};
        </update>
    </mapper>

业务逻辑编写完了，这时项目应该会自动重启，若是启动成功，说明环境是好的。

# 4 发布项目 #

## 4.1 环境的整合 ##

之前已经将前端的打包，以及后台拷贝前端的文件的逻辑，都已经实现了。  
现在只需要整合一下两个项目，在parent 中配置一下，使得一步操作，可以完成所有的编译。

## 4.2 修改 parent 的 pom.xml 文件 ##

## 4.3 打包整个项目 ##

在 IDEA 的 Terminal 窗口中（注意这里的路径需要指向 parent，也就是在 parent 项目中进行编译），输入如下命令：

mvn clean package

慢慢等。

这里会：

*  下载前端使用需要的 node 和 npm 环境，并进行安装。
 *  编译前端并打成 zip 包
 *  后端拷贝前端的 zip 文件，并解压到 java/main/resources/static 目录下
 *  后台生成 war 包

## 4.4 发面项目 ##

将生成好的 war 包拷贝到指定的 Apache server 中，比如Tomcat，如果是 Tomcat的话，需要使用Tomcat8，并启动server .  
启动成功后， 直接在浏览器中访问，就可以了。

## 4.5 最终画面效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 10]

[https_github.com_slhuang520_study_tree_master_spring-boot-vue-cli-parent]: https://github.com/slhuang520/study/tree/master/spring-boot-vue-cli-parent
[2019081421191115.]: /images/20211023/d6f2622d59d849e783df1ed5485ab906.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20211023/0658937eae86491f9052106d3845dad3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 1]: /images/20211023/858f1296dfd74f89a4473951f9561e3c.png
[20190814213535412.]: /images/20211023/6ebc146e74394d90b817174fe8c3afbe.png
[20190814213559464.]: /images/20211023/3d28ab357d3b4f7297baaa846c182e4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 2]: /images/20211023/ba3e1054e8cd4ecd9e31d1cb4d266dc9.png
[20190814214936162.]: /images/20211023/8698e4e3735c459db682d26945e22497.png
[https_cli.vuejs.org_zh_guide_installation.html]: https://cli.vuejs.org/zh/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 3]: /images/20211023/8740920fe98f42e182ad7b472d944ea6.png
[http_localhost_8080_sbvc]: http://localhost:8080/sbvc/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 4]: /images/20211023/bf571b25b3d94be29fd388a98c1cbbcf.png
[20190814224521771.]: /images/20211023/a136bfbdbae2454aa988ac692aec0fa3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 5]: /images/20211023/06cd7207c3e8498699c87c22be4e94d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 6]: /images/20211023/1b0dab824f12431182986464e8155dbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 7]: /images/20211023/c9849670ac12460a99a334e04a4c9563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 8]: /images/20211023/1c7b950e5f6c40a29bd8888970e3b002.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 9]: /images/20211023/4266345f5c6d4bd6a85379f3a8790a70.png
[An incompatible version _1.1.32_ of the APR based Apache Tomcat Native library is installed]: https://blog.csdn.net/hsl0530hsl/article/details/99594628
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 10]: /images/20211023/f5da0acecc8241bc9f1f1420035f79e6.png