从零实现一套低代码（保姆级教程）【后端服务】 --- 【2】实现页面的增删改查接口

摘要

本篇是这个系列的第二篇文章，相关参考：

# 从零实现一套代码前端部分专栏

# 从零实现一套低代码（保姆级教程）【后端服务】 --- 【1】初始化后端项目

在上一篇中，我们已经搭建好了后端服务。同时实现了获取全部页面列表的接口以及Swagger文档的配置。

如果这一步没有问题了，我们现在就可以去完成剩下和页面相关的接口了。我们先总体的看一下，我们要实现什么接口。

1.实现新建页面的接口

这一步，也就是增删改查里面的增。

对于新增页面，我们可以在低代码平台中，是通过创建页面来触发的，那我创建一个页面应只需要提供页面名称和页面ID即可。

首先我们先把创建一个页面需要参数的数据结构写出来，在pageJson下新增一个page-json.dto.ts:

export class CreatePage{
  readonly pageId: string;
  readonly pageName: string;
}

再来到我们的service中
xin-builder-server2\src\page-json\page-json.service.ts

  async addPage(body: CreatePage): Promise<void>{
    await this.pageJsonModel.create(body)
  }

create方法就是创建一个模型在数据库中。

最后来到controller中
xin-builder-server2\src\page-json\page-json.controller.ts

  @Post('addPage')
  @ApiOperation({summary: '创建页面'})
  async addPage(@Body() pageJson: CreatePage): Promise<PageJsonResponse> {
    await this.PageService.addPage(pageJson);
    return {
      code: 200,
      message: 'Success.',
    };
  }

OK。实现完之后，我们来到Swagger接口文档中来尝试一下：

新增完之后，你再点击查询接口，就可以查到刚刚添加过的页面信息了。

2.实现查询页面详情的接口

查询页面详情，就是当我查看某个配置好的页面时，掉的接口。 也就是通过pageId去查询，OK，我们在page-json.dto.ts中加一个数据结构：

export class PageInfo {
  readonly pageId: string;
}

然后来到service中：

  async findPageByID(pageInfo: PageInfo): Promise<PageJson>{
    return await this.pageJsonModel.findOne({pageId:pageInfo.pageId})
  }

再来到controller中：

  @Post('findPageByID')
  @ApiOperation({summary: '查询页面详情'})
  @ApiProperty()
  async findPageByID(@Body() pageInfo: PageInfo): Promise<PageJsonResponse<PageJson>> {
    return {
      code: 200,
      data: await this.PageService.findPageByID(pageInfo),
      message: 'Success.',
    };
  }

这样查询页面详情的接口就实现完了，是不是感觉到添加一个接口非常简单。就是这么一套流程。

写完之后，你就可以在Swagger文档上进行查看了：

3. 实现更新页面的接口

更新页面的接口，可以什么时候触发呢？可以在我设计完页面之后，一保存，触发更新。 所以更新接口需要的参数的数据结构，应该和创建页面的一样。

我们直接来到service中：

  async updatePage(body: CreatePage): Promise<void>{
    await this.pageJsonModel.updateOne({pageId: body.pageId},{pageJson: body.pageJson})
  }

然后来到controller中：

  @Post('updatePage')
  @ApiOperation({summary: '更新页面内容'})
  async updatePage(@Body() pageJson: CreatePage): Promise<PageJsonResponse> {
    await this.PageService.updatePage(pageJson);
    return {
      code: 200,
      message: 'Success.',
    };
  }

写完之后，我们可以来到Swagger文档中：

更新完之后，你在通过这个pageId去查询，就会发现pageJson的内容已经改变了。

4.实现删除页面的接口

删除页面的话，就比较简单了。我们只需要根据pageId去删除对应的字段即可。所以它的参数数据结构和查询页面详情的应该是一样的。

我们来到service中：

  async deletePage(pageInfo: PageInfo): Promise<void>{
    await this.pageJsonModel.deleteOne({pageId:pageInfo.pageId})
  }

然后到controller中：

  @Post('deletePage')
  @ApiOperation({summary: '删除页面'})
  async deletePage(@Body() pageJson: CreatePage): Promise<PageJsonResponse> {
    await this.PageService.deletePage(pageJson);
    return {
      code: 200,
      message: 'Success.',
    };
  }

OK，我们现在来到Swagger中尝试一下:

删除之后，你再查询这个页面，就查询不到了。

博主补充

那如果这些接口，你已经完成了全部。是否可以根据这些接口，把前端页面实现出来呢？

当然，下一篇我会把页面也实现。

本篇相关的代码提交在github上：
github.com/TeacherXin/...
commit: 第一节：实现页面的增删改查接口