SSM框架静态资源放行及使用——Java

水深无声 2021-12-15 23:09 618阅读 0赞

## 常见的静态资源（Static-Resources） ##

1.  css——层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.  images——图片
3.  js——JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

## 整体框架 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70]

## 静态资源(Static Resources)的放行及使用 ##

**如果没有基础可以看下这个。**  
纯SSM框架搭建：[https://blog.csdn.net/weixin\_42109012/article/details/90113878][https_blog.csdn.net_weixin_42109012_article_details_90113878]

**有了基础直接就开始看怎么放行及使用**  
**1、创建静态资源文件夹，在 WebContent 下再创建一个 Static-Resources 文件夹，然后在 Static-Resources 下分别创建要放行的静态资源文件夹 css、images、js，将要使用的文件放入里面。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 1]  
例如：  
我在 css 里面，放入自己写的 css 文件，一个把 h1 变红的代码。  
![在这里插入图片描述][20190703134858791.png]

我在 images 里面放入了一张图片，等会前端调用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 2]  
我在 js 里面加入了 jquery.min.js，版本2.1.4，这个网上有。  
![在这里插入图片描述][2019070313520779.png]  
**2、在 web.xml 中拦截请求**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 3]**3、要在 springMVC.xml 中加入静态资源放行语句。**

<mvc:resources location="/Static-Resources/css/" mapping="/css/**"/>
    	<mvc:resources location="/Static-Resources/images/" mapping="/images/**"/>
    	<mvc:resources location="/Static-Resources/js/" mapping="/js/**"/>

**location**元素表示 WebContent 目录下的**静态资源包**下的所有文件。  
**mapping**元素第一个表示以 /css 开头的所有请求路径，如/css/a 或者/css/a/b。  
该配置的作用是：DispatcherServlet不会拦截以/static开头的所有请求路径，并当作静态资源交由Servlet处理。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 4]  
**4、前端界面使用**

**4.1、css 的使用**  
这个很简单，只需要导入静态资源 css，然后使用就可以了。

<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
    
    	<h1>用户信息查询</h1>

**4.2、images 的使用**  
这个也很简单，直接使用文件路径中的图片即可。

<输入img border="0" src="/images/爱心.jpg" alt="爱心" width="100" height="100">

没有前面汉字，只有 img 会改变格式，变成加载图片。。。

**4.3、js 的使用**  
js 是 JavaScript，我放的静态资源 jquery.min.js，主要用来返回数据，然后 Ajax展现。

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>查询</title>
    	
    	<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
    	
    	<script type="text/javascript" src="/js/jquery.min.js"></script>
    </head>
    	<body>
    		<输入img border="0" src="/images/爱心.jpg" alt="爱心" width="100" height="100">
    		<div class="home">
    			<div class="index">
    				<h1>用户信息查询</h1>
    			</div>
    			
    			<div class="user">
    				<button onclick="selectUsers()">查询</button><br/>
    			</div>
    		</div>
    	</body>
    
    	<script>
     	//我分开几个函数写主要是好看，但最好写到一起，别人好一起理解
     	    function selectUsers() {
     	        $.ajax({
     	        	//以POST传参，路径为url，不用date传到后台直接查询全部，返回类型json，我只写了成功，失败自己在加点就可以了
     	            type:"POST",
     	            url:"/selectUsers",
     	            dataType:"json",
     	            success:function (data) {
     	                //调用参数名，date就为返回的json数据
     	                showResult(data);
     	            }
     	        })
     	    }
     	    function showResult(data) {
     	    	//定义显示数据的位置，根据div的class属性
     	        var target = $(".home .user ");
     	        //使按键消失，只按一次
     	        target.html("");
     	        //拼接信息
     	        var table = "<table border='1'>"
        					+"<tr>"
        					+"<th>编号</th>"
        					+"<th>用户</th>"
        					+"<th>密码</th>"
        					+"</tr>";
     	        //取出所有匹配的数据，row定义为代表有几条数据
     	        for (var row=0;row<data.length;row++){
     	            table =	table
                			+"<tr>"
                			+"<td>"+data[row].id+"</td>"
                			+"<td>"+data[row].username+"</td>"
                			+"<td>"+data[row].password+"</td>"
           					+"</tr>";
     	    	}
     	        table = table + "</table>";
     	    	//显示所有读取数据
     	        target.append(table);
     	    }
     	</script>
    
    </html>

## 结果展示 ##

这张图展示了 css 把 h1 的颜色改变了， 展示 images 中的爱心图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 5]这张图就展示了 js 使用 jquery.min.js。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 6]如果没有静态资源放行，就会把这些都过滤掉，加载不出来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 7]

## 总结 ##

主要还是对 SSM 框架熟悉。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70]: /images/20211215/6e2e3556529c424b8c69187f39150bde.png
[https_blog.csdn.net_weixin_42109012_article_details_90113878]: https://blog.csdn.net/weixin_42109012/article/details/90113878
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 1]: /images/20211215/fec7584eb2f34bd7b65d2475740d3292.png
[20190703134858791.png]: /images/20211215/0581046180144238a1d6a4ee7f11716a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 2]: /images/20211215/1073acd9e3784682a8acead7f8c9269b.png
[2019070313520779.png]: /images/20211215/93d9e31441ff43e4938c720cde046585.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 3]: /images/20211215/0308163616fc43aa8251d2b085c9da40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 4]: /images/20211215/9ef4e47dfd0843028688b0ea8d70c347.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 5]: /images/20211215/f454136f19a44c74bff70c5df6a8d847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 6]: /images/20211215/e918d22b799c4fccb23bd7bfaac0b75b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 7]: /images/20211215/ff1e9133e2a043518f23a4c9070b0420.png