前端 接入指南

<!-- 1. jQuery（SDK 依赖）——从 API 部署域名加载 -->
<script src="//mol.mkbio.com.cn/static/jquery.min.js"></script>

<!-- 2. 结构搜索 SDK——必须从 API 部署域名加载，不能从你自己的域名引入 -->
<script src="//mol.mkbio.com.cn/static/sdk.js"></script>

<!-- 3. 配置 APIURL——必须与上面 sdk.js 的域名完全一致 -->
<script>
    CJSDraw_SDK.Cfg.APIURL = "//mol.mkbio.com.cn";
</script>

<!-- 编辑器将渲染到此元素内 -->
<div id="jsdrawbox"></div>

var appkey = "your-appkey-uuid";

// Init(place, cfg) — 两个参数，callback 放在 cfg 内
CJSDraw_SDK.Init("jsdrawbox", {
    appkey:   appkey,
    skin:     "w8",     // 皮肤，固定值
    width:    "100%",   // 编辑器宽度
    height:   "510px",  // 编辑器高度
    callback: function() {
        // 编辑器加载完成后的回调
        console.log("编辑器已就绪");
    },
});

function InitJsDraw(el, callback, cfg, appkey) {
    cfg = $.extend({
        appkey:   appkey || '',
        callback: function() { callback(); }
    }, cfg);
    CJSDraw_SDK.Init(el, cfg);
}

// 调用示例
InitJsDraw(
    "jsdrawbox",                         // 容器 id
    function() { console.log("就绪"); }, // 回调
    { skin: "w8", width: "100%", height: "510px" },
    "your-appkey-uuid"
);

CJSDraw_SDK.Do("getSmiles", {}, function(data) {
    var smiles = data.value;   // SMILES 字符串，在 data.value 字段
    console.log("当前结构 SMILES:", smiles);

    if (!smiles) {
        alert("请先绘制结构");
        return;
    }
    // 继续后续操作，如检索、提交等
});

// 取得当前编辑器的 Molfile（例如保存时使用）
CJSDraw_SDK.Do("getMolfile", {}, function(data) {
    var molfile = data.value;  // Molfile 字符串，在 data.value 字段
    console.log(molfile);
});

// 回填 Molfile 到编辑器（再次编辑场景）
CJSDraw_SDK.Do("setMolfile", { mol: molfileString }, function(data) {
    console.log("结构已回填");
});

// 使用 Ketcher 编辑器：仅需传入 version: "ketcher-sa"
CJSDraw_SDK.Init("jsdrawbox", {
    appkey:  "your-appkey-uuid",
    version: "ketcher-sa",   // ← 切换为 Ketcher
    width:   "100%",
    height:  "560px",         // Ketcher 建议高度 ≥ 500px
    callback: function() {
        console.log("Ketcher 已就绪");
    },
});

function doSearch(page) {
    // 第一步：从编辑器获取当前绘制的结构
    CJSDraw_SDK.Do("getSmiles", {}, function(data) {
        var smiles = data.value;
        if (!smiles) {
            alert("请先绘制结构");
            return;
        }

        // 第二步：提交给你自己的后端接口
        // ⚠ 这里调用的是你自己的服务端 URL，不是结构检索服务
        fetch("/your-api/structure-search", {
            method:  "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                smiles:     smiles,
                searchtype: $("input[name='stype']:checked").val(),
                page:       page || 1,
                psize:      12,
            }),
        })
        .then(r => r.json())
        .then(result => renderResults(result, page === 1))
        .catch(err => console.error("搜索失败", err));
    });
}

import os, requests

# ApiKey 从环境变量读取，严禁硬编码或返回给前端
API_KEY = os.environ["CHEM_API_KEY"]

def structure_search(smiles, searchtype, page=1, psize=12):
    resp = requests.post(
        "https://your-chem-service.com/api/search",
        headers={"Authorization": f"Bearer {API_KEY}"},
        json={
            "smiles":     smiles,
            "searchtype": searchtype,
            "page":       page,
            "psize":      psize,
        },
    )
    return resp.json()

{
  "ok":       true,
  "nextpage": 2,          // 下一页页码，≤ 0 表示无更多结果
  "list": [
    {
      "cas":    "110-89-4",   // CAS 号
      "smile": "C1CCNCC1",   // SMILES
      "imgUrl":"/api/mol2svg?smile=C1CCNCC1", // 保存时预存的结构图 URL，直接展示
      "enname":"Piperidine"   // 英文名
    }
  ]
}

var nextpage = 1;

