> 文章列表 > SpringMVC 04 -静态资源放行与JSON交互

SpringMVC 04 -静态资源放行与JSON交互

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>dispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/springmvc.xml</param-value></init-param></servlet><servlet-mapping><servlet-name>dispatcherServlet</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping>

1.3 解决方案2

DispathcerServlet的url-pattern依然采用 “/”,但追加配置

  • 静态资源放行 <mvc:default-servlet-handler/>
  • 底层SpringMVC写了一个DefaultServlet,接受请求,优先去找静态资源,如果静态资源不存在,就去找处理器映射器
<!--SpringMVC提供了一个DefaultServletHttpRequestHandler的类,获取默认先检查次路径是否为静态资源。如果是静态资源就执行放行,如果不是静态资源则继续交给DispatcherServlet处理
-->
<mvc:default-servlet-handler/>

1.4 解决方案3

  • mapping是访问路径,location是静态资源存放的路径

放行指定的路径对应的静态资源

 <!-- 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-databind

2个注解

  • ResponseBody 将方法的返回值类型转换成json字符串,返回给前端
  • @RequestBody:将前端传递的Json格式的字符串自动转换为java对象

前端向后端提交数据 注意SpringMVC要求:

  1. 设置请求参数的类型为json格式 contentType:'application/json',
  2. 必须是post请求 type:"POST",

2.1 导入依赖

导入Jackson依赖 jackson-databind

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.12.2</version>
</dependency>

2.2 使用@ResponseBody

@ResponseBody作用:将方法的返回值类型转换成json字符串,返回给前端

  • 如果在类上使用@ResponseBody 注解表当前类所有的方法都将返回json数据(前后端分离) 不走视图解析器(不是前后端分离就不要用)

  • 可以加在方法上

  • 可以加在类前面

@Controllerpublic 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;}
}