CGB2109-Day06-SpringMVC

2023-09-24 16:47:57

文章目录

1. SpringMVC
上午知识小结
2. 前后端业务交互
3. 前后端交互案例

1. SpringMVC

1.1 restFul风格

1.1.1 传统get方式提交

url1: http://localhost:8080/findUsername=tomcat&age=18
url2: http://localhost:8080/findUsername=tomcat&age=18&sex=男

需求: 上述的参数传递是否可以简化!
简化写法:
url3: http://localhost:8080/findUser/tomcat/18/男

1.1.2 restFul风格说明

案例: url3: http://localhost:8080/findUser/tomcat/18/男 (发送)
要求:
1. restFul的风格数据的位置一旦确定,不能修改.
2. 参数与参数之间使用"/"的方式分割.
3. restFul的风格适用于 get/post/put/delete 请求类型

请求类型种类: get/post/put/delete

1.1.3 编辑后端Controller

  /**
     * URL地址:
     *  http://localhost:8080/findUser/tomcat/18/男  get类型
     * 参数: name/age/sex
     * 返回值: 返回值获取的数据
     * restFul语法:
     *     1. 参数与参数之间使用/分割
     *     2. 需要接收的参数使用{}包裹
     *     3. 参数接收时采用@PathVariable取值
     */
    @RequestMapping("/findUser/{name}/{age}/{sex}")
    public String findUser(@PathVariable String name,
                           @PathVariable int age,
                           @PathVariable String sex){

        return name+":"+age+":"+sex;
    }

1.1.4 测试效果

1.2 JSON

1.2.1 JSON介绍

**JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。**它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

1.2.2 JSON格式-对象格式