function renderResults(result, isFirstPage) {
    if (!result.ok) {
        $("#results").html("<p>检索失败，请稍后重试</p>");
        return;
    }
    if (!result.list || result.list.length === 0) {
        $("#results").html("<p>未检索到匹配化合物</p>");
        return;
    }

    var html = '';
    result.list.forEach(function(item) {
        // 使用后端预存的结构图 URL（推荐），避免批量实时渲染耗费服务器资源
        var imgUrl = item.imgUrl || ('/api/mol2svg?smile=' + encodeURIComponent(item.smile));
        html += '<div class="result-card">'
              + '  <img src="' + imgUrl + '" alt="结构式" loading="lazy">'
              + '  <p class="cas">' + item.cas + '</p>'
              + '  <p class="name">' + (item.enname || '—') + '</p>'
              + '</div>';
    });

    if (isFirstPage) {
        $("#results").html(html);
    } else {
        $("#results").append(html);  // 加载更多时追加
    }

    // 控制"加载更多"按钮
    nextpage = parseInt(result.nextpage);
    $("#load-more").toggle(nextpage > 0);
}

<!-- GET /api/mol2svg?smile=SMILES -->
<img src="/api/mol2svg?smile=C1CCNCC1"
     alt="结构式"
     style="max-width:200px">

// 动态拼接，注意 SMILES 需 encodeURIComponent
var smiles  = "C1CCNCC1";
var imgUrl  = "/api/mol2svg?smile=" + encodeURIComponent(smiles);
$("#mol-img").attr("src", imgUrl);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>结构式检索</title>
  <script src="//mol.mkbio.com.cn/static/jquery.min.js"></script>
  <script src="//mol.mkbio.com.cn/static/sdk.js"></script>
  <script>CJSDraw_SDK.Cfg.APIURL = "//mol.mkbio.com.cn";</script>
  <style>
    body { font-family: sans-serif; max-width: 960px; margin: 0 auto; padding: 20px; }
    #results { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
    .card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; width: 160px; text-align: center; }
    .card img { max-width: 100%; height: 120px; object-fit: contain; }
    .card p { font-size: 12px; color: #64748b; margin: 4px 0 0; }
  </style>
</head>
<body>

<!-- 编辑器容器 -->
<div id="jsdrawbox"></div>

<!-- 检索类型 + 搜索按钮 -->
<div style="margin-top:12px;">
  <label><input type="radio" name="stype" value="1" checked> 子结构</label>
  <label><input type="radio" name="stype" value="2"> 全结构</label>
  <label><input type="radio" name="stype" value="4"> 相似≥90%</label>
  <button id="btn-search" style="margin-left:12px;padding:6px 18px;">搜索</button>
</div>

<!-- 结果容器 -->
<div id="results"></div>
<div id="load-more" style="display:none;text-align:center;margin-top:16px;">
  <button id="btn-more">加载更多</button>
</div>

<script>
  // ⚠ 前端只持有 AppKey，ApiKey 由后端保管，禁止出现在此处
  var APP_KEY  = "your-appkey-uuid";
  var nextpage = 1;
  var curSmiles = "";
  var curType  = "1";

  // 初始化编辑器（Init 只接受两个参数，callback 在 cfg 内）
  CJSDraw_SDK.Init("jsdrawbox", {
    appkey:   APP_KEY,
    skin:     "w8",
    width:    "100%",
    height:   "480px",
    callback: function() { console.log("编辑器就绪"); },
  });

  // 新检索：先取 SMILES，再调自己的后端接口
  function newSearch() {
    CJSDraw_SDK.Do("getSmiles", {}, function(data) {
      if (!data.value) { alert("请先绘制结构"); return; }
      curSmiles = data.value;
      curType  = $("input[name='stype']:checked").val();
      nextpage = 1;
      $("#results").empty();
      fetchSearch();
    });
  }

  // 调用你自己的后端代理接口
  function fetchSearch() {
    fetch("/your-api/structure-search", {
      method:  "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        smiles:     curSmiles,
        searchtype: curType,
        page:       nextpage,
        psize:      12,
      }),
    })
    .then(r => r.json())
    .then(function(result) {
      if (!result.ok) { alert("检索失败"); return; }
      if (!result.list || !result.list.length) {
        $("#results").html("<p>未检索到匹配化合物</p>"); return;
      }
      result.list.forEach(function(item) {
        // 使用后端预存的结构图 URL，避免批量实时渲染
        var imgUrl = item.imgUrl || ('/api/mol2svg?smile=' + encodeURIComponent(item.smile));
        $("#results").append(
          '<div class="card">'
          + '<img src="' + imgUrl + '" loading="lazy" alt="结构式">'
          + '<p>' + item.cas + '</p>'
          + '<p>' + (item.enname || '—') + '</p>'
          + '</div>'
        );
      });
      nextpage = parseInt(result.nextpage);
      $("#load-more").toggle(nextpage > 0);
    });
  }

  $(function() {
    $("#btn-search").on("click", newSearch);
    $("#btn-more").on("click", fetchSearch);
  });
</script>
</body>
</html>