CGB2111-Day06-07-SpringMVC

48 篇文章 2 订阅
48 篇文章 0 订阅

文章目录

1. Spring总结

1.1 IOC-DI

  1. IOC: 控制反转 对象的生命周期由Spring容器管理.
  2. xml配置文件的写法 bean标签 id/class xml容器的实现类
  3. 注解写法 @bean 配置类
  4. 单例多例问题 默认单例对象 @scope(‘prototype’) 多例对象
  5. 懒加载 @Lazy 用户使用时创建
  6. 生命周期方法 对象创建(无参构造)/对象初始化(@PostXXXX)/业务调用/对象销毁(@PreXXXXX)
  7. DI: 依赖注入 为对象的属性赋值!!!
  8. 简单属性赋值: @Value注解
  9. 引用赋值: @Autowired 1.默认按照类型匹配 2.按照名称匹配
    10.注入的方式: 1.Set注入 2.构造方法注入 3.工厂模式注入

1.2 AOP

  1. 什么是AOP 面向切面编程 在不修改源码的条件下,对方法进行扩展!!! 解决了业务的耦合性.
  2. 底层核心机制: 动态代理机制 JDK/CGLIB 动态代理.
  3. 关键词:
    3.1 切入点表达式: 如果用户调用满足切入点表达式 则创建代理对象,执行AOP的通知
    3.2 通知: 对业务的扩展 5个通知 环绕通知最为强大.
    3.3.连接点: 用户调用的方法满足切入点表达式 则该方法称作连接点.

1.3 Spring框架优势

1.Spring框架的设计让程序从层级到业务实现了松耦合
2.Spring基于这样的设计思想,可以整合其它的第三方框架, 使得程序可以以一种统一的方式进行调用.

2.SpringMVC

2.1 SpringMVC介绍

Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而在使用Spring进行WEB开发时,可以选择使用Spring的Spring MVC框架或集成其他MVC开发框架,如Struts1(现在一般不用),Struts 2(一般老项目使用)等等。

**总结:
1.SpringMVC是Spring框架后续开发的web模块.主要负责与前端用户进行交互.
2.SpringMVC基于Servlet进行开发的框架,目的简化前后端的调用.
**

2.2 Servlet 知识回顾

Servlet(Server Applet),全称Java Servlet。是用Java编写的服务器端程序。**其主要功能在于交互式地浏览和修改数据,生成动态Web内容。**狭义的Servlet是指Java语言实现的一个接口,广义的Servlet是指任何实现了这个Servlet接口的类,一般情况下,人们将Servlet理解为后者。
总结: Servlet是java针对前后端交互,开发的一种调用的机制.
弊端:
1. 一个业务需求 就需要准备一个Servlet 数量繁多.
2. 需要编辑大量的配置文件 web.xml 开发繁琐.
3. 从servlet中获取的参数都是String数据类型,需要手动的转化类型.
4. Servlet只提供了get/post请求类型,不满足当下的需求.

2.3 SpringMVC入门案例

2.3.1 创建项目

1.创建项目
在这里插入图片描述
2.勾选jar包
在这里插入图片描述
3. 测试Tomact服务器是否正常使用
在这里插入图片描述

2.3.2 SpringMVC开发注意事项

1. 开发时务必注意包路径 在主启动类的同包及子包中编辑.
在这里插入图片描述
2. 现在开发一般都使用前后端分离的方式.所以服务器返回的一般都是JSON串.
3. 每次编辑完成代码.需要重启tomcat服务器.

2.3.3 编辑HelloController

package com.jt.controller;

import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller //SpringMVC专门扫描的注解
public class HelloController {

    @RequestMapping("/hello")
    @ResponseBody
    public String hello(){

        return "您好SpringMVC";
    }

}

2.3.4 页面效果展现

URL1: http://localhost:8080/hello
URL2: http://127.0.0.1:8080/hello
在这里插入图片描述

2.4 SpringMVC 注解说明

  1. @RequestMapping("/hello")
    负责用户的请求路径后台服务器之间的映射关系
    如果请求路径不匹配,则用户报错404 在这里插入图片描述
  2. @ResponseBody
    作用: 将服务器的返回值转化为JSON. 如果服务器返回的是String类型,则按照自身返回.

2.5 SpringDemo测试2

2.5.1 编辑POJO

package com.jt.pojo;

import java.io.Serializable;

public class User implements Serializable {
    private Integer id;
    private String name;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

2.5.2 编辑Controller方法

