中药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 response
except:
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="http://www.w3.org/1999/xhtml">
<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="http://kl.clouded.top: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', 'http://kl.clouded.top:5555/tcmapi?page='+(page-1)+'&key='+key, true);
httpRequest.send();
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
res = eval("(" + httpRequest.responseText + ")");//获取到json
console.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=1
getRes(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>
效果演示
代码还是挺多的,下面看看效果吧