零后端成本：前端小白也能搭的临床试验搜索工具|临床试验|分页|前端|密钥|游标|零后端成本

做医疗数据的朋友都知道，ClinicalTrials.gov 是个宝藏，但直接扒数据能把人逼疯。eligibility criteria 解析、地理位置筛选、增量同步——每个都是深坑。有人把这些脏活累活包成了一个 REST API，还给了免费额度。

这篇文章带你 5 分钟搭一个能跑的前端：输入疾病名称和试验阶段，返回卡片式结果，带分页。不需要服务器，一个 HTML 文件搞定。

这个 Clinical Trials API 做了几件实用的事：把入组标准按年龄、性别、疾病、实验室指标分类解析好；支持按经纬度画圈搜索；有新试验时推 HTTP webhook；分页用 cursor 机制，避免深度翻页的性能坑。数据覆盖 48 万+试验、220+国家，每日同步 FDA 更新。免费档不用绑卡。

第一步，拿密钥。上 RapidAPI 搜 "Clinical Trials API"，选 Free plan 订阅，dashboard 里复制 X-RapidAPI-Key。30 秒搞定。

第二步，试一条请求。curl 示例：

curl --request GET \

--url 'https://clinical-trials-api.p.rapidapi.com/v1/trials/search?query=breast+cancer&phase=Phase+2&status=Recruiting&limit=3' \

--header 'X-RapidAPI-Key: 你的密钥'

返回是干净 JSON。data 数组里每条试验包含 NCT 编号、标题、摘要、疾病、阶段、状态、招募人数、最后更新日期、研究中心地址。pagination 对象告诉你总数、本次条数、下一页游标、是否还有更多。上面这条请求命中 847 条，不用写正则，不用维护爬虫。

第三步，写前端。单文件 index.html，结构极简：搜索框（疾病关键词）、下拉选试验阶段、搜索按钮、结果卡片区、分页按钮。样式用内嵌 CSS，几十行够用。核心逻辑就三块：

1）fetch 调 API，把密钥硬编码或 prompt 用户输入；

2）渲染卡片，展示标题、摘要、阶段、状态、地点、招募人数；

3）分页按钮绑定 next_cursor，翻页时带上继续请求。

卡片设计建议：白底圆角、轻微阴影、标题用深色突出、关键信息（阶段/状态）用标签色块区分。地点信息按城市-州-国家层级展示，用户一眼判断距离。

几个可以扩展的方向：用浏览器 geolocation API 获取用户坐标，自动填充 radius 搜索；把 webhook 地址换成自己的 endpoint，新试验入库时推通知；用 aggregate statistics 接口做数据看板，看某疾病各阶段的试验分布。