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

1. 环境

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

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

使用Maven来管理开发项目,进行项目的整个合与编译。整个项目结构如下:
在这里插入图片描述

2. 项目架构

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

3. 具体手顺

3.1 创建前后端管理父类

使用IDEA父级别的 Module:
在这里插入图片描述
然后,在新建 module中创建一个 Maven 项目:
在这里插入图片描述

指定groupId 和 artifactId,Next 创建好。

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

<!-- parent pom.xml -->
<?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 项目

整体的项目结构图如下:
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

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

  • src 空目录,
  • pom.xml
  • iml 配置文件

3.2.2 安装 vue

创建 Vue Cli 项目,可以完全参考官网给的手顺:
官网地址: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 文件

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

<?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>cn.com.love.hsl</groupId>
        <artifactId>spring-boot-vue-cli-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <artifactId>spring-boot-vue-cli-ui</artifactId>
    <packaging>pom</packaging>
    <name>spring-boot-vue-cli-ui</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <node.version>v10.15.0</node.version>
        <node.directory>${project.parent.build.directory}/${node.version}</node.directory>
        <npm.version>6.10.3</npm.version>
        <npm-cache.directory>${project.build.directory}\npm-cache</npm-cache.directory>
    </properties>

    <build>
        <plugins>
       		<!--安装前端自己的编译环境-->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.3</version>
                <configuration>
                    <installDirectory>${node.directory}</installDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <phase>initialize</phase>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>${node.version}</nodeVersion>
                            <npmVersion>${npm.version}</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <phase>initialize</phase>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <npmRegistryURL>https://registry.npm.taobao.org</npmRegistryURL>
                            <arguments>install --no-optional --cache="${npm-cache.directory}"</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run release</id>
                        <phase>compile</phase>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <!--将前端打印成 zip 包,方便后面自动拷贝到后端项目-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-assembly-plugin</artifactId>
                <version>3.1.1</version>
                <executions>
                    <execution>
                        <id>make-bundles</id>
                        <phase>package</phase>
                        <goals>
                            <goal>single</goal>
                        </goals>
                        <configuration>
                            <descriptors>
                                <descriptor>assembly/zip.xml</descriptor>
                            </descriptors>
                            <appendAssemblyId>false</appendAssemblyId>
                            <finalName>${project.name}-${project.version}</finalName>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>
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 子目录,用于存放静态资源。
在这里插入图片描述

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/

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

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

在这里插入图片描述

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

3.3.1.2 选择 Spring Initializr 功能, next >

在这里插入图片描述

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

在这里插入图片描述

3.3.1.4 选择自己的功能。

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

3.3.1.5 指定项目名称

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

3.3.2 项目整体结构图

在这里插入图片描述

在这里插入图片描述

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/> <!-- lookup parent from repository -->
    </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>

        <!--Read application.yml-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <!--log4j2-->
        <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-starter-thymeleaf</artifactId>
        </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>
            <!--<resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.xml</include>
                    <include>**/*.css</include>
                    <include>**/*.js</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>
                    <!--<webResources>
                        <resource>
                            <directory>src/main/resources/lib</directory>
                            <targetPath>WEB-INF/lib</targetPath>
                            <filtering>false</filtering>
                            <includes>
                                <include>**/*.jar</include>
                            </includes>
                        </resource>
                    </webResources>-->
                    <attachClasses>true</attachClasses>
                    <classesClassifier>api</classesClassifier>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <!--<plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.6.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </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

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 文件

<?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>

    <-- 将前后端作为模块管理 -->
    <modules>
        <module>spring-boot-vue-cli-ui</module>
        <module>spring-boot-vue-cli</module>
    </modules>
</project>

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 最终画面效果

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