家校通小程序实战教程09搭建部门管理APIs

server/2024/12/16 18:48:47/

目录

  • 1 创建APIs
  • 2 完整代码
  • 3 代码解释
    • 3.1 获取原始数据
    • 3.2 平铺数据
    • 3.3 构建树形结构
    • 3.4 组装树形结构
    • 3.5 数据返回
  • 4 执行测试
  • 总结

我们现在已经调用了antd实现了前端的界面,光有界面还是不够的,还需要和数据源进行交互,本节介绍后端API的搭建过程。

1 创建APIs

打开应用,在侧边栏点击APIs。
在这里插入图片描述
选择自定义代码
在这里插入图片描述
输入API的名称和标识
在这里插入图片描述
修改方法的名称和标识
在这里插入图片描述

2 完整代码

加入如下代码

module.exports = async function (params, context) {const result = await context.callModel({name: 'bmb', // 数据模型标识,可以前往「数据源 - 数据模型」列表页查看methodName: 'wedaGetRecordsV2', // 数据模型方法标识params: {// 排序orderBy: [{createdAt: "desc", // 创建时间,倒序},],// 返回字段选择select: {_id: true, // 返回主表中的字段bmmc: true,xh: true,fbm: true, // 需要返回 fbm 字段},// 返回total字段getCount: true,// 页面大小pageSize: 200,// 当前页面pageNumber: 1,},});// 平铺数据const flatData = result.records;// 构建树形结构function buildTree(data) {const idMap = {}; // 用于存储所有节点const tree = []; // 树形结构的根节点// 初始化每个节点data.forEach((item) => {idMap[item._id] = {id: item._id,name: item.bmmc, // 部门名称parentId: item.fbm ? item.fbm._id : undefined, // 使用三元表达式处理 fbm 和 parentIdchildren: [],};});// 组装树形结构Object.values(idMap).forEach((node) => {if (node.parentId === undefined) {// 如果没有父节点,则为根节点tree.push(node);} else {// 如果有父节点,加入父节点的 childrenif (idMap[node.parentId]) {// 确保父节点存在idMap[node.parentId].children.push(node);}}});return tree;}// 转换为树形结构const treeData = buildTree(flatData);// 返回树形数据return {success: true,data: treeData, // 直接返回树形数据};
};

3 代码解释

我们要将平铺的部门数据转换成树形结构,其中每个节点代表一个部门,每个部门可能有子部门(即 children)。同时,我们要确保在处理过程中,对于没有父节点的部门(根部门),我们能够正确标记其 parentId 为 undefined,并且对于每个节点的父部门(fbm),我们要检查其是否存在并处理相应的关系。

3.1 获取原始数据

在我们的例子中,数据来自 context.callModel 方法。这个方法返回了一个扁平化的部门数据列表,包含了每个部门的信息和可能存在的父部门 fbm 信息。

const result = await context.callModel({name: 'bmb', // 数据模型标识methodName: 'wedaGetRecordsV2', // 方法标识params: {// 排序orderBy: [{createdAt: "desc", // 按照创建时间倒序排序},],// 返回字段选择select: {_id: true, // 返回部门 IDbmmc: true, // 部门名称xh: true, // 部门序号fbm: true, // 父部门字段},// 返回记录总数getCount: true,pageSize: 200, // 每页返回 200 条数据pageNumber: 1, // 当前页码},
});

这里的name需要从数据库里粘贴对应的标识,点击云数据库,复制对应的标识
在这里插入图片描述

3.2 平铺数据

flatData 即为从 API 获取到的平铺数据,是一个部门的扁平化数组。每一项代表一个部门,包含 _id(部门 ID)、bmmc(部门名称)、xh(部门序号)以及可能存在的 fbm(父部门)。如果一个部门没有父部门,在微搭中fbm这个属性将不存在,后续需要考虑这种不存在的情况。

3.3 构建树形结构

树形结构的核心思想是:每个节点可以包含多个子节点(children)。在这个例子中,parentId 用于标识父子关系。如果一个部门没有父部门,那么它是根节点(parentId 为 undefined)。

function buildTree(data) {const idMap = {}; // 用于存储所有节点,使用 ID 作为键const tree = []; // 树形结构的根节点数组// 初始化每个节点data.forEach((item) => {idMap[item._id] = {id: item._id,name: item.bmmc, // 部门名称parentId: item.fbm ? item.fbm._id : undefined, // 获取父节点 ID,若无则为 undefinedchildren: [], // 初始化子节点为空数组};});

初始化 idMap:我们通过 item._id 来为每个部门创建一个独立的节点对象,并在 idMap 中存储这些节点。每个节点都有 id(部门 ID)、name(部门名称)、parentId(父节点 ID,可能为 undefined)和 children(子部门)等属性。

处理 parentId:parentId 是通过 item.fbm ? item.fbm._id : undefined 获取的。这里我们使用了三元表达式:如果 item.fbm 存在,并且是一个对象(即有 _id 属性),那么 parentId 就是 fbm._id。如果 item.fbm 不存在,parentId 就是 undefined,表示该部门是根部门。

3.4 组装树形结构

我们遍历 idMap 中的每一个节点。如果 parentId 为 undefined,表示该节点是根节点,我们将其推入 tree 数组。否则,如果节点有父节点(通过 parentId 查找),则将该节点添加到父节点的 children 数组中,形成树形结构。

  // 组装树形结构Object.values(idMap).forEach((node) => {if (node.parentId === undefined) {// 如果没有父节点,则为根节点tree.push(node);} else {// 如果有父节点,加入父节点的 childrenif (idMap[node.parentId]) {// 确保父节点存在idMap[node.parentId].children.push(node);}}});return tree;
}

3.5 数据返回

最终,我们通过 buildTree 函数将平铺的 flatData 转换成了树形结构的数据。在返回数据时,我们确保数据中没有 undefined 值。

const treeData = buildTree(flatData);// 返回树形数据
return {success: true,data: treeData, // 返回构建的树形数据
};

4 执行测试

代码写好了之后要看结果是否符合我们的预期,点击方法测试
在这里插入图片描述
点击运行测试
在这里插入图片描述
当看到成功之后,点击出参自动映射就完成了API的编制
在这里插入图片描述

总结

我们本篇介绍了后端API的编写过程,在低代码开发的过程中也是遵循前后端分离的原则。前端我们使用官方自带的组件或者引入第三方组件库完成页面的编写,所需的数据按照一定的格式通过编写API获取到,下一篇我们就讲解如何让前端和后端协同工作完成需要的具体功能。


http://www.ppmy.cn/server/150697.html

相关文章

Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行

问题 IOS14设备,切后台划掉,二次启动崩溃。 原因 IOS14以上 flutter 不支持debugger模式下的二次启动 。 要二次启动需要以release方式编译工程安装至手机。 操作步骤 清理项目:在命令行中运行flutter clean来清理之前的构建文件。重新构…

css 权重

发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 CSS 权重(或称为 CSS 优先级)决定了当多个 CSS 规则作用于同一元素时,哪一条规则会被应用。…

Web前端技术宝典:期末冲刺指南

本文将为大家整理一份 Web 前端期末复习资料,内容涵盖 HTML、CSS、JavaScript 和常用的前端框架等方面的知识,帮助大家高效复习。 Web前端技术宝典:期末冲刺指南 1. HTML基础2. CSS基础3. JavaScript基础4. 前端框架5. 常见考试题型结语 1. …

Java中的Stream

1. 什么是 Stream? Stream 是 Java 8 引入的一种新方式,目的是帮助我们更简洁、更高效地处理集合(如 List、Set、Map 等)。你可以把 Stream 想象成一条“流水线”,数据就像是流水线上的原材料,经过流水线的…

第六章 状态模式优化代码

目录 一、场景概述 二、状态模式优化代码 一、场景概述 我们在日常开发过程中一定会遇到下述场景:业务中有类似订单这样需要修改状态的功能模块,订单状态的修改变化为 未支付 -> 已支付 -> 已完成 因此我们每次在修改状态之前,都得先…

React基础学习

React基础 📣 📣 📣 📢📢📢 ☀️☀️点开就是缘分认识一下,我是小冷。是一个兴趣驱动自学练习两年半的的Java工程师。 📒 一位十分喜欢将知识分享出来的Java博主⭐️⭐️⭐️&#x…

OpenCV中的图片矫正

一、实验原理 基于计算机视觉中的透视变换(Perspective Transformation),也称为单应性(Homography)。透视变换是一种几何变换,用于将图像从一个平面映射到另一个平面,同时保持直线的直线性。这种…

【机器学习算法】——决策树之集成学习:Bagging、Adaboost、Xgboost、RandomForest、XGBoost

集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法,即分类正确率仅比随机猜测略高的学习算法,但是组合之后的效果仍可能高于…