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

于 2019-08-14 23:45:58 发布
阅读量4.7k 收藏 28
点赞数 5
分类专栏： SpringBoot vue 文章标签： IDEA SpringBoot Vue Cli 前后端分离 项目实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsl0530hsl/article/details/99611227
版权

关于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. 具体手顺

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

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

在这里插入图片描述

雾里看花叹朦胧
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值