SpringMVC 04 -静态资源放行与JSON交互
SpringMVC静态资源放行与JSON交互
- 1 静态资源放行
-
- 1.1 静态资源问题
- 1.2 解决方案1
- 1.3 解决方案2
- 1.4 解决方案3
- 2 Json交互
-
- 2.1 导入依赖
- 2.2 使用**@ResponseBody**
- 2.3 使用**@RestController**
- 2.4 使用**@RequestBody**
-
- 2.4.1 前端请求
- 2.4.2 定义Controller
1 静态资源放行
1.1 静态资源问题
静态资源：html，js文件，css文件，图片文件
因为在SpringMVC中DispatcherServlet也采用了 “/” 作为url-pattern, 所以静态资源的访问也会进入前端控制器，前端控制器会根据路径在对应的Handler处理请求，但是肯定没有这样的请求地址，所以造成静态资源不能完成访问。
1.2 解决方案1
DispathcerServlet采用其他的url-pattern
此时，所有访问handler的路径都要以 .do结尾！！
缺点:所有的请求都需要加上.do为后缀
<servlet>
<servlet-name>dispatcherServletservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/springmvc.xmlparam-value>
init-param>
servlet>
<servlet-mapping>
<servlet-name>dispatcherServletservlet-name>
<url-pattern>*.dourl-pattern>
servlet-mapping>
1.3 解决方案2
DispathcerServlet的url-pattern依然采用 “/”,但追加配置
- 静态资源放行
- 底层SpringMVC写了一个DefaultServlet，接受请求，优先去找静态资源，如果静态资源不存在，就去找处理器映射器
<mvc:default-servlet-handler/>
1.4 解决方案3
- mapping是访问路径，location是静态资源存放的路径
放行指定的路径对应的静态资源
<mvc:resources mapping="/css/**" location="/css/"/>
<mvc:resources mapping="/image/**" location="/image/"/>
<mvc:resources mapping="/js/**" location="/js/"/>
<mvc:resources mapping="/pages/**" location="/pages/"/>
2 Json交互
导入依赖：Jackson依赖
jackson-databind2个注解
- ResponseBody 将方法的返回值类型转换成json字符串，返回给前端
- @RequestBody：将前端传递的
Json格式的字符串自动转换为java对象前端向后端提交数据 注意SpringMVC要求：
- 设置请求参数的类型为json格式
contentType:'application/json',- 必须是post请求
type:"POST",
2.1 导入依赖
导入Jackson依赖
jackson-databind
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-databindartifactId>
<version>2.12.2version>
dependency>
2.2 使用**@ResponseBody**
@ResponseBody作用：将方法的返回值类型转换成json字符串，返回给前端
如果在类上使用@ResponseBody 注解表当前类所有的方法都将返回json数据(前后端分离) 不走视图解析器（不是前后端分离就不要用）
可以加在方法上
可以加在类前面
@Controller
public class TestController {
@RequestMapping("/json1")
public void json1(HttpServletResponse response){
try {
User user = new User("张三",30,1000d);
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
String json = mapper.writeValueAsString(user);
response.getWriter().write(json);
} catch (JsonProcessingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
@RequestMapping("/json2")
public User json2(){
User user = new User("张三1",31,1010d);
return user;
}
@RequestMapping("/json3")
public List<User> json3(){
List<User> userList = new ArrayList<>();
for (int i = 0; i < 10; i++) {
userList.add(new User("张三"+i,31,1010d));
}
return userList;
}
@RequestMapping(value = "/json4",produces = "application/json;charset=utf-8")
public String json4(){
return "hello,中文";
}
}
2.3 使用**@RestController**
Controller类上加了@RestController注解，等价于在类中的每个方法上都加了@ResponseBody
@RestController = @Controller + @ResponseBody
@RestController //那么这个Controller中不能使用转发、重定向，不走视图解析器。 纯前后端分离项目使用
public class TestController {
@RequestMapping("/json2")
public User json2(){
User user = new User("张三1",31,1010d);
return user;
}
@RequestMapping("/json3")
public List<User> json3(){
List<User> userList = new ArrayList<>();
for (int i = 0; i < 10; i++) {
userList.add(new User("张三"+i,31,1010d));
}
return userList;
}
@RequestMapping(value = "/json4",produces = "application/json;charset=utf-8")
public String json4(){
return "hello,中文";
}
}
2.4 使用**@RequestBody**
@RequestBody作用：将前端传递的
Json格式的字符串自动转换为java对象
2.4.1 前端请求
json.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jQuery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form id="userForm">
用户名：<input type="text" id="username" name="username">
密码：<input type="text" id="password" name="password">
<input type="button" onclick="login()" value="提交">
</form>
<script>
function login(){
//模拟json数据
//var json = {username:"admin123",password:"123456"};
//var username = $("#username").val();
//var password = $("#password").val();
//var json = {username:username,password:password};
//serializeArray(); 获取表单中所有的数据,并返回一个数据（json对象）[{username:""},...]
var dataArr = $("#userForm").serializeArray();
var json = {};
$.each(dataArr,function(index,data){
json[data.name] = data.value;
})
//发送ajax异步请求
$.ajax({
url:'/sendJson',
//将json对象转成json字符串
data:JSON.stringify(json),
type:"POST",
//设置请求参数的类型为json格式，告知后端提交的是json格式的数据
contentType:'application/json',
success:function(res){
console.log(res);
}
})
}
</script>
</body>
</html>
2.4.2 定义Controller
@RestController
public class TestController {
@RequestMapping("/sendJson")
public Map json5(@RequestBody User user){
System.out.println(user);
Map map = new HashMap();
map.put("code",2000);
map.put("msg","成功");
return map;
}
}