后端学习笔记-CSDN博客

本文链接：https://blog.csdn.net/A_amx/article/details/140298673

1.请求响应

1.1 请求响应概述

DispatcherServelet ：核心控制器 / 前端控制器

BS架构

tomcat接收到请求数据，将解析后的请求信息封装到请求对象HttpServletRequest处理请求数据，HttpServletResponse设置响应数据，对浏览器响应数据

1.2 请求

（1）请求工具postman

postman：功能强大的网页调试与发送网页HTTP请求的Chrome插件

作用：可以模拟浏览器发起任意条件的请求，并且可以携带许多的请求头、参数和信息

（2）简单参数

-1-原始方法


    //原始方法
    @RequestMapping("/simpleParam")
    public String simpleParam  (HttpServletRequest request){
        //获取请求参数
        String name = request.getParameter("name");
        String ageStr = request.getParameter("age");

        int age = Integer.parseInt(ageStr);
        System.out.println(name+ ":"+age);
        return "OKK";

//        通过httpServletRequest方法，postman手动获取参数

postman请求:http://localhost:8080/simpleParam?name=AGH&age=10

输出：

-2-SpringBoot方法

//SpringBoot方式
    @RequestMapping("simpleParam")
    public String simpleParam(String name,Integer age){
        System.out.println(name + ":" + age);
        return "OKK";
    }
//     参数名和形参变量名相同，定义形参就可以接收参数

使用post的postman请求，将请求参数放在请求体中，输出：

注：简单参数中如果形参名称与请求参数名称不匹配，可以使用@RequestParam完成映射

@RequestParam 中 required的默认值是true,代表请求参数必须传递，不传递会报错。可选的参数可以改为false

（3）实体参数

-1- 简单实体参数

//在pojo中创建实体类
 public class User {
    private String name;
    private Integer age;
    }

//然后在controller中输出

 //简单实体参数
    @RequestMapping("simplePojo")
    public String simplePojo(User user){
        System.out.println(user);
        return "okk";
    }

-2- 复杂实体参数

//user类中添加Address属性

public class User {
    private String name;
    private Integer age;
    private Address address;
    }

//定义实体类Address
public class Address {
    private String province;
    private String city;
    }

请求界面：

实体参数规则：请求参数名与形参对象属性名相同，复杂实体对象按照请求层次结构对应

（3）数组集合参数

-1- 数组参数

    //数组参数
    @RequestMapping("arrayParam")
    public String arrayParam(String[] hobby){
        System.out.println(Arrays.toString(hobby));
        return "okk";
    }

数组参数：请求参数名与形参数组名称相同且请求参数为多个，定义为数组类型

-2- 集合参数（通过@RequestParam绑定参数关系）

    //集合参数
    @RequestMapping("listParam")
    public String listParam(@RequestParam List<String> hobby){
        //"<>"中指出集合的泛型
        System.out.println(hobby);
        return "okk";
    }

（4）日期参数

    //日期参数
    @RequestMapping("/dateParam")
    public String dateParam( @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime updatetime){
        System.out.println(updatetime);
        return "okk";
    }

需要在形参前面加注解：@DateTimeFormat 并通过pattern定义日期输出格式

（5）JSON参数

    //JSON参数
    @RequestMapping("/jsonParam")
    public String jsonParam(@RequestBody User user){
        System.out.println(user);
        return "okk";
    }

json格式的请求数据需要放在请求体当中的，并且需要post请求

json数据键名与形参对象属性名要相同，实体对象需要用@RequestBody标识

（6）路径参数

  //路径参数
    @RequestMapping("/path/{name}/{age}")
    public String pathParam(@PathVariable String name,@PathVariable Integer age){
        System.out.println(name);
        System.out.println(age);
        return "okk";
    }

{ }中存放的是变量，使路径参数变得动态，在形参对象前需要用@PathVariable标识

请求路径： http://localhost:8080/path/AGH/20

1.3 响应

（1）@RequestBdy

@RequestBody 作用于Controer方法/类上，将方法的返回值直接响应，如果返回值类型是实体对象/集合，会被转化为json格式响应

@RestController = @Controller + @RequesstBody

   @RequestMapping("/hello")
    public String hello(){
        System.out.println("HelloWorld ~");
        return "hello";
    }

    @RequestMapping("/getaddr")
    public Address getUser(){
        Address addr= new Address();
        addr.setProvince("湖北");
        addr.setCity("武汉");
        return addr;
    }


    @RequestMapping("/listAddr")
    public List<Address> listAddr() {
        List<Address> list = new ArrayList<>();

        Address addr = new Address();
        addr.setProvince("贵州");
        addr.setCity("兴义");

        Address addr1 = new Address();
        addr1.setProvince("湖北");
        addr1.setCity("武汉");

        list.add(addr);
        list.add(addr1);
        return list;
    }

将反应值类型为实体对象/集合将转化为json格式返回

（2）统一响应结果

使用Result统一响应，使项目更简洁、高效

code 响应码，1代表成功，0代表失败

msg 提示信息

data 返回的数据

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Integer code;//响应码，1 代表成功; 0 代表失败
    private String msg;  //响应信息 描述字符串
    private Object data; //返回的数据
 
 
    public static Result success(){
        return new Result(1,"success",null);
    }
 
    public static Result seccess(Object data){
        return new Result(1,"success",data);
    }
 
    public static Result erro(String str){
        return new Result(1,str,null);
    }
 
 
}

//首先将方法的返回值设置为Result，并且return 对应相应的返回类型

 @RequestMapping("/hello")
    public Result hello(){
        System.out.println("HelloWorld ~");
//        return new Result(1,"success","hello");
        return Result.seccess("hello");

    }

    @RequestMapping("/getaddr")
    public Result getUser(){
        Address addr= new Address();
        addr.setProvince("湖北");
        addr.setCity("武汉");
        return Result.seccess(addr);
    }


    @RequestMapping("/listAddr")
    public Result listAddr() {
        List<Address> list = new ArrayList<>();

        Address addr = new Address();
        addr.setProvince("贵州");
        addr.setCity("兴义");

        Address addr1 = new Address();
        addr1.setProvince("湖北");
        addr1.setCity("武汉");

        list.add(addr);
        list.add(addr1);
        return Result.seccess(list);
    }

2.Ajax

Ajax是指异步的JavaScript和XML，

作用：

（1）数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据

（2）异步交互：可以在不从新加载整个页面的情况下，与服务器交换数据并更新部分网页的

同步：

异步：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();

        //2. 发送异步请求
        xmlHttpRequest.open('GET','https://mock.apifox.cn/m1/3128855-0-default/emp/list');
        xmlHttpRequest.send();   //发送请求

        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){

        //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
        }

    }
     
    }
</script>
</html>

在点击获取以后会实现异步操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="get()">

    <input type="button" value="删除数据" onclick="post()">

</body>
<script>
     function get(){
        // 通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })//成功的回调函数

        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result)=>{
            console.log(result.data);
        });
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })
            axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then((result)=>{
                console.log(result.data);
            })

    }
</script>
</html>