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

最新推荐文章于 2023-11-30 19:21:56 发布

有人_295

最新推荐文章于 2023-11-30 19:21:56 发布

阅读量4.6k

点赞数 3

分类专栏： Java学习文章标签： Web静态资源

本文链接：https://blog.csdn.net/weixin_42109012/article/details/94557358

版权

Java学习专栏收录该内容

19 篇文章 2 订阅

订阅专栏

常见的静态资源（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 框架熟悉。

有人_295

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
SSM框架静态资源放行及使用——Java

常见的静态资源（Static-Resources）css——层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。images——图片js——JavaScript一种直译式脚本语言，...
复制链接

扫一扫