Spring-引用静态资源

为什么要使用静态资源

在团队开发过程中,组员各有分工。在编写代码过程中要尽量避免冲突,要尽量将各类代码分离。因此在视图文件中,要尽量抽离出javascriptcss代码到外部文件,然后按照静态资源进行引用(以上废话为了凑字,可无视)。

配置静态资源路径

修改srcmainresourcesspringapplicationContext-mvc.xml文件,添加静态资源引用路径:

1
2
3
4

<mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" />
<mvc:resources mapping="/images/**" location="/WEB-INF/images/" />
<mvc:resources mapping="/js/**" location="/WEB-INF/js/" />

引用静态资源

配置好静态资源路劲后,可在jsphtml等视图页中引用资源。
echarts库为例,将下载好的echarts.min.js文件放置在srcmainwebappWEB-INFresourcesjavascript目录下,编辑视图文件引用echarts:

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
36
37
38
39
40
41
42
43
44
45
46
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
大专栏  Spring-引用静态资源%>

"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%=basePath %>resources/javascript/chart/echarts.min.js"></script>
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
相关文章
相关标签/搜索