说明

这里只介绍Servlet3如何使用WebJars（Classic风格），文章中示例源码地址在https://github.com/henryhuang/webjars-example。

代码编写

Servlet类

首先配置一个Servlet：

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

public class ServletSample extends HttpServlet {
	
	private static final long serialVersionUID = -5041101055869552308L;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		try(PrintWriter printWriter = resp.getWriter()) {
			printHTML(printWriter, "<script type='javascript' src='webjars/jquery/3.0.0-alpha1/jquery.js'></script>", "OK");
			printWriter.flush();
		}

	}
	
	private void printHTML(PrintWriter printWriter, String headContent, String bodyContent) {
		printWriter.print("<html>");
		printWriter.print("<head>");
		printWriter.print(headContent);
		printWriter.print("</head>");
		printWriter.print("<body>");
		printWriter.print(bodyContent);
		printWriter.print("</body>");
		printWriter.print("</html>");
	}
	
}

注意 cnhalo.ServletSample#doPost:

1
2

printHTML(printWriter, "<script type='javascript' src='webjars/jquery/3.0.0-alpha1/jquery.js'></script>", "OK");

“webjars/jquery/3.0.0-alpha1/jquery.js” 是根据jquery的WebJars包里META-INF/resources下的路径写的：

文件结构

web.xml

web.xml 里的内容为：

1
2
3
4
5
6
7
8
<servlet>
	<servlet-name>webjars</servlet-name>
	<servlet-class>cnhalo.ServletSample</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>webjars</servlet-name>
	<url-pattern>/webjars</url-pattern>
</servlet-mapping>

运行

自己打包

示例项目使用Gradle进行构建，需要配置Gradle的环境，然后依次执行：

1
2
3
git clone http://https://github.com/henryhuang/webjars-example
cd webjars-example
gradle war // 生成war包

gradle会打出war包，进入项目的 build/libs/ 下面，看到 webjars-1.0.war 即是，将war包放入tomcat下运行即可。

注意，代码使用了jdk8。

使用发布包

如果不想使用gradle打包，可以使用我已经打好的包webjars-1.0.war。

验证

启动tomcat，访问 http://localhost:8080/webjars-1.0/webjars，界面显示 OK，查看页面源码（使用FireFox，鼠标右键，查看页面源代码，其它浏览器类似）：

1
2
3
4
5
6
7
8
<html>
<head>
    <script type='javascript' src='webjars/jquery/3.0.0-alpha1/jquery.js'></script>
</head>
<body>
    OK
</body>
</html>

点击 webjars/jquery/3.0.0-alpha1/jquery.js ，可显示 jquery的源码信息，则使用成功！