❌

阅读视图

发现新文章，点击刷新页面。

图文教学，服务端如何发送(钉钉 +飞书 )机器人通知

✇掘金 前端
工边页字

一共就两步，创建自定义机器人，然后拿到请求接口，最后把消息发出去。完事~

飞书和钉钉基本上都是一个套路，很简单的~

我们开始

创建一个钉钉机器人

首先你得有个群聊

image.png

image.png

image.png

image.png

image.png

如果没有发送的文字里没有我们刚刚设定关键字，钉钉接口会返回如下内容

image.png

image.png

钉钉服务端发送代码

接下来只需要对这个接口进行http请求就完事了

我先来演示下效果，然后，会给出node,php,java,go，python五个语言的演示case

image.png

🟩 1. Node.js（ESM版）

import express from "express";
import axios from "axios";

const app = express();
const PORT = 3000;

const DINGTALK_WEBHOOK =
  "https://oapi.dingtalk.com/robot/send?access_token=YOUR_DINGTALK_TOKEN";

app.get("/send-dingtalk", async (req, res) => {
  try {
    const payload = {
      msgtype: "text",
      text: {
        content: "Node.js 发送测试",
      },
    };

    const response = await axios.post(DINGTALK_WEBHOOK, payload);

    res.json(response.data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

🟨 2. Java（Spring Boot）

import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;
import java.util.*;

@RestController
public class DingController {

    private static final String WEBHOOK =
        "https://oapi.dingtalk.com/robot/send?access_token=YOUR_DINGTALK_TOKEN";

    @GetMapping("/send-dingtalk")
    public Object send() {
        RestTemplate restTemplate = new RestTemplate();

        Map<String, Object> payload = new HashMap<>();
        payload.put("msgtype", "text");

        Map<String, String> text = new HashMap<>();
        text.put("content", "Java 发送测试");

        payload.put("text", text);

        return restTemplate.postForObject(WEBHOOK, payload, String.class);
    }
}

🟪 3. PHP

<?php

$url = "https://oapi.dingtalk.com/robot/send?access_token=YOUR_DINGTALK_TOKEN";

$data = [
    "msgtype" => "text",
    "text" => [
        "content" => "PHP 发送测试"
    ]
];

$options = [
    "http" => [
        "header"  => "Content-Type: application/json",
        "method"  => "POST",
        "content" => json_encode($data),
    ]
];

$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);

echo $result;

🟦 4. Python

import requests

url = "https://oapi.dingtalk.com/robot/send?access_token=YOUR_DINGTALK_TOKEN"

payload = {
    "msgtype": "text",
    "text": {
        "content": "Python 发送测试"
    }
}

response = requests.post(url, json=payload)

print(response.json())

🟫 5. Go

package main

import (
"bytes"
"encoding/json"
"fmt"
"net/http"
)

func main() {
url := "https://oapi.dingtalk.com/robot/send?access_token=YOUR_DINGTALK_TOKEN"

payload := map[string]interface{}{
"msgtype": "text",
"text": map[string]string{
"content": "Go 发送测试",
},
}

jsonData, _ := json.Marshal(payload)

resp, err := http.Post(url, "application/json", bytes.NewBuffer(jsonData))
if err != nil {
panic(err)
}
defer resp.Body.Close()

fmt.Println("Status:", resp.Status)
}

创建一个飞书机器人

其实飞书和钉钉的流程大差不差

image.png

image.png

image.png

image.png

image.png

image.png

飞书发送代码

其实设钉钉的流程是一样的，就是吧url换一下，入参结构换一下。为了大家方便，我还是五个语言的case都来一份，要case的可以直接cv过去试试

image.png

1️⃣ Node.js

import axios from "axios";

const FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/YOUR_TOKEN_HERE";

const payload = {
  msg_type: "text",
  content: {
    text: "这是给伙计们的测试数据，带了‘测试’两个字"
  }
};

axios.post(FEISHU_WEBHOOK, payload)
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

2️⃣ Python

import requests

FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/YOUR_TOKEN_HERE"

payload = {
    "msg_type": "text",
    "content": {
        "text": "这是给伙计们的测试数据，带了‘测试’两个字"
    }
}

response = requests.post(FEISHU_WEBHOOK, json=payload)
print(response.json())

3️⃣ Java (使用 HttpClient, Java 11+)

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class FeishuBot {
    public static void main(String[] args) throws Exception {
        String webhook = "https://open.feishu.cn/open-apis/bot/v2/hook/YOUR_TOKEN_HERE";

        String json = "{"
                + ""msg_type":"text","
                + ""content":{"text":"这是给伙计们的测试数据，带了‘测试’两个字"}"
                + "}";

        HttpRequest request = HttpRequest.newBuilder()
                .uri(URI.create(webhook))
                .header("Content-Type", "application/json")
                .POST(HttpRequest.BodyPublishers.ofString(json))
                .build();

        HttpClient client = HttpClient.newHttpClient();
        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

        System.out.println(response.body());
    }
}

4️⃣ PHP

<?php
$webhook = "https://open.feishu.cn/open-apis/bot/v2/hook/YOUR_TOKEN_HERE";

$data = [
    "msg_type" => "text",
    "content" => [
        "text" => "这是给伙计们的测试数据，带了‘测试’两个字"
    ]
];

$options = [
    'http' => [
        'header'  => "Content-Type: application/json\r\n",
        'method'  => 'POST',
        'content' => json_encode($data),
    ],
];

$context  = stream_context_create($options);
$result = file_get_contents($webhook, false, $context);
if ($result === FALSE) { /* 错误处理 */ }

echo $result;

5️⃣ Go

package main

import (
    "bytes"
    "encoding/json"
    "fmt"
    "net/http"
)

func main() {
    webhook := "https://open.feishu.cn/open-apis/bot/v2/hook/YOUR_TOKEN_HERE"

    payload := map[string]interface{}{
        "msg_type": "text",
        "content": map[string]string{
            "text": "这是给伙计们的测试数据，带了‘测试’两个字",
        },
    }

    b, _ := json.Marshal(payload)
    resp, err := http.Post(webhook, "application/json", bytes.NewBuffer(b))
    if err != nil {
        panic(err)
    }
    defer resp.Body.Close()

    var result map[string]interface{}
    json.NewDecoder(resp.Body).Decode(&result)
    fmt.Println(result)
}

最后

如果对你有用的话

点赞收藏吃灰去呀~

cursor接上figma mcp ，图形图像模式傻瓜式教学（包教包会版）

✇掘金 前端
工边页字

image.png

前言

包教包会！

其实这个技术出来有段时间了，但是感觉推广度不够，我看在很多程序员里还是在手工写css和样式。 如果你用的是figma的话，今天教给大家一个ai 几乎95%设计稿还原的方法。

为了照顾萌新同学，本文全程 用图形图像 来进行配置教程

开始！！！

第一步：创建figma token

image.png

image.png

image.png

然后点击 Generate，创建成功

image.png

再次强调，key一定要复制好，只有一次机会

第二步：配置cursor的figma mcp

  1. 按 Cmd + Shift + P，输入 MCP，选择「Open MCP setting」。 如下

image.png

image.png

点击新增以后你就会弹出一个 mcp.json文件

image.png 把这段配置复制进去，配置我写在下面，注意token替换下

{
    "mcpServers": {
        "Framelink Figma MCP": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp",
                "--figma-api-key=你的figma token",
                "--stdio"
            ]
        }
    }
}

第三步：尝试让cursor帮你做

先去你的figma项目里复制一个url过来，如下

image.png

然后回到cursor,如果你是免费用户（没有购买cursor的情况下），模型记得选 “auto”

image.png

然后直接把url复制进对话会进行对话就好

image.png

最后我们看看还原度

image.png

有条件的不要使用免费模型，auto模型有时候和弱智有的一拼

最后

如果对你有用的话

点赞收藏吃灰去呀~

❌