Spring- reference static resources

Why use static resources

In the team development process, team members have their own division. In the process of writing code to try to avoid conflicts, to try to separate the various types of code. Therefore, in view files, pulled out as far as possible javascript, cssthe code to an external file, and then follow 静态资源referenced (for Minato more nonsense words, can be ignored).

Configuring static resource path

Modify the srcmainresourcesspringapplicationContext-mvc.xmlfile, add a static resource reference path:

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/" />

References static resources

After you configure a static resource Road King, can be jsp, htmland other resources referenced in page view.
To echartsthe library, for example, the downloaded echarts.min.jsfile in srcmainwebappWEB-INFresourcesjavascriptthe directory, edit view file reference 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">
// based ready dom, instance initialization echarts var myChart = echarts.init ( Document .getElementById ( 'main' ));


// Specify configurations and data graphs var Option = { title: { text: 'ECharts start example' }, ToolTip: {}, Legend: { Data: [ 'sales' ] }, XAXIS: { Data: [ "Shirt " , " sweater " , " chiffon shirt " , " pants " , " shoes " , " socks " ] }, YAXIS: {}, Series:[{ name:













'Sales' ,
type: 'bar' ,
Data: [. 5, 20 is, 36, 10, 10, 20 is]
}]
};

// just use the specified configuration items and data charts.
myChart.setOption (Option); </ Script > </ body > </ HTML >



Guess you like

Origin www.cnblogs.com/wangziqiang123/p/11712542.html