VUE 集成企微机器人通知

message-robot

便于线上异常问题及时发现处理,项目中集成企微机器人通知,及时接收问题并处理

企微机器人通知工具类

复制代码
export class MessageRobotUtil {
  constructor() {}

  /**
   * 发送 markdown 消息
   * @param robotKey 机器人 ID
   * @param title 消息标题
   * @param items 消息内容
   */
  public sendMarkdownMessage(robotKey: string, title: string, items: Record<string, string>) {
    const content = this.generateMarkdownMessageContent(title, items);
    this.sendMessage(robotKey, {
      msgtype: "markdown",
      markdown: { content: content },
    });
  }

  /**
   * 构建 markdown 消息内容
   * @param title 消息标题
   * @param items 消息内容 键值对
   * @returns
   */
  private generateMarkdownMessageContent(title: string, items: Record<string, any>) {
    let content = `### 【${title}】`;
    content += "\n";

    for (const key in items) {
      content += `> ${key}: <font color="warning">${items[key]}</font>\n`;
    }
    return content;
  }

  /**
   * 消息发送
   * @param robotKey 机器人 ID
   * @param message 消息内容
   */
  private sendMessage(robotKey: string, message: Record<string, any>) {
    // 跟地址 https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=****
    const url = "/cgi-bin/webhook/send?key=" + robotKey;
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(message),
    });
  }
}
相关推荐
老前端的功夫13 分钟前
前端高可靠架构:医疗级Web应用的实时通信设计与实践
前端·javascript·vue.js·ubuntu·架构·前端框架
vipbic1 小时前
我封装了一个“瑞士军刀”级插件,并顺手搞定了自动化部署
vue.js·nuxt.js
Fantastic_sj2 小时前
Vue3相比Vue2的改进之处
前端·javascript·vue.js
梦想的旅途23 小时前
企业微信非官方 API 与 RPA 结合:外部群消息触达的可行性分析
企业微信·rpa
ttod_qzstudio4 小时前
深入理解 TypeScript 数组的 find 与 filter 方法:精准查找的艺术
javascript·typescript·filter·find
Kaze_story5 小时前
Vue第四节:组件化、组件生命周期
前端·javascript·vue.js
niujiangyao5 小时前
vue v-for列表渲染, 无key、key为index 、 有唯一key三种情况下的对比。 列表有删除操作时的表现
vue.js
狗哥哥5 小时前
Vue 3 统一面包屑导航系统:从配置地狱到单一数据源
前端·vue.js·架构
鱼鱼块5 小时前
从后端拼模板到 Vue 响应式:前端界面的三次进化
前端·vue.js·面试
谎言西西里6 小时前
从模板渲染到响应式驱动:前端崛起的技术演进之路
vue.js