后端返回的data数据为多层对象（json格式）

最新推荐文章于 2025-07-19 22:45:00 发布

很捞的程序员

最新推荐文章于 2025-07-19 22:45:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： json vue.js java

本文链接：https://blog.csdn.net/m0_56138821/article/details/130473672

本文探讨了在后端使用SpringBoot和MybatisPlus查询课程大纲时，如何构建并返回包含课程、章节和小节的多层JSON数据。涉及到的知识点包括数据库设计、统一返回结果类Result以及与前端交互的数据模型。后端关键代码在于章节控制层类ChapterController中getTreeList(courseId)方法。前端使用Vue和ElementUI进行数据展示，通过v-for遍历JSON数据结构，分别显示章节和小节。

后端如何返回“多层对象的json数据”

场景：

现在在做一个课程大纲的查询功能的时候，具体是用一个课程id查询出该课程的所有章节和小节。要求后端返回一个json数据，返回的数据如下“返回json数据示例”所示。

涉及知识点：

mysql、springBoot、mybatisPlus、了解vue生命周期、了解ElementUI基本使用，了解前后分离开发。

返回json数据示例：

{
  "code": 20000,
  "message": "成功",
  "data": [
    {
      "id": 67,
      "title": "第一章 初始java高级",
      "sort": 1,
      "children": [
        {
          "id": 42,
          "title": "第一节 什么是java高级",
          "isFree": 0,
          "sort": 1,
          "videoSourceId": null
        },
        {
          "id": 43,
          "title": "第二节 java高级能实现什么功能",
          "isFree": 0,
          "sort": 2,
          "videoSourceId": null
        }
      ]
    },
    {
      "id": 68,
      "title": "第二章 代码实现一个小案例",
      "sort": 2,
      "children": []
    }
  ]
}

数据库设计：

（1）课程表

在这里插入图片描述

（2）章节表

在这里插入图片描述

（3）小节表

在这里插入图片描述

代码实现：

后端代码：

(1)统一返回结果类Result

//统一返回结果类
@Data
public class Result<T> {
    private Integer code; //状态码
    private String message; //返回状态信息（成功 失败）
    private T data; //返回数据
    public Result() {}
    //成功的方法，有data数据
    public static<T> Result<T> ok(T data) {
        Result<T> result = new Result<>();
        if(data