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

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

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

整体框架

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

如果没有基础可以看下这个。
纯SSM框架搭建：https://blog.csdn.net/weixin_42109012/article/details/90113878

有了基础直接就开始看怎么放行及使用
1、创建静态资源文件夹，在 WebContent 下再创建一个 Static-Resources 文件夹，然后在 Static-Resources 下分别创建要放行的静态资源文件夹 css、images、js，将要使用的文件放入里面。

例如：
我在 css 里面，放入自己写的 css 文件，一个把 h1 变红的代码。

我在 images 里面放入了一张图片，等会前端调用。

我在 js 里面加入了 jquery.min.js，版本2.1.4，这个网上有。

2、在 web.xml 中拦截请求
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处理。

4、前端界面使用

4.1、css 的使用
这个很简单，只需要导入静态资源 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><!-- 导入要用CSS路径 --><link rel="stylesheet" type="text/css" href="/css/mystyle.css" /><!-- 导入jQuery路径 --><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 中的爱心图片。
这张图就展示了 js 使用 jquery.min.js。
如果没有静态资源放行，就会把这些都过滤掉，加载不出来。

总结

主要还是对 SSM 框架熟悉。