基于webjars的前后端分离实现

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

将前端打包成webjars

Maven POM配置

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

<?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的方式引入依赖即可。

<dependency>
    <groupId>com.winning.webjars</groupId>
    <artifactId>adminui</artifactId>
    <version>1.0.0</version>
</dependency>

代码层面

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

@RestController
public class TestController {
    @ApiOperation("/test")
    @RequestMapping("/test")
    @ApiIgnore
    public ModelAndView test() {
        return new ModelAndView("/webjars/adminui/1.0.0/index.html");
    }
}

END