 @RequestMapping("/getUser")
    @ResponseBody //{id:101,name:"SpringMVC!!"}
    public User getUser(){
        User user = new User();
        user.setId(101);
        user.setName("SpringMVC!!");
        return user;
    }

2.5.3 页面效果展现

说明: 返回的数据就是JSON串
在这里插入图片描述

2.6 SpringMVC底层实现原理

在这里插入图片描述
重要组件:
1. 前端控制器 DispatcherServlet
2. 处理器映射器 handlerMapping
3. 处理器适配器 handlerAdapter
4. 视图解析器 ViewResolver

SpringMVC调用流程:
1. 用户发起请求之后,第一步访问就是前端控制器.
2. 前端控制器只负责请求的转发/响应. 没有办法直接处理业务.
3.当SpringMVC容器启动时,处理器映射器首先会加载所有的@RequestMapping注解.将请求路径与方法进行绑定.保存到Map中. Map</url,method方法>, 当前端控制器发送请求被处理器映射器接收.如果URL地址匹配,则告知应该执行哪个方法.如果url地址不匹配.,则提示用户404

  1. 前端控制器得知将要执行的方法是谁,但是前端控制只能转发,没有办法执行业务.
    所以请求处理器适配器执行业务逻辑.

  2. 处理器适配器针对配置文件(xml方式/注解方式/其它方式)的格式,挑选合适的处理器去执行业务逻辑. 业务执行成功之后返回ModelAndView对象 Model:业务数据 View:页面

历史版本: 需要返回页面名称,及将数据填充到页面中
6. 前端控制器接收到返回的ModelAndView之后,交给视图解析器去解析数据. 视图解析器通过自身的配置获取页面的名称 (/web/user.html).
7. 最终通过经过视图渲染,将数据填充到页面中.最终用户看到的页面就包含了业务数据.

前后端分离方式:
关键用法: @ResponseBody 要求返回业务数据并且转化为JSON串. 程序直接跳过6-7直接将数据返回给用户.

2.7 SpringMVC 参数接收用法

代码简化:
在这里插入图片描述

2.7.1 简单参数传参-历史版本

package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
public class UserController {

    /**
     * URL:http://localhost:8080/user/findUser?id=100&name=tomcat
     * 类型: get请求
     * 返回值: String id:name
     * 补课:
     *  1.Servlet-request对象/response对象
     *  2.Servlet中如何取值??
     */
    @RequestMapping("/user/findUser")
    @ResponseBody   //响应数据  JSON
    public String findUser(HttpServletRequest request,
                           HttpServletResponse response){
        String id = request.getParameter("id");
        int intId = Integer.parseInt(id);
        String name = request.getParameter("name");
        return intId +":"+name;
    }
}

2.7.2 简单参数传参-mvc方式

/**
     * URL:http://localhost:8080/user/findUser2?id=100&name=tomcat
     * 规则: SpringMVC中的参数名称,必须与传递参数名称一致
     * 原理: SpringMVC在内部将Servlet的取值的方式包装.用户只需填写参数
     *      即可以获取数据.
     * @return
     */
    @RequestMapping("/user/findUser2")
    @ResponseBody
    public String findUser2(Integer id,String name){

        return id +":"+name;
    }

2.7.3 使用对象接收参数

 /**
     * url:http://localhost:8080/user/getUser?id=1&name=李四&age=18
     * 返回值: User对象
     * 知识点:
     *   当遇到多个参数时,可以使用对象封装.
     *   要求对象的属性必须与参数名称一致,同时必须有Set/Get方法.
     *   SpringMVC会自动的将参数赋值给对象的属性.
     */
    @RequestMapping("/getUser")
    public User getUser(User user){
        return user;
    }

在这里插入图片描述

2.8 RestFul结构

2.8.1 请求说明

  1. Get请求 http://localhost:8080/user/restFulid=1&name=张三
  2. RestFul请求: http://localhost:8080/user/restFul/1/张三

2.8.2 RestFul语法

1.URL中请求的参数使用/分割
用户写的: http://localhost:8080/user/restFul/1/张三

2.服务器端参数接收时,变量使用{xx}进行包裹,并且位置固定.
3.利用@PathVariable注解,动态获取路径中的数据,要求名称必须匹配

 /**
     * RestFul结构 动态接收参数
     * url: http://localhost:8080/user/restFul/1/张三
     * 返回值: 返回User对象
     * 难点: 需要从URL的路径中获取参数!!!
     * 语法:
     *  1.服务器端参数接收时,变量使用{xx}进行包裹,并且位置固定.
     *  2.利用@PathVariable注解,动态获取路径中的数据,要求名称必须匹配
     */
    @RequestMapping("/restFul/{id}/{name}")
    public User restFul(@PathVariable Integer id,
                        @PathVariable String name){
        User user = new User();
        user.setId(id);
        user.setName(name);
        return user;
    }

在这里插入图片描述

2.8.3 RestFul结构对象传参

