【后端结合】新程序猿笔记Day6

1. SpringMVC 1.1 restFul风格 1.1.1 传统get方式提交

url1: http://localhost:8080/findUser?name=tomcat&age=18
url2: http://localhost:8080/findUser?name=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

  
    @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/findJSON?name=tomcat&age=18

    @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 {

    
    @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技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率.
特点: 局部刷新,异步访问

2.2.2 Ajax异步原理说明

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

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

 2.2.3 Axios入门案例

	
		
		
		
	
	
		Axios测试案例-1
		
	

 2.2.4 编辑UserController

 2.2.5 页面效果展现

 3. 前后端交互案例 3.1 Axios-Get请求 3.1.1 业务需求说明

需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserById?id=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 {
    
    @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

			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/getUserByNA?id=xxx&name=xxxx
参数: id=xxx name=xxx
返回值: List [user1,user2]

3.2.2 编辑UserController 

 
    @RequestMapping("/getUserByNA")
    public List getUserByNA(User user){
        List list = new ArrayList<>();
        list.add(user);//简化赋值操作 直接返回
        list.add(user);
        return list;
    }

3.2.3 编辑页面JS

			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 

 
    @RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
    public List findUserByNS(User user){
        List list = new ArrayList<>();
        list.add(user);
        list.add(user);
        return list;
    }

3.3.3 编辑前端JS

 
				let user3 = {name: "tomcat", sex: "男"}
				let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
				let html = `
								
AAA
								
BBB
							
							`
				axios.get(url3)
					 .then(function(promise){
						 console.log(promise.data)
					 })

3.3.4 页面效果展现 1.页面URL地址

 2. 页面数据显示