1. Oinone社区首页
  2. Oinone 7天入门到精通

4.2.6 框架之网络请求-拦截器

史, 昂 • • Oinone 7天入门到精通 • 阅读 1326

在整个http的链路中，异常错误对前端来说尤为重要，他作用在很多不同的场景，通用的比如500, 502等; 一个好的软件通常需要在不同的错误场景中做不同的事情。当用户cookie失效时，希望能自动跳转到登录页；当用户权限发生变更时，希望能跳转到一个友好的提示页；那么如何满足这些个性化的诉求呢？接下来让我们一起了解oinone前端网络请求-拦截器。

一、入口

在src目录下main.ts中可以看到VueOioProvider，这是系统功能提供者的注册入口

image.png

图4-2-6-1 VueOioProvider

import interceptor from './middleware/network-interceptor';
VueOioProvider(
  {
    http: {
      callback: interceptor
    }
  },
  []
);

图4-2-6-2 拦截器的申明入口

二、middleware

在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现：

image.png

图4-2-6-3 在src/middleware有拦截器的默认实现

三、interceptor

interceptor在请求返回后触发，interceptor有两个回调函数，error和next

error参数

  • graphQLErrors 处理业务异常

  • networkError 处理网络异常

next

  • extensions 后端返回扩展参数
const interceptor: RequestHandler = (operation, forward) => {
  return forward(operation).subscribe({
    error: ({ graphQLErrors, networkError }) => {
            console.log(graphQLErrors, networkError);
      // 默认实现 => interceptor error 
    },
    next: ({ extensions }) => {
            console.log(extensions);
      // 默认实现 => interceptor next 
    },
  });
};

图4-2-6-4 后端返回扩展参数

四、interceptor error

// 定义错误提示等级
const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR;
// 错误提示等级 对应提示的报错
const MESSAGE_LEVEL_MAP = {
  [ILevel.ERROR]: [ILevel.ERROR],
  [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN],
  [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO],
  [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS],
  [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG]
};
// 错误提示通用函数
const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => {
  notification[type]({
    message: tip,
    description: desc
  });
};
// 根据错误等级 返回错误提示和类型
const getMsgInfoByLevel = (level: ILevel) => {
  let notificationType = 'info';
  let notificationText = translate('kunlun.common.info');
  switch (level) {
    case ILevel.DEBUG:
      notificationType = 'info';
      notificationText = translate('kunlun.common.debug');
      break;
    case ILevel.INFO:
      notificationType = 'info';
      notificationText = translate('kunlun.common.info');
      break;
    case ILevel.SUCCESS:
      notificationType = 'success';
      notificationText = translate('kunlun.common.success');
      break;
    case ILevel.WARN:
      notificationType = 'warning';
      notificationText = translate('kunlun.common.warning');
      break;
  }
  return {
    notificationType,
    notificationText
  };
};

