后端如何返回 Restful风格的json的 给前端

知识的诅咒:指的就是一旦我们自己知道某样东西,我们就会发现很难想象不知道它的时候会是什么样子。
感觉在编程学习中,这种现象也比较普遍

本篇博文主要面向,对于返回json格式还不太熟悉的初学者。如果有错误,还望大家多多指正。
现在开发基本上是前后端分离,而在开发中经常需要对json字符串进行传输或者解析。
一般我们需要传输以下格式json字符串:

{
    "code":0,
    "msg":"成功",
    "data":[
        {
            "name":"热销榜",
            "type":2,
            "foods":[
                {
                    "id":"122",
                    "name":"皮皮虾",
                    "price":13.14,
                    "icon":"https://xxx.png"
                },
                {
                    "id":"123",
                    "name":"皮蛋瘦肉粥",
                    "price":23.33,
                    "icon":"https://xxx.jpg"
                }
            ]
        },
        {
            "name":"女生最爱",
            "type":3,
            "foods":[
                {
                    "id":"12",
                    "name":"芒果冰",
                    "price":20.2,
                    "icon":"https://xxx.jpg"
                }
            ]
        }
    ]
}

但怎么方便快捷的返回这种类型的json字符串呢?
大概需要分为以下两个步骤:

1、定义需要返回的VO(View Object)包下的类,按照需要返回的json格式定义
2、Controller相关注解和配置

确实只有这么简单的两个步骤,但由于之前学习不是很系统,所以返回的也是千奇百怪,被前端的同学吐槽过好多

1、View Object

按照你需要的JSON格式定义即可。

/**
 * HTTP请求返回的最外层对象
 */
@Data
public class ResultVO<T> {

    /*错误码*/
    private Integer code;

    /*提示信息*/
    private String msg;

    /*返回的具体内容*/
    private T data;
}

需要注意的有:lombok的@Data注解

2、Controller

需要注意的有:
class上面的注解需要写为@RestController,其他的就和正常的Controller一样

@RestController
@RequestMapping("/buyer/product/")
public class BuyerProductController {
@Autowired
private ProductService productService;

@Autowired
private CategoryService categoryService;

@RequestMapping(value = "/list", method = RequestMethod.GET)
ResultVO resultVO = new ResultVO();
resultVO.setData(productVOList);
resultVO.setCode(0);
resultVO.setMsg("成功");

return resultVO;

3、访问

访问成功
在这里插入图片描述

### 如何在前端解析由Java后端返回的Map对象 当Java后端通过HTTP响应向客户端发送`Map`类型的对象时,通常会将其序列化为JSON格式。因此,在前端接收到的数据实际上是一个标准的JavaScript对象或数组结构。 对于简单的键值对形式的地图数据,可以直接访问属性来获取对应的值[^1]: ```javascript // 假设这是来自服务器响应中的地图对象 const mapObj = {"key1": "value1", "key2": "value2"}; console.log(mapObj.key1); // 输出 value1 ``` 如果需要遍历整个映射表并执行某些操作,则可以利用for...in循环或是Object.keys()等方法迭代所有的条目[^3]: ```javascript // 使用 for-in 循环遍历 map 对象 for (let key in mapObj){ console.log(`${key}: ${mapObj[key]}`); } // 或者使用 Object.entries 获取所有 [key,value] 数组列表 Object.entries(mapObj).forEach(([key, value]) => { console.log(key + ": " + value); }); ``` 另外一种常见的情况是从后端得到的是嵌套层次更深的对象树形结构,此时可能涉及到更复杂的路径表达式去提取特定字段的信息。例如,假设有一个企业档案查询接口返回的结果如下所示[^4]: ```json { "0":{"id":"1","entName":"Company A"}, "1":{"id":"2","entName":"Company B"} } ``` 可以通过下面的方式将这些记录转换成适合展示的企业列表: ```javascript function getEnterprise(){ axios.get('/entEnterprisearchives/entName') .then((res)=>{ let entList=[]; for(let i in res.data){ entList.push({ id:res.data[i].id, entName:res.data[i].entName }); } console.log(entList); }) .catch(console.error); } ``` 需要注意的一点是在实际开发过程中应当始终遵循RESTful API设计原则,并确保前后端之间传递的数据格式一致性和兼容性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值