企业官网建设流程全解析

在健康内容平台、养生小程序、中医药知识库、AI 问答助手和个人工具站中，中药材查询是一个非常常见的功能。

用户可能会搜索：

• 黄芪
• 当归
• 甘草
• 枸杞
• 金银花
• 陈皮

然后希望看到药材简介、别名、相关说明、功效介绍等内容。

如果开发者自己从零整理中药材数据，不仅需要投入大量时间，还要考虑字段结构、搜索体验、内容维护和页面展示。对于大多数项目来说，直接接入成熟的中药查询 API，会比自己维护数据更高效。

本文以本草纲目中药查询 API 为例，整理一套适合实际项目落地的接入方案。

接口文档地址：

https://apizero.cn/marketplace/bencao

一、接口适合的业务场景

本草纲目中药查询 API 适合用于“输入药材名称，返回药材信息”的业务场景。

常见应用包括：

只要产品中有“中药材搜索”和“药材详情展示”的需求，就可以考虑接入该类接口。

二、为什么使用中药查询API

很多开发者一开始会选择自己整理中药数据，但真正落地后会发现维护成本比较高。

主要问题有三个。

1. 药材数据整理成本高

中药材数量多，很多药材还有别名、不同写法和不同来源。只整理几十个常见药材还可以接受，如果要做成完整查询系统，工作量会明显增加。

2. 前端展示需要统一字段

如果数据来源不统一，前端展示会很麻烦。

比如有的药材有别名，有的没有；有的有简介，有的只有一段描述；有的字段很长，有的字段很短。

通过接口返回结构化数据，可以让页面展示更加稳定。

3. 后期维护压力大

中药知识类内容需要长期维护。如果所有数据都由自己手动整理，后续扩展和修正都会比较麻烦。

使用 API 接口可以把基础数据查询能力交给接口完成，开发者只需要关注产品功能和用户体验。

三、接口调用方式

本草纲目中药查询接口属于 GET 类型接口，适合通过药材名称进行查询。

接口地址：

https://apizero.cn/marketplace/bencao

常见调用形式如下：

GET https://apizero.cn/marketplace/bencao?name=黄芪

常见参数设计可以参考下面这种结构：

实际开发时，以接口文档中的参数说明为准。

四、返回结果结构设计

中药查询接口通常会返回药材名称、别名、简介、相关说明等字段。

示例返回：

{"code":200,"msg":"success","result":{"name":"黄芪","alias":"黄耆","description":"常见中药材之一","effect":"用于中医药知识展示的相关说明","source":"本草相关资料"}}

常见字段说明：

前端展示时建议做好空值处理，不要假设所有字段都会存在。

五、前端页面展示方案

中药查询页面的核心功能并不复杂，重点是搜索体验和内容展示清晰。

页面可以包含以下模块：

• 搜索输入框
• 查询按钮
• 加载状态
• 查询结果卡片
• 空结果提示
• 历史搜索
• 热门药材推荐

基础 HTML 示例：

<divclass="medicine-page"><h1>中药材查询</h1><divclass="search-box"><inputid="keyword"placeholder="请输入中药材名称，如黄芪、当归、甘草"/><buttononclick="searchMedicine()">查询</button></div><divid="result"></div></div>

简单样式示例：

