Spring Boot + Vue 开发部署全过程记录

Spring Boot + Vue开发部署全过程记录

前后端分离

前后端分离的开发模式不同于以往严重依赖后端的模式，前者使得前端更加“智能”，能做的事情更多，后端只需要作为一个能回答问题的服务即可。前后端分离模式一般是基于单页应用（SPA-Single Page Application）。单页应用在第一次访问服务器时，就将整个应用涉及到的“所有页面”都发往前端，后续和服务器的交互只是涉及数据的往来，不需要再传递页面。

前后端分离，分离了代码，却加强了前后端程序员之间的耦合，需要前后端程序员不断的交流和协商。

验证码

验证码的本质就是验证操作的用户是人还是机器，防止服务被机器大量的访问攻击，这一业务本身就不需要后端的数据支持，当前端有能力时，就应该放在前端做这件事。在前端还是蛮荒时代，验证码的生成还需要后端的支持，所以一般的做法是后端生成一个验证码字符串，存入 session ，再生成一张图片传到前端展示，用户输入验证码，后端进行验证对错。而现在前端的做法是使用 JavaScript 与 Canvas 在前端绘制验证码图片，使用的是客户机的算力，没有请求发到后端。

登录与会话超时

以登录为例，当浏览器拿着用户名和密码发往后端时，后端只需要返回登录成功与否的状态即可，而不用操心失败了需要重定向的问题。同样会话超时也不需要返回登录页，返回超时状态即可。前端也可以采用 Web Workers 设置任务，模拟检查会话是否超时。

All in one jar 与 Nodejs 静态服务器

All in one jar 在下文有叙述，或参考A Lovely Spring View: Spring Boot & Vue.js、spring-boot应用前后端分离工程实践。

Nodejs 静态服务器，也是前后端分离部署的一种方式，不涉及后端数据的相关页面、静态文件部署在 Nodejs 服务器上，后端服务器只需要提供数据。前后端开发分离、部署分离。

测试

不涉及后端数据的测试：前端起自己的服务。npm start 运行测试配置。

涉及后端数据的测试：一般是后端起一个服务，前端起一个服务，前端的开发环境配置需要指向当前后端的运行地址。

构建、部署

如何将前端工程集成在后端 Spring Boot 上呢，构建思路是建一个父工程，前端工程和后端工程分别作为这个父工程的两个子模块。工程结构大致如下：

parent: 
		fe:
				fe-pom.xml
		be:
				be-pom.xml
		parent-pom.xml

前端构建

前端虽然都是 js 代码，但也可以加上 POM 文件让 Maven 去执行，前端的 POM 文件需要做的事情是：在构建前下载工程的第三方依赖（npm install），以生产模式构建工程（npm build）。这一系列事情都可以交给 Maven 来做。需要下载 frontend-maven-plugin 这个插件，这个插件支持下载 node 与 npm 以及运行这些命令，这对于构建前端工程就够用了。POM 文件大致如下：

<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>com.jx</groupId>
    <artifactId>parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
  </parent>
  
  <artifactId>com-jx-fe</artifactId>
  <name>com-jx-fe</name>
  <description>前端工程</description>
  
  <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
               <version>${frontend-maven-plugin.version}</version>
                <executions>
                    <!-- 安装 node 和 npm 运行后续命令，安装在项目里 -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <!-- 安装版本： v8.11.3 -->
                            <nodeVersion>v8.11.3</nodeVersion>
                        </configuration>
                    </execution>
                    <!-- 更换 npm 包下载源为淘宝的源 -->
                    <execution>
                        <id>npm registry set to taobao</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>config set registry http://registry.npm.taobao.org/</arguments>
                        </configuration>
                    </execution>
                    <!-- 安装项目依赖 -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <!-- 构建和压缩前端文件 -->
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin