前后端交互----复习篇

- 日理万妓 2024-03-22 19:12 101阅读 0赞

### 一、什么是前后端 ###

**前端**：不仅仅是指客户端，app，小程序，还指两个后端服务之间的调用

**后端**：被调用方

前后端交互无非就是，前端将数据告诉后端，后端执行一些操作，将数据返回给前端。

### 二、如何解析json ###

json：是前后端约定好的一种传输规范

下面我们来观察一组解析好的json

> 可以使用在线的网站进行解析
> 
> [JSON 在线解析、格式化、校验工具 (jsontool.cn)][JSON _ _jsontool.cn]

![fcd7270ac5d149c88522b5336f995422.png][]

这里的两个replies，我们可以使用递归的思想，编写如下代码

@Data
    public class RepliesParam {
        private Long rpid;
        private Long oid;
        private Integer type;
        private Long mid;
        private String rpid_str;
        private List<RepliesParam> replies;
    }

可以写一个简单的controller进行测试

@RestController
    public class TestController2 {
        @PostMapping("/test1")
        public String test(@RequestBody JSONObject json){
            List<RepliesParam> beanList = json.getJSONObject("data").getBeanList("replies",RepliesParam.class);
            return "aaa";
        }
    }

使用debug运行并测试，可以看到如下运行结果，我们传入的json被解析出来了

![9703dc669c39463cbab1b7b18b7af446.png][]

![87860e4f02d8400d9bbba07924056e45.png][]

现在思考，如何能将List中的每个RepliesParam打印出来？（使用递归的思想）

代码如下

public void print(List<RepliesParam> list){
            if (list.isEmpty()){
                return;
            }
            for (RepliesParam re: list) {
                System.out.println(re);
                print(re.getReplies());
            }
        }

### 三、三种前后端交互的方式 ###

#### 第一种：java方法入参里面什么注解都没有 ####

适用于：请求参数比较少

缺点：请求参数比较多的时候，可能会丢参数，因为get请求有长度限制。

@GetMapping("/get")
        public String get(Order order){
            System.out.println(order.getOrderNo()+order.getOrderName());
            return order.toString();
        }

测试结果如下![c8711f47559d43eaad689aaa35840afb.png][]

>  注意，当我们传入重复的参数时，Integer只保留第一次传入的，而String会保留每一次的结果
> 
> ![daf8609a4fd34c9db1d1846a7bbfdba7.png][]

> #### 如果说参数中包含特殊字符，比如说，；\{\} &，我们就需要使用encode和decode ####
> 
> #### encode和decode:当我使用第一种方式进行前后端交互的时候（url上面携带参数的这种)，我需要先对这个参数进行encode，后端接受到的参数是编码以后的，所以得decode才能使用。 ####
> 
> #### 看一个简单示例来帮助你更好的理解 ####
> 
> #### ![c105fe8003dd4299aebbde5b5be47588.png][] ####

#### 第二种：不使用？&来拼接参数 ####

适用于：参数比较少，并且是单独，动态接口

@GetMapping("/get-order/{orderNo}/{orderName}")
        public String get1(@PathVariable("orderNo")Integer orderNo,@PathVariable("OrderName")String orderName){
            System.out.println(orderNo+"====="+orderName);
            return orderNo+"====="+orderName;
        }

可以在地址栏直接对参数进行拼接![9725ec9e47214f9992fef20dbb76443b.png][]

> #### @PathVariable(required = false)   可以设置参数为不必填，此时的url可以设置多个@RequestMapping(value = \{"/greet", "/greet/\{name\}"\}) ####
> 
> 来看示例
> 
> ![96486795ccf64e2e8d4670b0330621ef.png][]

#### 第三种：@RequestBody ####

这个注解会从http请求的body当中拿到json，并且反序列化成java对象

适用于请求参数非常多，body没有长度限制

@PostMapping("/post")
        public String post(@RequestBody Order order){
            System.out.println(order.getOrderNo()+order.getOrderName());
            return order.toString();
        }

测试![fcf21e369f5a4da7b5e8b6aadc6681e2.png][]

> 可以看出，我们传入json测试时，只会保留最新一次传入的值。
> 
> 同时json也可以解析List，因为他也是面向对象的！

[JSON _ _jsontool.cn]: http://jsontool.cn/
[fcd7270ac5d149c88522b5336f995422.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c1b922786ec546369798d7df5d3fae14.png
[9703dc669c39463cbab1b7b18b7af446.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7ddbfd980eeb45cfa58fd937ba948f84.png
[87860e4f02d8400d9bbba07924056e45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c89d64268bc54cf2b199da21ecc4e5db.png
[c8711f47559d43eaad689aaa35840afb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1811f519e16949f68b87458551e447a0.png
[daf8609a4fd34c9db1d1846a7bbfdba7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9acb89d454124feb9a56ed97a5915d79.png
[c105fe8003dd4299aebbde5b5be47588.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/925f7857944141e5b67cc108a9a2cc73.png
[9725ec9e47214f9992fef20dbb76443b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/bfcfe5abe6bf4b6eb7981ed4e9f0de81.png
[96486795ccf64e2e8d4670b0330621ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/36b29f22d3be472c8270091b3bde5959.png
[fcf21e369f5a4da7b5e8b6aadc6681e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8b6149be1a68411ba00ea07484195c35.png