error: ({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.forEach(async ({ message, locations, path, extensions }) => {
          let { errorCode, errorMessage, messages } = extensions || {};
          // FIXME: extensions.errorCode
          if (errorCode == null) {
            const codeArr = /code: (\d+),/.exec(message);
            if (codeArr) {
              errorCode = Number(codeArr[1]);
            }
          }
          if (errorMessage == null) {
            const messageArr = /msg: (.*),/.exec(message);
            if (messageArr) {
              errorMessage = messageArr[1];
            }
          }
          // 错误通用提示
          if (messages && messages.length) {
            messages.forEach((m) => {
              notificationMsg('error', translate('kunlun.common.error'), m.message || '');
            });
          } else {
            notificationMsg('error', translate('kunlun.common.error'), errorMessage || message);
          }
            // 提示扩展信息 根据错误等级来提示对应级别的报错
          const extMessage = getValue(response, 'extensions.messages');
          if (extMessage && extMessage.length) {
            const messageLevelArr = MESSAGE_LEVEL_MAP[DEFAULT_MESSAGE_LEVEL];
            extMessage.forEach((m) => {
              if (messageLevelArr.includes(m.level)) {
                const { notificationType, notificationText } = getMsgInfoByLevel(m.level);
                notificationMsg(notificationType, notificationText, m.message || '');
              }
            });
          }

          // 消息模块的用户未登录错误码
          const MAIL_USER_NOT_LOGIN = 20080002;
          // 基础模块的用户未登录错误码
          const BASE_USER_NOT_LOGIN_ERROR = 11500001;
          if (
            [MAIL_USER_NOT_LOGIN, BASE_USER_NOT_LOGIN_ERROR].includes(Number(errorCode)) &&
            location.pathname !== '/auth/login'
          ) {
            const redirect_url = location.pathname;
            location.href = `/login?redirect_url=${redirect_url}`;
          }
          /**
           * 应用配置异常跳转至通用的教程页面
           */
          // 模块参数配置未完成
          const BASE_SYSTEM_CONFIG_IS_NOT_COMPLETED_ERROR = 11500004;
          if ([BASE_SYSTEM_CONFIG_IS_NOT_COMPLETED_ERROR].includes(Number(errorCode))) {
            const action = getValue(response, 'extensions.extra.action');
            if (action) {
              Action.registerAction(action.model, action);
              const searchParams: string[] = [];
              searchParams.push(`module=${action.module}`);
              searchParams.push(`model=${action.model}`);
              searchParams.push(`viewType=${action.viewType}`);
              searchParams.push(`actionId=${action.id}`);
              const href = `${origin}/page;${searchParams.join(';')}`;
              location.href = href;
            }
          }
        });
      }
      if (networkError) {
        const { name, result } = networkError;
        const errMsg = (result && result.message) || `${networkError}`;
        if (name && result && result.message) {
          notification.error({
            message: translate('kunlun.common.error'),
            description: `[${name}]: ${errMsg}`,
          });
        }
      }
    }

图4-2-6-5 interceptor error

四、interceptor next

next: ({ extensions }) => {
  if (extensions) {
    const messages = extensions.messages as {
      level: 'SUCCESS';
      message: string;
    }[];
    if (messages)
      messages.forEach((msg) => {
        notification.success({
          message: '操作成功',
          description: msg.message,
        });
      });
  }
}

图4-2-6-6 interceptor next

六、完整代码

import { NextLink, Operation } from 'apollo-link';
import { notification } from 'ant-design-vue';
import getValue from 'lodash/get';
import { Action, ILevel, translate } from '@kunlun/dependencies';

interface RequestHandler {
  (operation: Operation, forward: NextLink): Promise<any> | any;
}

const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR;
const MESSAGE_LEVEL_MAP = {
  [ILevel.ERROR]: [ILevel.ERROR],
  [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN],
  [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO],
  [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS],
  [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG]
};

const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => {
  notification[type]({
    message: tip,
    description: desc
  });
};

const getMsgInfoByLevel = (level: ILevel) => {
  let notificationType = 'info';
  let notificationText = translate('kunlun.common.info');
  switch (level) {
    case ILevel.DEBUG:
      notificationType = 'info';
      notificationText = translate('kunlun.common.debug');
      break;
    case ILevel.INFO:
      notificationType = 'info';
      notificationText = translate('kunlun.common.info');
      break;
    case ILevel.SUCCESS:
      notificationType = 'success';
      notificationText = translate('kunlun.common.success');
      break;
    case ILevel.WARN:
      notificationType = 'warning';
      notificationText = translate('kunlun.common.warning');
      break;
  }
  return {
    notificationType,
    notificationText
  };
};

const interceptor: RequestHandler = (operation, forward) => {
  return forward(operation).subscribe({
    error: ({ graphQLErrors, networkError, response }) => {
      if (graphQLErrors) {
        graphQLErrors.forEach(async ({ message, locations, path, extensions }) => {
          let { errorCode, errorMessage, messages } = extensions || {};
          // FIXME: extensions.errorCode
          if (errorCode == null) {
            const codeArr = /code: (\d+),/.exec(message);
            if (codeArr) {
              errorCode = Number(codeArr[1]);
            }
          }
          if (errorMessage == null) {
            const messageArr = /msg: (.*),/.exec(message);
            if (messageArr) {
              errorMessage = messageArr[1];
            }
          }
          if (messages && messages.length) {
            messages.forEach((m) => {
              notificationMsg('error', translate('kunlun.common.error') || '', m.message || '');
            });
          } else {
            notificationMsg('error', translate('kunlun.common.error') || '', errorMessage || message);
          }

          const extMessage = getValue(response, 'extensions.messages');
          if (extMessage && extMessage.length) {
            const messageLevelArr = MESSAGE_LEVEL_MAP[DEFAULT_MESSAGE_LEVEL];
            extMessage.forEach((m) => {
              if (messageLevelArr.includes(m.level)) {
                const { notificationType, notificationText } = getMsgInfoByLevel(m.level);
                notificationMsg(notificationType, notificationText, m.message || '');
              }
            });
          }
          console.log(extMessage);

          // 消息模块的用户未登录错误码
          const MAIL_USER_NOT_LOGIN = 20080002;
          // 基础模块的用户未登录错误码
          const BASE_USER_NOT_LOGIN_ERROR = 11500001;
          if (
            [MAIL_USER_NOT_LOGIN, BASE_USER_NOT_LOGIN_ERROR].includes(Number(errorCode)) &&
            location.pathname !== '/auth/login'
          ) {
            const redirect_url = location.pathname;
            location.href = `/login?redirect_url=${redirect_url}`;
          }
          /**
           * 应用配置异常跳转至通用的教程页面
           */
          // 模块参数配置未完成
          const BASE_SYSTEM_CONFIG_IS_NOT_COMPLETED_ERROR = 11500004;
          if ([BASE_SYSTEM_CONFIG_IS_NOT_COMPLETED_ERROR].includes(Number(errorCode))) {
            const action = getValue(response, 'extensions.extra.action');
            if (action) {
              Action.registerAction(action.model, action);
              const searchParams: string[] = [];
              searchParams.push(`module=${action.module}`);
              searchParams.push(`model=${action.model}`);
              searchParams.push(`viewType=${action.viewType}`);
              searchParams.push(`actionId=${action.id}`);
              const href = `${origin}/page;${searchParams.join(';')}`;
              location.href = href;
            }
          }
        });
      }
      if (networkError) {
        const { name, result } = networkError;
        const errMsg = (result && result.message) || `${networkError}`;
        if (name && result && result.message) {
          notification.error({
            message: translate('kunlun.common.error') || '',
            description: `[${name}]: ${errMsg}`
          });
        }
      }
    }
  });
};

export default interceptor;

图4-2-6-7 完整代码

Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9307.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

赞 (0)
史, 昂的头像史, 昂数式管理员
0 0
上一篇 2024年5月23日 am8:31
下一篇 2024年5月23日 am8:33

