什么是SpringMVC?

1.SpringMVC是Spring的一个模块,SpringMVC和Spring无需整合层进行整合
2.SpringMVC是基于mvc的web框架
3.spring表现层:方便前后端数据的传输
4.SpringMVC:M模块层C控制层V显示层

发起请求到前端控制器(DispatcherServlet)
前端控制器请求HandlerMapping查找 Handler，可以根据xml配置、注解进行查找
处理器映射器HandlerMapping向前端控制器返回Handler
前端控制器调用处理器适配器去执行Handler
处理器适配器去执行Handler
Handler执行完成给适配器返回ModelAndView
处理器适配器向前端控制器返回ModelAndView，ModelAndView是springmvc框架的一个底层对象，包括 Model和view
前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图(jsp)
视图解析器向前端控制器返回View
前端控制器进行视图渲染，视图渲染将模型数据(在ModelAndView对象中)填充到request域
前端控制器向用户响应结果

SpringMVC 注解说明

@RequestMapping("/hello")实现浏览器的请求路径与方法的映射
@ResponseBody将服务器的返回值转化为JSON. 如果服务器返回的是String类型,则按照自身返回.
@RestController 表示Controller类,同时要求返回值为JSON
@PathVariable restFul结构,接收参数的注解.
@GetMapping("") 只能接收GET请求类型
@DeleteMapping("") 只能接收DELETE请求类型
@PostMapping("") 只能接收POST请求类型
@PutMapping("") 只能接收PUT请求类型
@CrossOrigin 允许跨域访问
@RequestBody 将JSON串转化为Java对象

前端

简化操作:axios.defaults.baseURL = "http://localhost:8080";
重点: RestFul的结构不区分请求类型. 任意请求都可以通过RestFul的结构发送数据.

模板方式传参: 反引号``

        字符取值: ${rest2.id}
        * 作用: 1.常见字符串拼接 * 2.可以保证代码的数据结构

POST请求

前端代码传递的JS对象,而后端使用的是java对象,
2种对象没有办法直接转化,需要转化JSON进行传递.
axios使用post请求时,自动将JS对象解析为JSON串需要使用到@RequestBody

同源策略

浏览器的网址与Ajax请求的网址必须满足如下的要求: 协议://域名:端口号必须相同.
如果满足要求则是同域访问,如果不满足要求则是跨域访问

解决使用@CrossOrigin 允许跨域访问\

CORS介绍

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

Ajax优化

回调地狱优化-async-await

async 控制同步异步标识函数\
await 标识Ajax请求

<script>
			axios.defaults.baseURL = "http://localhost:8080"
			
			/**
			 * 1.定义一个函数
			 * 规则: 
			 * 		1. async 标识函数
			 * 		2. await 标识请求
			 * 		3. 2者必须同时出现
			 * 		4. 可以直接获取then中的回调对象promise
			 */
			async function saveUser(){
				let user = {id: 100,name:"春节已过!!!"}
				let promise = await axios.post("/axios/saveUser",user)
				console.log(promise.data)
			}
			
			/* 2.调用函数 */
			saveUser()
</script>

箭头函数写法

/* 3.箭头函数写法
				1.去除function关键字
				2.参数与函数体之间使用 => 连接
				3.如果只有一个参数,则参数括号可以省略
				4.箭头函数使用一般用于回调函数
				5.如果使用function关键字 则使用this时会产生歧义
			 */
			let user2 = {id: 200,name:"箭头函数!!!"}
			axios.post("/axios/saveUser",user2)
				 .then(function(promise){
					console.log(promise.data)
				 })
			axios.post("/axios/saveUser",user2)
				 .then(	promise => {
					console.log(promise.data)
				 })

SpringMVC复习