.medicine-page{max-width:760px;margin:0 auto;padding:40px 16px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}.search-box{display:flex;gap:12px;margin:24px 0;}.search-box input{flex:1;padding:12px 14px;border:1px solid #ddd;border-radius:8px;}.search-box button{padding:12px 20px;border:0;border-radius:8px;cursor:pointer;}.result-card{margin-top:20px;padding:20px;border:1px solid #eee;border-radius:12px;background:#fff;line-height:1.8;}

六、JavaScript调用示例

如果接口可以直接在前端调用，可以使用fetch请求。

asyncfunctionsearchMedicine(){constkeyword=document.getElementById("keyword").value.trim();constresultBox=document.getElementById("result");if(!keyword){resultBox.innerHTML="请输入要查询的中药材名称";return;}resultBox.innerHTML="查询中...";try{consturl="https://apizero.cn/marketplace/bencao?name="+encodeURIComponent(keyword);constresponse=awaitfetch(url);constdata=awaitresponse.json();if(data.code!==200||!data.result){resultBox.innerHTML="暂时没有查询到相关内容";return;}constitem=data.result;resultBox.innerHTML=`<div class="result-card"> <h2>${item.name||keyword}</h2> <p><strong>别名：</strong>${item.alias||"暂无"}</p> <p><strong>简介：</strong>${item.description||"暂无"}</p> <p><strong>说明：</strong>${item.effect||"暂无"}</p> </div>`;}catch(error){resultBox.innerHTML="查询失败，请稍后重试";}}

正式项目中更推荐让前端请求自己的后端接口，再由后端调用第三方 API。这样可以统一处理鉴权、缓存、日志和异常。

七、Vue项目接入示例

Vue 项目中可以把查询逻辑封装到组件里。

<template> <div class="page"> <h1>中药材查询</h1> <div class="search-box"> <input v-model="keyword" placeholder="请输入中药材名称" /> <button @click="search">查询</button> </div> <div v-if="loading">查询中...</div> <div v-if="medicine" class="card"> <h2>{{ medicine.name }}</h2> <p><strong>别名：</strong>{{ medicine.alias || "暂无" }}</p> <p><strong>简介：</strong>{{ medicine.description || "暂无" }}</p> <p><strong>说明：</strong>{{ medicine.effect || "暂无" }}</p> </div> <div v-if="empty">暂时没有查询到相关内容</div> </div> </template> <script setup> import { ref } from "vue"; const keyword = ref(""); const medicine = ref(null); const loading = ref(false); const empty = ref(false); async function search() { if (!keyword.value.trim()) return; loading.value = true; empty.value = false; medicine.value = null; try { const url = "https://apizero.cn/marketplace/bencao?name=" + encodeURIComponent(keyword.value); const response = await fetch(url); const data = await response.json(); if (data.code === 200 && data.result) { medicine.value = data.result; } else { empty.value = true; } } catch (e) { empty.value = true; } finally { loading.value = false; } } </script>

八、Python后端接入示例

Python 项目可以使用requests调用接口。

importrequestsdefquery_medicine(name):url="https://apizero.cn/marketplace/bencao"params={"name":name}try:response=requests.get(url,params=params,timeout=10)returnresponse.json()exceptrequests.exceptions.Timeout:return{"code":504,"msg":"中药查询接口请求超时"}exceptExceptionase:return{"code":500,"msg":str(e)}result=query_medicine("黄芪")print(result)

如果使用 Flask，可以封装成自己的后端接口：

fromflaskimportFlask,request,jsonify app=Flask(__name__)@app.route("/api/medicine")defmedicine():name=request.args.get("name","").strip()ifnotname:returnjsonify({"code":400,"msg":"请输入中药材名称"})data=query_medicine(name)returnjsonify(data)

这样前端只需要请求/api/medicine?name=黄芪，不需要直接调用第三方接口。

九、Java后端接入示例

Java 项目可以使用 OkHttp 调用。

importokhttp3.HttpUrl;importokhttp3.OkHttpClient;importokhttp3.Request;importokhttp3.Response;publicclassBencaoApiDemo{publicstaticvoidmain(String[]args)throwsException{OkHttpClientclient=newOkHttpClient();HttpUrlurl=HttpUrl.parse("https://apizero.cn/marketplace/bencao").newBuilder().addQueryParameter("name","黄芪").build();Requestrequest=newRequest.Builder().url(url).get().build();Responseresponse=client.newCall(request).execute();if(response.body()!=null){System.out.println(response.body().string());}}}

在 Spring Boot 中，可以进一步封装为 Service：

@ServicepublicclassBencaoService{publicStringqueryByName(Stringname){// 封装HTTP请求、异常处理、缓存和日志return"query result";}}

Controller 层示例：

@RestController@RequestMapping("/api/medicine")publicclassMedicineController{@ResourceprivateBencaoServicebencaoService;@GetMappingpublicStringquery(@RequestParamStringname){returnbencaoService.queryByName(name);}}

十、Node.js接入示例

Node.js 可以使用 axios 请求接口。

constaxios=require("axios");asyncfunctionqueryMedicine(name){consturl="https://apizero.cn/marketplace/bencao";try{constresponse=awaitaxios.get(url,{params:{name},timeout:10000});returnresponse.data;}catch(error){return{code:500,msg:"本草纲目查询接口调用失败",error:error.message};}}queryMedicine("当归").then(console.log);

Express 封装示例：

constexpress=require("express");constapp=express();app.get("/api/medicine",async(req,res)=>{constname=req.query.name;if(!name){returnres.json({code:400,msg:"请输入中药材名称"});}constdata=awaitqueryMedicine(name);res.json(data);});app.listen(3000,()=>{console.log("server running at http://localhost:3000");});

十一、PHP接入示例

PHP 可以使用 curl 调用接口。

<?php$name="黄芪";$url="https://apizero.cn/marketplace/bencao?name=".urlencode($name);$ch=curl_init();curl_setopt($ch,CURLOPT_URL,$url);curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);curl_setopt($ch,CURLOPT_TIMEOUT,10);$response=curl_exec($ch);if(curl_errno($ch)){echocurl_error($ch);}else{echo$response;}curl_close($ch);

如果是传统 PHP 网站，可以把查询结果渲染到模板中。

十二、缓存设计

中药材基础信息变化频率不高，非常适合做缓存。

推荐流程：

用户查询药材 ↓ 查询 Redis 缓存 ↓ 缓存存在：直接返回 ↓ 缓存不存在：请求本草纲目API ↓ 写入缓存 ↓ 返回结果

缓存 key 可以这样设计：

bencao:medicine:黄芪 bencao:medicine:当归 bencao:medicine:甘草

Python 缓存示例：

importjsondefget_medicine_with_cache(name):cache_key="bencao:medicine:"+name cached=redis_client.get(cache_key)ifcached:returnjson.loads(cached)data=query_medicine(name)redis_client.setex(cache_key,7*24*3600,json.dumps(data,ensure_ascii=False))returndata

对于热门药材，可以设置更长缓存时间，比如 30 天。

十三、数据库设计

如果只是做简单查询，不一定需要数据库。

如果项目需要支持查询历史、热门药材、用户收藏、内容分析，就可以设计几张基础表。

1. 药材缓存表

CREATETABLEmedicine_cache(idBIGINTPRIMARYKEYAUTO_INCREMENT,nameVARCHAR(100)NOTNULLCOMMENT'药材名称',aliasVARCHAR(255)DEFAULTNULLCOMMENT'别名',contentTEXTCOMMENT'接口返回内容',updated_atDATETIMEDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,created_atDATETIMEDEFAULTCURRENT_TIMESTAMP,UNIQUEKEYuk_name(name));

2. 查询记录表

CREATETABLEmedicine_search_log(idBIGINTPRIMARYKEYAUTO_INCREMENT,user_idBIGINTDEFAULTNULLCOMMENT'用户ID',keywordVARCHAR(100)NOTNULLCOMMENT'查询关键词',result_statusVARCHAR(20)DEFAULTNULLCOMMENT'查询状态',created_atDATETIMEDEFAULTCURRENT_TIMESTAMP);

3. 用户收藏表

CREATETABLEmedicine_favorite(idBIGINTPRIMARYKEYAUTO_INCREMENT,user_idBIGINTNOTNULLCOMMENT'用户ID',medicine_nameVARCHAR(100)NOTNULLCOMMENT'药材名称',created_atDATETIMEDEFAULTCURRENT_TIMESTAMP,UNIQUEKEYuk_user_medicine(user_id,medicine_name));

通过这些表，可以扩展出热门搜索、最近查看、收藏夹和推荐功能。

十四、搜索体验优化

中药查询类功能看似简单，但搜索体验非常重要。

建议从以下几个方向优化。

1. 增加热门药材

搜索框下方可以放一些常见词：

黄芪、当归、枸杞、甘草、金银花、陈皮

用户不输入时，也能直接点击查询。

2. 支持历史搜索

记录用户最近查询过的药材，提高二次访问效率。

3. 做空结果引导

不要只显示“无结果”，可以提示：

暂时没有查到相关药材，可以换个关键词试试

4. 支持别名展示

有些药材存在别名，详情页最好把别名展示出来，降低用户理解成本。

5. 增加加载状态

接口请求期间显示“查询中”，避免用户重复点击。

十五、健康内容边界提示

中药材查询属于健康知识类内容，页面展示时要注意边界。

不建议把接口返回内容包装成诊断结论，也不建议给用户直接提供用药建议。

推荐在页面底部增加提示：

页面内容仅用于中医药知识科普，不作为诊断、治疗或用药依据。如有身体不适，请咨询专业医生。

这样既能提升产品可信度，也能减少用户误解。

十六、异常处理方案

正式项目中不能只考虑接口正常返回，还要处理异常情况。

后端可以统一返回稳定结构：

{"code":200,"msg":"success","data":{},"traceId":"202606041200001"}

这样前端不需要处理太多复杂情况。

十七、项目落地方案

如果要快速做一个中药查询工具，可以按下面的步骤实现。

第一步：完成基础查询

先实现输入药材名称，调用接口，展示结果。

第二步：增加后端转发

不要让前端直接调用第三方接口，通过自己的后端统一转发。

第三步：增加缓存

对常见药材结果做 Redis 缓存，提升访问速度。

第四步：增加查询日志

记录用户搜索行为，方便分析热门药材。

第五步：扩展收藏和历史

让用户可以收藏常用药材，提高工具黏性。

第六步：接入AI问答

如果项目有 AI 功能，可以把中药查询结果作为上下文，让回答更完整。

十八、适合扩展的功能

基于本草纲目中药查询 API，可以继续扩展很多功能。

这些功能可以让一个简单接口逐渐扩展成完整的中医药知识产品。

十九、接口接入注意事项

接入时建议注意以下几点：

• 不要在前端暴露敏感密钥
• 查询结果要做好空值处理
• 热门药材建议使用缓存
• 接口异常时要有兜底提示
• 健康内容不要替代医生建议
• 日志中避免记录敏感用户信息
• 页面展示尽量简洁清晰
• 移动端注意首屏加载速度

如果是正式上线项目，建议把接口调用、缓存、日志、异常处理都放在后端完成。

二十、总结

本草纲目中药查询 API 适合用于中药材信息查询、药材百科、养生小程序、健康内容平台和 AI 问答助手等场景。

对于开发者来说，接入这类接口可以快速完成：

• 中药材查询
• 药材详情展示
• 常见药材搜索
• 健康知识内容补充
• 用户查询历史记录
• 热门药材统计
• AI 问答知识增强

推荐的技术方案是：

前端负责搜索和展示 后端负责接口转发 Redis负责热门药材缓存 数据库负责查询日志和收藏 页面底部增加健康内容提示

这样既能保证开发效率，也能让功能更适合真实项目长期维护。