  /**
     * URL: http://localhost:8080/user/restFul2/1/王五/18
     * RestFul对象接收:
     *   如果对象的属性与{key}相同,则可以使用对象接收.
     * 用途: restFul结构 一般用于更新操作
     * @param user
     * @return
     */
    @RequestMapping("/restFul2/{id}/{name}/{age}")
    public User restFul2(User user){

        return user;
    }

2.9 请求类型与业务的关系

1.请求类型
在这里插入图片描述
2. 规则: 随着业务深入,请求类型与业务渐渐的绑定.
新增: post请求类型 @PostMapping("")
删除: delete请求类型 @DeleteMapping("")
修改: put请求类型 @PutMapping("")
查询: get请求类型 @GetMapping("")

作业

1. AOP作业	 难度: 4星  
	自定义注解@Privileges注解,标识方法     属性 name="get"  标示权限      
	利用AOP控制方法是否执行.    
	AOP准备成员变量  List<>标识权限
	Class   XXXX  {
		private List list = [get,update]
	}
	如果权限不匹配 则不允许执行目标方法.!!!!!
	
	难点: 如何动态获取注解中的属性!!!   **反射机制**   2110班笔记!!!

2. 提前预习Axios的Ajax用法.
	了解语法:   
		axios.get("url",参数)
		axios.post("url",参数)

3.SpringMVC参数传递

3.1 同名参数提交

3.1.1 页面说明

复选框: name=“hobby” 口 篮球 口 排球 口 乒乓球
问题: 参数如何提交 hobby=篮球,排球,乒乓球
前端URL模式: http://localhost:8080/user/saveHobbyhobby=篮球,排球,乒乓球

3.1.2 编辑UserController

 /**
     * URL地址: http://localhost:8080/user/saveHobby?hobby=篮球,排球,乒乓球
     * 返回值: 参数获取之后返回
     * SpringMVC功能:
     *      如果url中的参数使用,号的方式连接,则可以自动的转化为数组结构
     */
    @GetMapping("/saveHobby")
    public String[] saveHobby(String[] hobby){
        //String[] arrays = hobby.split(",");
        //将字符串转化为数组,可以方便后续业务的调用
        //return arrays;
        return hobby;
    }

4 前后端调用

4.1 Ajax

4.1.1 Ajax介绍

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。 [3]

4.1.2 Ajax特点

Ajax特点: 局部刷新,异步访问

  1. 同步请求
    浏览器发起请求到服务器时,如果服务器没有响应,用户则无法获取页面数据,处于等待状态.不可以做其它的操作.

  2. 异步请求
    异步请求时,浏览器可以进行其它的操作.当ajax数据获取之后,信息在页面的局部刷新. (可以理解为多线程操作方式)

4.1.3 Ajax异步的原理

Ajax为什么可以异步: 中间有Ajax引擎.
回调函数: 服务器返回数据,通过回调函数通知用户.
在这里插入图片描述

4.2 跨域问题

注解:
在这里插入图片描述

4.3 前后端调用入门案例

4.3.1 前端JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax入门案例</h1>
		<script src="../js/axios.js"></script>
		<script>
			//promise是Axios封装服务器返回值的对象
			let url1="http://localhost:8080/axios/findStr"
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise)
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

在这里插入图片描述

4.3.2 编辑AxiosController

package com.jt.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/axios")
@CrossOrigin    //专门解决跨域问题
public class AxiosController {

    /**
     * http://localhost:8080/axios/findStr
     */
    @GetMapping("/findStr")
    public String findStr(){

        return "再坚持半天!!!";
    }

}

4.3 前后端调用-带简单参数

4.3.1 编辑页面JS

//2.带参数的业务调用  返回字符串+id!!!
			let url2 = "http://localhost:8080/axios/getUserById?id=100";
			axios.get(url2)
				 .then(function(promise){
					 console.log(promise.data)
				 })

4.3.2 编辑AxiosController

@GetMapping("/getUserById")
    public String findUserById(Integer id){

        return "获取数据:"+id;
    }

4.3 前后端调用-简化操作

axios.defaults.baseURL = "http://localhost:8080"

在这里插入图片描述

4.4 前后端调用-对象传参

4.4.1 页面URL分析

			//3.对象参数传递写法   利用API自动拼接参数
			let user = {id: 100,name: "tomcat"}
			axios.get("/axios/findUser",{params: user})
				 .then(function(promise){
					 console.log(promise.data)
				 })

