首页 > 其他分享> 文章详细

CGB2109-Day06-SpringMVC

2022-02-22 23:03:33 阅读：271 来源： 互联网

标签：http name SpringMVC CGB2109 Day06 JSON user 8080 localhost

文章目录

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. 页面数据显示

标签：http,name,SpringMVC,CGB2109,Day06,JSON,user,8080,localhost
来源： https://blog.csdn.net/shuux666/article/details/123079518

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CGB2109-Day06-SpringMVC

文章目录

1. SpringMVC

1.1 restFul风格

1.1.1 传统get方式提交

1.1.2 restFul风格说明

1.1.3 编辑后端Controller

1.1.4 测试效果

1.2 JSON

1.2.1 JSON介绍

1.2.2 JSON格式-对象格式

1.2.3 JSON格式-数组格式

1.2.4 JSON格式-嵌套格式

1.3 SpringMVC 前后端交互-@ResponseBody

1.3.1 业务说明

1.3.2 案例测试

1.3.3 测试结果

1.4 @RestController注解

1.4.1 编辑RestUserController

1.4.2 测试效果

上午知识小结

2. 前后端业务交互

2.1 项目环境搭建

2.2 Axios 讲解

2.2.1 Ajax介绍

2.2.2 Ajax异步原理说明

2.2.3 Axios入门案例

2.2.4 编辑UserController

2.2.5 页面效果展现

3. 前后端交互案例

3.1 Axios-Get请求

3.1.1 业务需求说明

3.1.2 编辑AxiosController

3.1.3 编辑页面HTML

3.1.4 编辑页面效果

3.2 Axios-Get-对象参数写法

3.2.1 业务需求说明

3.2.2 编辑UserController

3.2.3 编辑页面JS

3.2.4 页面效果展现

3.3 Axios-Get-restFul结构

3.3.1 需求说明

3.3.2 编辑AxiosController

3.3.3 编辑前端JS

3.3.4 页面效果展现