中药API的应用"/>
中药API的应用
中药API的应用
简要介绍
在网络上获取的中药描述及图片，用这些数据搭建一个中药查询网页
技术栈：flask+nginx+mysql
-
flask作为后端与数据库交互，nginx作为前端进行交互
-
前端可以实现查询数据并查看中草药图片
-
后端返回数据有大小限制，25条为一页
数据表结构
后端代码
#查询语句
#SELECT * FROM `tcmdata` ORDER BY `mid` LIMIT 25 OFFSET 25;
#第一波代码
@app.route('/tcmapi')
def tcmapi():page=request.args.get('page')try:page=int(page)except:return "数据异常"if page:conn = pymysql.connect(host='kl.clouded.top',port=3306,user='root',password='anxunqixun',db='api')cursor = conn.cursor()sql = f"SELECT * FROM `tcmdata` ORDER BY `mid` LIMIT 10 OFFSET {10*page};"print(sql)cursor.execute(sql)results = cursor.fetchall()cursor.close()conn.close()return jsonify(results)else:return "数据异常"测试之后确实符合基本要求，但为了结合搜索的功能，优化了代码
@app.route('/tcmapi')
def tcmapi():page=request.args.get('page')key=request.args.get('key')try:page=int(page)except:return "数据异常"try:results=tcmsql(f"SELECT * FROM `tcmdata` WHERE `name` LIKE '{key}' ORDER BY `mid` ASC LIMIT 10 OFFSET {10*page};")page=int(tcmsql(f"SELECT COUNT(`mid`) FROM `tcmdata` WHERE `name` LIKE '{key}' ;")[0][0]/10)result_text = {"s":"200","data":results,"allPage":page}response = jsonify(result_text)return responseexcept:return "数据异常"
def tcmsql(sql):conn = pymysql.connect(host='kl.clouded.top',port=3306,user='root',password='anxunqixun',db='api')cursor = conn.cursor()#sql = f"SELECT * FROM `tcmdata` WHERE `name` LIKE '{key}' ORDER BY `mid` ASC LIMIT 10 OFFSET {10*page};"cursor.execute(sql)results = cursor.fetchall()cursor.close()conn.close()return results后端代码就算完成，开始写前端，这里用了jquery
前端代码
<!DOCTYPE html>
<html xmlns="">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中草药数据</title>
<style>table{text-align: center;width: 100%;border: 1px;border-style: solid;}table td{border: 0.5px;border-style: solid;}#moreDIV{background: rgb(231 195 195 / 98%);display: none;top: 0%;position: fixed;height: 100%;width:100%;overflow:auto;}
</style>
</head>
<body><div id="control"><input id="searchenter"><button onclick="search();" id="btnsearch">搜索</button><button onclick="nextpage()">下一页 </button><button onclick="formpage()">上一页 </button><button onclick="p=maxp;getRes(p,key);">尾页 </button><p id="allpage"></p><p>跳转到第<input type="number" id="setPage" name="enterpage" value="1">页<button onclick="turnpage()">跳转</button></p></div>
<div><table id="work_table"><tr><td>标号</td><td>草药名</td><td>图片</td><td>详情</td></tr></table>
</div><div id="moreDIV" ><a href="javascript:void(0)" onclick="hideWindow();" style="top: 0;position: fixed;">关闭标签</a><p id="med_id"></p><p id="med_name_pinyin"></p><p id="med_name_zh"></p><p id="med_name_en"></p><p id="med_name_latin"></p><p id="med_name_alias"></p><p id="med_origin"></p><p id="med_appearance"></p><p id="med_function"></p><p id="med_property"></p><p id="med_tropisw"></p><p id="med_pharmacology"></p><p id="med_chemistry"></p><p id="med_chem_identify"></p><p id="med_app_identify"></p><p id="med_attached_prescription"></p><p id="med_usage"></p><p id="med_processing"></p><p id="med_preparation"></p><p id="med_adverse_reaction"></p><p id="med_toxcity"></p><p id="med_attention"></p><p id="med_store"></p><p id="med_remark"></p><p id="med_enviroment"></p><p id="med_info_genuine"></p><p id="med_info_location"></p>
</div><button onclick="nextpage()">下一页 </button><button onclick="formpage()">上一页 </button>
<script type="text/javascript">function add(id,name,pho,i){let table = document.getElementById("work_table");let newRow = table.insertRow();let cellID = newRow.insertCell();let cellName = newRow.insertCell();let cellPho = newRow.insertCell();let cellMore = newRow.insertCell();cellID.innerHTML =id ;cellName.innerHTML =name ;cellPho.innerHTML ='<img src="'+pho+'" width="150" height="114">'+'<img src=":81/TCMPhoto/TCM/'+name+'.jpg" width="150" height="114">' ;cellMore.innerHTML ='<a href="javascript:void(0);" onclick="showMore(this)" value= "'+i+'">更多</a>';//more ;
}
function showMore(e){var index=$(e).attr("value");console.log(res.data[index][2]);moreTCM(eval("(" + res.data[index][2] + ")"));}
function getRes(page,key){//var page=1; var httpRequest = new XMLHttpRequest();httpRequest.open('GET', ':5555/tcmapi?page='+(page-1)+'&key='+key, true);httpRequest.send();httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {res = eval("(" + httpRequest.responseText + ")");//获取到jsonconsole.log(res.data);maxp=res.allPage;document.getElementById("allpage").innerText=p+'/'+maxp;$("#work_table tr:not(:first)").remove();//清楚已有数据表for(var i = 0; i < res.data.length; i++) {//console.log(res.data[i]);add(res.data[i][0],res.data[i][1],res.data[i][3],i);}}};
}
p=1;
maxp=1;
key='%'
getRes(p,key);
function nextpage(){p=p+1;if(p<=maxp){getRes(p,key);}else{p=p-1;alert("最后一页了");}
}
function formpage(){p=p-1;if (p>=1) {getRes(p,key);}else{p=p+1;alert("已经是第一页了");}
}
function turnpage(){p=document.getElementById("setPage").value;p!='' ? (p=p) : (p=1);console.log(p);getRes(p,key)
}
function search(){key=document.getElementById("searchenter").value;document.getElementById("searchenter").value='';p=1getRes(p,key)
}
function moreTCM(d) {//console.log(d);var table={"med_name_pinyin":"拼音","med_id":"药品ID","med_name_zh": "中文名", "med_name_en": "英文名", "med_name_latin": "拉丁名", "med_name_alias": "别名", "med_origin": "基源", "med_appearance": "原形态", "med_function": "功效", "med_property": "性味", "med_tropisw": "归经", "med_pharmacology": "药理作用", "med_chemistry": "化学成分", "med_chem_identify": "理化鉴别", "med_app_identify": "性状鉴别", "med_attached_prescription": "附方", "med_usage": "用法用量", "med_processing": "炮制", "med_preparation": "制剂", "med_adverse_reaction": "不良反应", "med_toxcity": "毒性", "med_attention": "注意", "med_store": "贮藏", "med_remark": "备注", "med_enviroment": "生境分布", "med_info_genuine": "道地", "med_info_location": "产地"};for(let key in table){if(d[key]){document.getElementById(key).innerText= table[key]+':'+d[key];}else{document.getElementById(key).innerText='';}}displayWindow();}
function displayWindow() {document.getElementById("moreDIV").style.display= "block";
}
function hideWindow() {document.getElementById("moreDIV").style.display= " none";
}
</script>
<script src="./cn/assets/js/jquery-1.8.2.min.js"></script></body>
</html>效果演示
代码还是挺多的，下面看看效果吧
更多推荐
中药API的应用
发布评论