4.4.2 编辑AxiosController

 /**
     * 接收对象参数
     * URL: http://localhost:8080/axios/findUser?id=100&name=tomcat
     */
    @GetMapping("/findUser")
    public User findUser(User user){

        return user;
    }

4.5 前后端调用-ResultFul结构

4.5.1 前端JS调用

重点: RestFul的结构不区分请求类型. 任意请求都可以通过RestFul的结构发送数据.

//4.RestFul结构实现数据传递  第一种:简单操作
			let rest1 = {id: 100,name: "tomcat",age: 19}
			axios.get("/axios/result/"+rest1.id+"/"+rest1.name+"/"+rest1.age)
				 .then(function(promise){
					 console.log(promise.data)
				 })
			
			/**
			 * 5.RestFul结构实现数据传递  ]
			 *  第二种:模板字符串写法
			 * 语法: 	反引号  ` `
			 * 字符取值: ${rest2.id}
			 * 作用: 1.常见字符串拼接
			 * 		 2.可以保证代码的数据结构
			 */
			let rest2 = {id: 100,name: "tomcat",age: 19}
			axios.get(`/axios/result/${rest2.id}/${rest2.name}/${rest2.age}`)
			
			
			//模板字符串 保证代码格式
			let div = `<div>
							<p>天青色等烟雨</p>
							<p>而我在等你</p>
							<p>炊烟袅袅升起</p>
							<p>隔江千万里</p>
					   </div>`

4.5.2 编辑后端Controller

 /**
     * 4.接收restFul的数据
     * URL: http://localhost:8080/axios/result/100/tomcat/19
     * 返回值: User对象
     */
    @GetMapping("/result/{id}/{name}/{age}")
    public User result(User user){

        return user;
    }

4.6 前端POST提交方式

4.6.1 前端页面JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax-POST请求</h1>
		<script src="../js/axios.js"></script>
		<script>
			//1.Axios优化
			axios.defaults.baseURL = "http://localhost:8080"
		
			/**
			 * 2.axios的post请求说明
			 * 2.1 什么时候使用post请求 新增操作
			 * 知识点:
			 * 		let user js对象  json串  java对象
			 *  说明: 
			 * 		前端代码传递的JS对象,而后端使用的是java对象,
			 * 		2种对象没有办法直接转化,需要转化JSON进行传递.
			 * 	axios使用post请求时,自动将JS对象解析为JSON串
			 */
			let user = {id:100, name:"tomcat猫", age: 20}
			axios.post("/axios/saveUser",user)
				 .then(function(promise){
					 console.log(promise.data)
				 })
			
			
			
		</script>
	</body>
</html>

在这里插入图片描述

4.6.2 编辑后端Controller

/**
     * 编辑后端Controller
     * URL: /axios/saveUser
     * 参数: json串
     *      {"id":100,"name":"tomcat猫","age":20}
     * 返回值: User
     * 难点:
     *      1.将JSON串转化为Java对象  @RequestBody
     *      2.将Java对象转化为JSON串! @ResponseBody
     */
    @PostMapping("/saveUser")
    public User saveUser(@RequestBody User user){

        return user;
    }

4.7 参数类型规范

  1. GET/DELETE 参数提交的方式一致
  2. POST/PUT 参数提交的方式一致
  3. restFul结构适用于所有的请求类型

4.8 跨域问题

4.8.1 同源策略

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

4.8.2 同源策略练习题

练习1:
1. http://localhost:8080/xxx/xxx 浏览器地址
2. http://localhost:8080/yyy/yyy ajax请求地址 同域请求

练习2:
1. http://127.0.0.1:8080/xxx/xxx 浏览器地址
2. http://localhost:8080/yyy/yyy ajax请求地址 跨域请求 域名不同

练习3: 域名与IP映射
1. http://www.jt.com:8080/xxx/xxx 浏览器地址
2. http://10.8.8.9:8080/yyy/yyy ajax请求地址 跨域请求! 域名不同

练习4:
1. http://www.jt.com:80/xxx/xxx 浏览器地址
2. http://www.jt.com/yyy/yyy ajax请求地址 同域请求!!! http协议默认80端口

练习5:
1. https://www.jt.com/xxx/xxx 浏览器地址
2. https://www.jt.com:443/yyy/yyy ajax请求地址 同域请求!!!
https协议默认端口443

练习6:
1. http://www.jt.com/xxx/xxx 浏览器地址
2. https://www.jt.com:443/yyy/yyy ajax请求地址 跨域请求

4.8.3 CORS介绍

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

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

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

跨域的报错信息:
在这里插入图片描述
跨域解决方案:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值