Vue+SpringBoot 在 docker 下操作实践：上传 doc 转 PDF 并让前端同步获取转换结果

Doc 文档的批量上传并转换为 PDF 文件，前端同步获取转换结果并提供下载

Github 项目源码: liumapp/synchronizing-doc-convert-results

• 功能介绍
• 如何使用
  • Docker
    • 安装镜像
    • 启动容器
    • 停止容器
    • 删除镜像
  • IDEA

功能介绍

• 前端用户上传一个或者多个 doc/docx 文档

• 后端异步执行对文档的转换操作，利用了 rabbitmq 队列

• 前端可以同步获取转换结果，并以表格形式提供下载操作

介绍动图您可以在 Github 项目文档中浏览

如何使用

Docker

首先，请确保您的本地系统中有 docker、docker-compose 及 maven 的支持

其次，请确保您没有修改过 synch-service 的项目配置文件，如果修改过，请确保 spring.profiles.active 的值为 docker，并且与 synch-rabbitmq 容器的连接信息与 docker-compose.yml 的保持一致

安装镜像

拷贝项目到本地后，执行脚本 build-image.sh 来安装镜像

该镜像的安装，是由 docker-maven-plugin 驱动的，所以需要您确保在执行脚本前，本机提供 maven3 版本以上的支持

启动容器

利用 docker-compose，执行命令:

docker-compose up -d

来启动容器

启动后的视图您可以 Github 项目文档中浏览

之所以需要用到 docker-compose 进行容器的编排操作，是因为系统依赖于 rabbitmq 的支持

rabbitmq 本身的存在，是以一个独立的容器来运行，并通过配置 docker-compose，使两者共享一个网关来进行数据交互

网关配置如下:

networks:
  synchronizing-doc-convert-results:
    driver: bridge

并在两个容器的配置项中，添加以下内容:

networks:
  - synchronizing-doc-convert-results

停止容器

利用 docker-compose，执行命令:

docker-compose down

来停止容器

需要注意的是，停止容器本身，并不会删除镜像文件

删除镜像

在项目根目录下，执行脚本 rm-image.sh 删除镜像文件，请注意，该操作的执行前提是容器处于停止状态

IDEA

考虑到部分用户可能对 Docker 不是太了解，所以这个项目也可以使用传统的方式来运行

但是项目本身使用了前后端分离的形式，前端项目为 synch-ui，采用 vue2.0 框架实现，后端项目为 synch-service，采用 springboot1.5.6 框架实现

所以如果您希望同时运行前后端项目的话，需要您的系统同时具备 Java 环境和 Nodejs 环境的支持

但考虑到大部分开发人员并不会选择全栈作为自己的发展发现，所以为纯 Java 开发人员提供了一定的便利性：

synch-service 利用 thymeleaf 已经加载了 synch-ui 编译后的静态文件，并完成了相关配置，所以纯 Java 开发人员只需要将 synch-service 导入 IDEA（导入过程省略），并且修改 application.yml 配置文件的 spring.profiles.active 值为 dev，在启动后访问 http://localhost:2020 也可以查看系统效果。

与此同时，如果您是一名纯前端开发人员，在 webstorm 中打开了 synch-ui 项目，并利用

npm run dev

启动项目后，您需要同时启动后端项目才能够在 http://localhost:8080 查看系统效果。

如果您对前端代码做了一定的修改，而又希望将最新的效果导入 synch-service 中，那么请您执行脚本 update-ui.sh 自动完成 synch-ui 编译文件的导入工作。