相关推荐

  • 3.5.3 Action的类型 Oinone 7天入门到精通

    3.5.3 Action的类型

    各类动作我们都碰到过，但都没有展开讲过。这篇文章我们来系统介绍下oinone涉及到的所有Action类型。 一、动作类型 服务器动作ServerAction 类似于Spring MVC的控制器Controller，通过模型编码和动作名称路由，定义存储模型或代理模型将为该模型自动生成动作名称为consturct，queryOne，queryPage，create，update，delete，deleteWithFieldBatch的服务器动作。定义传输模型将为该模型自动生成动作名称为consturct的服务器动作 窗口动作ViewAction 站内跳转，通过模型编码和动作名称路由。系统将为存储模型和代理模型自动生成动作名称为redirectDetailPage的跳转详情页窗口动作，动作名称为redirectListPage的跳转列表页窗口动作，动作名称为redirectCreatePage的跳转新增页窗口动作，动作名称为redirectUpdatePage的跳转更新页窗口动作。 跳转动作UrlAction 外链跳转 客户端动作ClientAction 调用客户端函数 二、默认动作 如果在UI层级，有开放新增语义函数，则会默认生成新增的窗口动作ViewAction，跳转到新增页面 如果在UI层级，有开放更新语义函数，则会默认生成修改的窗口动作ViewAction，跳转到更新页面 如果在UI层级，有开放删除语义函数，则会默认生成删除的客户端动作ClientAction，弹出删除确认对话框 三、第一个服务器动作ServerAction 回顾第一个ServerAction 第一个ServerAction是在3.3.2【模型的类型】一文中的“代理模型”部分出现的，再来看下当时的定义代码 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-1 回顾第一个ServerAction @Action注解将创建服务器动作，并@Model.model绑定 自定义ServerAction请勿使用get、set、unset开头命名方法或toString命名方法。 ServerAction之校验(举例) Step1 为动作配置校验表达式 使用@Validation注解为PetShopProxyAction的dataStatusEnable服务端动作进行校验表达式配置 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长，不能超过128位"), }) @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-2 为动作配置校验表达式 注： ruleWithTips可以声明多个校验规则及错误提示； IS_BLANK和LEN为内置文本函数，更多内置函数详见4.1.12【函数之内置函数与表达式】一文； 当内置函数不满足时参考4.1.13【Action之校验】一文。 Step2 重启看效果 在商店管理页面点击【启用】得到了预期返回错误信息，显示"编码为必填项" 图3-5-3-3 在商店管理页面点击启用得到了预期返回错误信息 ServerAction之前端展示规则(举例) 既然后端对ServerAction发起提交做了校验，那能不能在前端就不展示呢？当然可以，我们现在就来试下。 Step1 配置PetShopProxyAction的dataStatusEnable的前端出现规则 用注解@Action.Advanced(invisible="!(activeRecord.code !== undefined && !IS_BLANK(activeRecord.code))")来表示，注意这里配对invisible是给前端识别的，所以写法上跟后端的校验有些不一样，但如内置函数IS_BLANK这些是前后端一致实现的，activeRecord在前端用于表示当前记录。 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.name) < 128", error = "名称过长，不能超过128位"), }) @Action(displayName = "启用") @Action.Advanced(invisible="!(activeRecord.code !== undefined…

    史, 昂的头像 史, 昂
    2024年5月23日
    1.5K00
  • 3.5.7.1 基础概念 Oinone 7天入门到精通

    3.5.7.1 基础概念

    模块(module) 概念 在 Oinone 系统的架构中，模块（module）是核心组成元素之一，可以被理解为域（domain）的一个具象化概念。模块的来源有两种：一种是基于后端代码定义，另一种是通过无代码新增。具体的代码定义方式，请参考“[占位符]”，而无代码定义的相关信息则可在“[占位符]”找到。在 Oinone 体系中，模块对应两种实体：模块和应用。 模块： 这是一类特定能力的集合，它可以依赖其他模块，也可以被其他模块依赖。 应用： 它是一种特殊的模块，具备模块的所有特性，并在此基础上可被终端用户访问。 使用 在前端开发中，module通常以应用的形式出现，它们往往对前端用户保持透明。在接下来的讨论中，我们主要围绕应用来探讨module的使用。从应用的角度出发，我们可以在前端开发中识别出以下几种典型使用场景，并通过具体的业务案例来加以说明 应用菜单扩展： 实现自定义母版来定义特定应用的菜单 表格布局扩展： 用于自定义布局的工具，以定义特定应用的表格布局 在这些场景中，我们着重实现了应用层面的隔离，确保每个模块都能在应用的维度上独立运作 查找 在实际业务开发中，有3个方式可以找到应用 浏览器url查找(查找速度快，可能不准) 图3-5-7-1 浏览器url查找模块(module) 接口返回查找 第一步找到截图类似请求 图3-5-7-2 接口找到viewActionQuery 第二步根据返回找应用 图3-5-7-3 接口返回查找模块(module) vue调试器选中对应的组件查找 图3-5-7-4 vue调试器查找模块(module) 推荐使用浏览器url查找，若与预期不符，可用另外两种方式查找 模型(model) 概念 在 Oinone 系统的架构中，模型（model）是另一个关键核心组成部分。模型在业务层面主要体现之一为数据库的实体表，它是承载业务实现的基础结构。要了解模型的详细介绍，请参考“[占位符]”，前端所用的模型，对应后端代码定义来说，代表的是模型的编码。 关于模型的定义，我们提供了两种方法： 代码定义： 对于需要通过编程实现的模型定义，您可以参考“[占位符]”来了解具体的代码实现方法； 无代码定义：如果您倾向于使用无代码工具来定义模型，具体的操作和流程可以在“[占位符]”中找到 使用 在前端开发中，模型是前端运行的必要条件，以下场景中，模型不直接感知: 视图渲染 页面之间跳转交互 与后端交互 以下场景中，模型会直接决定前端的渲染逻辑 母版扩展：为某模型扩展母版 布局扩展：为某模型扩展布局 页面扩展：为某模型扩展个性化页面 字段扩展: 扩展字段时加上模型的范围 动作扩展: 扩展动作时加上模型的范围 以上场景中，涵盖了前端工作的方方面面，在OInone体系中，模型不止是后端运行得基础，同样也决定了前端如何运行，那这样做有什么好处呢？ 前后端几乎不需要联调，联调的协议用模型来承载 前端无需定义路由、权限埋点 查找 在实际业务开发中，有3个方式可以找到模型 浏览器url查找 图3-5-7-5 浏览器url查找模型(model) 接口返回查找 第一步找到类似截图请求 图3-5-7-6 接口找到viewActionQuery 第二步根据返回找模型 图3-5-7-7 接口找到viewActionQuery vue调试器选中对应的组件查找 图3-5-7-8 vue调试器查找模型(model) 动作(action) 概念 动作(action)定义了终端用户得交互，它描述了前端与前端、前端与后端之间的交互。 动作涵盖了前端以下部分: 页面跳转(router) 调用后端接口 页内交互(打开弹窗、打开抽屉) 它有两部分的来源: 模型内定义动作 窗口动作(页面跳转、打开弹窗、打开抽屉) 服务器动作(调接口) 前端定义客户端动作，可自定义其它逻辑，例如: 把选中行的某一列数据复制一下 使用 动作的使用绝大部分的情况是由平台自动执行的，在平台执行不符合预期时可以使用自定义动作自行扩展 查找 vue调试器选中对应的组件查找 选中服务器动作(ServerAction) 图3-5-7-9 vue调试器查找服务器动作(ServerAction) 选中窗口动作(ViewAction) 图3-5-7-10 vue调试器查找窗口动作(ViewAction) 字段(field) 概念 在我们的后端模型中，字段（Field）是核心的定义元素，它们在数据库中表现为数据表的列。更重要的是，这些字段在前端应用中发挥着数据传输的关键作用。例如，当前端需要调用后端接口时，它会发送如下结构的数据： 图3-5-7-11 name字段数据举例 这里的 "name" 是一个字段实例，它连接了前后端的交互。在后端，该字段不仅用于数据存储，也参与逻辑运算。 字段在 Oinone 系统中的加强应用 在 Oinone 系统中，字段的功能得到了扩展。除了基本的前后端数据交互，字段的定义还直接影响前端的用户界面（UI）交互。例如： 前端交互组件的选择：前端交互组件的类型取决于字段的数据类型。对于 String 类型的 "name" 字段，前端会使用输入框来收集用户输入的 "张三"。 数据存储和类型定义：在后端，"name" 字段被明确定义为 String 类型，这决定了它如何存储和处理数据。 字段与前端组件定义的解耦 一个关键的设计原则是，前端组件的定义与具体的字段值或字段名（如 "name" 或 "张三"）不直接相关，而是基于字段的数据类型（此例中为 String）。这种设计实现了： 前端组件的一致性：确保所有组件的输入输出遵循同一数据类型（如 String）。 高度的组件复用性：在满足 UI 要求的前提下，任何 String 类型的字段都可以使用这种通用的组件设计。 使用 Oinone 系统中的视图与字段交互的灵活性 Oinone 系统为每种视图和字段类型（Ttype）提供了默认的交互模式。这不仅保证了前端工程启动时所有界面的即时展示，也为开发者带来了高度的灵活性和扩展能力。以下是这一设计理念的关键点： 1. 视图与字段交互的默认实现 每种视图都有对应字段类型（Ttype）的默认交互实现，确保用户界面一致且直观。这使得在前端工程启动时，所有界面能够无需额外配置即可正常展示。 2. 灵活性与扩展能力 尽管系统提供了默认的交互方式，开发者仍然拥有自定义这些交互方式的能力。这意味着开发者可以根据应用需求，设计更加贴合业务逻辑和用户体验的交互模式。 3. 覆盖和替换默认组件 最为重要的是，开发者不仅可以添加新的交互方式，还可以完全覆盖和替换系统的默认组件。这提供了极大的自由度，使开发者能够根据具体场景重新设计和实现界面组件，从而达到完全定制化的用户体验。 查找 vue调试器选中对应的组件查找 图3-5-7-12 vue调试器查找字段(field) 视图类型(viewType) 概念 在 Oinone 系统中，视图是模型在前端的具体表现形式。视图的核心组成和功能如下： 1. 组成要素 字段：视图中的字段代表了模型的数据结构，它们是界面上数据显示和交互的基础。 动作：视图包含的动作定义了用户可以进行的操作，如添加、编辑、删除等。 前端UI：视图的界面设计，包括布局、元素样式等，决定了用户的交互体验。 2. 数据源与交互 数据源：视图的数据直接来源于后端模型。这意味着前端视图展示的内容是根据后端模型中定义的数据结构动态生成的。 交互：视图不仅展示数据，还提供与数据交互的能力。这些交互也是基于后端模型定义的，包括数据的增删改查等操作。 3. 灵活性 视图可以灵活选择是否采用模型的交互。这意味着开发者可以根据需求决定视图仅展示模型的数据，或者同时提供与数据的交互功能。 使用 在 Oinone 系统中，用户可以通过无代码界面设计器轻松配置视图。系统内置了以下主要视图类型： 表格（Table） 表单（Form） 详情（Detail） 搜索（Search） 画廊（Gallery） 树（Tree） 界面设计器配置…

    史, 昂的头像 史, 昂
    2024年5月23日
    1.4K00

  • 蒋江伟

    企业数字化转型经过多年演进，其趋势价值已经毋庸置疑。近些年来，随着流媒体平台的崛起，对企业的营销方式、渠道建设方式甚至供应链都带来了新的挑战，我们可以清晰地感觉到世界每时每刻都在发生变化。在未来的企业竞争中，谁数字化走在前沿，谁就更能掌握主动权。数字化是为了满足业务的持续创新，只有持续创新才能更好的迎接未知变化。而过去很多企业的技术路径是一个采购型的发展路径，买来的ERP和CRM，升级都是各自管各自的，有一天推出一个新概念或者业务发生新需求，又去采购另外一家企业的ERP和CRM，整个替换掉了，烟囱式地迭代演进模式。企业不怕重复建设，怕的是不断重复建设，企业不怕系统延期上线，怕的是错过业务发展的机会窗口。 本书主要介绍了一种全新的数字化构建理念和技术落地方式——用低代码的方式一站式支撑企业的商业场景并能满足商业化持续创新，和其他低代码不同的是：既结合了中台架构，又兼顾了传统企业的IT发展水平，更符合企业数字化发展需求，持续保持企业竞争力，对各行业在做数字化选型的时候有很大的帮助。 很高兴看到阿里校友陈鹏程（本书作者）在这条路上发光发热，也把此书推荐给IT从业者、程序员以及爱好计算机应用软件的所有同学，希望对大家学习新型、更高效的系统构建方式有所启发。 阿里巴巴高级研究员 蒋江伟（小邪）

    史, 昂的头像 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    2.5K00
  • 集成平台 Oinone 7天入门到精通

    集成平台

    1. 集成介绍 集成是指平台应用与外部系统之间的集成，平台内部应用之间直接内部服务调用。 在讲解集成设计之前先了解以下概念： 集成资源：在实际业务场景中需要将多个系统打通，针对单一的一方，我们称之为集成资源。集成资源可以是具体的数据服务合集，例如系统应用、数据库、FTP服务、域控服务等。 连接器：连接具体集成资源，以供后续实际集成时使用的connector。 数据流程：通过流程编排的方式，让集成也可以可视化的处理，提升集成作业效率。 集成平台通过连接器、数据流程的编排实现与外部系统的数据互通，包括：连接器、数据流程、流程日志三部分功能。 集成操作整体流程： 2. 连接器 支持集成应用、数据库两大类型的资源。 页面操作包括：新增、编辑、查看引用、删除，点击卡片进入API列表管理接口。 2.1 连接器之应用 2.1.1 新增应用 操作入口：在连接器、应用Tab页面——新增应用资源。 2.1.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.1.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.1.4 应用详情 点击应用卡片进入应用详情，查看应用基础信息、集成的接口清单。 2.1.5 API接口 操作入口：新增资源后，点击连接器卡片，进入API管理页面。 页面操作：新增、删除、编辑、详情、返回连接器。 2.1.5.1 新增API 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：GET、POST、PUT、DELETE 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.2 新增WebService 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：POST 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.3 编辑 编辑同新增页面信息，不做赘述。 2.1.5.4 删除 删除API接口后不能继续使用，请慎重。 2.1.6 查看引用 查看引用应用资源的接口。 2.2 连接器之资源 2.2.1 新增数据库资源 操作入口：在连接器页面，切换到数据库页面——新增DB资源。 2.2.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.2.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.2.4 查看引用 查看引用数据库的接口。 2.2.5 数据库详情 点击应用卡片进入数据库连接器详情，查看应用基础信息、集成的接口清单，新增API。 2.2.6 API接口 2.2.6.1 新增API 输入基础信息、请求参数、数据库操作、定义响应结果。 2.2.6.2 编辑 编辑同新增页面信息，不做赘述。 2.2.6.3 删除 删除API接口后不能继续使用，请慎重。 3. 数据流程 3.1.1 数据流程介绍 数据流程：通过流程编排的手段，可视化的配置、处理集成的数据流程，提升集成作业效率。 主要包含基本操作和流程设计两个部分。前者包含了流程的新增、删除、复制、停用/启用、设计/编辑、搜索。后者包含单一流程的基础信息修改、流程设计、参数配置、保存、发布。 3.1.2 流程的基本操作 3.1.2.1 新增流程 新增流程，点击后进入流程设计页面，流程名默认为“未命名流程”，可自行修改。 3.1.2.2 设计/编辑 点击编辑进入该流程的设计页面。 3.1.2.3 停用/启用 流程需要更新或暂时不用时可以使用停用功能。流程停用后将不会执行流程，正在执行中的流程不受停用影响。 针对停用流程，点击启用按钮，流程恢复启用状态，可正常触发。 3.1.2.4 复制 遇到流程节点动作相似度较高的情况可以使用复制流程的功能，点击按钮后生成一个“原流程名-复制”的流程，并且进入新流程的流程设计界面。 3.1.2.5 删除 遇到流程创建有误，没有使用过且将来也不会使用该流程，可以删除流程。需要注意的是，删除流程的前提是该流程已停用，并且该流程从未执行过。 3.1.3 流程设计 通过新增、编辑/设计动作进入流程设计页后，可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 3.1.3.1 流程配置 点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 3.1.3.2 保存 点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 3.1.3.3 发布 第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。 3.1.4 流程触发 新增的流程设计页面默认包含两个节点，一个是流程的触发节点：确定流程开始的条件；另一个是流程结束的节点。 流程触发方式有定时触发、消息触发两种方式，未设置流程触发方式时无法继续添加后续流程节点，同时无法进行流程发布，如左下图。触发方式设置完成后，可从左侧菜单栏拖入或流程箭头中的加号点击添加节点动作，如下图。 3.1.4.1 定时触发 定时触发适用于周期性调用流程的场景，设置流程第一次执行的时间，配置循环的周期间隔。 3.1.4.2 消息触发 消息触发方式下，识别消息任务的唯一标识，标识可复用。在发送消息时，必须匹配定义的消息标识。 3.1.5节点动作 3.1.5.1 集成服务 集成服务API，选择集成的应用、此应用下的API，配置相应的参数。 3.1.5.2 数据处理 【新增数据】节点：同流程设计器； 【更新数据】节点：同流程设计器； 【获取数据】节点：同流程设计器； 【删除数据】节点：同流程设计器； 【更新流程参数】节点：同流程设计器； 【引用逻辑】节点：同流程设计器； 3.1.5.3 构建 【延时】节点：同流程设计器； 【条件分支】节点：同流程设计器； 【子流程】节点：同流程设计器； 【循环】节点 循环模式：次数循环、列表循环； 次数循环：需配置循环开始值、循环结束值、循环步长； 列表循环：配置需要循环的列表； 均使用表达式配置相应字段， 3.1.5.4 通知消息 【站内信】节点：同流程设计器； 【邮件】节点：同流程设计器； 【短信】节点：同流程设计器； 4. 流程日志 查看流程执行的情况，包括执行状态、执行时间、执行时长，针对异常流程，可以重试。 详情：查看流程日志、日志详情。

    史, 昂的头像 史, 昂
    2024年6月20日
    2.1K00
  • 5.2 CDM之工程模式 Oinone 7天入门到精通

    5.2 CDM之工程模式

    两种工程模式介绍 oinone推荐的两种工程模式都保留互联网特性，如跟业务无关的基础平台还是采用平台化思路建设。二种侧重点差异如下 第一种：比较适合企业采用多供应商联合开发场景，先以业务区分，各个业务线有独立的领域平台，最大限度保持不同业务线的独立性，有利于各个业务线独立发展（目前oinone上层星空系列产品采用这种工程模式，因为我们期望的时候帮助企业构建软件生态，必然要考虑不同供应商联合开发场景） 第二种：比较接近传统互联网架构，先按平台领域区分，如商品领域：商品平台做总工程，但里面按业务区分模块分子工程来保持业务相互独立，相对于第一种把领域的代码放一起，带来好处强化大家思考模型通用性。但不适用于跨公司主体间配合。 图5-2-1 Oinone-CDM的两种工程模式 注意事项： oinone兼容传统互联网架构 不管哪种模式，都需要解决CDM的维护问题 CDM维护的常见问题： Q：CDM层缺少模型怎么办？ A：CDM层模型是逐步完善和丰富的。如果是特定业务自己需要的模型，这类模型无通用性。则加到自己的工程中；如果是通用的，则架构组确定是否需要纳入到CDM。 Q：CDM层已有的模型缺少字段怎么办？ A：CDM层模型的字段也是逐步完善和丰富的，通用的字段在架构组确定后也会被吸收进来 Q：CDM层不同业务线相互影响怎么办？ A：扩展字段最好带上自有前缀标志，如果觉得通用则提交架构组走模型缺少字段加入 Q：CDM层某模型新增加了的字段，但原先业务线已经加了相同含义字段 A：业务线可以把自己的字段related到CDM增加的新字段，并做数据迁移

    史, 昂的头像 史, 昂
    2024年5月23日
    1.5K00

Leave a Reply

登录后才能评论