基于webjars的前后端分离实现

遵循RESTful的前后端分离软件项目实践中,有两个不优雅的地方:1、前端和后端的版本管理和匹配不够简洁,2、工程部署时复杂多更高。而webjars恰好能解决这两个问题。以下是我的处理办法。

将前端打包成webjars

Maven POM配置

前后端分离的项目,前端通常是纯静态网站(只包含js、css、html等resource)。为了打包成webjars,我们需要新建一个maven项目,一个典型的pom文件示例如下。重点是propertiesresource里面的配置。distributionManagement是maven deploy的地址,并不影响打包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<packaging>jar</packaging>
<groupId>com.winning.webjars</groupId>
<artifactId>adminui</artifactId>
<version>1.0.0</version>
<name>adminui</name>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<destinationDir>${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}</destinationDir>
</properties>
<build>
<resources>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
<targetPath>${destinationDir}</targetPath>
</resource>
</resources>
<plugins>
</plugins>
</build>
<distributionManagement>
<repository>
<id>nexus-releases</id>
<name>nexus-releases</name>
<url>http://36.33.216.237:15016/repository/maven-releases/</url>
</repository>
<snapshotRepository>
<id>nexus-snapshots</id>
<name>nexus-snapshots</name>
<url>http://36.33.216.237:15016/repository/maven-snapshots/</url>
</snapshotRepository>
</distributionManagement>
</project>

工程结构

根据pom中的配置,我们需要把所有网站资源放在/src/main/resources下。

webjars的生成和发包

使用maven的package命令打包,使用maven的deploy命令发布到私仓(如果前面pom文件里配置了私仓地址的话)里去。

在后端项目中使用

我在实践中使用了maven私仓,所以以下就用maven依赖的方式说明。

Maven POM 配置

只需要在pom里像引用其他jar的方式引入依赖即可。

1
2
3
4
5
<dependency>
<groupId>com.winning.webjars</groupId>
<artifactId>adminui</artifactId>
<version>1.0.0</version>
</dependency>

代码层面

假设我们让在用户访问/test时指向webjars的index.html.那么在controller层可以如下编码

1
2
3
4
5
6
7
8
9
@RestController
public class TestController {
@ApiOperation("/test")
@RequestMapping("/test")
@ApiIgnore
public ModelAndView test() {
return new ModelAndView("/webjars/adminui/1.0.0/index.html");
}
}

END