对象（object）是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。`

例子: 其中的’'号key可写可不写

	{"id": "100","name": "tomcat", "age": "18"}

1.2.3 JSON格式-数组格式

数组（array）是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

	[100,"张三",true]

1.2.4 JSON格式-嵌套格式

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

 [100,true,["a","b",{"name":"张三","hobbys": ["吃饭","睡觉"]}]]

1.3 SpringMVC 前后端交互-@ResponseBody

1.3.1 业务说明

问题说明1: 前端访问后端服务器,一般采用Ajax方式进行数据传递. 后端服务器返回给前端页面通常采用JSON格式数据
问题说明2: 后端服务器怎么接收前端的参数的. servlet机制

问题: 后端服务器如何返回JSON串

1.3.2 案例测试

需求: 根据name/age 查询用户,要求返回User对象的JSON串
URL: http://localhost:8080/findJSONname=tomcat&age=18

/**
     * URL: http://localhost:8080/findJSON?name=tomcat&age=18  get
     * 参数: name=tomcat&age=18
     * 返回值:  User对象的JSON
     * 知识点:
     *      1.@ResponseBody //将返回值转化为JSON串  使用最多!!!
     *      2.如果返回String类型,则@ResponseBody将字符串本身返回给前端.
     */
    @RequestMapping("/findJSON")
    @ResponseBody //将返回值转化为JSON串
    public User findJSON(User user){
        //在业务层扩展数据
        user.setId(101);
        user.setSex("男");
        return user;
    }

1.3.3 测试结果

1.4 @RestController注解

1.4.1 编辑RestUserController

package com.jt.controller;

import com.jt.pojo.User;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

//@Controller //将类交给SpringMVC管理
//@ResponseBody //当前类中的所有方法 都返回JSON串
@RestController // = @Controller + @ResponseBody
@RequestMapping("/rest")
public class RestUserController {

    /**
     * 注意事项:
     *      1.springMVC中的请求路径不能重复!!!!
     *      2.可以@RequestMapping("/业务名称")自定义前缀
     * @return
     */
    @RequestMapping("/findJSON")
    public User findUser(User user){
        user.setId(105);
        user.setSex("男");
        return user;
    }
}

1.4.2 测试效果

上午知识小结

restFul风格
特点:
1.参数写到url中使用/分割
2.接收时采用{xxxx} 使用@PathVariable注解获取
3.支持请求类型 post/put/get/delete
JSON串
格式: 1.对象格式 2.数组格式
嵌套格式: value可以嵌套
易错项: json格式必须添加""号
注解:
1.@ResponseBody 将返回值转化为JSON
2.@RestController 将当前类的所有返回值都转化为JSON

2. 前后端业务交互

2.1 项目环境搭建

2.2 Axios 讲解

2.2.1 Ajax介绍

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

功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率.
特点: 局部刷新,异步访问

2.2.2 Ajax异步原理说明

组成部分:
1. 用户
2. Ajax引擎–代理
3. 服务器

异步的特点：
1. 由Ajax引擎直接访问后端服务器。
2. 在回调函数没有执行之前，用户可以执行自己的任务。异步

2.2.3 Axios入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios测试案例-1</h1>
		<script>
			/* 
				1.可以编辑Axios 发送ajax请求
				2.不同的服务器之间发送ajax请求时会有"跨域"问题
				3.解决跨域问题 通过注解搞定. @CrossOrigin  
			 */
			var url = "http://localhost:8080/hello"
			axios.get(url)
				 .then(function(result){ //回调函数!!!
					 console.log(result)
				 })
		</script>
	</body>
</html>

2.2.4 编辑UserController

2.2.5 页面效果展现

3. 前后端交互案例

3.1 Axios-Get请求

3.1.1 业务需求说明

需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByIdid=100
参数: id = 100
返回值: User对象的JSON 伪造一个User对象

3.1.2 编辑AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin    //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
    /**
     * URL地址:  http://localhost:8080/axios/getUserById?id=100
     * 参数:     id = 100
     * 返回值:  User对象的JSON   伪造一个User对象
     */
    @RequestMapping("/getUserById")
    public User getUserById(Integer id){
        //根据ID查询数据库
        User user = new User();
        user.setId(id);
        user.setName("好好学习");
        user.setAge(1000);
        user.setSex("男");
        return user;
    }
}

3.1.3 编辑页面HTML

/**
			 * var 关键字 没有作用域的概念!!!!
			 * let 相当于var 有作用域 更加安全.
			 * const 定义常量的
			 * 关于axios数据返回值对象的说明:
			 * 		axios为了接收后端服务器数据,利用promise对象
			 * 		封装参数
			 */
			let url1 = "http://localhost:8080/axios/getUserById?id=100"	
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise.data)
				 })

3.1.4 编辑页面效果

3.2 Axios-Get-对象参数写法

3.2.1 业务需求说明

需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByNAid=xxx&name=xxxx
参数: id=xxx name=xxx
返回值: List [user1,user2]

3.2.2 编辑UserController

 /**
     * URL地址:  http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
     * 参数:         id=xxx  name=xxx
     * 返回值:     List [user1,user2]
     */
    @RequestMapping("/getUserByNA")
    public List<User> getUserByNA(User user){
        List<User> list = new ArrayList<>();
        list.add(user);//简化赋值操作 直接返回
        list.add(user);
        return list;
    }

3.2.3 编辑页面JS

/**
			 * 1.get请求 对象传参
			 * 2.语法说明:
			 * 		关键字: params : 对象信息
			 */
			let user2 = {name:"tomcat",age:100}
			let url2 = "http://localhost:8080/axios/getUserByNA"
			axios.get(url2,{params:user2})
				 .then(function(promise){
					 console.log(promise.data)
				 })

3.2.4 页面效果展现

1.页面URL地址

2. 页面打印信息

3.3 Axios-Get-restFul结构

3.3.1 需求说明

查询name=tomcat sex=“男” 的用户要求请求采用restFul的风格实现数据获取.
URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
参数: name/sex
返回值: List

3.3.2 编辑AxiosController

 /**
     * URL地址:  http://localhost:8080/axios/findUserByNS/tomcat/男
     * 参数: name/sex
     * 返回值: List<User>
     */
    @RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
    public List<User> findUserByNS(User user){
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user);
        return list;
    }

3.3.3 编辑前端JS

/**
				 * 需求: 利用restFul的风格实现前后端交互.
				 * URL:  http://localhost:8080/axios/findUserByNS/tomcat/男
				 * 难点:
				 * 		1.tomcat/男直接写死在url地址中. 后期扩展不方便
				 * 模版字符串写法:ES6引入的新功能
				 * 语法:
				 * 		1. 使用反引号  ``
				 * 		2. 作用:  1.可以保证字符串的格式
				 * 				  2.可以动态获取变量的值
				 */ 
				let user3 = {name: "tomcat", sex: "男"}
				let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
				let html = `<div>
								<p>AAA</p>
								<p>BBB</p>
							</div>
							`
				axios.get(url3)
					 .then(function(promise){
						 console.log(promise.data)
					 })

3.3.4 页面效果展现

1.页面URL地址

2. 页面数据显示

码农公寓